Effect.Scrollable = Class.create();
Object.extend(Object.extend(Effect.Scrollable.prototype, Effect.Base.prototype), {
  initialize: function(element, speed) {
    this.element = $(element);
    this.speed = speed;
    this.interval = 100;
    this.pos = false;
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
  },
  setSpeed: function(speed) {
    this.speed = speed;
  },
  scrollTo: function(pos) {
    this.pos = pos;
    if (pos < this.element.scrollLeft) {
      this.setSpeed(1);
    }
    if (pos > this.element.scrollLeft) {
      this.setSpeed(-1);
    }
  },
  loop: function(pos) {
    if (this.speed == 1 && this.pos > this.element.scrollLeft) {
      this.setSpeed(0);
    }
    if (this.speed == -1 && this.pos < this.element.scrollLeft) {
      this.setSpeed(0);
    }
    this.element.scrollLeft = this.element.scrollLeft + -5 * this.speed;
  }
});

function TXGallery(g) {
  var preload_image = new Element("img");
  var carousel = g.firstDescendant();
  var image_list = carousel.firstDescendant();
  image_list.setStyle({
    width: (image_list.childElements().length * 107) + 'px'
  });
  var canvas = new Element("div").addClassName('canvas');
  var titlebg_div = new Element("div").addClassName("title-bg");
  var title_div   = new Element("div").addClassName("title");
  titlebg_div.setOpacity(0.5);

  carousel.insert({ before: canvas });
  carousel.insert({ before: titlebg_div });
  carousel.insert({ before: title_div });
  canvas.show();
  carousel.setStyle({
    display: 'block'
  });

  var scrollable = new Effect.Scrollable(carousel, 0);

  var active = false;
  image_list.childElements().each(function(image, index) {
    var link = image.firstDescendant();
    link.onclick = function() {
      if (active)
        active.className = '';
      link.className = 'active';
      active = link;
      var title = "(Bild " + (index+1) + " von " + image_list.childElements().length + ")";
      if (link.readAttribute('title'))
        title += " <b>" + link.readAttribute('title') + "</b>";
      title_div.innerHTML = title;
      title_div.show();
      titlebg_div.setStyle({
        height: title_div.getDimensions().height + 'px'
      });
      titlebg_div.show();
      scrollable.scrollTo(link.positionedOffset().left - 120);
      canvas.setStyle({
        backgroundImage: 'url(/tx-gallery/spinner.gif)'
      });
      preload_image.src = link.href;
      return(false);
    };
  });
  image_list.firstDescendant().firstDescendant().onclick();

  var prev = new Element("div").addClassName("carousel-left");
  var next = new Element("div").addClassName("carousel-right");

  carousel.insert({ before: prev });
  carousel.insert({ after:  next });

  preload_image.observe('load', function(event){
    canvas.setStyle({
      backgroundImage: 'url(' + preload_image.src + ')'
    });
  });

  prev.observe('mouseover', function(event){
    scrollable.setSpeed(1.125);
  });
  prev.observe('mouseout', function(event){
    scrollable.setSpeed(0);
  });
  next.observe('mouseover', function(event){
    scrollable.setSpeed(-1.125);
  });
  next.observe('mouseout', function(event){
    scrollable.setSpeed(0);
  });
}

Event.observe(window, 'load', function() {
  $$('.tx-gallery').each(function(g) {
    TXGallery(g);
  });
});