/**
 * crossfader.js
 * crossfades one image with another
 */
document.write('<style type="text/css">div.crossfade { visibility:hidden; }</style>');
/**
 * crossfader object
 */
var crossfader = {
    /**
		 * @var mixed array of image objects
		 */
    imgObjArray: null,
    /**
		 * @var integer internal counter for images
		 */
		counter: 0,
		/**
		 * @var mixed internal timeout
		 */
		to: null,
		/**
		 * @var mixed internal timeout
		 */
		fadeto: null,
		/**
		 * @var array of image file names
		 */
		imgArray: null,
		/**
		 * @var string directory the images are stored in
		 */
		imgDir: '',
		/**
		 * @var string image on top
		 */
		topImage: 'image0',
		/**
		 * @var string image on bottom
		 */
		bottomImage: 'image1',
		/**
		 * @var string opacity on top
		 */
		topOpacity: 100,
		/**
		 * @var string opacity on bottom
		 */
		bottomOpacity: 0,
		/**
		 * @var integer counter
		 */
		counter: 0,
		/**
		 * @var boolean whether the animation has finished or not
		 */
		finished: false,
		/**
		 * @var boolean whether the slides are running or not
		 */
		running: false,
    /**
     * init: called when the page is loading, writes image tag and stores slides if more than one
     */
    init: function(imgArr)
    {
	      if (imgArr.length > 0) {
		    		if (imgArr.length > 1) {
								document.write('<div id="image0" class="static"><a href="/empire/" onclick="crossfader.crossfade();return false;"><img src="/images/empire/' + imgArr[0].filename + '" width="' + imgArr[0].width + '" height="' + imgArr[0].height + '" alt="' + imgArr[0].alt + '" title="' + imgArr[0].title + '" /></a></div>');
								document.write('<div id="image1" class="crossfade"><a href="/empire/" onclick="crossfader.crossfade();return false;"><img src="/images/empire/' + imgArr[1].filename + '" width="' + imgArr[1].width + '" height="' + imgArr[1].height + '" alt="' + imgArr[1].alt + '" title="' + imgArr[1].title + '" /></a></div>');
				    } else {
        				document.write('<img src="/images/empire/' + imgArr[0].filename + '" width="' + imgArr[0].width + '" height="' + imgArr[0].height + '" alt="' + imgArr[0].alt + '" title="' + imgArr[0].title + '" />');
						}
				}
    },
    /**
		 * start: preloads images and starts the slideshow
		 */
    start: function()
    {
        crossfader.changeOpacity(crossfader.topImage, crossfader.topOpacity);
        crossfader.changeOpacity(crossfader.bottomImage, crossfader.bottomOpacity);
				
        crossfader.to = window.setTimeout("crossfader.crossfade()", 2000);
    },
		/**
		 * crossfade
		 * cross-fades images
		 */
		crossfade: function()
		{
        crossfader.topOpacity -= 5;
				crossfader.bottomOpacity += 5;
				if (crossfader.topOpacity == 0) {
				    // make the bottom image opaque
            crossfader.changeOpacity(crossfader.bottomImage, 100);
						// make the top image transparent
            crossfader.changeOpacity(crossfader.topImage, 0);
						// cancel animation
						clearTimeout(crossfader.fadeto);
				} else {
            crossfader.changeOpacity(crossfader.topImage, crossfader.topOpacity);
            crossfader.changeOpacity(crossfader.bottomImage, crossfader.bottomOpacity);
    				crossfader.fadeto = window.setTimeout("crossfader.crossfade()", 50);
				}
		},
    /** changeOpacity
     * change the opacity of an element
     * @param string layer_id id given to the element
     * @param integer opacity - number between 0 and 100
     */
    changeOpacity: function(layer_id, opacity)
    {
        if (obj = this.getObj(layer_id)) {
				    obj.style.visibility = 'visible';
            obj.style.opacity = (opacity / 100);
            obj.style.MozOpacity = (opacity / 100);
            obj.style.KhtmlOpacity = (opacity / 100);
            obj.style.filter = "alpha(opacity=" + opacity + ")";
    		}
    },
		/**
     * getObj
     * returns a reference to the element with id specified as an argument
     * @param string layer_id
     */
    getObj: function(layer_id)
    {
        obj = null;
    		if (document.all || document.getElementById) {
            var obj = document.all? document.all[layer_id] : document.getElementById? document.getElementById(layer_id) : "";
    				if (obj != "" && obj != null) {
    				    return obj;
    				}
    		}
    		return false;
    }

		 
};
/**
 * initialise scroller and slideshow on page load
 */
window.onload = function()
{
		crossfader.start();
}