var myScroller = new Class({
 Extends:Scroller,
 scroll: function(){
    var size = this.element.getSize(), scroll = this.element.getScroll(), pos = this.element.getOffsets(), scrollSize = this.element.getScrollSize(), change = {'x': 0, 'y': 0};
    for (var z in this.page){
      if (this.page[z] < (this.options.area + pos[z]) && scroll[z] != 0)
        change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
      else if (this.page[z] + this.options.area > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z])
        change[z] = (this.page[z] - size[z] + this.options.area - pos[z]) * this.options.velocity;
    }
    if (change.y || change.x) this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
  }
});
var scrollContent = new Class({
    options: {
        containerHeight: 320
    },
    initialize: function() {
        if ($("contentText")) {
            this.scCont = $("contentText").setStyles({ "overflow": "hidden" });
            if (this.scCont.getScrollSize().y <= this.scCont.getSize().y) return;

            var scrollIt = new myScroller(this.scCont, { "area": 50, "velocity": 0.2 });

            var t = new Fx.Scroll(this.scCont);
            this.scCont.addEvent("mouseenter", function() { scrollIt.start(); });
            this.scCont.addEvent("mouseleave", function() { scrollIt.stop(); });
            this.scCont.addEvent("mousewheel", function(ev) { t.set(0, this.scCont.getScroll().y - 8 * ev.wheel); } .bindWithEvent(this));
            this.scCont.addEvent("scroll", this._updateBar.bind(this));
            this._createBar();
                          t.set(0, this.scCont.getScrollSize().y);
                t.toTop();
                   }
    },
    _createBar: function() {
        this.barheight = (this.options.containerHeight / this.scCont.getScrollSize().y) * this.options.containerHeight;
        this.bar = new Element("div", { styles: { position: "absolute", height: this.barheight + "px", right: "120px", width: "1px", "background-color": "black"} }).inject($("contentContainer"));
        this._updateBar();
    },
    _updateBar: function() {
        var originTop = 53;
        var barheight = this.barheight;
        var newTop = originTop + (this.scCont.getScroll().y) / (this.scCont.getScrollSize().y - this.options.containerHeight) * (this.options.containerHeight - barheight);
        this.bar.setStyle("top", newTop);
    }
});
var ThumbScroller = new Class({
    options: {
        containerHeight: 320
    },
    initialize: function() {
        if ($("thumblist")) {
            this.scCont = $("thumblist").setStyles({ "overflow": "hidden" });
            if (this.scCont.getScrollSize().x <= this.scCont.getSize().x) return;
            var scrollIt = new myScroller(this.scCont, { "area": 50, "velocity": 0.2 });
            var t = new Fx.Scroll(this.scCont);
            this.scCont.addEvent("mouseenter", function() { scrollIt.start(); });
            this.scCont.addEvent("mouseleave", function() { scrollIt.stop(); });
            this.scCont.addEvent("mousewheel", function(ev) { t.set(this.scCont.getScroll().x - 52 * ev.wheel, 0); } .bindWithEvent(this));
            t.set(this.scCont.getScrollSize().x,0);
            t.toLeft();
        }
    }
});
var ThumbPreview = new Class({
    initialize: function(){
        if($("thumblist")) {
             $("thumblist").getElements("a[rel^=/]").each(function(aElt){
                aElt.set("href","javascript:void(0)");
                aElt.addEvent("click", this.setActive.pass(aElt, this));
             },this);
        } else return;
        if($("mainImage").getElement("a")) {
            var curA = $("mainImage").getElement("a");
            var idFirstImg = curA.get("rel");
            if(!$chk(idFirstImg)) return;
            curA.set("href", "javascript:void(0)");
            if($(idFirstImg))
                curA.removeEvents("click").addEvent("click", function () {this.fireEvent("click")}.bind($(idFirstImg)));
        }
    },
    setActive : function(aElt){
        var infos = aElt.get("rel").split("|");
        $("thumblist").getElements("a").removeClass("active");
        
        aElt.addClass("active");
        $("mainImage").setStyle("background-image","url("+infos[0]+")");
        
        if($("mainImage").getElement("a")) {
            var curA = $("mainImage").getElement("a");
            curA.set("href", "javascript:void(0)");
            if($(infos[2]))
                curA.removeEvents("click").addEvent("click", function () {this.fireEvent("click")}.bind($(infos[2])));
        }
        $("mainImageLegendSpan").set("html", infos[1]);
    }
});
window.addEvent("domready",function(){new scrollContent(); new ThumbScroller(); new ThumbPreview();});