var CrossFade = Class.create({
    initialize: function(options) {
        this.options = options || {};
        this.timer = null;
        this.elEventHandler = $(this.options.elEventHandler) || $("homepage-banner-wrapper");

        this.viewport = $(this.options.viewport) || $("image-viewport");
        this.items = this.viewport.select("li");
        this.duration = this.options.duration || 1;
        this.index = this.options.index || 0;
        this.jsActive();
    },

    jsActive: function() {
        var height = this.items[0].getHeight();
        this.items[this.index].addClassName("current");
        this.items.invoke("setStyle", {
            position: "absolute",
            zIndex: 1
        });
        this.viewport.setStyle({
            height: height + "px"
        });
        this.items.without(this.items[this.index]).invoke("setStyle", {
            opacity: 0
        });
    },

    show: function(index) {
        if (!this.fx || this.fx.state != "running") {
            this.fx = new Effect.Morph(this.items[index], {
                beforeStart: function() {
                    this.items.without(this.items[index]).invoke("removeClassName", "current");
                    this.items[index].addClassName("current").setStyle({
                        display: 'block'
                    });
                    Event.fire(document, "item:show");
                } .bind(this),
                style: "opacity: 1",
                duration: this.duration,
                afterFinish: function(fx) {
                    this.items[index].setStyle({
                        zIndex: 1
                    });
                    this.items.without(this.items[index]).invoke("setStyle", {
                        zIndex: 2,
                        opacity: 0,
                        display: 'none'
                    });
                } .bind(this)
            });
        }
    },

    next: function() {
        var currentIndex = this.viewport.down("li.current").previousSiblings().length + 1;
        if (currentIndex >= this.items.length) {
            currentIndex = 0;
        }
        this.show(currentIndex);
    },

    previous: function() {
        var currentIndex = this.viewport.down("li.current").previousSiblings().length - 1;
        if (currentIndex < 0) {
            currentIndex = this.items.length - 1;
        }
        this.show(currentIndex);
    }
});

var CrossFadeControls = Class.create(CrossFade, {
	initialize: function ($super, options) {
		this.options = Object.extend({
			pagination: true,
			navigation: true,
			timer: true,
			paginationWrapper: "pagination",
			navigationWrapper: "navigation",
			timerDuration: 1500,
			callback: function () { }
		}, options || {});
		$super(this.options);

		if (this.options.pagination) {
			this.paginationGenerate(this.options.paginationWrapper);
			Event.observe(document, "item:show", this.paginationCurrent.bind(this));
		}
		if (this.options.navigation) { this.navigationGenerate(this.options.navigationWrapper); }
		if (this.options.timer) { this.timerStart(this.options.timerDuration); }
		this.elEventHandler.observe("click", this.eventHandler.bind(this));
	},

	eventHandler: function (e) {
		var el = e.element();
		if (el.nodeName == "LI") {
			this.timerStop();
			var clickIndex = el.previousSiblings().length;
			if (el.parentNode.id == this.options.navigationWrapper) {
				if (clickIndex == $(this.options.navigationWrapper).childElements().length - 1) { // next
					this.next();
				} else if (clickIndex == 0) { // previous
					this.previous();
				}
			} else if (el.parentNode.id == this.options.paginationWrapper) {
				this.show(clickIndex);
			}
		}
	},

	paginationGenerate: function (el) {
		for (var i = 0; i < this.items.length; i++) {
			var eLi = new Element("li").addClassName("sprite-main").update(i + 1);
			$(el).appendChild(eLi);
		}
		$$("#" + el + " li:first-child").invoke("addClassName", "current");
	},

	navigationGenerate: function (el) {
		var elNext = new Element("li").update("next").addClassName("imageNext sprite-main");
		var elPrevious = new Element("li").update("previous").addClassName("imagePrevious sprite-main"); ;
		$(el).insert({ bottom: elNext });
		$(el).insert({ top: elPrevious });
	},

	paginationCurrent: function () {
		var el = this.options.paginationWrapper;
		var paginationItems = $$("#" + el + " li");
		paginationItems.without(paginationItems[this.viewport.down("li.current").previousSiblings().length]).invoke("removeClassName", "current");
		paginationItems[this.viewport.down("li.current").previousSiblings().length].addClassName("current");
	},

	timerStart: function (interval) {
		this.timer = setInterval(function () {
			this.next();
			document.fire("item:show", { index: this.index });
			this.options.callback();
		} .bind(this), interval + (this.duration * 1000));
	},

	timerStop: function () {
		clearInterval(this.timer);
		this.timer = null;
	}
});