// CSS Linked Photo Shuffler v1.1 by
//   Carl Camera
//   http://iamacamera.org 
//
// SetOpacity Function and inpiration from Photo Fade by
//   Richard Rutter
//   http://clagnut.com
//
// License: Creative Commons Attribution 2.5  License
//   http://creativecommons.org/licenses/by/2.5/
//

// Customize your photo shuffle settings
// 
// * Surround the target <img /> with an anchor <a> and <div>. 
//   specify unique id= in all three
// * The first and final photo displayed is in the html <img> tag
// * The image array contains paths to photos you want in the rotation. 
//   If you want the first photo in the rotation, then it's best to
//   put it as the final array image.  All photos must be same dimension
// * The Href array contains the link you want associated with each image
//   each image must have a corresponding link.
// * The rotations variable specifies how many times to repeat array.
//   images. zero is a valid rotation value.

var gblPauseSeconds;
var gblFadeSeconds;
var gblRotations;
var gblDeckSize;
var gblOpacity;
var gblOnDeck;
var gblStartImg;
var gblStartHref;
var gblImageRotations;
var gblAlt;
var gblImg;
var gblHref;
var gblPhotoShufflerDivId;
var gblPhotoShufflerImgId;
var gblPhotoShufflerAnchorId;

function photoShufflerInit(divID, anchorID, imgID, images, alts, hrefs, pauseSeconds, fadeSeconds, rotations)
{
//alert("photoShufflerInit\n\n" +
//"divID = " + divID + "\n" +
//"anchorID = " + anchorID + "\n" +
//"imgID = " + imgID + "\n" +
//"pauseSeconds = " + pauseSeconds + "\n" +
//"fadeSeconds = " + fadeSeconds + "\n" +
//"rotations = " + rotations);

    gblPhotoShufflerDivId = divID;
    gblPhotoShufflerImgId = imgID;
    gblPhotoShufflerAnchorId = anchorID;

    gblAlt = alts;
    gblImg = images;
    gblHref = hrefs;  
    
    gblDeckSize = gblImg.length;
    
    gblPauseSeconds = pauseSeconds;
    gblFadeSeconds = fadeSeconds;
    gblRotations = rotations;
    
    gblOpacity = 100;
    gblOnDeck = 1;
    gblImageRotations = gblDeckSize * (gblRotations+1);

    photoShufflerLaunch();
}

function photoShufflerLaunch()
{
    var thediv = document.getElementById(gblPhotoShufflerDivId);    
    var theimg = document.getElementById(gblPhotoShufflerImgId);
    var theanchor = document.getElementById(gblPhotoShufflerAnchorId);

    gblStartImg = theimg.src; // save away to show as final image
    gblStartHref = theimg.href; // save away to show as final image

    if (theanchor.href == '')
    {
        thediv.innerHTML =
            "<img id=\"" + theimg.id + "\" alt=\"" + theimg.alt + "\" src=\"" + theimg.src + "\" runat=\"server\" />";        
    }

    thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';    

    setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

function photoShufflerFade()
{
    var theimg = document.getElementById(gblPhotoShufflerImgId);

    // determine delta based on number of fade seconds
    // the slower the fade the more increments needed
    var fadeDelta = 100 / (30 * gblFadeSeconds);
    
    // fade top out to reveal bottom image
    if (gblOpacity < 2*fadeDelta ) 
    {
      gblOpacity = 100;
      
      // stop the rotation if we're done
      if (gblImageRotations < 1)
      {
        setOpacity(theimg,0);
        return;
      }
      
      photoShufflerShuffle();
      
      // pause before next fade
      setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
    }
    else
    {
      gblOpacity -= fadeDelta;
      setOpacity(theimg,gblOpacity);
      setTimeout("photoShufflerFade()",30);  // 1/30th of a second
    }
}

function photoShufflerShuffle()
{
    var thediv = document.getElementById(gblPhotoShufflerDivId);
    var theimg = document.getElementById(gblPhotoShufflerImgId);

    // copy div background-image to img.src
    theimg.src = gblImg[gblOnDeck];

    if (gblHref[gblOnDeck] != '')
    {
        thediv.innerHTML =
            "<a id=\"" + gblPhotoShufflerAnchorId + "\" href=\"" + gblHref[gblOnDeck] + "\" runat=\"server\">" +
            "<img id=\"" + theimg.id + "\" alt=\"" + gblAlt[gblOnDeck] + "\" src=\"" + theimg.src + "\" runat=\"server\" />" +
            "</a>";            
    }
    else
    {    
        thediv.innerHTML =
            "<img id=\"" + theimg.id + "\" alt=\"" + gblAlt[gblOnDeck] + "\" src=\"" + theimg.src + "\" runat=\"server\" />";
    }
   
    // set img opacity to 100
    setOpacity(theimg,100);

    // shuffle the deck
    gblOnDeck = ++gblOnDeck % gblDeckSize;

    // decrement rotation counter
    if (--gblImageRotations < 1)
    {
        // insert start/final image if we're done
        gblImg[gblOnDeck] = gblStartImg;
        gblHref[gblOnDeck] = gblStartHref;
    }

    // slide next image underneath
    thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) 
{
    opacity = (opacity == 100)?99.999:opacity;

    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";

    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}