var sliding 			= 0;
var slideTime 			= '';
var panelHeight 		= 60;
var panelWidth			= 180;
var effectDuration 		= 300;
var idleTime 			= 50000;
var TimeToFade 			= 200.0;

 	function show(id)
	{
		if(document.getElementById(id).style.opacity == 0)
		{
			fade_in(id)
		}
		for(var i = 1; i <= 5; i++)
		{
			if((('hover-image'+i) != id) && (document.getElementById('hover-image'+i).style.opacity!=0))
			{
				fade_out('hover-image'+i);
			}
		}
	}

	function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 85); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
	else if(opacStart < opacEnd) 
	{ 
        for(i = opacStart; i <= opacEnd; i++) 
            {
			
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++;
			
        } 
    } 
	}
	//change the opacity for different browsers 
	function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")";
	}
	
	function fade_in(id)
	{
		opacity(id,0,100, TimeToFade);
	}
	
	function fade_out(id)
	{
		opacity(id,100,0, TimeToFade);
	}

function HideAccordion() {
	if ($('visible')) {
		if( getSliding() == 1 ){
				return false;
		}
		var elup = $('visible').getNext();
		var elupcontent = elup.getElement('div');
	
		fade_out('hover-image'+ elup.id.charAt(5));
		
		myEffects = new Fx.Styles(elup, {duration: effectDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'height': [panelHeight, 0]
		});
				
		$('visible').id = '';
		elupcontent.style.visibility = 'hidden';	
	}
}

// Set is sliding value
function setSliding(a_ISliding){
	sliding = a_ISliding;
}

// Get is sliding value
function getSliding(){
	return sliding;
}

// Carry out accordian styled effect
function accordion() {
	var eldown = this.getNext();
	var eldowncontent = eldown.getElement('div');
	//  If element is visible do nothing
	if ($('visible') == this) {
			return false;
	}
	if ($('visible')) {
			if( getSliding() == 1 ){
					return false;
			}
		
			var elup = $('visible').getNext();
			var elupcontent = elup.getElement('div');

			setSliding( 1 );
			
			parellelSlide( elup, eldown );
			$('visible').id = '';
			eldowncontent.style.visibility = 'visible';
			elupcontent.style.visibility = 'hidden';
			
	}
	else{
			setSliding( 1 );
			singleSlide( eldown );
			eldowncontent.style.visibility = 'visible';
	}
	
	this.id = 'visible';
}

function getElementsByClassNameFix(tag, className) {
		// This method of populating is used as Safari does use getElementsByClassName()
		var elements = [];
		var safariElements = $A(document.getElementsByTagName(tag));
		safariElements.each(function(safariElements){
			if(!safariElements.className.match(className)) return;
			elements.push(safariElements);
		});
		return elements;
}

// Setup accordian initial state
function init() {
		
		var bodyPanels 			= getElementsByClassNameFix('div', 'panel_body');
		var panels 					= getElementsByClassNameFix('div', 'panel_container');
		var noPanels 				= panels.length;
		var percentageWidth = 100 / noPanels;
		var position 				= 0;
		
		//  Loop through body panels and panels applying required styles and adding event listeners
    for (i = 0; i < bodyPanels.length; i++) {
			bodyPanels[i].style.height = '0px';
			//panels[i].style.width = panelWidth+'px';
			//panels[i].style.position = 'absolute';
			if(i== 0)
			{
			//panels[i].style.left = position +'px';
			}
			else
			{
				//panels[i].style.left = position + 'px';
			}
			$(panels[i].getElementsByTagName('h3')[0]).addEvent('mouseover', accordion);
			//$(panels[i]).addEvent('mouseout', accordion);
			//$(panels[i].getElementsByTagName('h3')[0]).addEvent('mouseover', function(SetEvent){accordion(i);}, false);
			//$(panels[i].getElementsByTagName('h3')[0]).addEvent('mousemove', accordion);
			document.getElementById("panel1-content").style.visibility = 'hidden';
			document.getElementById("panel2-content").style.visibility = 'hidden';
			document.getElementById("panel3-content").style.visibility = 'hidden';
			document.getElementById("panel4-content").style.visibility = 'hidden';
			document.getElementById("panel5-content").style.visibility = 'hidden';
			$(document.body).addEvent('mousemove', resetIdle);			
			//position = position + panelWidth + 10;
    }
		
		if( $('visible') ){
		//  Set panel with id of visible to be initial displayed
			var vis = $('visible').parentNode.id+'-body';
			$(vis).style.height = panelHeight+'px';
		}
		setIdle();
}

// Next sibling method to work around firefox issues
function getNextSibling(startBrother){
	var endBrother=startBrother.nextSibling;
  while(endBrother.nodeType!=1){
    endBrother = endBrother.nextSibling;
  }
  return endBrother;
}

function parellelSlide( elup, eldown ){
	
	myEffects = new Fx.Styles(elup, {duration: effectDuration, transition: Fx.Transitions.linear});
	myEffects.custom({
		 'height': [panelHeight, 0]
	});
	
	myEffects1 = new Fx.Styles(eldown, {duration: effectDuration, transition: Fx.Transitions.linear, onComplete: function() { setSliding( 0 ); }});
	myEffects1.custom({
		 'height': [0, panelHeight]
	});
}

function singleSlide( eldown ){
	
	myEffects = new Fx.Styles(eldown, {duration: effectDuration, transition: Fx.Transitions.linear, onComplete: function() { setSliding( 0 ); }});
	myEffects.custom({
		 'height': [0, panelHeight]
	});
	
}

function resetTabs(){
	
	var resetEl = $('visible').getNext();
	var resetElContent = resetEl.getElement('div'); 
	
	setSliding( 1 );
	
	myEffects = new Fx.Styles(resetEl, {duration: effectDuration, transition: Fx.Transitions.linear, onComplete: function() { setSliding( 0 ); }});
	myEffects.custom({
		 'height': [panelHeight, 0]
	});
	$('visible').id = '';
	resetElContent.style.visibility = 'hidden';
	for(var i = 1; i <= 5; i++)
	{
		if((document.getElementById('hover-image'+i).style.opacity!=0))
		{
			fade_out('hover-image'+i);
		}
	}
}

function resetIdle(){
		window.clearTimeout( slideTime );
		setIdle()
}

function setIdle(){
	if( $('visible') ){
		slideTime = window.setTimeout( "resetTabs()", idleTime );
	}
}

window.addEvent('load', init);