/**************************************************************

	Script		: mooCollapsibles
	Version		: 2.0
	Author		: Liam Smart
	Licence		: Open Source MIT Licence
	Usage		: window.addEvent('domready', function(){
					  //call mooCollapsibles
					  var initCollapsibles = new mooCollapsibles({
						  cllpsContainers: $$('.collapsible'),//passes content/contents to be collapsed
						  cllpsHeaders: $$('.collapsible .header').reverse(),//the headers inside containers
						  cllpsBodies: $$('.collapsible .body').reverse(),//the bodies inside containers
						  buildToggler: true,//'expand all | collapse all' buttons will be generated if true
						  expandDefault: true,//have the collapsibles open or closed by deafult
						  accordionEffect: false,//will simulate MooTools Accordion
						  showAlerts: true//display alerts to warn users cookies are disabled etc
					  });
				  });

**************************************************************/

//start mooCollapsibles class
var mooCollapsibles = new Class({
	
	//implements
	Implements:[Options],

	//options
	options:{
		buildToggler: false,//inject collapse/expand all buttons
		expandDefault: true,//will boxes be expanded/collapsed on page load
		sldDuratation: 500,//duration of sliding transition
		sldTransition: Fx.Transitions.Cubic.easeOut,//transition type
		accordionEffect: false//mimic the MooTools accordion (http://demos.mootools.net/Accordion)
	},
	
	//initialization
	initialize:function(options){
		//set options
		this.setOptions(options);
		//start mooCollapsibles
		if($$(this.options.cllpsContainers).length > 0){this.start();};
	},
	
	//detect whether or not cookies are enabled
	start:function(){
		//set up cookies - 0 = closed 1 = open
		var myCookieSet = Cookie.write('mooCollapsibles',1,{duration:365});
		var myCookieRead = Cookie.read('mooCollapsibles');
		var myCookieSaved = Cookie.read('mooCollapsiblesSaved');
		//if cookie above was not successfully set then display error div but only if first visit
		if(this.options.showAlerts == true){
			if(myCookieRead == 1 && myCookieSaved == null){
				//build div
				var cookieAlert = new Element('div', {
					'class': 'mooCollapsiblesAlertGreen',
					'html': '<p>Your settings will be saved from now on!</p>'
				}).inject(this.options.cllpsContainers[0],'before');
				//set cookie so this loop isnt triggered for another year
				Cookie.write('mooCollapsiblesSaved',1,{duration:365});
			}else if(myCookieRead == null){
				//build enable cookie alert div
				var cookieAlert = new Element('div', {
					'class': 'mooCollapsiblesAlertRed',
					'html': '<p>You need to enable cookies for settings to be saved!</p>'
				}).inject(this.options.cllpsContainers[0],'before');
			};
		};
		//call next function
		this.buildCollapsibles();
	},
	
	//start building the collapsibles
	buildCollapsibles:function(){
		//inject a clear class into the bottom of each collapsible incase it has floating content
		//
		//this.options.cllpsBodies.each(function(el,i){
		//	var cllpsClear = new Element('div', {
		//		'class': 'cllpsClear'
		//	}).inject(el,'bottom');
		//});
		
		//array to store slides in
		var cllpsArr = [];
		//for each collapsible header
		this.options.cllpsHeaders.each(function(el,i){			 
			//for each element create a slide effect
			var cllpsSlide = new Fx.Slide(this.options.cllpsBodies[i],{
				duration: this.options.sldDuratation,
				transition: this.options.sldTransition
			});
			//and store it in the array
			cllpsArr[i] = cllpsSlide;
			//get expand cookie for each collapsible element
			var myCookie = Cookie.read('expand'+i);
			//loop through each box collapsing it or expanding it
			if(myCookie == null){//users first time visiting page
				//check whether accordion option is true
				if(this.options.accordionEffect == true){
					//first time using and accordion option true so leave last collapsible open
					if(el != this.options.cllpsHeaders.getLast()){
						cllpsArr[i].hide();
						Cookie.write('expand'+i,'collapsed',{duration:365});
						this.options.cllpsHeaders[i].removeClass('RotateButton');
					}else{
						if(Cookie.read('expand'+i) != null){
							if(Cookie.read('expand'+i) == 'expanded'){
								cllpsArr[i].show();
								this.options.cllpsHeaders[i].addClass('RotateButton');
							}else{
								cllpsArr[i].hide();
								this.options.cllpsHeaders[i].addRemove('RotateButton');
							};
						}else{
							cllpsArr[i].show();
							Cookie.write('expand'+i,'expanded',{duration:365});
							this.options.cllpsHeaders[i].addClass('RotateButton');
						};
					};
				}else{
					//if we set in the options to expand by default
					if(this.options.expandDefault == true){
						//boxes are to be open by default
						cllpsSlide.show();
						Cookie.write('expand'+i,'expanded',{duration: 365});
						el.addClass.delay(this.options.sldDuratation,el,'RotateButton');
					}else{
						//boxes are to be closed by default
						cllpsSlide.hide();
						Cookie.write('expand'+i,'collapsed',{duration: 365});
						el.removeClass.delay(this.options.sldDuratation,el,'RotateButton');
					};
				};
			}else{
				//there are cookies to be read
				if(myCookie == 'expanded'){
					//boxes are to be left open so rotate the button to point up the way
					cllpsSlide.show();
					el.addClass.delay(this.options.sldDuratation,el,'RotateButton');
				}else{
					//boxes are to be closed and make sure button is down the way
					cllpsSlide.hide();
					el.removeClass.delay(this.options.sldDuratation,el,'RotateButton');
				};
			};
			//build the clickable link button
			var linkButton = new Element('a',{
				'href': 'JavaScript:;',
				'title': 'Collapse/Expand content',
				'class': 'OpenCloseButton',
				'html': '<span class="cllpsHidden">Open/Close</span>',
				'styles':{
					opacity: 0
				},
				'events':{
					'click': function(){
						//retrieve 'expand' cookie value for each collapsible element
						var myCookie = Cookie.read('expand'+i);
						//check whether accordion option is true
						if(this.options.accordionEffect == true){
							//toggle the slider
							cllpsSlide.toggle();
							//loop through each one leaving first one open
							cllpsArr.each(function(cllps,j){
								//check whether its the one clicked on
								if(j != i){
									//collpase other boxes
									cllps.slideOut();
									Cookie.write('expand'+j,'collapsed',{duration:365});
									this.options.cllpsHeaders[j].removeClass.delay(this.options.sldDuratation,this.options.cllpsHeaders[j],'RotateButton');
								}else{
									//expand this box
									if(Cookie.read('expand'+i) == 'expanded'){
										Cookie.write('expand'+j,'collapsed',{duration:365});
									}else{
										Cookie.write('expand'+j,'expanded',{duration:365});
									};
									//unlike in a regular accordion, you can toggle open items, so check which class it has before switching
									if(this.options.cllpsHeaders[j].hasClass('RotateButton') == true){
										this.options.cllpsHeaders[j].removeClass.delay(this.options.sldDuratation,this.options.cllpsHeaders[j],'RotateButton');
									}else{
										this.options.cllpsHeaders[j].addClass.delay(this.options.sldDuratation,this.options.cllpsHeaders[j],'RotateButton');
									};
								};
							},this);
						}else{
							//toggle the slider
							cllpsSlide.toggle();
							//checks whether box is open or closed when user clicks and then does the opposite
							if(myCookie == 'expanded'){
								//box is open so lets close it
								Cookie.write('expand'+i,'collapsed',{duration:365});
								el.removeClass.delay(this.options.sldDuratation,el,'RotateButton');
							}else{
								//box is closed so lets open it
								Cookie.write('expand'+i,'expanded',{duration:365});
								el.addClass.delay(this.options.sldDuratation,el,'RotateButton');
							};
						};
					}.bind(this)
				}
			},this);
			//inject created link buttons into the header
			linkButton.inject(el,'inside');
			//fade the link buttons in gently
			linkButton.set('tween',{duration:900,transition:Fx.Transitions.Expo.easeIn}).tween('opacity',1);
		},this);
		//if option to build togglers is true and accordion effect is false
		if(this.options.buildToggler && this.options.accordionEffect != true){
			//build toggler div
			var myToggler = new Element('div', {
				'href': 'javascript:;',
				'class': 'mooCollapsiblesToggler',
				'html': '<a href="javascript:;" title="Collapse all" id="collapse-all">collapse all</a> | <a href="javascript:;" title="Expand all" id="expand-all">expand all</a>'
			}).inject(this.options.cllpsContainers[0],'before');
			//collapse all
			$('collapse-all').addEvent('click', function(){
				this.options.cllpsHeaders.each(function(el,i){
					//slide all collapsibles in
					cllpsArr[i].slideOut();
					Cookie.write('expand'+i,'collapsed',{duration:365});
					el.removeClass.delay(this.options.sldDuratation,el,'RotateButton');
				},this);
			}.bind(this));
			//expand all
			$('expand-all').addEvent('click', function(){
				this.options.cllpsHeaders.each(function(el,i){
					//slide all collapsibles out
					cllpsArr[i].slideIn();
					Cookie.write('expand'+i,'expanded',{duration:365});
					el.addClass.delay(this.options.sldDuratation,el,'RotateButton');
				},this);
			}.bind(this));
		};
	}
});