var Carousel = {
  
  init: function(container) {
    
    this.container = $(container);
    if(this.container.hasClassName('rblockeditable') || !this.container.select('.image').size())
      return;
    this.images = this.container.select('.image');
    this.childs = this.container.childElements();
    
    Carousel.update.bind(this)();
    Event.observe(window, 'resize', Carousel.update.bind(this));
  },
  
  update: function() {
    if(!this.content) {
      this.content = $(document.createElement("div"));
      this.content.addClassName('carouselContent');
      this.container.insert(this.content);
      this.images.each(Carousel.addImage.bind(this));
    }

    width = 0;
    height = 0;
    this.content.childElements().each(function(element) {
      width += parseInt(element.getWidth()) + parseInt(element.getStyle('margin-right')) + parseInt(element.getStyle('margin-left'));
      height = Math.max(height, parseInt(element.getHeight()));
    });
    
    if(!this.prev) {
      this.prev = $(document.createElement("a"));
      this.prev.addClassName('prev');
      this.prev.setAttribute('href', 'javascript://');
      this.prev.setStyle({'opacity': 0});
      this.container.insert(this.prev);
      
      this.prev.observe('mouseover', Carousel.over.bind(this));
      this.prev.observe('mouseout', Carousel.out.bind(this));
      this.prev.observe('mousedown', Carousel.start.bind(this));
      this.prev.observe('mouseup', Carousel.stop.bind(this));
      this.prev.observe('mouseout', Carousel.stop.bind(this));
    }

    if(!this.next) {
      this.next = $(document.createElement("a"));
      this.next.addClassName('next');
      this.next.setAttribute('href', 'javascript://');
      this.next.setStyle({'opacity': 0});
      this.container.insert(this.next);
      
      this.next.observe('mouseover', Carousel.over.bind(this));
      this.next.observe('mouseout', Carousel.out.bind(this));
      this.next.observe('mousedown', Carousel.start.bind(this));
      this.next.observe('mouseup', Carousel.stop.bind(this));
      this.next.observe('mouseout', Carousel.stop.bind(this));
    }
    
    if(width <= this.container.getWidth()) {
      this.content.hide();
      this.childs.each(Element.show);
      this.prev.hide();
      this.next.hide();
      return;
    } else {
      this.childs.each(Element.hide);
      this.content.setStyle({'width': width+'px', 'height': height+'px', 'paddingLeft': '26px', 'paddingRight': '26px'});
      this.container.setStyle({'height': height+'px'});
      this.prev.setStyle({'height': height+'px'});
      this.next.setStyle({'height': height+'px'});
      
      new Effect.Opacity(this.prev, {to: 0.5, duration: 0.5});
      new Effect.Opacity(this.next, {to: 0.5, duration: 0.5});
    }
    
  },
  
  addImage: function(image, i) {
    var copy = $(image.cloneNode(true));
    copy.removeClassName('last');
    copy.removeClassName('first');
    if(i == 0)
      copy.addClassName('first');
    if(i == this.images.size() - 1)
      copy.addClassName('last');
    if(copy.select('a').size())
      copy.select('a')[0].onclick = image.select('a')[0].onclick;
    this.content.insert(copy);
  },
  
  over: function(e) {
    new Effect.Opacity($(e.findElement('a')), {to: 0.8, duration: 0.5});
  },
  
  out: function(e) {
    new Effect.Opacity($(e.findElement('a')), {to: 0.5, duration: 0.5});
  },
  
  start: function(e) {
    var elm = $(e.findElement('a'));
    if(elm.hasClassName('prev'))
      var d = -Math.floor(parseInt(this.content.getStyle('left')));
    else
      var d = Math.ceil(this.container.getWidth()-this.content.getWidth()-parseInt(this.content.getStyle('left')));
    this.effect = new Effect.Move(this.content, {x: d, duration: Math.abs(d)/500, transition: Carousel.transition});
  },
  
  stop: function(e) {
    if(this.effect)
      this.effect.cancel();
  },
  
  transition: function(pos) {
    return (Math.cos(Math.PI*(pos+1))+1)/2;
  }
  
}

function initCarousel() { 
  $$('.carousel').each(function(container) {
    new Carousel.init(container)
  });
}
Event.observe(window, 'load', initCarousel);