//panelSlider.js - developed by Ascent for HighTower


//Page Load Animation
window.onload = initPanel;

var p1;
var p2;
var p3;
var p4;
var p5;

var timerID = 0;
var panelArray = new Array();

function initPanel() {
	
	if (document.getElementById('panel_1')) {
		p1 = document.getElementById('panel_1');
		p1.roll = document.getElementById('panel_1_roll');
		p2 = document.getElementById('panel_2');
		p2.roll = document.getElementById('panel_2_roll');
		p3 = document.getElementById('panel_3');
		p3.roll = document.getElementById('panel_3_roll');
		p4 = document.getElementById('panel_4');
		p4.roll = document.getElementById('panel_4_roll');
		p5 = document.getElementById('panel_5');
		p5.roll = document.getElementById('panel_5_roll');
		
		panelArray[0] = p1;
		panelArray[1] = p2;
		panelArray[2] = p3;
		panelArray[3] = p4;
		panelArray[4] = p5;

		p1.onclick = function() { doPanel(p1); }
		p1.roll.onmouseover = function() { panelOver(p1.roll); }
		p1.roll.onmouseout = function() { panelOut(p1.roll); }
		
		p2.onclick = function() { doPanel(p2); }
		p2.roll.onmouseover = function() { panelOver(p2.roll); }
		p2.roll.onmouseout = function() { panelOut(p2.roll); }
		
		p3.onclick = function() { doPanel(p3); }
		p3.roll.onmouseover = function() { panelOver(p3.roll); }
		p3.roll.onmouseout = function() { panelOut(p3.roll); }
		
		p4.onclick = function() { doPanel(p4); }
		p4.roll.onmouseover = function() { panelOver(p4.roll); }
		p4.roll.onmouseout = function() { panelOut(p4.roll); }
		
		p5.onclick = function() { doPanel(p5); }
		p5.roll.onmouseover = function() { panelOver(p5.roll); }
		p5.roll.onmouseout = function() { panelOut(p5.roll); }
		
		loadPanelIntoView();
		
		timerID = setInterval("timerEvent()", 10000);
		
	}

	
}

function loadPanelIntoView() {
	
	new Effect.Opacity( p1.roll, { to: 0, duration: 0});
	new Effect.Opacity( p2.roll, { to: 0, duration: 0});
	new Effect.Opacity( p3.roll, { to: 0, duration: 0});
	new Effect.Opacity( p4.roll, { to: 0, duration: 0});
	new Effect.Opacity( p5.roll, { to: 0, duration: 0});
	
	
	
	p1.onTop = 0;
	p2.onTop = p1;
	p3.onTop = p2;
	p4.onTop = p3;
	p5.onTop = p4;
	
	new Effect.Move( p1, { x: 60, mode: 'absolute', delay: .6, duration: .4, transition: Effect.Transitions.sinoidal, afterFinish: function() { enableRolls(); } } );	
	new Effect.Move( p2, { x: 45, mode: 'absolute', delay: .4, duration: .4, transition: Effect.Transitions.sinoidal } );	
	new Effect.Move( p3, { x: 30, mode: 'absolute', delay: .2, duration: .4, transition: Effect.Transitions.sinoidal } );
	new Effect.Move( p4, { x: 15, mode: 'absolute', delay: 0, duration: .4, transition: Effect.Transitions.sinoidal } );
	
	
}

function enableRolls() {
	p1.roll.style.display = "none";
	p2.roll.style.display = "block";
	p3.roll.style.display = "block";
	p4.roll.style.display = "block";
	p5.roll.style.display = "block";
}

function doPanel(panel) {
	
	if (panel.onTop != 0){
		p1.roll.style.display = "block";
		p2.roll.style.display = "block";
		p3.roll.style.display = "block";
		p4.roll.style.display = "block";
		p5.roll.style.display = "block";
		
		panel.roll.style.display = "none";
		animate1(panel);
		
		clearInterval(timerID);
	}

}


var firstPanel;
var lastPanel;
var lastX;

function animate1(panel) {
	
	disableMouse();
	
	firstPanel = panel.onTop;
	tmpPanel = panel;
	
	checkPanel = panel;
	
	tmpZ = 10;
	tmpX = -15;
	destX = 374;
	nDelay = 0;
	
	while (tmpPanel.onTop != 0) {
		
		checkPanel = checkPanel.onTop;
		
		if (checkPanel.onTop == 0) {
			new Effect.Move( tmpPanel.onTop, { x: destX, mode: 'absolute',	transition: Effect.Transitions.sinoidal, duration: .3, delay: .4, afterFinish: function() { updateOrder(panel);  } } );
			lastPanel = tmpPanel.onTop;
		} else {
			new Effect.Move( tmpPanel.onTop, { x: destX, mode: 'absolute',	transition: Effect.Transitions.sinoidal, duration: .3,delay: 0} );
			tmpPanel = tmpPanel.onTop;
		}
		
		nDelay = nDelay + .2;
		tmpZ = tmpZ + 10;
		tmpX = tmpX + 15;
		destX = destX + 15;
		lastX = tmpX;
		
	}
	
	
	
}

