var CollectionSlider = new Class({
    initialize: function() {
        //var sc = new Scroller($("productChooser").getElement("div.slideWarp").setStyle("overflow", "hidden"));
        //sc.attach();

        if ($('img')) {
            new scrollContent("img");
        }
        if ($('articles')) {
            new scrollContent("articles");
        }
        if ($('slideWarp')) {
            new scrollContent("slideWarp");
        }

        if ($('pic')) {
            new productViewer();
            
        }
    }
});

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]);
    }
});
Fx.ScrollVelocity = new Class({
    Extends: Fx.Scroll,
    options: {
        transition: Fx.Transitions.linear,
        velocity: 5
    },

    start: function (x, y) {
        if (!this.check(x, y)) return this;
        var offsetSize = this.element.getSize(), scrollSize = this.element.getScrollSize();
        var scroll = this.element.getScroll(), values = { x: x, y: y };
        var duration = 0;
        for (var z in values) {
            var max = scrollSize[z] - offsetSize[z];
            if ($chk(values[z])) values[z] = ($type(values[z]) == 'number') ? values[z].limit(0, max) : max;
            else values[z] = scroll[z];
            values[z] += this.options.offset[z];
            if (this.options.velocity)
                duration = Math.max(duration, Math.abs(values[z] - scroll[z]) * this.options.velocity);
        }
        if (duration > 0)
            this.options.duration = duration;
        return this.parent(x, y);
    }
});


var scrollContent = new Class({

    initialize: function (divId) {

        if ($(divId)) {
            this.divId = divId;
            this.scCont = $(divId).setStyles({ "overflow": "hidden" }).addEvent("scroll", this._contentScroll.bindWithEvent(this));
            this.sizeX = this.scCont.getSize().x;
            this.scrollsizeX = this.scCont.getScrollSize().x;
            if (this.scrollsizeX <= this.sizeX) return;
            //var scrollIt = new Scroller(this.scCont, { "area": 50, "velocity": 0.2 });
            //scrollIt.start();
            $(divId).getElements("a img").each(function (aelt) { aelt.addEvent("mouseover", function (e) { e.preventDefault(); }); });
            this.t = new Fx.ScrollVelocity(this.scCont);
            //            this.scCont.addEvent("mouseenter", function() { scrollIt.start(); });
            //            this.scCont.addEvent("mouseleave", function() { scrollIt.stop(); });
            this.scCont.addEvent("mousewheel", function (ev) { this.t.set(this.scCont.getScroll().x - 8 * ev.wheel, 0); this._updateShwadow(); } .bindWithEvent(this));
            this.containerWidth = 715;
            if (divId != 'slideWarp')
                this.containerWidth = 875;
            this._createBar();
            this.t.set(0, 0);
        }
    },
    _scrollLeft: function () {
        this.t.toLeft();
    },
    _scrollLeftStop: function () {
        this.t.cancel();
        this._updateShwadow()
    },
    _scrollRight: function () {
        this.t.toRight();
    },
    _scrollRightStop: function () {
        this.t.cancel();
        this._updateShwadow();
    },
    _scrollDrag: function (ev) {
        var perc = ev.getStyle("left").toInt() / (this.containerWidth - this.ticBarSize);
        this.t.set((this.scrollsizeX - this.sizeX) * perc, 0);
    },
    _contentScroll: function () {
        $("ticbar").setStyle("left", $(this.divId).getScroll().x / (this.scrollsizeX - this.sizeX) * (this.containerWidth - this.ticBarSize));
    },
    _updateShwadow: function () {
        $("ticbarShadow").setStyle("left", $(this.divId).getScroll().x / (this.scrollsizeX - this.sizeX) * (this.containerWidth - this.ticBarSize));
    },
    _createBar: function () {
        var bar = new Element("div", { "id": "scrollBar" }).inject(this.divId);
        this.ticBarSize = (this.sizeX / this.scrollsizeX * this.containerWidth).toInt();
        //console.log(this.containerWidth);
        //console.log(this.sizeX / this.scrollsizeX * this.containerWidth).toInt();
        var ticbar = new Element("div", { "id": "ticbar",
            styles: {
                "width": this.ticBarSize
            }
        }).inject(bar);
        var ticbarShadow = new Element("div", { "id": "ticbarShadow",
            styles: {
                "width": this.ticBarSize,
                "top": 0
            }
        }).inject(bar);
        ticbarShadow.makeDraggable({ container: bar, "onDrag": this._scrollDrag.bindWithEvent(this) });

        var toparr = new Element("a", { "id": "scrollLeft" }).inject(this.divId);
        toparr.addEvents({ "mousedown": this._scrollLeft.bind(this),
            "mouseup": this._scrollLeftStop.bind(this)
        });
        var botarr = new Element("a", { "id": "scrollRight" }).inject(this.divId);
        botarr.addEvents({
            "mousedown": this._scrollRight.bind(this),
            "mouseup": this._scrollRightStop.bind(this)
        });
        //this.barheight = (this.options.containerHeight / this.scCont.getScrollSize().y) * this.options.containerHeight;

    }
});


var imageDrag = new Class({
    Binds: ["_handle", "_autoMove"],
    initialize: function () {
        var content = $('center');
        this.contentSize = $('draggable').getSize().x;
        $("draggable").setStyles({ "top": 12, "left": 0 });
        if (Browser.Engine.trident) {
            document.ondragstart = function () { return false; };
        }
        $("hand").setStyles({ "top": 0, "left": 0 });
        if (this.contentSize <= 1000) {
            $("hand").destroy();
            return;
        }
        content.addEvent("mousewheel", function (ev) {
            var draggable = $('draggable');
            draggable.setStyle("left", (draggable.getStyle("left").toInt() + ev.wheel * 12).limit(1000 - this.contentSize, 0));
            this._autoMove(draggable);
            ev.stop();
        } .bind(this));
        content.setStyles({ 'cursor': 'pointer', 'overflow': 'hidden' });
        var myDrag = new Drag($('draggable'), { limit: { x: [-this.contentSize + 1000, 0], y: [12, 12]} }).addEvent('drag', this._autoMove);
        myDrag.attach();
        var handler = $('hand');
        var handleDrag = new Drag(handler, { limit: { x: [0, 950], y: [0, 0]} });
        handleDrag.addEvent('drag', this._handle).attach();

    },
    _handle: function (hand) {

        var percentPos = hand.getStyle('left').toInt() / 950;

        var toMove = (-((this.contentSize - 1000) * percentPos)).toInt();

        $('draggable').setStyle('left', toMove);

    },
    _autoMove: function (draggable) {

        var moved = draggable.getStyle('left').toInt();

        var percentMoved = -moved / (this.contentSize - 1000);

        $('hand').setStyle('left', 950 * percentMoved);
    }

});