﻿var SlideShow = function() {
    this.containerName = 'imgBoxMain';
    this.container = $(this.containerName);
    this.maxWidth = 940;
    this.maxHeight = 350;
    $(this.container).setStyle({ position: "relative", height: this.maxHeight + "px", width: this.maxWidth + "px" });
    this.imagelist = new Array();
    this.interval = 7000;
    this.firstContainerShowing = false;
    if (document.styleSheets[0].addRule) {           // Browser is IE?
        document.styleSheets[0].addRule("#" + this.containerName + " img.slideshow", "position: absolute; left: 0; top: 0;");
    } else {                                         // Browser is IE?
        document.styleSheets[0].insertRule("#" + this.containerName + " img.slideshow{position: absolute; left: 0; top: 0;}", 0)
    }
}


SlideShow.prototype.start = function() {
    if (this.imagelist.length > 0) {
        this.current = -1;
        this.next = 0;

        this.imgContainer1 = document.createElement("img");
        $(this.imgContainer1).setStyle({ display: 'none' });
        $(this.imgContainer1).addClassName("slideshow");

        this.imgContainer2 = document.createElement("img");
        $(this.imgContainer2).setStyle({ display: 'none' });
        $(this.imgContainer2).addClassName("slideshow");

        this.container.appendChild(this.imgContainer1);
        this.container.appendChild(this.imgContainer2);

        var t = this;
        this.imgContainer1.onload = function() {
            $(t.imgContainer1).appear();
            $(t.imgContainer2).fade();
        }

        this.imgContainer2.onload = function() {
            $(t.imgContainer2).appear();
            $(t.imgContainer1).fade();
        }

        function mySwitchImage() {
            t.switchImage();
        }

        t.switchImage(); //visar en bild
        this.timer = setInterval(mySwitchImage, this.interval); //startar timern
    }
}

SlideShow.prototype.switchImage = function() {

    if (this.current == this.imagelist.length - 1)
        this.current = 0;
    else
        this.current++;

    if (this.firstContainerShowing) {
        
        this.imgContainer2.src = "gen.img?imgurl=UserFiles/SlideShow/" + this.imagelist[this.current] + "&mw=" + this.maxWidth + "&mh=" + this.maxHeight;
        this.firstContainerShowing = false;
    } else {
    
        this.imgContainer1.src = "gen.img?imgurl=UserFiles/SlideShow/" + this.imagelist[this.current] + "&mw=" + this.maxWidth + "&mh=" + this.maxHeight;
        this.firstContainerShowing = true;
    }
}