// SlideShow Object
// parameter ssImages = array of images
// parameter speed = integer representing transition speed between photos
// parameter delay = integer representing length of time any photo displays before transitioning to another
// parameter playerImages = array of images for slideshow player
// parameter playerButtons = array of element names serving as anchors for launching slideshow actions
// parameter elementGroups = array of element names serving as targets for image viewing


var SShow = null;

function SlideShowInit(ssImages, speed, delay, playerImages, playerButtons, elementGroups)
{
    
    // Hide the splash image:
    //var splashElementID = elementGroups[2];
    //document.getElementById(splashElementID).style.visibility = "hidden";
    
    
    // Initial Configuration
    SShow = new SlideShow(ssImages, speed, delay, playerImages, playerButtons, elementGroups);
    
    changeOpacity(0, SShow.portraitElementGroup[0]);
    changeOpacity(0, SShow.landscapeElementGroup[0]);
    setOrientation();
    
    setTimeout("opacityTransition(0, 100)", SShow.speed);

}

function SlideShow(ssImages, speed, delay, playerImages, playerButtons, elementGroups)
{
    //properties
    this.images = ssImages;
    this.playImages = playerImages[0];
    this.pauseImages = playerImages[1];
    this.ffwdImages = playerImages[2];
    this.rewdImages = playerImages[3];
    
    this.speed = speed;
    this.delay = delay;
    this.intervalID = 0;
    
    this.currentImageIndex = 0;
    this.initialStart = true;
    this.isPlaying = false;
    this.recentPauseClick = false;
    this.currentOrientation = ""; // "portrait" or "landscape"

    this.portraitElementGroup = elementGroups[0];
    this.landscapeElementGroup = elementGroups[1];

    this.rewindButtonID = playerButtons[0];
    this.playBtnID = playerButtons[1];
    this.forwardButtonID = playerButtons[2];
    
}

function playButtonToggle()
{
    if(SShow)
    {
        var btn = document.getElementById(SShow.playBtnID);
        if(SShow.isPlaying)
        {
            btn.src = SShow.pauseImages[1].src;
        }
        else if(SShow.recentPauseClick)
        {
            // mouse is still hovering over the play button after it was clicked into pause mode
            SShow.recentPauseClick = false;
            btn.src = SShow.playImages[0].src;
        }
        else
        {
            if(btn.src == SShow.playImages[0].src) // normal play button showing
                btn.src = SShow.playImages[1].src;
            else if(btn.src == SShow.playImages[1].src) // over play button showing
                btn.src = SShow.playImages[0].src;
        }
        btn = null;
    }
}

function backButtonToggle()
{
    if(SShow)
    {
        var btn = document.getElementById(SShow.rewindButtonID);
        if(btn.src == SShow.rewdImages[0].src) // normal rewind button showing
            btn.src = SShow.rewdImages[1].src;
        else if(btn.src == SShow.rewdImages[1].src) // over rewind button showing
            btn.src = SShow.rewdImages[0].src;
        btn = null;
    }
}

function forwardButtonToggle()
{
    if(SShow)
    {
        var btn = document.getElementById(SShow.forwardButtonID);
        if(btn.src == SShow.ffwdImages[0].src) // normal fast forward button showing
            btn.src = SShow.ffwdImages[1].src;
        else if(btn.src == SShow.ffwdImages[1].src) // over fast forward button showing
            btn.src = SShow.ffwdImages[0].src;
        btn = null;
    }
}

function setStartupState()
{
    clearInterval(SShow.intervalID);
    SShow.isPlaying = false;
    SShow.initialStart = true;    
    var playBtn = document.getElementById(SShow.playBtnID);
    playBtn.src = SShow.playImages[0].src;
    playBtn.title = "Play Slideshow";
    playBtn = null;
}

function play()
{
    if(SShow)
    {
        var playBtn = document.getElementById(SShow.playBtnID);
        if(!SShow.isPlaying)
        {
            SShow.intervalID = setInterval("imageFadeSwap()", SShow.speed);
            SShow.isPlaying = true;
            playBtn.title = "Pause Slideshow";
        }
        else if(SShow.isPlaying)
        {
            setStartupState();
            SShow.recentPauseClick = true;
            playBtn.title = "Play Slideshow";
        }
        playBtn = null;
    }
}
    
