/**
 * Image slide show for suite sites
 *
 * @param string sitetag
 * @param int interval // Animation interval in milliseconds
 */
function SlideShow(sitetag, interval) 
{
    this.sitetag = sitetag;
    this.interval = interval;
    this.imgPath = null;
    this.numSlides = null;
    this.width = 850;
    this.height = 558;
    this.imagesLoaded = 0;

    /**
     *  Pulls images from xml, preloads them and adds them to the page
     */
    this.init = function()
    {
        // Need this to access the slideshow object from inside ajax call
        var obj = this;
        
        jQuery.ajax({
            type: "GET",
            url: "/index/xml-proxy/?url=http://assets.frontiersnorth.com/features."+this.sitetag+".php",
            dataType: "xml",
            success: function(xml) {
                obj.imgPath = jQuery(xml).find('album').attr('lgpath');
                obj.numSlides = jQuery(xml).find('img').size();
                
                // Iterate over the images in xml
                jQuery(xml).find('img').each(function(){
                    // Preload the images one by one
                    var imagePreLoad = new Image();
                    imagePreLoad.onload = function() {
                        obj.imagesLoaded++;
                        // This will only fire when the last image has loaded 
                        if (obj.numSlides == obj.imagesLoaded) {
                            // Start the slide show
                            obj.start();
                        }
                    }
                    imagePreLoad.onerror = function() {
                        obj.imagesLoaded++;
                        // This will only fire when the last image has loaded 
                        if (obj.numSlides == obj.imagesLoaded) {
                            // Start the slide show
                            obj.start();
                        }
                    }
                    imagePreLoad.src = obj.imgPath + jQuery(this).attr('src');
                    
                    // Add the images to the page but hide them till the slide
                    // show starts
                    var image = jQuery('<img />');
                    jQuery(image).attr('src', obj.imgPath + jQuery(this).attr('src'));
                    jQuery('#SlideShow').append(image);
                    jQuery(image).css({
                        display: 'none', 
                        height: obj.height,
                        position: 'absolute',
                        width: obj.width
                    });
                });
            }
        });
    }
    
    /**
     * Starts the slide show loop
     */
    this.start = function()
    {
        var images = jQuery('#SlideShow img');
        
        // Bring the first and second image to the top
        jQuery(images[0]).css('z-index', 3);
        jQuery(images[1]).css('z-index', 2);
        // Unhide all the images
        jQuery('#SlideShow img').css('display', 'block');
        // Fade out the first slide before the main loop starts up
        setTimeout(this.transition, (this.interval - 500));
        
        // Start at slide 2 because the first slide is already shown
        var cur = 2;
        // Main loop
        setInterval(function() {
            // Move all slides to the back
            jQuery('#SlideShow img').css('z-index', 0);
            // Bring current slide to the front
            jQuery(images[cur-1]).css('z-index', 3);
            
            cur++;
            if (cur > this.numSlides) {
                cur = 1;
            }
            // Bring the next slide under the current
            jQuery(images[cur-1]).css('z-index', 2);
            // Apply the transition 1000 milliseconds before the main loop fires again
            setTimeout(this.transition, (this.interval - 1000));
        }.bind(this), this.interval);
    }
    
    /**
     *  Finds the shown image, fades it out, moves it to the back and shows it again
     */
    this.transition = function()
    {
        jQuery('#SlideShow img').each(function(){
            if (jQuery(this).css('z-index') == 3) {
                jQuery(this).animate({
                    opacity: 0
                }, 500, function() {
                    jQuery(this).css('z-index', 0);
                    jQuery(this).css('opacity', 1);
                });
            }
        });
    }
}