//<script language="JavaScript">
//	KLIXO SLIDESHOW JAVASCRIPT LIBRARY - by Daniel Larsen
//	(c)2004 Klixo Ltd 2004. Some rights reserved:
//	Free for use by Klixo customers. All other use restricted, 
//	contact support@klixo.net.nz for details

// Dependancies:	klixo.js
// Instructions:	
//		The slideshow code cycles through a slideshow of images using a 
//		predefined transistion effect and slide interval. A slide is changed
//		by resetting the src property of an IMAGE element with the given ID.
//		The list of urls of slides to cycle through is derived from an array of 
//		INPUT elements (typically of type="hidden") with the given name.
//		The interval between sides is the fourth parameter in the call. This
//		may be set to a single value in which case the interval is the same 
//		between all images or set to an array (for example Array(1000, 500, 2000) )
//		The first parameter is the time before the first image is changed and 
//		subsequent values are for the INPUT image values. All times are in 
//		milliseconds. If the slideshow should not repeat upon completion set the 5th 
//		parameter to "nocycle"
//		The slideshow image must have a style of: 
//		img.slideshow
//		{
//			filter: progid:DXImageTransform.Microsoft.Fade(duration=1);
//		} 
//		..to fade correctly in MSIE
//
//		For example:
// 
//		Javascript:
//		new kxSlideshow("oSlideshowImage", "SlideshowImageSrc","",Array(3000, 1000, 2000, 5000), 1);
//
//		HTML:
//		<img src="image1.jpg" alt="image1" id="oSlideshowImage" />	
//		<input type="hidden" name="SlideshowImageSrc" value="image2.jpg"/>
//		<input type="hidden" name="SlideshowImageSrc" value="image3.jpg"/>
//		<input type="hidden" name="SlideshowImageSrc" value="image4.jpg"/>
//
//		This shows image1 for 3 seconds, image2 for 1 second, image3 for 2 seconds
//		and image4 for 5 seconds before cycling back to image2 for 1 second and so on.


// Slideshow routine
// To initialise a slideshow create an object e.g.
// new kxSlideshow(element_id, image_src, image_path, interval) where...
//   element_id - is the ID of the image
//   image_src  - is the name for each of the image sources
//   image_path - is the path to the image sources
//	 interval		- is the time between changes

