var CrossFade = Class.create({
    initialize: function(options) {
        this.options = options || {};
        this.timer = null;
        this.elEventHandler = $(this.options.elEventHandler) || $("CROSSSFADDD");
        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", {
            zIndex: 2,
            opacity: 0,
            display: 'none'
        });
    },

    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: 2500
			}, options || {});
		    $super(this.options);
	    if (this.items.length > 1) {
		    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})
			}.bind(this), interval+(this.duration*1000));
	},
	
	timerStop: function() {
		clearInterval(this.timer);
		this.timer = null;
	}
});



var CrossFadeContentHomepage = Class.create(CrossFadeControls, {
    initialize: function($super, options) {
        this.options = Object.extend({
            contentWrapper: $("imageLink-wrapper")
        }, options || {});
        $super(this.options);
        this.imageLinks = this.items.invoke("down", "a.imageLinks");
        this.generateLink();
        
        Event.observe(document, "item:show", this.updateLink.bind(this));
        
    },

    jsActive: function($super) {
        this.items.invoke("down", "a.imageLinks").invoke("addClassName", "offscreen");
        $super();
    },

    generateLink: function() {
        this.imageLinks.invoke("addClassName", "imageLinks");
        var link = this.imageLinks[this.viewport.down("li.current").previousSiblings().length];
        var text = link.innerHTML;
        var href = link.href;
        var a = new Element('a', { id: "imageLink", href: href }).update(text);
        this.options.contentWrapper.appendChild(a);
        this.options.contentWrapper.insert({ bottom: "<span class='sprite-main arrow-right-blue'></span>" });
    },

    updateLink: function() {
        var link = this.imageLinks[this.viewport.down("li.current").previousSiblings().length];
        var text = link.innerHTML;
        var href = link.href;
        $("imageLink").update(text);
        $("imageLink").href = href;
    }
});