dojo.require("dojo.fx");
var slideEvt;
dojo.addOnLoad(function() {
        setupMenus();
        slideEvt = {
            pos: 0,
            dur: 800,
            autoInterval: 8000,
            slides: dojo.query("div.slide"),
            buttons: dojo.query("div.sliderButton"),
            intervalId: null,
            
            init: function() {
                // Loads the image into cache, because some are hidden by default...
                this.slides.forEach(function(slide) {
                        var img = new Image();
                        img.src = dojo.style(slide, "backgroundImage").replace("url(", "").replace(")", "");
                });
                var evt = this;
                this.buttons.forEach(function(btn) {
                        dojo.connect(btn, "click", dojo.hitch({
                                btn: btn,
                                evt: evt,
                                click: function() {
                                    if (this.evt.intervalId) {
                                        this.evt.clearInterval();
                                    }
                                    
                                    this.evt.buttons.forEach(function(btn) {
                                            dojo.removeClass(btn, "selected");
                                    });
                                    
                                    this.evt.playAnimation(this.evt.pos, this.evt.buttons.indexOf(this.btn));
                                    this.evt.setInterval();
                                }
                        }, "click"));
                });
                
                this.setInterval();
            },
            
            setInterval: function() {
                this.intervalId = setInterval(dojo.hitch(this, "next"), this.autoInterval);
            },
            
            clearInterval: function() {
                clearInterval(this.intervalId);
            },
            
            next: function() {

                dojo.removeClass(this.buttons[this.pos], "selected");

                if (this.pos == this.slides.length - 1) {
                    this.playAnimation(this.pos, 0);
                } else {
                    this.playAnimation(this.pos, this.pos + 1);
                }

                
            },
            
            playAnimation: function(bindex, eindex) {
                // Prepare slide out for begin index
                var currSlideOut = dojo.fx.slideTo({node: this.slides[bindex],duration: this.dur, left: -778, unit: "px"});
                
                // Prepare end index node...
                dojo.style(this.slides[eindex], "left", "778px");
                dojo.style(this.slides[eindex], "display", "block");

                // Slide out begin index node, slide in end index node.
                currSlideOut.play();
                dojo.fx.slideTo({node: this.slides[eindex],duration: this.dur, left: 0, unit: "px"}).play();

                // Select correct slider button...
                dojo.addClass(this.buttons[eindex], "selected");

                this.pos = eindex;
            }
        };  

        slideEvt.init();
});

function setupMenus() {
    dojo.query("div.menuItem").forEach(function(div){
        dojo.connect(div, "mouseover", dojo.hitch({
                div: div,
                over: function() {
                    dojo.addClass(this.div, "selected");
                }
        }, "over"));
        dojo.connect(div, "mouseout", dojo.hitch({
                div: div,
                isSelected: (div.className.indexOf("selected") >= 0),
                over: function() {
                    if (!this.isSelected) {
                        dojo.removeClass(this.div, "selected");
                    }
                }
        }, "over"));
    });
}