// Create a slideshow. Call this function from the body onload event
function kxSlideshow(element_id, image_src, image_path, interval, repeat)
{
	this.mlImageSrcIndex = -1;				// Index to current image
	this.mlTimerHandle;
	this.ml_SLIDE_INTERVAL = 5000;	// Milliseconds
	this.moImage = null;						// Image
	this.msImageSrc = image_src;		// Name of source of images
	this.msImagePath = "";
	this.mfOpacity = 0.0;
	this.mbRepeat = 1;
	if (repeat == "nocycle") this.mbRepeat = 0;
	var me = this;
	
	this.GetElementsByName = function(sName)
	{
		return document.getElementsByName(sName);
	}
	
	this.PreloadSlideImages = function()
	{
		var lCount = 0;
		var i = 0;
		lCount = this.GetElementsByName(this.msImageSrc).length;
		if (lCount > 1)
		{
			for (i = 0; i < lCount; i++)
				PreLoadImage(this.msImagePath + this.GetElementsByName(this.msImageSrc)[i].value);
		}
	}
	
	this.StartSlideInterval = function()
	{
		try
		{
		if (me.ml_SLIDE_INTERVAL.length) 
			me.mlTimerHandle = StartTimeout(me.ml_SLIDE_INTERVAL[me.mlImageSrcIndex + 1], me.SlideshowTimer);
		else 
			me.mlTimerHandle = StartTimeout(me.ml_SLIDE_INTERVAL, me.SlideshowTimer);
		}
		catch(e)
		{
			alert(e);
		}
	}
	
	this.FadeImage = function()
	{
		var TRANSITION_TIME = 50;
		var TRANSITION_CHANGE = 0.05;
		if (me.mfOpacity == 0)
		{
			me.moTopImg.src = me.GetElementsByName(me.msImageSrc)[me.mlImageSrcIndex].value;
		}
		me.mfOpacity += TRANSITION_CHANGE;
		me.moTopImg.style.opacity = me.mfOpacity;		
		if (me.moTopImg.style.opacity == 1) 
		{
			me.mfOpacity = 0;
			me.moImage.src = me.GetElementsByName(me.msImageSrc)[me.mlImageSrcIndex].value;
			me.moTopImg.style.opacity = 0;
			if (me.mbRepeat || me.mlImageSrcIndex != me.GetElementsByName(me.msImageSrc).length - 1)
			{
				me.StartSlideInterval();
			}
		}
		else me.mlTimerHandle = StartTimeout(TRANSITION_TIME, me.SlideshowTimer);
	}
	
	this.SlideImage = function()
	{
		var lCount = 0;
		lCount = me.GetElementsByName(me.msImageSrc).length;
		if (lCount > 1)
		{
			me.mlImageSrcIndex++;
			me.mlImageSrcIndex %= lCount;
			if (me.moImage.filters) 
			{
				if (me.moImage.filters.length) me.moImage.filters[0].Apply();
				me.moImage.src = me.GetElementsByName(me.msImageSrc)[me.mlImageSrcIndex].value;
			}
			else
			{
				if (me.moImage.style.opacity != null) 
				{
					this.FadeImage();
				}
			}
		}
	}	

	this.SlideshowTimer = function()
	{
		me.mbInTimeout = true;
		try
		{
			if (me.mfOpacity != 0) me.FadeImage();
			else
			{
				me.SlideImage();
				if (me.mfOpacity == 0)
				{
					var lCount = 0;
					lCount = me.GetElementsByName(me.msImageSrc).length;
					if (lCount > 1 && (me.mbRepeat || me.mlImageSrcIndex != me.GetElementsByName(me.msImageSrc).length - 1))
						me.StartSlideInterval();
				}
			}
		}
		catch(e) { }
		me.mbInTimeout = false;
	}
	
	// Allows images to be cycled through by clicking. Set the onclick event of the image to this function
	this.OnClick = function()
	{
		try
		{
			if (me.mbInTimeout) return;
			StopTimeout(me.mlTimerHandle);
			me.SlideshowTimer();
		}
		catch(e)
		{
			HandleError(e);
		}
	}
	
	this.OnReadyStateChange = function()
	{
		try
		{
			if (me.moImage.readyState == "complete")
			{
				if (me.moImage.filters)
				{
					if (me.moImage.filters.length)
						me.moImage.filters[0].Play();
				}
			}
		}
		catch(e) { HandleError(e); }
	}
	
	if (image_path != null) this.msImagePath = image_path;
	if (interval != null) this.ml_SLIDE_INTERVAL = interval;
	try
	{
		this.PreloadSlideImages();
		// Attach a state changed event to the customer image object
		this.moImage = document.getElementById(element_id);
		if (this.moImage != null)
		{
			switch (GetAgentType())        				
			{
			case	mlMSIE:
				if (this.moImage.attachEvent) 
				{
					this.moImage.attachEvent('onreadystatechange', this.OnReadyStateChange);
					this.moImage.attachEvent('onclick', this.OnClick);
				}
				break;
			case	mlFIREFOX:
				if (this.moImage.addEventListener) 
				{
					// Create another image and put it on top of the existing one
					var par = this.moImage.parentElement;
					this.moTopImg = this.moImage.ownerDocument.createElement('img');
					par.appendChild(this.moTopImg);
					this.moTopImg.style.opacity = 0;
					this.moTopImg.src = this.moImage.src;
					this.moTopImg.style.zIndex = 100;
					this.moTopImg.style.position = "absolute";
					this.moTopImg.width = this.moImage.width;
					this.moTopImg.height = this.moImage.height;
					var oElement = this.moImage;
					var top = 0, left = 0;
					do
					{	
						left += oElement.offsetLeft;
						top  += oElement.offsetTop;
						oElement = oElement.offsetParent;
					}
					while (oElement && oElement.currentStyle && oElement.currentStyle.position != "absolute");
					this.moTopImg.style.left = left + "px";
					this.moTopImg.style.top = top + "px";
					this.moTopImg.addEventListener('click', this.OnClick, true);
					this.moImage.addEventListener('click', this.OnClick, true);
				}
				break;
			}
			// Set it off
			this.StartSlideInterval();
		}
	}
	catch(e)
	{
		HandleError(e);
	}
}

// </script>