//all the cookie functions that i use in the mootools functions below
function BuildIntroDiv()//build alert messages in div's through javascript
{
	var newdiv = new Element('div').injectAfter($('ToggleSwitches'));
	newdiv.addClass('AlertText');
	newdiv.set('html','<p>Your settings will be saved from now on!</p>');
	Cookie.write('AlertOnOff','1',{duration:365});
};

function BuildCookiesDetectionDiv()//cookie detection error message
{
	var newdiv = new Element('div').injectAfter($('ToggleSwitches'));
	newdiv.addClass('CookieDetectionText');
	newdiv.set('html','<p>You need to enable cookies for settings to be saved!</p>');
};



//now for the mootools cool stuff
window.addEvent('domready',function()
{
	//detect if toggle switches are on page
    var detectToggle = $('ToggleSwitches');
    
	//start quick cookie detection
	Cookie.write('CookieDetection','1',{duration:365});//write
	var v = Cookie.read('CookieDetection');//read
	if(v != 1 && detectToggle != null)//if read was succesful
	{
		BuildCookiesDetectionDiv();
	};
	
	//checking to see if its the first timer the person has used it and displays "setting will be saved" if it is their 1st time
	var w = Cookie.read('AlertOnOff');
	if(w != 1 && v == 1)
	{
		BuildIntroDiv();
	};
		
	//list of target elements that will be hidden/displayed
	var list = $$('.collapsable div.body');
	
	//list elements to be clicked on
	var headings = $$('.collapsable a.OpenCloseButton');
	
	//array to store all of the collapsibles
	var collapsibles = new Array();

	//the main function which controls whether boxes are expanded or collapsed
	headings.each(function(el,i)
	{
		//for each element create a slide effect
		var collapsible = new Fx.Slide(list[i],{
			duration:500,
			transition:Fx.Transitions.linear
		});
			
		//and store it in the array
		collapsibles[i] = collapsible;
		
		//if this is the first time the user is on this page then we set every box to expanded
		var x = Cookie.read('expand'+i);
		
		//chech which cookies are set
		if(x != 1 && x != 0 && defaultExpand == true)
		{
			//cookies are neither 1 or 0 which means there are no cookies because its users first time so set them all to 1 so they are expanded
			Cookie.write('expand'+i,'1',{duration:365});
			collapsible.show();
			el.addClass('RotateButton');
			list[i].set('opacity',1);
		}
		else if(x == 0 || x != 1 && x != 0 && defaultExpand == false)
		{
			Cookie.write('expand'+i,'0',{duration:365});
			collapsible.hide();
			el.removeClass('RotateButton');
			list[i].set('opacity',0);
		}
		else//catch the rest
		{
			Cookie.write('expand'+i,'1',{duration:365});
			collapsible.show();
			el.addClass('RotateButton');
			list[i].set('opacity',1);
		};
		
		//add event listener
		el.onclick = function()
		{
			//toggle content
			collapsible.toggle();
			
			//if this is the first time the user is on this page then we set every box to expanded
			var y = Cookie.read('expand'+i);
		            
			//checks whether box is open or closed when user clicks and then does the opposite
			if(y == 1)
			{
				//set all cookies to 0 so that all are collapsed next time they come to the page
			    Cookie.write('expand'+i,'0',{duration:365});
				
				//collapsibles[i].hide();
			    collapsibles[i].slideOut();
				
			    //make sure the button points down
			    el.removeClass('RotateButton');
				list[i].set('tween',{duration:300,transition:Fx.Transitions.linear}).tween('opacity',0);
			}
			else
			{
				//set all cookies to 1 so that all are collapsed next time they come to the page
				Cookie.write('expand'+i,'1',{duration:365});
				
				//collapsibles[i].show();
				collapsibles[i].slideIn();

				//flip rotate button to point up the way
				el.addClass('RotateButton');
				list[i].set('tween',{duration:300,transition:Fx.Transitions.linear}).tween('opacity',1);
				
				//get original height of page
				var origH = list[i].getSize().y;
				var hdrH = el.getParent().getParent().getSize().y;
				var currPos = $(document.body).getScroll().y;
				var margBttm = list[i].getParent().getParent().getStyle('margin-bottom');
				var finalPos = origH.toInt()+margBttm.toInt()+currPos.toInt()+hdrH.toInt();
				var myElement = $(document.body);
				var bttmCo = el.getParent().getParent().getCoordinates().bottom;
				var pageH = $(document.body).getSize().y;
				
				//console.log('bttmCo= '+bttmCo);
				//console.log('pageH= '+pageH);
				//console.log('origH= '+origH);
				//console.log('hdrH= '+hdrH);
				//console.log('currPos= '+currPos);
				//console.log('finalPos= '+finalPos);
				
				//check to see if collapsible is near bottom of page
				if(bttmCo > (pageH.toInt()-origH.toInt()))
				{
					//Scrolls "myElement" so collapsible content can be read
					var myFx = new Fx.Scroll(myElement,{
						duration: 1000,
						wait: false,
						transition: Fx.Transitions.Sine.easeIn
					}).start($(document.body).getScroll().x,finalPos);
				};
			};
		};
	});
			
	if(detectToggle)
	{
	    //collapse all
	    $('collapse-all').onclick = function()
	    {
		    headings.each(function(el,i)
		    {
				//set all cookies to 0 so that all are collapsed next time they come to the page
			    Cookie.write('expand'+i,'0',{duration:365});
				
			    //collapsibles[i].hide();
			    collapsibles[i].slideOut();

			    //make sure the button points down
			    el.removeClass('RotateButton');
				list[i].set('tween',{duration:300,transition:Fx.Transitions.linear}).tween('opacity',0);
		    });
	    };

		//expand all
		$('expand-all').onclick = function()
		{
			headings.each(function(el,i)
			{
				//set all cookies to 1 so that all are collapsed next time they come to the page
				Cookie.write('expand'+i,'1',{duration:365});
				
				//collapsibles[i].show();
				collapsibles[i].slideIn();

				//flip rotate button to point up the way
				el.addClass('RotateButton');
				list[i].set('tween',{duration:300,transition:Fx.Transitions.linear}).tween('opacity',1);
			});
		};
	};
});