var panelHeight 		= 178;
var effectDuration 		= 500;
var Produkte;
var Menues = new Array(3);
var hoehen = new Array(248, 106, 178);

function init() {
		
		Menues[0]=document.getElementById('panel1');
    Produkte=document.getElementById('Produkte');
    $('panel1').addEvent('mouseenter', function() {accordion(0);});
		$('panel1').addEvent('mouseleave', function() {resetTabs(0);});
		
		Menues[1]=document.getElementById('panel2');
    $('panel2').addEvent('mouseenter', function() {accordion(1);});
		$('panel2').addEvent('mouseleave', function() {resetTabs(1);});
    
		Menues[2]=document.getElementById('panel3');
    $('panel3').addEvent('mouseenter', function() {accordion(2);});
		$('panel3').addEvent('mouseleave', function() {resetTabs(2);});
    		
}

function accordion(Menuepunkt) {
	
  var eldown = Menues[Menuepunkt];
	if(Menuepunkt == 0) {
    Produkte.style.backgroundImage = "url(http://ringelsuse.de/b/layout/Produkte.png)";
  }
	new Fx.Tween(Menues[Menuepunkt]).start('height', 0, hoehen[Menuepunkt]);
}

function resetTabs(Menuepunkt){
	
	var myFx = new Fx.Tween(Menues[Menuepunkt]);
	if(Menuepunkt == 0) {
    myFx.addEvents({
      'complete': function() {
          Produkte.style.backgroundImage = "url(http://ringelsuse.de/b/layout/Produkte2.png)";
    }});
  }
  myFx.start('height', hoehen[Menuepunkt], 30);
}

window.addEvent('load', init);