var BlockSlider = new Class({

    Implements: [Events, Options],

    options: {
        onChangeStart: function(liHide, liShow, oSrc) { },
        onChangeComplete: function(liHide, liShow, oSrc) { },
        onMaxRight: function(oSrc) { },
        onMaxLeft: function(oSrc) { },
        onMaxTop: function(oSrc) { },
        onMaxBottom: function(oSrc) { },
        pagination: true,
        paginationPosition: "top",
        paginationLabel: "Vignette #",
        classNameItem: 'cell'

    },

    initialize: function(block, options) {

        this.setOptions(options);
        this.block = $(block);
        this.el = this.block.getElement("ul");

        // grab li
        this.lis = this.el.getElements("li." + this.options.classNameItem);

        // vars
        this.width = this.el.offsetWidth - this.el.getHStyle();
        this.height = this.el.offsetHeight - this.el.getVStyle();
        this.currentIndex = 0;
        this.lastCurrentIndex = 0;
        this.futurLeft = 0;
        this.maxItem = this.lis.length;
        this.runing = false;
        this.timerAutorun = 5000;

        // avoid focus on inner element
        this.el.getElements(":focusable").set("tabindex", "-1");

        //        return false;

        // create div as mask around the el
        this.ctn = new Element("div", { "tabindex": "0" });

        this.ctn.setStyles({ "width": this.width, "overflow": "hidden", "zoom": "1" });
        this.ctn.aria(
            {
                "role": "scrollbar",
                "orientation": "horizontal",
                "valuemin": 0,
                "valuemax": this.lis.length,
                "valuenow": 0,
                "describedby": "BlockSlider_help"
            }
        );
        //        this.ctn.set("scrollLeft", "0");//todo:bug ie

        this.ctn.inject(this.block, "top");
        this.el.inject(this.ctn);
        this.ctn.addEvent("mousewheel", function(e) {
            e.stop();
            this.move(e.wheel);
            this._clearTimer();
        } .bind(this));
        this.ctn.addEvent("click", function(e) {
            e.target.focus();
        } .bind(this));
        this.block.addEvent("keydown", function(e) {
            if (e.key == "left") { e.stop(); this.move(-1); this._clearTimer(); }
            else if (e.key == "right") { e.stop(); this.move(1); this._clearTimer(); }
        } .bind(this));

        // injects btns
        this.prev = new Element("span", { tabindex: 0, "class": "sliderPrev opacity5" }).inject(this.ctn, "top");
        // click
        this.prev.addEvent("click", function(e) {
            e.stop();
            this.move(-1);
            this._clearTimer();
        } .bind(this));
        // enter
        this.prev.addEvent("keydown", function(e) {
            if (e.key == "enter") {
                e.stop();
                this.move(-1);
                this._clearTimer();
            }
        } .bind(this));


        this.next = new Element("span", { tabindex: 0, "class": "sliderNext" }).inject(this.ctn, "bottom");
        // click
        this.next.addEvent("click", function(e) {
            e.stop();
            this.move(1);
            this._clearTimer();
        } .bind(this));
        this.next.addEvent("keydown", function(e) {
            if (e.key == "enter") {
                e.stop();
                this.move(1);
                this._clearTimer();
            }
        } .bind(this));
        // set
        this.el.setStyle("width", this.width * this.lis.length);
        this.lis.setStyle("width", this.width);

        // autorun
        var self = this;
        this.timer = setInterval(function() {
            if ((self.currentIndex + 1) == self.maxItem) {
                self.moveTo(0);
            } else {
                self.move(1);
            }
        }, this.timerAutorun);


        // pagination
        if (this.options.pagination) {

            this.paginCtn = new Element('div', { 'class': 'sliderPagination' });
            for (var i = 0, l = this.lis.length; i < l; i++) {
                new Element('span', { 'class': 'paginBtn paginBtn_' + i, 'tabindex': 0, 'text': this.options.paginationLabel + (i + 1) })
					.addEvent('click',
						function(index) {
						    return function(e) {
						        e.stop();
						        this.moveTo(index);
						        this._clearTimer();
						    } .bind(this)

						} .bind(this)(i)
					)
					.addEvent('keydown',
						function(index) {
						    return function(e) {
						        if (e.key == "enter") {
						            e.stop();
						            this.moveTo(index);
						            this._clearTimer();
						        }
						    } .bind(this)

						} .bind(this)(i)
					)
					.inject(this.paginCtn);
            }
            this.paginCtn.inject(this.block, this.options.paginationPosition);
        }
        this._check();
    },

    move: function(direction) {

        this.moveTo(this.currentIndex + direction);

    },

    moveTo: function(index) {
        if (index < 0 || index > this.maxItem - 1 || this.runing || index == this.currentIndex) {
            this.runing = false;
        }
        else {
            this.futurLeft = this.width * index;
            this.runing = true;
            this._animate(this.futurLeft, 0);
        }

    },

    _animate: function(left, top) {
        //        if(this.anim) this.anim.cancel();

        this.anim =
			new Fx.Scroll(
				this.ctn, {
				    onStart:
						function() {
						    this.fireEvent("onChangeStart", [this.lis[this.currentIndex], this.lis[(left / this.width).toInt()], this]);
						} .bind(this),
				    onComplete:
						function() {
						    this.fireEvent("onChangeComplete", [this.lis[this.currentIndex], this.lis[(left / this.width).toInt()], this]);
						    this._check();
						} .bind(this)
				}
			).start(left, top);

    },

    _check: function() {
        this.prev.removeClass("opacity5");
        this.next.removeClass("opacity5");

        this.lastCurrentIndex = this.currentIndex;

        this.currentIndex = (this.futurLeft / this.width).toInt();

        if (this.currentIndex >= this.lis.length - 1) {

            //			this.currentIndex = this.lis.length - 1;
            this.next.addClass("opacity5");
        }
        else if (this.currentIndex <= 0) {

            this.currentIndex = 0;
            this.prev.addClass("opacity5");
        }




        this.lis[this.lastCurrentIndex].getElements(":focusable").set("tabindex", "-1");
        this.lis[this.currentIndex].getElements(":focusable").set("tabindex", "0");

        if (this.options.pagination) {
            this._pagerCurrent(this.currentIndex);
        }

        this.runing = false;

    },

    _pagerCurrent: function(iPos) {

        this.paginCtn.getElements('.paginBtn_' + this.lastCurrentIndex).removeClass('currentPage');
        this.paginCtn.getElements('.paginBtn_' + iPos).addClass('currentPage');
    },

    _clearTimer: function() {
        clearInterval(this.timer);
    }
});

//Module.register("BlockSlider", "ul.blockSlider");

$(document).addEvent('domready', function() {
    var aElem = $$('div.JS_Slider');
    aElem.each(function(o) {
        var bIsPaginate = o.hasClass('JS_Slider_Paginate');
        var a = new BlockSlider(o, { 'classNameItem': 'sliderItem', 'pagination': bIsPaginate });
    });
});