//alert(BrowserDetect.browser + " " + BrowserDetect.version);
// PLEASE NOTE: THIS SCRIPT REQUIRES MOOTOOLS v1.11 TO RUN

//This script is run once the DOM has loaded, no need to wait for images etc to load.
window.addEvent('domready', function(){


	//Set The Initial Variables
	var boxNormal = 156, boxSmall = 102, boxFull = 426, boxHeight = 400, boxFontSize = 12, containerHeight = 400, boxSpeed = 1000;
	
	//HIDE BOX CONTENTS
	//Create array of box_inner class
	var box_inners = $$(".box_inner");
	var box_titles = $$(".box_title");
	//Loop through and hide
	box_inners.each(function(hidebox,i){
		hidebox.setStyle("display","none");
	})
	box_titles.each(function(hidebox, i) {
	    hidebox.setStyle("display", "block");
	})
	

	
	//ALTER STYLES
	//These functions alter styles that are set in the style sheet
	
	//Reset the width of the boxes so that they are all closed initially, also change height
	var cu_box_init = $$("#cu_boxes .box");
	cu_box_init.each(function(myInitBox, h){
		myInitBox.setStyle("width",boxNormal);
		myInitBox.setStyle("height",boxHeight);
	});
	
	//Alter the contents of the boxes, remove the background, change the type size, width etc.
	var cu_box_inner = $$(".box_inner");
	cu_box_inner.each(function(inner,i){
		inner.setStyle("background-color","transparent");
		inner.setStyle("font-size", boxFontSize);
		inner.setStyle("overflow", "hidden");
		inner.setStyle("width",boxFull);
	})

	//ADD THE ROLLOVER EVENTS TO THE COLUMNS		
	var cu_boxes = $$("#cu_boxes .box");
	
	//Create new fx
	var fx = new Fx.Elements(cu_boxes, {wait: false, duration: boxSpeed, transition: Fx.Transitions.Cubic.easeOut});
	
	//loop through the columns
	cu_boxes.each(function(box, i) {
		//OnMouseEnter Events
		box.addEvent("mouseenter", function(event) {
			//Change the display state of the content of rolled column and hide others 
			box_inners.each(function(mybox,k){
				if(k==i){
					mybox.setStyle("display","block");
				}else{
					mybox.setStyle("display","none");
				}
			})

			box_titles.each(function(mybox, k) {
			    if (k == i) {
			        mybox.setStyle("display", "none");
			    } else {
			        mybox.setStyle("display", "block");
			    }
			})

				
			var o = {};
			o[i] = {width: [box.getStyle("width").toInt(), boxFull]}
			cu_boxes.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != boxSmall) o[j] = {width: [w, boxSmall]};
				}
			});
			fx.start(o);
		});
	});

	//OnRollOut Events	
	$("cu_boxes").addEvent("mouseleave", function(event) {
		var o = {};
		cu_boxes.each(function(box, i) {
			o[i] = {width: [box.getStyle("width").toInt(), boxNormal]}
		});
		//Hide contents on rollOut
		box_inners.each(function(mybox, h) {
		    mybox.setStyle("display", "none");
		})
		box_titles.each(function(mybox, h) {
		    mybox.setStyle("display", "block");
		})
		fx.start(o);
	})
});