/**
 * Slideshow JS library for use in JuxtaPhoto
 *
 * @package JuxtaPhoto
 * @link http://jeffreyharrell.com/
 * @author Jeffrey Harrell <jeff@jeffreyharrell.com>
 * @license http://opensource.org/licenses/mit-license.php MIT License 
 **/
 
var imageDiv    = 'currimage';
var titleDiv    = 'currtitle';
var authorDiv   = 'currauthor';
var timeDiv     = 'currtime';
var dateDiv     = 'currdate';
var cameraDiv   = 'currcamera';
var statusDiv   = 'currslide';
var controlDiv  = 'controls';
var previousDiv = 'previmage';
var nextDiv     = 'nextimage';


var mySlides = new Array();

var Slideshow = Class.create();

Slideshow.prototype = {
        
    initialize: function(autoplay) {
        if (!document.getElementById || !document.getElementsByTagName) return false;
        if (mySlides.length == 0) return false;
        
        mySlideshow = this;
        
        // default settings
        this.playing = false;
        this.current = -1;
        this.total = mySlides.length;
        this.interval;
        
        // create controls
        if (!$(controlDiv)) alert('A control DIV is required.');
        
        // remove any content in there that is for non-JS
        while($(controlDiv).hasChildNodes()) { 
            $(controlDiv).removeChild($(controlDiv).childNodes[0]);
        }
       
        var stopControl = document.createElement("a");
        stopControl.setAttribute('id', 'stopControl');
        stopControl.setAttribute('href', 'javascript:;');
        stopControl.style.display = 'none';
        stopControl.onclick = function() { mySlideshow.stop(); return false; }
        stopControl.appendChild(document.createTextNode('Pause'));

        var startControl = document.createElement("a");
        startControl.setAttribute('id', 'startControl');
        startControl.setAttribute('href', 'javascript:;');
        startControl.onclick = function() { mySlideshow.play(); return false; }
        startControl.appendChild(document.createTextNode('Start'));
        
        var previousControl = document.createElement("a");
        previousControl.setAttribute('id', 'previousControl');
        previousControl.setAttribute('href', 'javascript:;');
        previousControl.onclick = function() { mySlideshow.previous(); return false; }
        previousControl.appendChild(document.createTextNode('Prev'));

        var nextControl = document.createElement("a");
        nextControl.setAttribute('id', 'nextControl');
        nextControl.setAttribute('href', 'javascript:;');
        nextControl.onclick = function() { mySlideshow.next(); return false; }
        nextControl.appendChild(document.createTextNode('Next'));
        
        var viewAllControl = document.createElement("a");
        viewAllControl.setAttribute('href', mySlides[0][7]);
        viewAllControl.appendChild(document.createTextNode('View All'));
        
        var manualControls = document.createElement("span");
        manualControls.setAttribute('id', 'manualControls');
        manualControls.style.display = 'none';
        manualControls.appendChild(startControl);
        manualControls.appendChild(document.createTextNode(' / '));
        manualControls.appendChild(previousControl);
        manualControls.appendChild(document.createTextNode(' / '));
        manualControls.appendChild(nextControl);
        
        $(controlDiv).appendChild(stopControl);
        $(controlDiv).appendChild(manualControls);
        $(controlDiv).appendChild(document.createTextNode(' / '));
        $(controlDiv).appendChild(viewAllControl);
        
        // create image containers
        if (!$(imageDiv)) alert('A image DIV is required.');
        
        while($(imageDiv).hasChildNodes()) { 
            $(imageDiv).removeChild($(imageDiv).childNodes[0]);
        }
        
        // placeholder images for the first slide
        var largeImage = document.createElement("img");
        largeImage.setAttribute('id','largeImage');
        largeImage.setAttribute('src', mySlides[0][2]);
        $(imageDiv).appendChild(largeImage);
        
        if (!$(previousDiv)) alert('A previous DIV is required.');
        
        while($(previousDiv).hasChildNodes()) { 
            $(previousDiv).removeChild($(previousDiv).childNodes[0]);
        }
        
        var prevThumb = document.createElement("img");
        prevThumb.setAttribute('id', 'prevThumb');
        prevThumb.style.display = 'none';
        $(previousDiv).appendChild(prevThumb);
        
        if (!$(nextDiv)) alert('A next DIV is required.');
        
        while($(nextDiv).hasChildNodes()) { 
            $(nextDiv).removeChild($(nextDiv).childNodes[0]);
        }
        
        var nextThumb = document.createElement("img");
        nextThumb.setAttribute('id', 'nextThumb');
        nextThumb.style.display = 'none';
        $(nextDiv).appendChild(nextThumb);
        

        // start playing unless you're told not to
        if (autoplay !== false) {
            this.play();
        } else {
            Element.show(manualControls);
            Element.hide(stopControl);
            this.next();
        }
    },
    
    
    
    play: function() {
        
        Element.show('stopControl');
        Element.hide('manualControls');

        if (this.current >= (this.total - 1)) {
            this.current = -1;
        }
        
        this.playing = true;
        this.next();
    },
    
    stop: function() {
        Element.show('manualControls');
        Element.hide('stopControl');
        
        clearInterval(this.interval);
        this.playing = false;
    },

    next: function() {
        if (this.current < (this.total - 1)) {
            this.current++;
            this.update();
        } else {
            this.end();
        }
    },
    
    previous: function() {
        if (this.current > 0) {
            this.current--;
            this.update();
        }
    },
    
    update: function() {
        this.showNext();
        this.showPrev();
        
        var newOpacity = (this.current == 0) ? 1.0 : 0.01;
        Effect.Fade($('largeImage'), { duration: 0.25, to: newOpacity, afterFinish: function() { mySlideshow.showImg(); }});

        this.showText();
    }, 
    
    showPrev: function() {
        if (this.current > 0) {
            var prevImg = new Image();
            prevImg.onload = function() {
                $('prevThumb').setAttribute('src', mySlides[mySlideshow.current - 1][1]);
                Element.show('prevThumb');
            }

            prevImg.src = mySlides[this.current - 1][1];
        } else {
            Element.hide('prevThumb');
        }
    },
    
    showNext: function() {
        if (this.current < (this.total - 1)) {
            var nextImg = new Image();
            nextImg.onload = function() {
                $('nextThumb').setAttribute('src', mySlides[mySlideshow.current + 1][1]);
                Element.show('nextThumb');
            }

            nextImg.src = mySlides[this.current + 1][1];
        } else {
            Element.hide('nextThumb');
        }
    },   
    
    showImg: function() {
        // explicitly set the height before you try to change it
        $('largeImage').setAttribute('width', $('largeImage').width);
        $('largeImage').setAttribute('height', $('largeImage').height);
                
        var myImg = new Image();
        myImg.onload = function() {
            $('largeImage').style.visibility = 'visible';
            
            oldWidth = $('largeImage').width;
            oldHeight = $('largeImage').height;
            newWidth = myImg.width;
            newHeight = myImg.height;
            
            if (Math.abs(oldHeight - newHeight) > 3) {
                scale = newHeight / oldHeight * 100;
                new Effect.Scale('largeImage', scale, {scaleX: false, duration: 0.3, queue:{position:'front', scope:'currimgX', limit:1}});  
            }

            if (Math.abs(oldWidth - newWidth) > 3) {
                scale = newWidth / oldWidth * 100;
                new Effect.Scale('largeImage', scale, {scaleY: false, duration: 0.3, queue:{position:'front', scope:'currimgY', limit:1}});  
            }            
            
            $('largeImage').setAttribute('src', mySlides[mySlideshow.current][2]);
            
            Effect.Appear($('largeImage'), {duration: .9, to: 1, queue:{position:'end', scope:'currimg', limit:1}, 
                afterFinish: function() { 
                    if (mySlideshow.playing == true) 
                        mySlideshow.interval = setTimeout("mySlideshow.next()", 5000);
                }
            });
        }
        
        myImg.src = mySlides[this.current][2];
        
        
        // now preload the next image
        if (this.current < (this.total - 1)) {
            var myPreloader = new Image(); 
            myPreloader.src = mySlides[this.current + 1][2];
        }
    },
        
    showText: function() {
        if ($(titleDiv))
            $(titleDiv).firstChild.nodeValue = mySlides[this.current][0];
        if ($(authorDiv))
            $(authorDiv).firstChild.nodeValue = mySlides[this.current][3];
        if ($(timeDiv))
            $(timeDiv).firstChild.nodeValue = mySlides[this.current][4];
        if ($(dateDiv))
            $(dateDiv).firstChild.nodeValue = mySlides[this.current][5];
        if ($(cameraDiv))
            $(cameraDiv).firstChild.nodeValue = mySlides[this.current][6];
        if ($(statusDiv))
            $(statusDiv).firstChild.nodeValue = (this.current + 1) + ' / ' + this.total;
    },
    
    end: function() {
        if ($(titleDiv)) {
            new Effect.Fade(titleDiv, {
                to: 0.1,
                duration: 0.3,
                afterFinish: function() {
                    $(titleDiv).firstChild.nodeValue = 'The End';
                    new Effect.Appear(titleDiv, {duration: 0.3});
                }
            });
            
        }
            
        this.stop();
    }
}


Event.observe(window, 'load', function() { mySlideshow = new Slideshow(); });

Event.observe(document, 'keypress', 
    function(event) { 
        if (event.keyCode == Event.KEY_RIGHT) { 
            mySlideshow.stop();
            mySlideshow.next();
        } else if (event.keyCode == Event.KEY_LEFT) { 
            mySlideshow.stop(); 
            mySlideshow.previous(); 
        }
    }
);