var slideshow = 
{
	label : "Show Image",
	increment : 2,
	delay : 3,

	fade : function(blnLoop)
	{
		// set ourselves a timer (will increment every second until it reaches this.delay)
		this.timer = (typeof this.timer == "undefined")? 0 : this.timer;

		// simple preload check!
		if (typeof this.preload == "undefined") this.next = (this.slides[this.current + 1])? this.current + 1 : 0;
		this.preload = (this.slides[this.next].complete == true)? true : false;

		// safari can't tell if an image has loaded!
		if (!this.slides[this.next].complete) this.preload = true;

		// have we reached our slide delay yet?
		if (this.timer >= this.delay && this.preload == true)
		{
			// opacity starts at 100 then reduces by this.increment each loop
			this.opacity = (typeof this.opacity == "undefined")? 100 : this.opacity - this.increment;

			// set our next slide to be the one after the current one, otherwise it's the first one
			this.next = (this.slides[this.current + 1])? this.current + 1 : 0;

			// set opacity css and also a filter for older IE
			this.slides[this.current].style.opacity = this.opacity / 100;
			this.slides[this.next].style.opacity = (100 - this.opacity) / 100;
			this.slides[this.current].style.filter = "alpha(opacity=" + this.opacity + ")";
			this.slides[this.next].style.filter = "alpha(opacity=" + (100 - this.opacity) + ")";

			if (this.opacity > 0)
			{
				// during the animation both current and next slide should be visible
				this.slides[this.current].style.display = "block";
				this.slides[this.next].style.display = "block";
			}
			else
			{
				// once opacity has reached zero we can hide the current slide
				this.slides[this.current].style.display = "none";
				this.preload = false;
			}

			if (blnLoop != false)
			{
				// if the next increment won't take us below zero then continue
				if ((this.opacity - this.increment) >= 0)
				{
					setTimeout(function() { slideshow.fade(); }, 40);
				}
				else
				{
					// move onto the next slide
					this.current = this.next;
	
					// reset variables
					this.opacity = 100;
					this.timer = 0;
	
					// restart the loop
					setTimeout(function() { slideshow.fade(); }, 40);
				}
			}
		}
		else
		{
			// add a second onto our timer
			this.timer++

			// restart our loop after a second
			setTimeout(function() { slideshow.fade(); }, 1000);
		}
	},

	setup : function()
	{
		// all divs in the document
		var arrSlideDivs = document.getElementsByTagName("div");

		// will become array of all slideshows
		var arrSlideshows = new Array();

		// will become array of all button sets
		var arrSlideButtons = new Array();

		// loop through all divs in the document
		for (var i = 0; i < arrSlideDivs.length; i++)
		{
			// if the div contains the class "slideshow"
			if (arrSlideDivs[i].className.indexOf("slideshow") != -1)
			{
				// start giving the slideshows numbers and increment as we loop through
				intSlideshows = (typeof intSlideshows == "undefined")? 0 : intSlideshows + 1;

				//start adding the slideshow divs into the slideshows array
				arrSlideshows[intSlideshows] = arrSlideDivs[i];
			}
		}

		// loop through all slideshows
		for (var i = 0; i < arrSlideshows.length; i++)
		{
			// an array of this slideshow's images
			arrSlides = arrSlideshows[i].getElementsByTagName("img");

			// empty arrays for our buttons and button labels
			var arrSlideLabels = new Array();
			var arrSlideAnchors = new Array();

			// only add the slide link 
			if (arrSlideshows[i].className.indexOf("manual") != -1)
			{
				// create a holder for our slide links
				arrSlideButtons[i] = document.createElement("span");
				arrSlideButtons[i].className = "buttons";

				// add the link button's holder to the slideshow
				arrSlideshows[i].appendChild(arrSlideButtons[i]);
			}

			// loop through all slides within the current slideshow
			for (var j = 0; j < arrSlides.length; j++)
			{
				// grab image source and image title
				var strSlideSource = arrSlides[j].getAttribute("src");
				var strSlideTitle = arrSlides[j].getAttribute("title");

				// at this point, if the slideshow contains a class of "automatic", don't create any buttons
				if (arrSlideshows[i].className.indexOf("automatic") != -1)
				{
					this.slides = arrSlides;

					// make the slideshow start on the first slide
					this.current = 0;

					// start fading the first slide
					if (j == 0) slideshow.fade();

					// set all other slides to transparent
					else
					{
						arrSlides[j].style.opacity = 0;
						arrSlides[j].style.filter = "alpha(opacity=0)";
						arrSlides[j].style.display = "none";
					}
				}
				else
				{
					// only the first slide should be visible
					arrSlides[j].style.display = (j == 0)? "block" : "none";

					// create new links and their number labels
					arrSlideAnchors[j] = document.createElement("a");
					arrSlideLabels[j] = document.createTextNode(j + 1);

					// set the link href so people can right click and save images from the link
					arrSlideAnchors[j].setAttribute("href", strSlideSource);

					// give the class of "active" to the active link
					arrSlideAnchors[j].className = (j == 0)? "active" : "";

					// if the image has a title, append it to the new link's title
					strSlideTitle = (strSlideTitle)? (j + 1) + ", '" + strSlideTitle + "'" : (j + 1);
					arrSlideAnchors[j].setAttribute("title", slideshow.label + " " + strSlideTitle);

					// change slide when the link is clicked
					arrSlideAnchors[j].onclick = function()
					{
						slideshow.slide(this);
						return false;
					}

					// if our tooltip variable exists then enable them
					if (tooltip)
					{
						arrSlideAnchors[j].onmouseover = function()
						{
							tooltip.title = this.getAttribute("title");
							this.setAttribute("title", "");

							tooltip.show();
						}
		
						arrSlideAnchors[j].onmouseout = function()
						{
							this.setAttribute("title", tooltip.title);
							tooltip.hide();
						}
					}

					// add the labels to the links
					arrSlideAnchors[j].appendChild(arrSlideLabels[j]);

					// add each link to the slideshow
					arrSlideButtons[i].appendChild(arrSlideAnchors[j]);
				}
			}
		}
	},

	slide : function(objAnchor)
	{
		// the slides that make up this link's slideshow
		arrSlides = objAnchor.parentNode.parentNode.getElementsByTagName("img");

		// loop through all the slides
		for (var i = 0; i < arrSlides.length; i++)
		{
			// hide all the slides except the one we want
			arrSlides[i].style.display = (objAnchor.getAttribute("href") != arrSlides[i].getAttribute("src"))? "none" : "block";
		}

		// all slide links
		arrSlideAnchors = objAnchor.parentNode.getElementsByTagName("a");

		// loop through all slide links
		for (var i = 0; i < arrSlideAnchors.length; i++)
		{
			// only the current slide's link should have the class "active"
			arrSlideAnchors[i].className = (arrSlideAnchors[i].href != objAnchor.href)? "" : "active";
		}
	}
}


dom.onload
(
	function()
	{
		// start slideshows
		slideshow.setup();
	}
);