﻿var diaporamadetail = new Class({
    Implements: [Options],
    _slidesNumber: 0,
    _curSlideNum: 0,
    _curZ: 1,
    _inte: false,
    options: {
        container: false,
        duration: 1500,
        delay: 6000,
        eltpath: false,
        linkpath: false,
        linktonextpath: false,
        linktoprevpath: false
    },
    initialize: function(options) {
        this.init(options);

        site.addHistoryEvent('diaporamaHistory', 'i');
        site.addEvent('diaporamaHistory', function(o) { this._moveTo(o.v % this._slidesNumber); } .bind(this));
        site.addEvent('diaporama', function(i) { site.HM.set("i", i); this._stop(); this._moveTo(i); } .bind(this));
    },
    init: function(options) {
        this.setOptions(options);

        if (this._inte)
            $clear(this._inte);

        if (this.options.container && $(this.options.container).retrieve("fx"))
            $(this.options.container).eliminate('fx');

        this._curZ = 1;
        var imagesArr = $(this.options.container).getElements(this.options.eltpath);
        this._slidesNumber = imagesArr.length;
        this._curSlideNum = site.HM.get("i") ? (site.HM.get("i") % this._slidesNumber) : 0;
        if (!$(this.options.container) || !(this.options.eltpath))
            return;
        
        if (this._slidesNumber == 0)
            return;

        if (this.options.linktonextpath) {
            $(this.options.container).getElements(this.options.linktonextpath).each(function(nextElt) {
                nextElt.addEvent('click', function() {
                    this._stop();
                    site.HM.set("i", this._curSlideNum + 1);
                    this._moveTo((this._curSlideNum + 1) % this._slidesNumber);
                } .bind(this))
            }, this);
        }
        if (this.options.linktoprevpath) {
            $(this.options.container).getElements(this.options.linktoprevpath).each(function(prevElt) {
                prevElt.addEvent('click', function() {
                    this._stop();
                    if (this._curSlideNum <= 0) {
                        site.HM.set("i", this._slidesNumber - 1);
                        this._moveTo(this._slidesNumber - 1);
                    }
                    else {
                        site.HM.set("i", this._curSlideNum - 1);
                        this._moveTo(this._curSlideNum - 1);
                    }
                } .bind(this));
            }, this);
        }
        var eltArray = [];
        var fxObj = {};
        imagesArr.each(function(image, index) {
            image.set({ "rel": index, styles: { "display": "block"} });
            eltArray.push(image);
            fxObj[index] = { "opacity": index == this._curSlideNum ? 1 : this._curSlideNum };
        }, this);
        if (this.options.linkpath)
            this._hightlightLink();
        var fx = new Fx.Elements(eltArray, { duration: this.options.duration });
        fx.set(fxObj);
        $(this.options.container).store("fx", fx);
        //this._inte = this._moveNext.periodical(this.options.delay, this);
    },
    _stop: function() {
        if (this._inte)
            $clear(this._inte);
    },
    _moveNext: function() {
        this._moveTo((this._curSlideNum + 1) % this._slidesNumber);
    },
    _moveTo: function(slideNum) {
        if (slideNum == this._curSlideNum)
            return;
        var fxObjSet = {};
        var fxObjStart = {};
        $(this.options.container).getElements(this.options.eltpath).each(function(image, ind) {
            if (ind == this._curSlideNum) { fxObjStart[ind] = { "opacity": 0 }; }
            else if (ind == slideNum) { image.setStyle("z-index", this._curZ++); fxObjStart[ind] = { "opacity": 1 }; }
            else { fxObjSet[ind] = { "opacity": 0 }; }
        }, this);
        $(this.options.container)
            .retrieve("fx")
            .cancel()
            .set(fxObjSet)
            .start(fxObjStart);
        this._curSlideNum = slideNum;
        if (this.options.linkpath)
            this._hightlightLink();
    },
    _hightlightLink: function() {
        $(this.options.container).getElements(this.options.linkpath).each(function(aElt, ind) {
            if (ind == this._curSlideNum) {
                aElt.addClass('active');
            }
            else {
                aElt.removeClass('active');
            }
        }, this);
    },
    destroy: function() {
        if (this._inte)
            $clear(this._inte);

        if (this.options.container && $(this.options.container).retrieve("fx"))
            $(this.options.container).eliminate('fx');
    }
});

