var TOCExpander = {
	initialize: function(listSelector, expandAllContainer){
		this.collapseableLists = $$(listSelector);
		this.expandAllContainer = $$(expandAllContainer).reduce();
		
		//element check
		if (!this.collapseableLists || !this.expandAllContainer) { return; }
		
		this.expandCollapseLinks = new Array();
		
		// create expand all link and attach event listener
		var expandAllLink = new Element("a", {"class": "expand_all", href: "#"}).update("expand all");
		this.expandAllContainer.insert({top: expandAllLink});
		Event.observe(this.expandAllContainer, "click", this._click.bindAsEventListener(this));	
		
		// for each list...
		this.collapseableLists.each(function(currentItem){
						
			// get current inner list height and set it to the 'height' property
			var innerList = currentItem.down("div.drawer");
			innerList.setStyle({clear: "both"});
			innerList.height = innerList.getHeight();
			
			// hide inner list
			innerList.setStyle({
				display: "none",
				height: "0px",
				overflow: "hidden"
			});
			
			// add expand and collapse links
			var expandLink = new Element("a", {"class": "expand", href: "#"}).update("<span>Expand this section.</span>");
			currentItem.down("a").insert({after: expandLink});
			
			// add accessibility links
			var accessibleLink = new Element("a", {"class": "accessibility_link", href: "#"}).update("Content is available below for this section. Click here to collapse.");
			currentItem.down("div.drawer").insert({top: accessibleLink});
			
			// add expand/collapse links to array
			this.expandCollapseLinks.push(currentItem.select("a.expand").reduce());
			this.expandCollapseLinks.push(currentItem.select("a.accessibility_link").reduce());
						
		}.bind(this));
		
		
		
		//add event listeners
		this.expandCollapseLinks.invoke("observe", "click", this._click.bindAsEventListener(this));	
		},
	
	_click: function(e){
		Event.stop(e);
		var clickedLink = Event.findElement(e, "a");
		
		// if it's an expand link
		if(clickedLink.hasClassName("expand")){
			clickedLink.className = "collapse";
			clickedLink.update("<span>Collapse this section.</span>");
			this.expand(clickedLink);
		
		// if it's a collapse link
		} else if(clickedLink.hasClassName("collapse")){
			clickedLink.className = "expand";
			clickedLink.update("<span>Expand this section.</span>");
			this.collapse(clickedLink);
		
		// if it's an expand/collapse all collapse link	
		} else if(clickedLink.hasClassName("expand_all")){		
			this.expandCollapseAll(clickedLink);
		
		// if it's an accessibility link
		} else if(clickedLink.hasClassName("accessibility_link")){
			this.collapse(clickedLink);
		}
	},
	
	expand: function(clickedLink){	
			
		var listToExpand = clickedLink.next("div.drawer");
				
		new Effect.Scale(
			listToExpand,
			100,
			{ 
				scaleX: false,
				scaleFrom: 0,
				duration: 0.5,
				scaleContent: false,
				transition: Effect.Transitions.sinoidal,
				scaleMode: { originalHeight: listToExpand.height },
				beforeStart: function(){
					listToExpand.setStyle({
						display: "block"
					})					
				}
			}
		);			
	},
	
	collapse: function(clickedLink){
			
		// if the button is clicked
		if(clickedLink.hasClassName("expand")) {
			var listToExpand = clickedLink.next("div.drawer");
		
		// if the accessibility link is clicked
		} else {
			var listToExpand = clickedLink.up();
			var buttonLink = clickedLink.up().previous("a.collapse")
			buttonLink.className = "expand";
			buttonLink.focus();
		}
		
		// slide up animation
		new Effect.Scale(
			listToExpand,
			0,
			{ 
				scaleX: false,
				scaleFrom: 100,
				duration: 0.5,
				scaleContent: false,
				transition: Effect.Transitions.sinoidal,
				scaleMode: { originalHeight: listToExpand.height },
				afterFinish: function(){
					listToExpand.setStyle({
						display: "none"
					})	
				}
			}			
		);
	},
	
	expandCollapseAll: function(clickedLink){
		var linkText = clickedLink.childNodes[0].nodeValue;

		// expand all
		if(linkText == "expand all"){
			clickedLink.update("collapse all");
			this.collapseableLists.each(function(currentItem){
				
				// get the inner list
				var innerList = currentItem.down("div.drawer");
				
				// set collapse class on all expand links
				currentItem.select("a.expand").each(function(currentExpandLink){
					currentExpandLink.update("<span>Collapse this section.</span>");
					currentExpandLink.className = "collapse";
					
				})
				
				// set inner list style to visible
				innerList.setStyle({display: "block", height: innerList.height+"px"});
				
			});
			
		// collapse all	
		} else if(linkText == "collapse all"){
			clickedLink.update("expand all");
			this.collapseableLists.each(function(currentItem){

				// get the inner list
				var innerList = currentItem.down("div.drawer");
				
				// set collapse class on all expand links
				currentItem.select("a.collapse").each(function(currentExpandLink){
					currentExpandLink.update("<span>Expand this section.</span>");
					currentExpandLink.className = "expand";
				})
				
				// set inner list style to visible
				innerList.setStyle({display: "none", height: "0px"});
				
			});	
			
		}
	}
}

document.observe("dom:loaded", function(){
	TOCExpander.initialize("div#table_of_contents li.collapsible", "div#table_of_contents div.expand_all");
	
	swfobject.embedSWF(
		"../../../images/company/our_company/corporate_responsibility_report/flash/target_crr_book.swf", 
		"flash_report_cover", 
		"190", 
		"220", 
		"9.0.0", 
		"../../../images/company/flash/global/expressInstall.swf", 
		{
		},
		{
		allowScriptAccess: "always",				
		menu: "false",
		scale: "noscale",
		wmode: "transparent"
		},
		{id: "none"}
	);

	swfobject.embedSWF(
		"../../../images/company/our_company/corporate_responsibility_report/flash/target_crr.swf", 
		"flash_billboard", 
		"656", 
		"232", 
		"9.0.0", 
		"../../../images/company/flash/global/expressInstall.swf", 
		{
		},
		{
		allowScriptAccess: "always",				
		menu: "false",
		scale: "noscale",
		wmode: "opaque"
		},
		{id: "none"}
	);
	
});