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"));
    });
}

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
            //placeShadow(dojo.coords(this));
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            //hideShadow();
		}
	}
}

function placeShadow(coords) {
    var shadow = dojo.query("table#shadow")[0];
    var shadowR = dojo.query("table#shadow td.shadowR")[0];
    var shadowB = dojo.query("table#shadow td.shadowB")[0];
    console.log(coords);
    dojo.style(shadow, "left", coords.l + "px");
    dojo.style(shadow, "top", coords.t + "px");
    dojo.style(shadowR, "width", coords.w + "px");
    dojo.style(shadowB, "height", coords.h + "px");
    
    dojo.style(shadow, "display", "block");
}

function hideShadow() {
    dojo.style(dojo.query("table#shadow")[0], "display", "none");
}
dojo.addOnLoad(sfHover);