//
// JNRSimpleSlideShow.js
// 
// A wee simple jQuery-goodness slide show
//
// 
//

var JNRSimpleSlideShow = function() {
    // Member Vars For Config
    DISPLAY_TIME  = 4500;           // Time to show each image for in milliseconds
    FADE_TIME     = 800;            // Transition fade time.
    STARTUP_STATE = '1';            // 1 = run, 0 = paused.
    SLIDESHOW_DIR = 'slideshow';    // relative path to slideshow's xml file.
    SLIDESHOW_XML = 'slideshow.xml' // slideshow's 

    // Class Vars - Data Place holders... DO NOT EDIT.
    var data                = [];
    var runState            = '0';
    var currentImage        = 0;
    var containerMaxHeight  = 0;
    var containerMaxWidth   = 0;
    var DOM_SLIDE_SHOW      = $('#slideshow');

    //
    // Accessors
    //
    this.launchSlideShow = function() {
        // first off, grab the image info.
        getSlideShowDescription();
    };
    
    //
    // Core Functions
    // 
    function initialise() {
        // set up the slideshow container.
        DOM_SLIDE_SHOW.width(containerMaxWidth+"px")
                      .height(containerMaxHeight+"px");
        
        // add a holder for the images.
        var imgHolder = $('<div>').addClass('slideshowimage');
        DOM_SLIDE_SHOW.append(imgHolder)
                      .show(0);
        
        // add the controls to the slideshow.
        setControls();
        
        // set the first image.
        var thisImg = new Image;
        thisImg.width  = data[currentImage].width;
        thisImg.height = data[currentImage].height;
        thisImg.src    = SLIDESHOW_DIR + "/" + data[currentImage].name;
        thisImg.border = 0;
        setPadding( $(thisImg) );
        
        $('.slideshowimage').append(thisImg)
                            .fadeIn(FADE_TIME);
        
        // now, if the start state is run, then start the animation, 
        // else leave it as is.
        if (STARTUP_STATE == '1') {
            runState = '1';
            setTimeout(runAnimation, DISPLAY_TIME);
        }
    };


    function setPadding(imageObj) {
        // the width padding is taken care of with the align css so we only
        // need to apply height padding,
        if (imageObj.attr('height') < containerMaxHeight) {
            var margin = ((containerMaxHeight - imageObj.attr('height')) / 2);
            imageObj.css('margin', margin+'px 0px '+margin+'px 0px');
        } else {
            // no padding.
            imageObj.css('margin', '0px 0px 0px 0px');
        }
    };
    
    function setControls() {
        // set up the initial image on the control.
        var controlDisplayClass = (STARTUP_STATE == '0')
                                    ? 'run' : 'pause';
        
        // add the control button to the top right somewhere and set the 
        // container to show it on mouse over.
        var control = $('<div>').addClass('slideshowcontrol')
                                .addClass(controlDisplayClass);
        
        DOM_SLIDE_SHOW.append(control);
                                
        $('#slideshow').hover(
            function() { // mouse over
                $('.slideshowcontrol').fadeIn(400);
            },
            function() { // mouse out
                $('.slideshowcontrol').fadeOut(400);
            }
        );

        // add the control actions
        $('.slideshowcontrol').click(function(e) {
            runState = (runState == 1) ? 0 : 1;
            if (runState == 1) {
                $('.slideshowcontrol').removeClass('run').addClass('pause');
                setTimeout(runAnimation);
            } else {
                $('.slideshowcontrol').removeClass('pause').addClass('run');
            }
        });
        
    };


    function runAnimation() {
        // check the runState and if its in run, animate.
        if (runState == '1') {
            // if we get here, then we're good to go.
            currentImage = (currentImage + 1);
            if (currentImage >= data.length) {
                currentImage = 0;
            }

            var swapImage = function() {
                $('#slideshow .slideshowimage img')
                    .attr('width',  data[currentImage].width)
                    .attr('height', data[currentImage].height)
                    .attr('src',    SLIDESHOW_DIR + "/" + data[currentImage].name);
                
                setPadding( $('#slideshow .slideshowimage img') );

                $('#slideshow .slideshowimage img').fadeIn(800);
            };
            
            $('#slideshow .slideshowimage img').fadeOut(800, swapImage);

            // and continue the animation.
            setTimeout(runAnimation, DISPLAY_TIME);
        }
    }
    
    // 
    // Data Functions
    // 
    function getSlideShowDescription() {
        $.ajax({
            type:       "GET",
            url:        SLIDESHOW_DIR + "/" + SLIDESHOW_XML,
            dataType:   "xml",
            cache:      false,
            success:    function(responseXML) { processXML(responseXML); }
        });
    };

    function processXML(responseXML) {
        var dataXML = responseXML.documentElement;
        var images  = $(dataXML).find('image');

        // fall over if its not the right document.
        if ( dataXML.nodeName != 'slideshow' ){
            return;
        }

        // reset the data block and populate it with the images.
        data = [];
        $.each(images, function(i, image) {
            var thisImg = $(image); 
            var width   = thisImg.attr('width');
            var height  = thisImg.attr('height');

            containerMaxHeight = (containerMaxHeight < height)
                                    ? height : containerMaxHeight;
            containerMaxWidth  = (containerMaxWidth < width)
                                    ? width : containerMaxWidth;
            data.push({
                name:   thisImg.attr('name'),
                width:  width,
                height: height
            });

            // while we're at it, we'll preload the images
            preload = new Image(width, height);
            preload.src = "/slideshow/"+thisImg.attr('name');
        });

        // now initialise the slideshow.
        initialise();
    };

}; // End of Class: JNRSlideShow;