/**
 * Carrousel
 */
var Carrousel = new Class({
  element: null,
  effect: null,
  items: null,
  auto: true,
  selection: null,
  
  initialize: function(identifier){
    var carrousel = this;
    
    this.element = $('identifier');
    
    carrousel.items = $ES('.item', this.element);
    
    carrousel.effect = new Fx.Elements(
      carrousel.items, 
      {wait: false, duration: 800, fps: 200, transition: Fx.Transitions.Back.easeOut});
    
    carrousel.items.each(function(target, index){
      target.addEvent('mouseenter', function(event){
        carrousel.auto = false;
        carrousel.select(target);
      });
      target.addEvent('mouseleave', function(event){
        carrousel.auto = true;
        carrousel.select(target);
      });
    });
    
    
    carrousel.rotate.periodical(5000, this);
  },
  
  rotate: function(){
    var carrousel = this;
    var index;
    
    if (!carrousel.auto)
      return;
      
    index = carrousel.items.indexOf(carrousel.selection);
    index = index == carrousel.items.length -1 ? 0 : index + 1;

    carrousel.select(carrousel.items[index]); 
    
  },
  
  select: function(target){
    var carrousel = this; 
    var properties = {};
    
    carrousel.selection = target;
    
    if (target.getSize().size.x == 473)
      return;
    
    carrousel.items.each(function(item, index) {
      var width = item.getSize().size.x;
      var height = item.getSize().size.y;
        
      if (item == target) {
        properties[index] = {width: [width, 415]};
      } else if (width != 87) {
        properties[index] = {width: [width, 85]};
      }
    
    });
    carrousel.effect.start(properties);
  }
  
});