//TODO: Will break if 11 or more slides are entered
var showcase = {
        //-----EDITABLE---------//
        refresh_rate: 5, //# of ms before the scroll location will be recalculated
        increment_by: 20, //# of px's showcase scrolls each recalculation
        wait_time: 11500, //how long an image remains static
        //slide_width : this.$("li0").width; //width of each image, must all be of same size for formatting
        // See line 32 #imgList to set width of ul for showcase, each slide increase it by 860px.
        slide_width: 860, //hard coded, see previous

        //-----PROGRAMMATIC-----//
        i: 0, //used for a while loop to make sure the buttons are displaying the correct state and to count the # of images in the showcase
        pause_var: 0, //used as temp variable
        $: function(id) {
            return document.getElementById(id);
        },
        handler: function() {
            if (!this.pause()) {
                this.scroll_to(this.loc() + this.increment_by);
            }
        },

        pause: function() {
            if (this.loc() % this.slide_width < this.increment_by && this.pause_var < this.wait_time) {
                if (this.pause_var === 0) {
                    this.scroll_to(this.loc() - this.loc() % this.slide_width);
                }
                this.pause_var += this.increment_by;
                return 1;
            } else {
                return 0;
            }
        },

        scroll_to: function(x) {
            var $ = this.$;
            $("showcase").scrollLeft = x;
            if (this.loc() == x - this.increment_by || this.loc() == x - this.slide_width) {
                this.scroll_to(0);  // if (hit end) go to beginning
            }

            if (x < 0) {
                while (this.$("btn" + this.i)) {
                    this.i++;
                }
                this.scroll_to(this.slide_width * (i - 1));
                this.i = 0;
            }

            this.pause_var = 0;
            if (this.loc() % this.slide_width === 0) {
                while ($("btn" + this.i)) {
                    if (this.loc() / this.slide_width == this.i) {
                        // Path for small_circle_focus.gif
                        $("btn" + (this.loc() / this.slide_width)).src = "/images/Showcase/control/small_circle_focus.gif";
                        $("captionbox").style.left = $("btn" + this.i).offsetLeft - $("reference_img").offsetLeft - $("caption" + this.i).value.length * 3 + 4 + "px";
                        $("captionbox").innerHTML = $("caption" + this.i).value;
                    } else {
                        // Path for gray_dot.gif
                        $("btn" + this.i).src = "/images/Showcase/control/gray_dot.gif";
                    }
                    this.i++;
                }
            }
            this.i = 0;
        },

        loc: function() {
            return this.$("showcase").scrollLeft;
        },

        button_click: function(position, obj) {
            this.scroll_to(position);
            clearInterval(interval1);
        },

        button_hover: function(obj, i) {
            var $ = this.$;
            if (obj != this.$("btn" + (this.loc() / this.slide_width))) {
                // Path to small_circle_hover.gif				
                obj.src = "/images/Showcase/control/small_circle_hover.gif";
            }
            $("captionboxsmall").style.visibility = "visible";
            $("captionboxsmall").style.left = $("btn" + i).offsetLeft - $("reference_img").offsetLeft - $("caption" + i).value.length * 3 + 4 + "px";
            $("captionboxsmall").innerHTML = $("caption" + i).value;
        },

        button_out: function(obj) {
            // Path to gray_dot.gif
            if (obj != this.$("btn" + (this.loc() / this.slide_width))) {
                obj.src = "/images/Showcase/control/gray_dot.gif";
            }
            this.$("captionboxsmall").style.visibility = "hidden";
        }
    };
// Start slideshow:
var interval1 = self.setInterval("showcase.handler()", showcase.refresh_rate);     

