Event.observe(window, 'load', function() {
   var nProd       = "4";
   var openWidth    = "302px";
   var closeWidth    = "170px";
   var slidWidth    = "302px";
   var delta = 12;
   var interval= 10;
   var semaphore;
   
   function enlarge(element, toWidth) {
      if (element.style.width == '') width = parseInt(closeWidth);
      else width = parseInt(element.style.width);
      
      if (width<toWidth) element.style.width = width+delta+"px";
      else return;

      semaphore = setTimeout(function () {enlarge(element,toWidth)}, interval);
   }
      
   /* ___________ apre il pannello ____________ */
   function showContent(whichOne){          
         clearTimeout(semaphore);
         $('prodotto'+whichOne+"_on").show();
         enlarge($('prodotto'+whichOne+'_on'), parseInt(openWidth));    
         $('prodotto'+whichOne+"_off").hide();
   }

   /* _____________________________________________________________________________ */
   function hideContent(whichOne){
         $('prodotto'+whichOne+"_on").hide();
         $('prodotto'+whichOne+'_on').style.width=closeWidth;
         $('prodotto'+whichOne+"_off").show();
   }

   /* ___________ chiude il pannello ____________ */
   function closeProd(whichOne){      
      $("prodotto" + whichOne+"_off").style.width=closeWidth;
      hideContent(whichOne);
   }
   
   /* ___________  sposta a sx i pannelli accanto a quello aperto ____________ */
   function slideProd(whichOne){   
      $("prodotto" + whichOne+"_off").style.width=slidWidth;
      hideContent(whichOne);      
   }

   /* ___________ funzione TOGGLE sui prodotti _____ */
   function toggleProd(whichOne){
         for(var i=1;i<=nProd;i++){         
            if(i<whichOne) slideProd(i);         
            if(i>whichOne) closeProd(i);   
         }
         showContent(whichOne);   
   }

   var browser=navigator.userAgent;
   
   // se il browser e' IE utilizzo i comportamenti nativi mouseenter | mouseleave   
   if (browser.indexOf("MSIE")>-1){      
      Event.observe('prodotto1_on', 'mouseenter', function () {  toggleProd("1") }, 'false');
      Event.observe('prodotto1_off', 'mouseenter', function () { toggleProd("1") }, 'false');   
      Event.observe('prodotto2_on', 'mouseenter', function () {  toggleProd("2") }, 'false');   
      Event.observe('prodotto2_off', 'mouseenter', function () { toggleProd("2") }, 'false');   
      Event.observe('prodotto3_on', 'mouseenter', function () {  toggleProd("3") }, 'false');      
      Event.observe('prodotto3_off', 'mouseenter', function () { toggleProd("3") }, 'false');
      Event.observe('prodotto4_on', 'mouseenter', function () {  toggleProd("4") }, 'false');      
      Event.observe('prodotto4_off', 'mouseenter', function () { toggleProd("4") }, 'false');      
   // se il browser NON e' IE utilizzo i comportamenti DOM standard mouseover   
   }else{
      Event.observe('prodotto1_on', 'mouseover', function () {  toggleProd("1") }, 'false' );   
      Event.observe('prodotto1_off', 'mouseover', function () { toggleProd("1") }, 'false' );   
      Event.observe('prodotto2_on', 'mouseover', function () {  toggleProd("2") }, 'false' );
      Event.observe('prodotto2_off', 'mouseover', function () { toggleProd("2") }, 'false' );   
      Event.observe('prodotto3_on', 'mouseover', function () {  toggleProd("3") }, 'false' );
      Event.observe('prodotto3_off', 'mouseover', function () { toggleProd("3") }, 'false' );   
      Event.observe('prodotto4_on', 'mouseover', function () {  toggleProd("4") }, 'false' );
      Event.observe('prodotto4_off', 'mouseover', function () { toggleProd("4") }, 'false' );   
   }
}, 'false');