// ----------------------------------------------------------------------
// dhaus.imagerotator.js
// Dynamically rotate images
// ----------------------------------------------------------------------
// designed for use with the DesignHaus.Common.WebControls.ImageRotator 
// control which looks in a folder for image files, and returns an <img> 
// with a | separated list of image filenames as the rel attribute: 
//    <img src="file1.jpg" rel="file1.jpg|file2.gif|file3.jpg|file4.png" id="ir1"/>
// This script is used to parse the image list and use a timer to rotate
// or fade through the images in sequence. The ImageRotator control
// returns a random image from the folder as the src=""
//
// Work in progress - cross-fade the images
//   ideas: clone the img node, place new image src as next in seq (or wrap to start if end)
//   position new image abosolutely on top of current, timeout opacity from 0 to 100
//   then update current with new, and reset the fade
//
// ----------------------------------------------------------------------
// Dominic Winsor, Design Haus UK Ltd.
// 2007-09-27
// ----------------------------------------------------------------------

// configuration items
var separator  = "|";

// internal variables
var instances = new Array();


// start the rotator
// imageID = element.ID in the DOM
// timeOn  = number of milliseconds for which to display the image
function initImageRotator( imageID, rotateTime )
{
    // get reference to image
    var ctl = document.getElementById(imageID);
    
    // other config vars
    var instance  = instances.length;
    var imgPath   = "";
    var imgList   = new Array();
    var imgIndex  = 0;
    var imgCount  = 0;
    
    // read value of rel attribute
    // use getAttribute as ctl.rel only works in MSIE (not a valid attrib for IMG
    // TODO: switch this attribute for a valid one for an IMG!
    var imgString = imgString = ctl.getAttribute('rel');  
        
    // quit if no images in imagestring
    if (imgString.length==0)  return;
    
    // trim any trailing separators
    if (imgString.charAt(imgString.length-1)==separator) 
        imgString = imgString.substr(0,imgString.length-1);
    
    // make an array of images from the string
    imgList  = imgString.split(separator);
    imgCount = parseInt(imgList.length-1);
    
    // get a path based on the original image
    imgPath = ctl.src.substring(0,ctl.src.lastIndexOf("/")) + "/";
        
    // copy vars for this instance back to the instances Array
    // this allows many instances to run
    var config = new Array(imageID, imgPath, imgList, imgIndex, imgCount, rotateTime);
    instances[instance] = config;
    
    // start the rotation!
    if (imgCount>0)
        rotateImage(instance);
    
}


// rotate images (recursive)
function rotateImage( instance )
{

    // read config data
    var config = instances[instance];
    
    // unpack config vars
    var imageID  = config[0];
    var imgPath  = config[1];
    var imgList  = config[2];
    var imgIndex = config[3];
    var imgCount = config[4];
    var rotateTime = config[5];
    
    // get reference to image
    var ctl = document.getElementById(imageID);

    // exit if no id, or id outside of range, or no control to play with
    if (imgIndex==NaN || imgIndex>imgList.length ) return;

    // update the image
    ctl.src = imgPath  + imgList[imgIndex];
  
    // move to next article, or wrap around to start if at end
    imgIndex = (imgIndex<imgCount) ? imgIndex+1 : 0;
    
    // update config array for this instance
    instances[instance] = new Array(imageID, imgPath, imgList, imgIndex, imgCount, rotateTime);
    
    // call self, after a brief delay
    window.setTimeout("rotateImage("+instance+")",rotateTime);
    
}