function skip(direction)
{
    if(SShow)
    {
        if(SShow.isPlaying)
        {
            setStartupState();
        }
        if(direction == "fwd")
        {
            if(SShow.currentImageIndex == (SShow.images.length - 1))
                SShow.currentImageIndex = 0;
            else
                SShow.currentImageIndex++;
        }
        else if(direction == "back") 
        {
            if(SShow.currentImageIndex == 0)
                SShow.currentImageIndex = SShow.images.length - 1;
            else
                SShow.currentImageIndex--;
        }
        // fade images out and in
        opacityTransition(100, 0);
        setTimeout("setOrientation()", SShow.speed);
        setTimeout("opacityTransition(0, 100)", SShow.speed);
    }
}
    
function imageFadeSwap()
{
    if(SShow.currentImageIndex == (SShow.images.length - 1))
        SShow.currentImageIndex = 0;
    else
        SShow.currentImageIndex++;
    
    /*
        An IMPORTANT Note:
        Javascript will encounter each expression, evaluate, and continue to the next expression.
        In terms of visual effects, this leads to unintended behaviors. The idea is to sequentially set the effects
        and you would *think* that each of the effects will complete before the next starts, but this is NOT the case.
        
        The goal here is to fade the current image out before fading the new image in, but because Javascript does not stop,
        what would happen is that the fade-out effect would begin only milliseconds before the fade-in effect begins,
        which results in unacceptable results. The way around this is to have your effects execute in small blocks and set a
        timeout to occur before the block executes. Effectively, this says, "...after so much time, do this".
        
        In this case, javascript evaluates the 3 expressions, but the last 2 don't actually start until the allotted timout
        has finished, allowing for the first visual fade-out effect to complete before starting the last 2.
    */
    
    
    if(SShow.initialStart)
    {
        // make config changes
        SShow.initialStart = false;
        clearInterval(SShow.intervalID);
        SShow.intervalID = setInterval("imageFadeSwap()", SShow.delay);
        
        // fade-out current element
        opacityTransition(100, 0);
        
        // fade in new element
        setTimeout("setOrientation()", SShow.speed);
        setTimeout("opacityTransition(0, 100)", parseInt(SShow.speed) + 50);
    }
    else
    {
        // fade-out current element
        opacityTransition(100, 0);
        
        // fade-in new element
        setTimeout("setOrientation()", SShow.speed);
        setTimeout("opacityTransition(0, 100)", parseInt(SShow.speed) + 50);
       
    }
}
    
//change the opacity for different browsers 
function changeOpacity(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
    object = null;
}
    
function opacityTransition(opacStart, opacEnd) { 
    //speed for each frame 
    var speed = Math.round(SShow.speed / 100); 
    var timer = 0; 
    var elementID = "";
    
    if(SShow.currentOrientation == "portrait")
        elementID = SShow.portraitElementGroup[0];
    else if(SShow.currentOrientation == "landscape")
        elementID = SShow.landscapeElementGroup[0];

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpacity(" + i + ",'" + elementID + "')",(timer * speed)); 
            timer++; 
        } 
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            { 
            setTimeout("changeOpacity(" + i + ",'" + elementID + "')",(timer * speed)); 
            timer++; 
        } 
    } 
}
    
function setOrientation()
{
    
    var pegOuterElement = document.getElementById(SShow.portraitElementGroup[0]);
        var legInnerElement = document.getElementById(SShow.landscapeElementGroup[1]);
        var legImgElement = document.getElementById(SShow.landscapeElementGroup[2]);
        
    var legOuterElement = document.getElementById(SShow.landscapeElementGroup[0]);
        var pegInnerElement = document.getElementById(SShow.portraitElementGroup[1]);
        var pegImgElement = document.getElementById(SShow.portraitElementGroup[2]);
    
    var newImage = SShow.images[SShow.currentImageIndex]
    if(newImage.width < newImage.height)
    {
        // Portrait orientation

        SShow.currentOrientation = "portrait";
        
        pegOuterElement.style.visibility = "visible";
        pegInnerElement.style.visibility = "visible";
        pegImgElement.style.visibility = "visible";
        
        legOuterElement.style.visibility = "hidden";
        legInnerElement.style.visibility = "hidden";
        legImgElement.style.visibility = "hidden";
        
        pegImgElement.src = newImage.src;        
        
    }
    else
    {
        // Landscape orientation
        
        SShow.currentOrientation = "landscape";
        
        legOuterElement.style.visibility = "visible";
        legInnerElement.style.visibility = "visible";
        legImgElement.style.visibility = "visible";
        
        pegOuterElement.style.visibility = "hidden";
        pegInnerElement.style.visibility = "hidden";
        pegImgElement.style.visibility = "hidden";
        
        legImgElement.src = newImage.src;        

    }
    
    pegOuterElement = null;
    pegInnerElement = null;
    pegImgElement = null;
    legOuterElement = null;
    legInnerElement = null;
    legImgElement = null;
}