window.addEvent('domready', function(){
  var szNormal = 47, szSmall  = 47, szFull = 536, szActiveNormal = 141, szActiveSmall  = 141, szActiveFull = 630;
 
  var kwicks = $$("#navbar .element", "#navbar .active");
  
  var fx = new Fx.Elements(kwicks, {wait: false, duration: 800, transition: Fx.Transitions.Bounce.easeOut});
    
  kwicks.each(function(kwick, i) {
  	kwick.addEvent("mouseenter", function(event) {
  		var o = {};
      classe = kwick.getStyle("color"); /*uso il colore per sgamare la classe attiva*/
      /*
       * La seguente istruzione fa allargare il blocco su cui si tiene il puntatore
       */       
      if(classe == "#0000ff") 
  		  o[i] = {width: [kwick.getStyle("width").toInt(), szActiveFull]}
  		else
  		  o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
  		  
      /*
       * il seguente ciclo di istruzioni fa restringere opportunamente ogni altro blocco
       */       
  		kwicks.each(function(other, j) {
  			if(i != j) {
				  var w = other.getStyle("width").toInt();
				  var c = other.getStyle("color");
  				if(c == "#0000ff")
            o[j] = {width: [w, szActiveSmall]};
          else if(w != szSmall)
            o[j] = {width: [w, szSmall]};
        
  			}
  		});
  		fx.start(o);
  	});
  });
   
  $("kwicks").addEvent("mouseleave", function(event) {
  	var o = {};
  	kwicks.each(function(kwick, i) {
      classe = kwick.getStyle("color");
  		if(classe == "#0000ff")
         o[i] = {width: [kwick.getStyle("width").toInt(), szActiveFull]};
  		else
    	  o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]};
  	});
  	fx.start(o);
  })
			
		});