window.addEvent('domready', function() {
  var prod_selector = $('prod_selector');
  var selected_products = $$('.selected_products');

  var mozgas = new Fx.Styles( prod_selector, 
        {duration:800, wait:false, transition: Fx.Transitions.Quad.easeOut});

  var ugras = new Fx.Style(prod_selector, 'margin-top', {duration:0}); 
  var actualTop = -120;
  prod_selector.setStyle('margin-top',actualTop);
  prod_selector.onselectstart = function() {return false;} // ie
  prod_selector.onmousedown = function() {return false;} // mozilla
  
  pic1= new Image(100,25); 
  pic1.src="modules/mod_GI_productviewer/Pics/arrowhover.png"; 
  pic1.src="modules/mod_GI_productviewer/Pics/bckhover.png"; 
  pic1.src="modules/mod_GI_productviewer/Pics/details_hover.png";
   
    selected_products.each( function(obj, i){
      obj.addEvent( 'mouseenter',function(){
        a = obj.getStyle('background-image');
        b = obj.getStyle('color');
        c = obj.getElement('.arrow_right').getStyle('background-image');
        obj.getElement('.arrow_right').setStyle('background-image',c.replace(/arrow.*\.png/i, "arrowhover.png"));
        
        obj.setStyle('background-image',a.replace(/bck.*\.png/i, "bckhover.png"));
        obj.setStyle('color','#EEE');
        obj.addEvent( 'mouseleave',function(){ 
                    obj.setStyle('background-image',a);
                    obj.setStyle('color',b);
                    obj.getElement('.arrow_right').setStyle('background-image',c);   
                    });
      });
    });  
  
  function scroll(piece){
    prods = $$('.selected_products');
    prods[4].setStyle('background-image','');
    prods[4].getElement('.arrow_right').setStyle('background-image','');
    prods[4].setStyle('color','');

    if(piece < 0){ // scrollDown
        piece = -piece;
        for(i=0;i<piece;i++){
          last = $$('.selected_products').getLast();
          first = $$('.selected_products')[0];
          last.injectBefore(first);
        }
        prod_selector.setStyle('margin-top',actualTop-60*piece);
        actualTop =actualTop-60*piece;
      mozgas.start({
        'margin-top' : actualTop+60*piece
      });
      actualTop =actualTop+60*piece;
    }else{  //scrollUp
        for(i=0;i<piece;i++){
          last = $$('.selected_products').getLast();
          first = $$('.selected_products')[0];
          first.injectAfter(last);
        }
        prod_selector.setStyle('margin-top',actualTop+60*piece);
        actualTop =actualTop+60*piece;
      mozgas.start({
        'margin-top' : actualTop-60*piece
      });
      actualTop =actualTop-60*piece;    
    }
    //
    prods = $$('.selected_products');
    
    a = prods[4].id.split('_')[1];
    $$('.product_description').each( function(obj, i){
      obj.setStyle('visibility','hidden');
    });

    $$('.product_description')[a].setStyle('visibility','visible');
    prods[4].setStyle('background-image',prods[4].getStyle('background-image').replace(/bck.*\.png/i, "bckselected.png"));
    prods[4].getElement('.arrow_right').setStyle('background-image',prods[4].getElement('.arrow_right').getStyle('background-image').replace(/arrow.*\.png/i, "arrowselected.png"));
    prods[4].setStyle('color','#EEE');

    prods.each( function(obj, i){
      obj.removeEvents('click');
      obj.removeEvents('mouseleave');
    });

    prods[2].addEvent( 'click',function(){
      scroll(-2);
    });
    prods[3].addEvent( 'click',function(){
      scroll(-1);
    });
    prods[5].addEvent( 'click',function(){
      scroll(1);
    });
    prods[6].addEvent( 'click',function(){
      scroll(2);
    });
  };
  
  scroll(-1);
  
});