//useful functions
function changeStyle(el,style,css,dura,trans){
	el.set('tween',{duration:dura,transition:trans,link:'chain'}).tween(style,css);
};

function fadeText(elements,onColour,offColour){
	elements.each(function(el,i){
		el.addEvents({
			'mouseenter': function(){
				changeStyle(el,'color',onColour,200,Fx.Transitions.linear);
			},
			'mouseleave': function(){
				changeStyle(el,'color',offColour,400,Fx.Transitions.linear);
			}
		});
	});
};


//when page is loaded
window.addEvent('domready', function(){

	//variables
	var divContainer = $$('#Container');
	var formInputs = $$('input[type=text][class!=Hidden]','input[type=password][class!=Hidden]','textarea[class!=Hidden]','input[type=submit][class!=Hidden]');
	var formLabels = $$('label[class!=Hidden]');
	var formLabelSpans = $$('label[class!=Hidden] span');
	var hMainElements = $$('#Text h1','#Text h2','#Text h3','#Text h4','#Text h5','#Text h6');
	var pMainElements = $$('#Text p');
	var pLinkExample = $$('#Text p.LinkExample');
	var liElements = $$('#Text ul li');
	var linkElements = $$('#Text a','#Footer a','#Breadcrumbs a','a.ReadMore','#SiteMap a');

	//remove NoJavaScript class as we obv have javascript enabled
	divContainer.each(function(el,i){											   
		el.removeClass('NoJavaScript');
	});
	
	//add event listener for form labels so focus will work in IE6
	formLabels.each(function(el,i){
		//add event listener
		el.addEvents({
			'click': function(){
				changeStyle(formLabels,"color","#FFCAA6",400,Fx.Transitions.linear);
				changeStyle(formLabelSpans,"color","#C7C7C7",400,Fx.Transitions.linear);
				changeStyle(el,"color","#FF6600",200,Fx.Transitions.linear);
				changeStyle(formLabelSpans[i],"color","#777777",200,Fx.Transitions.linear);
			},
			'mouseenter': function(){
				changeStyle(el,"color","#FF6600",200,Fx.Transitions.linear);
				changeStyle(formLabelSpans[i],"color","#777777",200,Fx.Transitions.linear);
				changeStyle(formInputs[i],"border-color","#FF6600",200,Fx.Transitions.linear);
			},
			'mouseleave': function(){
				if(formInputs[i].hasClass('focused') != true){
					changeStyle(el,"color","#FFCAA6",400,Fx.Transitions.linear);
					changeStyle(formLabelSpans[i],"color","#C7C7C7",400,Fx.Transitions.linear);
					changeStyle(formInputs[i],"border-color","#FFCAA6",400,Fx.Transitions.linear);
				};
			}
		});
	});
	
	//add event listener for form elements so focus will work in IE6
	formInputs.each(function(el,i){
		//chain through the contact form
		var HoverMe = new Chain();
		var hoverOn = function(){
			changeStyle(el,'border-color','#FF6600',200,Fx.Transitions.linear);
			if(formLabels[i] != null){
				changeStyle(formLabels[i],"color","#FF6600",200,Fx.Transitions.linear);
				changeStyle(formLabelSpans[i],"color","#777777",200,Fx.Transitions.linear);
			};
		};
		var hoverOff = function(){
			changeStyle(el,'border-color','#FFCAA6',400,Fx.Transitions.linear);
			if(formLabels[i] != null){
				changeStyle(formLabels[i],'color','#FFCAA6',400,Fx.Transitions.linear);
				changeStyle(formLabelSpans[i],"color","#C7C7C7",400,Fx.Transitions.linear);
			};
		};
		
		HoverMe.chain(hoverOn);
		HoverMe.chain(hoverOff);
		HoverMe.callChain.delay(2000+(i+1)*1000,HoverMe);
		HoverMe.callChain.delay((i+2)*1000,HoverMe);
		
		//add event listener
		el.addEvents({
			'focus': function(){
				changeStyle(el,'border-color','#FF6600',200,Fx.Transitions.linear);
				if(formLabels[i] != null){
					changeStyle(formLabels[i],"color","#FF6600",200,Fx.Transitions.linear);
					changeStyle(formLabelSpans[i],"color","#777777",200,Fx.Transitions.linear);
					el.addClass('focused');
				};
			},
			'blur': function(){
				changeStyle(el,'border-color','#FFCAA6',400,Fx.Transitions.linear);
				changeStyle(formLabels[i],"color","#FFCAA6",400,Fx.Transitions.linear);
				changeStyle(formLabelSpans[i],"color","#C7C7C7",400,Fx.Transitions.linear);
				el.removeClass('focused');
			},
			'mouseenter': function(){
				changeStyle(el,'border-color','#FF6600',200,Fx.Transitions.linear);
				if(formLabels[i] != null){
					changeStyle(formLabels[i],"color","#FF6600",200,Fx.Transitions.linear);
					changeStyle(formLabelSpans[i],"color","#777777",200,Fx.Transitions.linear);
				};
			},
			'mouseleave': function(){
				if(formInputs[i].hasClass('focused') != true){
					changeStyle(el,'border-color','#FFCAA6',400,Fx.Transitions.linear);
					if(formLabels[i] != null){
						changeStyle(formLabels[i],"color","#FFCAA6",400,Fx.Transitions.linear);
						changeStyle(formLabelSpans[i],"color","#C7C7C7",400,Fx.Transitions.linear);
					};
				};
			}
		});
	});
	
	//morph text to make it easier to read
	fadeText(hMainElements,'#257DB1','#43A0D8');
	fadeText(pMainElements,'#444','#777');
	fadeText(pLinkExample,'#777','#C2C2C2');
	fadeText(linkElements,'#FFA062','#FF6600');
	
	//call mooTicker
	var initTicker = new mooTicker({
		container: $('mooTicker'),//where the data be taken from/or if empty, put into to?
		delay: 100,//time before next character is added
		variance: 100,//No one types at the same speed. Variance allows for random letter delay changes
		backChar: '|',//Which character signifies a backspace?
		backDelay: 30,//How quickly should the typewriter delete?
		maxChars: 38,//set a limit to amount of characters allowed (null = no limit)
		nxtMsgDelay: null,//time between displaying next message in seconds (null =  auto calculate)
		typoLength: 5,//max length you want typos to be
		nextMsgPause: 2//pause before showing next message (in seconds)
	});
	
	//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
	});
	
	//call multiBox
	var initMultiBox = new multiBox({
		mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)
		container: $(document.body),//where to inject multiBox
		descClassName: 'multiBoxDesc',//the class name of the description divs
		path: './Files/',//path to mp3 and flv players
		useOverlay: true,//use a semi-transparent background. default: false;
		maxWidth: 600,//max width (set to false to disable)
		maxHeight: 400,//max height (set to false to disable)
		addDownload: true,//do you want the files to be downloadable?
		pathToDownloadScript: './Scripts/ForceDownload.asp',//if above is true, specify download script
		addRollover: true,//add rollover fade to each multibox link
		addOverlayIcon: true,//adds overlay icons to images within multibox links
		addChain: true,//cycle through all images fading them out then in
		recalcTop: true//subtract the height of controls panel from top position
	});
	
	//call mooSwitch
	if($$('.mooSwitch').length > 0){//only triggered if 'mooSwitch' class is found on page
		var initSwitch = new mooSwitch({
			container: $(document.body),//inline font-size style will be applied to this
			linksContainer: $('FontSize'),//container that holds the text size links (error message will be output here)
			templateContainer: $('ChangeTemplate'),//container that holds the template switch links (error message will be output here)
			smallSize: '62.5%',//small font size
			mediumSize: '72.5%',//medium font size
			largeSize: '82.5%',//large font size
			smallLink: '.mooSwitch li.small',//link to trigger small font (could be the li, or an image etc.)
			mediumLink: '.mooSwitch li.medium',//link to trigger medium font (could be the li, or an image etc.)
			largeLink: '.mooSwitch li.large',//link to trigger large font (could be the li, or an image etc.)
			defaultSize: 'small',//if no cookies are set there must be a default size to set page to (options: 'small','medium','large')
			templateOne: 'http://www.liamsmart.co.uk/Styles/styles.css',//path to template one stylesheet
			templateTwo: '',//path to template two stylesheet
			alertsPos: 'after',//where to inject the alerts relative to the containers specified (allowed: 'top','bottom','after','before' see: http://mootools.net/docs/Element/Element#Element:inject)
			speed: 400//duration the transition will take
		}).start();
	};
});