/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	PANELS
	
-----------------------------------------------------------------------------------------------------------------------------

	DEPENDENCIES: 
	MooTools - version 1.20              
	copyright 2007 | Valerio Proietti | http://mootools.net/
	MIT-style license | http://www.opensource.org/licenses/mit-license.php
	
	Clientside CNET Libraries for MooTools
	For descriptions and documentation: http://clientside.cnet.com/wiki/cnet-libraries
	
-----------------------------------------------------------------------------------------------------------------------------

	:: squarehead design studio   -  845.331.1953 | www.squarehead.com | sbliss@squarehead.com
	
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/* 	load array - 25px is narrowest: when 1 panel is open, 220px is default when no panel is open, 805px for open panel
---------------------------------------------------------------------------------------------------------------------------*/
var panel_width = new Array(25,25,25,25);
var timerRunning = "false";
var panelsOpen = "false";	


/* 	preload images
---------------------------------------------------------------------------------------------------------------------------*/
	var panelImages = new Asset.images([
		'img_index/dealer_default.jpg', 'img_index/dealer.jpg', 
		'img_index/commercial_default.jpg', 'img_index/commercial.jpg',
		'img_index/industrial_default.jpg', 'img_index/industrial.jpg',
		'img_index/residential_default.jpg', 'img_index/residential.jpg'
		]);


/* 	add events to panels
---------------------------------------------------------------------------------------------------------------------------*/
function initPanels(){
	

/* => reset panels to default  */
	resetPanels();

/* => attach events  */		
	$$('#panels .panel').addEvents({
		click: function(){			
			if(timerRunning == "true"){ 
				clearTimeout(timer); 
				timerRunning = "false";
			}
			setPanels(this);
		},			
		mouseleave: function(){
			if(panelsOpen == "false"){ resetPanels(); };
			wait();
		}
	});
	
	//$('panels').setStyle('visibility', 'visible');
}


/* 	set all panel widths to 25px - which one is open? - make that one 805px
---------------------------------------------------------------------------------------------------------------------------*/
function setPanels(elem){
	
	elemName = elem.get('class');
	loadArray(25);
	
	switch (elemName) {
		case "panel one":	
			panel_width[0]=805;
			break;
		case "panel two":
			panel_width[1]=805; 
			break;
		case "panel three":	
			panel_width[2]=805;
			break;
		case "panel four":
			panel_width[3]=805; 
			break;
	}	
	movePanel(); // go ahead and move them around
	
	panelsOpen = "true";
}

/* 	do the move
---------------------------------------------------------------------------------------------------------------------------*/
function movePanel() {

/* => change images to open position  */	
	$('industrial').setProperty('src','img_index/industrial.jpg');
	$('dealers').setProperty('src','img_index/dealer.jpg');
	$('residential').setProperty('src','img_index/residential.jpg');
	$('explore').setProperty('src','img_index/commercial.jpg');

/* => hide content so we can fade it in smoothly */	
	$$('.panelColumns').set('opacity', 0);

/* => set the effect and move the panels */		
	var myFx = new Fx.Elements($$('div.panel'), {
		duration: 500,
		/* => when panels are done moving - fade in content */	
		onComplete: function(){
			$$('.panelColumns').fade('in');
		},
		transition: Fx.Transitions.linear
			}).start({
			    '0': {
			        'width': panel_width[0]
			    },
			    '1': {
			        'width': panel_width[1]
			    },
			    '2': {
			        'width': panel_width[2]
			    },
			    '3': {
			        'width': panel_width[3]
			    }
			});	
}

/* 	load panel array - send width, all 4 elements are set to width
---------------------------------------------------------------------------------------------------------------------------*/
function loadArray(width) {
	for(var i=0;i<4;i++) {
		panel_width[i] = width;
	}
}

/* 	reset panels to 220px
---------------------------------------------------------------------------------------------------------------------------*/
function resetPanels() {
	
/* => this is the flag to track status open or closed  */
	//open = 'false';

/* => load default widths and call movePanel()  */	
	loadArray(220);
	movePanel();
	
/* => put the default images in  */	
	$('industrial').setProperty('src','img_index/industrial_default.jpg');
	$('dealers').setProperty('src','img_index/dealer_default.jpg');
	$('residential').setProperty('src','img_index/residential_default.jpg');
	$('explore').setProperty('src','img_index/commercial_default.jpg');
}

/* 	timer to close panels - delay = 1000 per second
---------------------------------------------------------------------------------------------------------------------------*/
function wait() {
	
/* => check if timer is running and clear it if it is  */	
	if(timerRunning == "true"){ 
		clearTimeout(timer); 
	}
	var delay = 4000;
	timer = setTimeout('resetPanels()',delay);
	timerRunning = "true";
}


/* 	INIT STUFF after DOM loads
---------------------------------------------------------------------------------------------------------------------------*/
window.addEvent('domready', function(){
	initPanels();
});