window.addEvent('domready', function(){

    // animazione immagini in entrata
    var time = 3000, count = 1;
    $$('#scrollabile img').addEvent('domready', function(){
       var c = count++;
       var v = time;
       var t = v * c;
       new Fx.Tween(this, { duration: v, transition: Fx.Transitions.Sine.easeOut }).start('margin-left', v, 1);
    });
    
    // animazione pulsantini direzionali
    function rimbalzo(id,velocita) {
      var rimbalzo = new Fx.Tween( $(id) , { duration:velocita, transition: Fx.Transitions.Elastic.easeOut }).start('width', 1, 48);
    }
    var pulsanti_animati = function() {
      $('freccia_sx').setStyle('width',1);
      $('freccia_dx').setStyle('width',1);
      $('freccia_sx').setStyle('display','block');
      $('freccia_dx').setStyle('display','block');
      rimbalzo('freccia_sx',3000);
      rimbalzo('freccia_dx',2500);
    }
    pulsanti_animati.delay(time);
    


    /********************************************************************************************
     *     CODICE DEL MENU CATEGORIE PER LO SCORRIMENTO da DESTRA a SINISTRA [by Maldorath]
     *******************************************************************************************/


    // definizione della velocità degli effetti
    var velocita = 400;
    
    // definizione della distanza del movimento
    var movimento = 300;
    
    // definizione della dimensione del box
    var maxDestinazione = $('scrollabile').scrollWidth / 2;

    // effetto utilizzato
    var effectMenu = new Fx.Tween($('scrollabile'), { duration:velocita, transition: Fx.Transitions.Sine.easeInOut });
    
    
    // eventi assegnati alla freccia sinistra del menu categorie
    $('freccia_sx').addEvent('mouseover', function(e){
        this.src="images/freccia_sx_on.png";
    });
    $('freccia_sx').addEvent('mouseout', function(e){
        this.src="images/freccia_sx_off.png";
    });
    $('freccia_sx').addEvent('mousedown', function(e){
        e.stop();
        this.src="images/freccia_sx_click.png";
        // troviamo la posizione attuale del box
        var Pos = $('scrollabile').style.right;
        // se la posizione del box non c'è equivale a 0
        if ((!Pos)||(Pos=='')) Pos = 0;
        // se la posizione attuale è maggiore di 0
        if (Pos.toInt()>0) {
          // il box deve scorrere indietro
          var Destinazione = ( Pos.toInt() - movimento ) + 'px';
          effectMenu.start('right', Pos, Destinazione);
        } else {
          // altrimenti il box ritorna alla posizione iniziale
          var newEffect1 = new effect($('scrollabile'),100)
          newEffect1.start('right', 0, -20);
          newEffect1.onComplete = function(){
             effect($('scrollabile'),100).start('right', -20, 0);
          };
        }
    });
    $('freccia_sx').addEvent('mouseup', function(e){
        this.src="images/freccia_sx_on.png";
    });
    

    // eventi assegnati alla freccia destra del menu categorie
    $('freccia_dx').addEvent('mouseover', function(e){
        this.src="images/freccia_dx_on.png";
    });
    $('freccia_dx').addEvent('mouseout', function(e){
        this.src="images/freccia_dx_off.png";
    });
    $('freccia_dx').addEvent('mousedown', function(e){
        e.stop();
        this.src="images/freccia_dx_click.png";
        // troviamo la posizione attuale del box
        var Pos = $('scrollabile').style.right;
        // se la posizione del box non c'è equivale a 0
        if ((!Pos)||(Pos=='')) Pos = 0;
        // se la posizione attuale è minore della dimensione del box
        if (Pos.toInt()<maxDestinazione) {
          // il box deve scorrere avanti
          var Destinazione = ( Pos.toInt() + movimento ) + 'px';
          effectMenu.start('right', Pos, Destinazione);
        } else {
          // altrimenti il box ritorna alla posizione iniziale
          var newEffect2 = new effect($('scrollabile'),100)
          newEffect2.start('right', Pos, maxDestinazione+50);
          newEffect2.onComplete = function(){
             effect($('scrollabile'),200).start('right', maxDestinazione+50, 0);
          };
        }
    });
    $('freccia_dx').addEvent('mouseup', function(e){
        this.src="images/freccia_dx_on.png";
    });
    
});