function updatePanel(curPanel, tmpZa, tmpXa) {
	curPanel.style.left = parseInt(tmpX2);
	curPanel.style.zIndex = parseInt(tmpZ2);
}

function updateOrder(panel) {

	switch(panel.id) {
		
		case 'panel_1':
			p1.onTop = 0;
			p2.onTop = p1;
			p3.onTop = p2;
			p4.onTop = p3;
			p5.onTop = p4;
			break;
			
		case 'panel_2':
			p1.onTop = p5;
			p2.onTop = 0;
			p3.onTop = p2;
			p4.onTop = p3;
			p5.onTop = p4;
			break;
			
		case 'panel_3':
			p1.onTop = p5;
			p2.onTop = p1;
			p3.onTop = 0;
			p4.onTop = p3;
			p5.onTop = p4;
			break;
			
		case 'panel_4':
			p1.onTop = p5;
			p2.onTop = p1;
			p3.onTop = p2;
			p4.onTop = 0;
			p5.onTop = p4;
			break;
			
		case 'panel_5':
			p1.onTop = p5;
			p2.onTop = p1;
			p3.onTop = p2;
			p4.onTop = p3;
			p5.onTop = 0;
			
			break;

	}
	
	posPanel = firstPanel;

	var daX = 0;
	var daZ = 10;

	while (posPanel != lastPanel.onTop) {
		posPanel.style.zIndex = daZ;
		posPanel.style.left = daX + 'px';
		posPanel = posPanel.onTop;
		daX = daX + 15;
		daZ = daZ + 10;
	}
	
	while (posPanel != 0) {

		posPanel.style.zIndex = daZ;
		new Effect.Move( posPanel, { x: daX, mode: 'absolute',	transition: Effect.Transitions.sinoidal, duration: .3, afterFinish: function() { if(posPanel == 0) { enableMouse(); } } } );
		posPanel = posPanel.onTop;
		daX = daX + 15;
		daZ = daZ + 10;
		
	}
	

}

function panelOver(panel) {
	new Effect.Opacity( panel, { to: .8, duration: 0});
}

function panelOut(panel) {
	new Effect.Opacity( panel, { to: 0, duration: .2});
}

var count = 0;

function timerEvent() {

	p1.roll.style.display = "block";
	p2.roll.style.display = "block";
	p3.roll.style.display = "block";
	p4.roll.style.display = "block";
	p5.roll.style.display = "block";
	
	var thisPanel = panelArray[count];
	
	thisPanel.roll.style.display = "none";
	animate1(thisPanel);
	
	if (count < 4) {
		count = count + 1;
	} else {
		count = 0;
	}
	
}

function enableMouse() {
	
	p1.onclick = function() { doPanel(p1); }
	p1.roll.onmouseover = function() { panelOver(p1.roll); }
	p1.roll.onmouseout = function() { panelOut(p1.roll); }
	
	p2.onclick = function() { doPanel(p2); }
	p2.roll.onmouseover = function() { panelOver(p2.roll); }
	p2.roll.onmouseout = function() { panelOut(p2.roll); }
	
	p3.onclick = function() { doPanel(p3); }
	p3.roll.onmouseover = function() { panelOver(p3.roll); }
	p3.roll.onmouseout = function() { panelOut(p3.roll); }
	
	p4.onclick = function() { doPanel(p4); }
	p4.roll.onmouseover = function() { panelOver(p4.roll); }
	p4.roll.onmouseout = function() { panelOut(p4.roll); }
	
	p5.onclick = function() { doPanel(p5); }
	p5.roll.onmouseover = function() { panelOver(p5.roll); }
	p5.roll.onmouseout = function() { panelOut(p5.roll); }

	
}

function disableMouse() {
	
	p1.onclick = null;
	p1.roll.onmouseover = null;
	p1.roll.onmouseout = null;
	
	p2.onclick = null;
	p2.roll.onmouseover = null;
	p2.roll.onmouseout = null;
	
	p3.onclick = null;
	p3.roll.onmouseover = null;
	p3.roll.onmouseout = null;
	
	p4.onclick = null;
	p4.roll.onmouseover = null;
	p4.roll.onmouseout = null;
	
	p5.onclick = null;
	p5.roll.onmouseover = null;
	p5.roll.onmouseout = null;
	
	new Effect.Opacity( p1.roll, { to: 0, duration: .2});
	new Effect.Opacity( p2.roll, { to: 0, duration: .2});
	new Effect.Opacity( p3.roll, { to: 0, duration: .2});
	new Effect.Opacity( p4.roll, { to: 0, duration: .2});
	new Effect.Opacity( p5.roll, { to: 0, duration: .2});

	
}