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 ($('start') == el) {
			return;
	}
	if ($('start')) {
	
			if( getSliding() == 1 ){
					return false;
			}
		
			var eldown = getNextSibling(el);
			var elup = getNextSibling($('start'));
			
			setSliding( 1 );
			
			new Effect.Parallel(
			[
					new Effect.SlideUp(elup),
					new Effect.SlideDown(eldown)
			], {
					duration: 0.3,
					afterFinish: function() { setSliding( 0 );}
			});

			$('start').id = '';
	}
	el.id = 'start';
}


// Setup accordian initial state
function init() {
		
		var bodyPanels = document.getElementsByClassName('menubody');
		var panels = document.getElementsByClassName('menu');
		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].hide();
			panels[i].style.width = percentageWidth + '%';
			panels[i].style.position = 'absolute';
			panels[i].style.left = position + '%';
			
			Event.observe(panels[i].getElementsByTagName('h2')[0], 'mouseover', accordion, false);
			Event.observe(panels[i].getElementsByTagName('h2')[0], 'mousemove', accordion, false);
			
			position += percentageWidth;
    }
		
		//  Set panel with id of start to be initial displayed
    var vis = $('start').parentNode.id+'_body';
    $(vis).show();
}

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

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