var sliding 			= 0;
var slideTime 			= '';
var panelHeight 		= 103;
var effectDuration 		= 300;
var idleTime 			= 20000;

// 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();
	
	//  If element is visible do nothing
	if ($('visible') == this) {
			return false;

	}
	if ($('visible')) {
	
			if( getSliding() == 1 ){
					return false;
			}
		
			//var elup = $('visible').getNext();
            var elup = $('visible').getNext();
            
			setSliding( 1 );
			
			parellelSlide( elup, eldown );
			$('visible').id = '';
			

			
	}
	else{
			setSliding( 1 );
			singleSlide( eldown );
	}
	
	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', 'BottomPanel');
		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 = percentageWidth + '%';
			panels[i].style.position = 'absolute';
			panels[i].style.left = position + '%';
			
          
			$(panels[i].getElementsByTagName('a','BottomTitle')[0]).addEvent('mouseenter', accordion);
            $(document.body).addEvent('mousemove', resetIdle);

			position += percentageWidth;
			
    }
    
        
        
        
        
	        
		if( $('visible') ){
		//  Set panel with id of visible to be initial displayed
			var vis = $('visible').parentNode.id+'-body';
			$(vis).style.height = '150px';
		}
		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.Morph(elup, {duration: effectDuration, transition: Fx.Transitions.linear});
	myEffects.start({
		 'height': [panelHeight, 0]
	});
	
	
	myEffects1 = new Fx.Morph(eldown, {duration: effectDuration, transition: Fx.Transitions.linear, onComplete: function() { setSliding( 0 ); }});
	myEffects1.start({
		 'height': [0, panelHeight]
	});
	
}

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



function resetTabs(){
	
	var resetEl = $('visible').getNext();
	
	setSliding( 1 );
	
	myEffects = new Fx.Morph(resetEl, {duration: effectDuration, transition: Fx.Transitions.linear, onComplete: function() { setSliding( 0 ); }});
	myEffects.start({
		 'height': [panelHeight, 0]
	});

	
	$('visible').id = '';
}

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

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



window.addEvent('domready', function() {
 




    
$$('.BottomTitle').addEvent('click', function(){
		
		var bodyPanels 			= getElementsByClassNameFix('div', 'panel_body');
        var panels 			    = getElementsByClassNameFix('div', 'BottomPanel');
		var noPanels 			= panels.length;
	  
	   for (i = 0; i < bodyPanels.length; i++) {
	    
	    if (bodyPanels[i].style.height !== '0px'){   
	            
	        //alert (bodyPanels[i].style.height);
	        
            var myFx = new Fx.Morph( bodyPanels[i], {duration: '300', transition: Fx.Transitions.Sine.easeOut});
            
                myFx.start({
                'height': [bodyPanels[i].style.height, 0]

                });

	        $('visible').id = '';
	        
            }
        }
});


});



window.addEvent('load', init);