var slideshowFader = {

    imgsArray : [],           // image file names (appended to imgPath)
    imgsAlt : [],             // title/alt text per image
    displayInterval : null,   // display duration in msec
    imgHeight : null,         // image height in px
    imgWidth : null,          // image width in px
    imgPath : null,           // images dir with an ending slash /
    homeDiv : null,           // name if image container in HTML

    newImgInc : null,         // next-image index
    timer : null,             // fade timer
    timer2 : null,            // display timer
    trans : null,             // percent opacity (0-100)
    fadeInterval : null,      // update fade opacity every 10 msec
    newImg : null,
    slideshowOn : false,      // boolean


    /**
     *  This image fade slideshow code was borrowed from http://www.artlines.co.uk/blog/8
     *    (see http://www.rumseys.co.uk/).
     *
     *  This method initiates a slideshow based on the following parameters:
     *    imgNames:    array of image file names on server (gets appended to imgPath)
     *    imgTitles:   array of descriptive text for "alt" and "title" image attributes
     *    imgPath:     webserver document path to images
     *    divName:     HTML name of div containing the slideshow images
     *    imgHeight:   numeric height of images in px (same for all images) [default=use IMG tag]
     *    imgWidth:    numeric width of images in px (same for all images)  [default=use IMG tag]
     *    displaySecs: numeric seconds to display each image [default=6 sec]
     *
     */
    initialize : function(imgNames, imgTitles, imgPath, divName, imgHeight, imgWidth, displaySecs)
    {
        this.homeDiv = document.getElementById(divName);
        if (!this.homeDiv || this.homeDiv == null) {
            alert('incorrect DIV name for slideshow.');
            return;
        }

        this.imgsArray = imgNames || new Array();
        this.imgsAlt = imgTitles || new Array();
        this.imgPath = imgPath || "images/";
        this.imgHeight = imgHeight;
        this.imgWidth = imgWidth;
        this.displayInterval = displaySecs ? displaySecs * 1000 : 6000;  // default=6 secs

        this.newImgInc = 1;
        this.timer = 0;
        this.timer2 = 0;
        this.trans = 0;
        this.fadeInterval = 10;  // msec
        this.newImg = null;
        this.slideshowOn = true;

        // if not provided, get image dimensions from HTML tag.
        // TBD: can also get dimensions from first image file
        var staticImg = this.homeDiv.getElementsByTagName("img")[0];
        if (staticImg) { 
            if (!this.imgHeight || this.imgHeight == null) { 
                this.imgHeight = staticImg.height.replace('px','');
            }
            if (!this.imgWidth  || this.imgWidth == null)  {
                this.imgWidth = staticImg.width.replace('px',''); 
            }
        }
        var self = this;
        this.homeDiv.onclick = function() { self.startStopSlideshow(); };

        // CSS
        this.homeDiv.style.float = "right"; 
        this.homeDiv.style.position = "relative";
        this.homeDiv.style.background = "#000";
        this.homeDiv.style.height = imgHeight + "px";
        // keep just in case:
        //width not needed: this.homeDiv.style.width = imgWidth + "px";
        //may be needed for IE dbl margin bug: this.homeDiv.style.display = "inline";
        //for IE only. just ignore: this.homeDiv.style.marginLeft = "-3px";

        this.beginSlideshow();
    },


    /** Return true if slideshow is running */
    isSlideshowOn : function() {
        return this.slideshowOn;
    },


    /** Start or stop the slideshow.  Assigned internally to image mouseclick. */
    startStopSlideshow : function() {
        if (this.slideshowOn) {
            if (this.timer) clearTimeout(this.timer);    // kill fade timer
            if (this.timer2) clearTimeout(this.timer2);  // kill next-slide timer
            this.timer = 0;
            this.timer2 = 0;
            this.trans = 0;
            var newTitle = this.homeDiv.title.replace(/ stop /, " start ");
            this.homeDiv.setAttribute("title", newTitle);      // next line for IE
            this.homeDiv.getElementsByTagName("img")[0].setAttribute("title", newTitle);
            this.slideshowOn = false;
        }
        else {
            this.slideshowOn = true;
            this.homefade(); 
        }
    },


    // ----------- Following methods are Private -----------


    //INITIATE THE SLIDE SHOW. PRELOAD IMAGE ELEMENTS
    beginSlideshow : function() {
        var homeimg = this.homeDiv.getElementsByTagName("img")[0];
        if (homeimg) { 
            homeimg.style.height = this.imgHeight + "px";
            homeimg.style.width = this.imgWidth + "px";
            homeimg.style.top = "0";
            homeimg.style.left = "0";
            homeimg.style.border = "0";
            homeimg.style.minHeight = "1px";
            homeimg.style.display = "block";

            homeimg.style.visibility = "hidden";  // hide default img specified in HTML
        }

        var preLoad = new Array();
        var numImages = this.imgsArray.length;

        // pick a starting image randomly and load it first
        this.newImgInc = this.chooseRandom(numImages);
        preLoad[this.newImgInc] = new Image(this.imgWidth, this.imgHeight);
        preLoad[this.newImgInc].src = this.imgPath + this.imgsArray[this.newImgInc];

        for (var j=0; j<numImages; j++) {
            preLoad[j] = new Image(this.imgWidth, this.imgHeight);
            preLoad[j].src = this.imgPath + this.imgsArray[j];
        };
        this.homefade();
    },


    //HOMEPAGE SLIDESHOW
    homefade : function() {
        if (!this.slideshowOn) return;

	this.newImg = document.createElement("img");
	this.newImg.src = this.imgPath+imgsArray[this.newImgInc];
        this.newImg.setAttribute('alt', "Photo of " + this.imgsAlt[this.newImgInc]);
        this.homeDiv.setAttribute('title', 
            ' ' + this.imgsAlt[this.newImgInc] + ' / Click image to stop slideshow ');
        this.newImg.setAttribute('title', this.homeDiv.title);  // for IE (alt vs. title)

        // CSS
        this.newImg.style.width = this.imgWidth + "px";
        this.newImg.style.height = this.imgHeight + "px";
        this.newImg.style.position = "absolute";
        this.newImg.style.top = "0";
        this.newImg.style.left = "0";
        this.newImg.style.border = "0";
        this.newImg.style.minHeight = "1px";
        this.newImg.style.display = "block";

	this.newImg.style.opacity = "0";
	this.newImg.style.filter = "alpha(opacity=0)";
	this.homeDiv.appendChild(this.newImg);
	if (this.newImgInc >= (this.imgsArray.length-1)) {
		this.newImgInc = 0;
	} else {
		this.newImgInc++;
	};
        var self = this;
	this.timer = setInterval(function() { self.homefadeTrans(); }, this.fadeInterval);	
    },


    //FADE IN NEW IMAGE
    homefadeTrans : function() {
	if (this.trans == 100) {
            clearTimeout(this.timer);
            this.timer = 0;
            this.trans = 0;

            var homeimg = this.homeDiv.getElementsByTagName("img")[0];
            if (homeimg) { this.homeDiv.removeChild(homeimg); }		
            var self = this;
            this.timer2 = setTimeout(function() { self.homefade(); }, this.displayInterval);
            return false;
        };
        if (this.newImg) {
            this.newImg.style.opacity = this.trans/100;
            this.newImg.style.filter = "alpha(opacity="+this.trans+")";
        }
        this.trans++;
    },


    //RANDOM INDEX FOR STARTING IMAGE
    chooseRandom : function(range) {
            if (!range || range == null || range < 1) { return 0; }
            if (Math.random) {
                return Math.round(Math.random() * (range-1));
            }
            else {
                return ((new Date()).getTime() / 1000) % range;
            }
    }
};