//<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.
//
//		To jump to a particular image call the ShowIndex(idx) function.

// 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

// 28/09/06 - Mod to reduce timeout by transition time for FF

// 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;
	this.TRANSITION_TIME = 50;
	this.TRANSITION_CHANGE = 0.05;
	this.TRANSITION_PERIOD = 1000;	// Time in ms to complete the transition
	this.MIN_PERIOD = 100;
	if (repeat == "nocycle") this.mbRepeat = 0;
	var me = this;
	this.bLoadingImage = false;

	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
		{
			var timeout;
			if (me.ml_SLIDE_INTERVAL.length) 
			{
				switch (GetAgentType())        				
				{
				case	mlMSIE:
					timeout = me.ml_SLIDE_INTERVAL[me.mlImageSrcIndex + 1];
					break;
				case	mlFIREFOX:
					timeout = me.ml_SLIDE_INTERVAL[me.mlImageSrcIndex + 1] - me.TRANSITION_PERIOD;
					if (timeout < me.MIN_PERIOD) timeout = me.MIN_PERIOD;
					break;
				}
				me.mlTimerHandle = StartTimeout(timeout, me.SlideshowTimer);
			}
			else 
			{
				switch (GetAgentType())        				
				{
				case	mlMSIE:
					timeout = me.ml_SLIDE_INTERVAL;
					break;
				case	mlFIREFOX:
					timeout = me.ml_SLIDE_INTERVAL - me.TRANSITION_PERIOD;
					if (timeout < me.MIN_PERIOD) timeout = me.MIN_PERIOD;
					break;
				}
				me.mlTimerHandle = StartTimeout(timeout, me.SlideshowTimer);
			}
		}
		catch(e)
		{
			alert(e);
		}
	}
	
	this.FadeImage = function()
	{
		if (me.mfOpacity == 0)
		{
			me.moTopImg.src = me.GetElementsByName(me.msImageSrc)[me.mlImageSrcIndex].value;
		}
		me.mfOpacity += me.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(me.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.bLoadingImage)
				{
					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();
					me.bLoadingImage = false;
				}
			}
		}
		catch(e) { HandleError(e); }
	}
	
	this.ShowIndex = function(index)
	{
		try
		{
			var lCount = 0;
			lCount = me.GetElementsByName(me.msImageSrc).length;
			if (index < 0 || index >= lCount) return;
			me.mlImageSrcIndex = index;
			// Stop anything from happening
			StopTimeout(me.mlTimerHandle);
			// Start new timer
			me.mbInTimeout = false;
			me.mfOpacity == 0;
			if (me.moImage.style.opacity != null) 
			{
				me.moTopImg.style.opacity = 0;
				me.moTopImg.src = me.moImage.src;
			}
			if (me.moImage.filters) 
			{
				if (!me.bLoadingImage)
				{
					if (me.moImage.filters.length) me.moImage.filters[0].Apply();
				}
			}
			// Set the image
			me.moImage.src = me.GetElementsByName(me.msImageSrc)[me.mlImageSrcIndex].value;
			me.StartSlideInterval();
		}
		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.parentNode;
					this.moTopImg = this.moImage.ownerDocument.createElement('img');
					par.appendChild(this.moTopImg);
					this.moTopImg.className = this.moImage.className;
					this.moTopImg.style.opacity = 0;
					this.moTopImg.src = this.moImage.src;
					this.moTopImg.border = this.moImage.border;
					this.moTopImg.style.zIndex = 100;
					this.moTopImg.style.position = "absolute";
					var oElement = this.moImage;
					var top = 0, left = 0;
					do
					{	
						left += oElement.offsetLeft;
						top  += oElement.offsetTop;
						oElement = oElement.offsetParent;
					}
					while (oElement && oElement.tagName.toUpperCase() != "DIV");
					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>