var sliding = 0;
// 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(evt) {
	el = Event.element(evt);
	//  If element is visible do nothing
	if ($('visible') == el) {
			return;
	}
	if ($('visible')) {
	
			if( getSliding() == 1 ){
					return false;
			}
		
			//var eldown = getNextSibling(el);
			
			var eldown = $(el.up('div').id+'-body');
			/*console.log(eldown);*/
			var elup = $($('visible').up('div').id+'-body');
			/*console.log(elup);
			console.log('---');*/
			setSliding( 1 );
			if(eldown!=null && elup!=null)
			{
				
				/*new Effect.Parallel(
				[
						new Effect.SlideUp(elup),
						new Effect.SlideDown(eldown)
						
				], {
						duration: 1,
						afterFinish: function() { setSliding( 0 ); },
						direction:'bottom-right'
				});*/
				new Effect.SlideUp(elup,{
						duration: 0.4,
						afterFinish: function() {
							new Effect.SlideDown(eldown,{duration: 0.6});
						}
				});	
				setSliding( 0 );
			}
			else if(eldown!=null)
			{
				
				new Effect.SlideDown(eldown,{
						duration: 0.6,
						afterFinish: function() { setSliding( 0 );}
				});
			}
			else setSliding( 0 );
			switchMenu($('visible'));
			$('visible').id = '';
	}
	el.id = 'visible';
	return false;
}


// Setup accordian initial state
function init() {
		
		var bodyPanels = document.getElementsByClassName('panel_body');
		var panels = document.getElementsByClassName('panel');
		var maxWidth = $('top').getWidth();
		
		var menuWidth = 160; 
		//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++) {
			/*var offset = panels[i].positionedOffset();
			var decalage = offset[0];
			var left = decalage+(menuWidth*i);
			if((left+300)>maxWidth) left = maxWidth -300;
			bodyPanels[i].style.left = left+'px';*/
			var menuButton = panels[i].down('img');
			if(menuButton.id!='visible') bodyPanels[i].hide();
			else switchMenu(menuButton);
			//panels[i].style.width = percentageWidth + '%';
			//panels[i].style.position = 'absolute';
			//panels[i].style.left = position + '%'; 
			Event.observe(panels[i].getElementsByTagName('h3')[0], 'click', accordion, false);
			//Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
			Event.observe(panels[i].down('img'), 'mouseover', menuHover);
			Event.observe(panels[i].down('img'), 'mouseout', menuHover);
			//position += percentageWidth;
    }
		
		//  Set panel with id of visible to be initial displayed
   /* var vis = $('visible').parentNode.id+'-body';
    $(vis).show();*/
}
function menuHover(event)
{
	var el = event.element();
	if(el.id!= 'visible') 
		switchMenu(el);	
}
function switchMenu(el)
{
	var src = el.readAttribute('src');
	var onsrc = el.readAttribute('onsrc');
	if(onsrc != null)
	{
		el.writeAttribute('src',onsrc);
		el.writeAttribute('onsrc',src);
	}
}

Event.observe(window, 'load', init, false);