window.slideshows = []
//This function goes through all the slideshow isntances inside the array
//if the current time is less than or equal to their next showing time, then
//I call the nextImage function and remove that instance

function checkSlideshows(){
    var now = new Date();
    for(var i=0; i<window.slideshows.length; i++){
        var s = window.slideshows[i];
        if(s.nextShow <= now){
            s.nextImage();
            window.slideshows.splice(i,1);
        }
    }
    setTimeout("checkSlideshows()", 100);
}
checkSlideshows();


function Slideshow(slideshowDiv, imagesList){
    //slideshowDiv should be the DIV that will be cleared out completely and loaded with images
    //images should be the paths to the images that will be loaded into the slideshow
    var me=this;

    me.content = $(slideshowDiv).css({
        position:"relative",
    });
    me.images = [];
    me.currentImage = 0; //Index of image that is being shown
    me.fadeTime = 200;
    me.showTime = 3000;

    me.content.html('');

    me.init = function(){
        for(var i=0; i<imagesList.length; i++){
            me.images.push(me.loadImage(imagesList[i]));
        }
        me.currentImage = me.images.length-1;
        me.nextImage();
    }
    me.refreshNav = function(){
        var nav = me.content.find('.SNav');
        if(nav.length <= 0){
            nav = $('<div class="SNav"></div>');
            //The nav is a lot of little boxes (DIVs) that have athumbnail of the image
            //inside. When the image is showing, it is highlighted.
            for(var i=0; i<me.images.length; i++){
                nav.append(
                    $('<div class="SNThumb"></div>')
                    .append(
                        $('<a href=""><img src="'+me.images[i].attr("src")+'"></a>')
                        .click(function(){
                            me.showImage($(this).parent().index());
                            return false;
                        })
                    )
                );
            }
            me.content.prepend(nav);
        }
        //This part is where I determine which one is selected
        nav.find('.selected').removeClass('selected');
        var selectImage = nav.find('.SNThumb')[me.currentImage];
        $(selectImage).find('img').addClass('selected');
    }

    me.showImage = function(nextCurrentImage){
        //remove the window.slideshows that beling to us...just in case
        for(var i=0; i<window.slideshows; i++){
            if(window.slideshows[i] == me){
                window.slideshows.splice(i,1);
            }
        }

         var cImage=me.images[me.currentImage],
            nImage=me.images[nextCurrentImage];
        
        //Fade away this one.
        cImage.parent().fadeOut(me.fadeTime);

        //And now show this one
        var cPos = cImage.parent().position();
        nImage.parent().css({
            position:"absolute",
            top:cPos.top,
            left:cPos.left,
        }).fadeIn(me.fadeTime, function(){
            $(this).css({
                position:"relative",
                top:"auto",
                left:"auto",
            });
        });
        
        
        me.currentImage = nextCurrentImage;
        me.refreshNav();

        var now = new Date()
        me.nextShow = new Date(now.getTime()+me.showTime)
        window.slideshows.push(me);
    }

    me.nextImage = function(){
       
        var nextCurrentImage = me.currentImage+1;
        if(!me.images[nextCurrentImage]){
            nextCurrentImage = 0;
        }

        me.showImage(nextCurrentImage);
    }

    me.loadImage = function(path){
        //Loads one image with a given path.
        //Loading, in this case, is creating an image with the src added properly.
        //Until it's done loading, it's just a div class="SImage" with an h3 class="SIText"
        //That says Loading...

        var holderDiv = $('<div class="SImage"></div>').css({
            display:"none",
        });

        var loadingText = $('<h3 class="SIText">Loading...</h3>');
        var newImage = $('<img src="'+path+'"/>').css({
            display:"none",
        })
        .load(function(){
            $(this).css({
                display:"block",
            })
            .siblings('.SIText').css({
                display:"none",
            });
        });
        holderDiv.append(loadingText).append(newImage)
        .appendTo(me.content);

        return newImage;
    }
    me.init();
}