// JavaScript Document

function Slideshow(containerId)
{		
	var strHtml = "";
	
	var strImages = new Array();
	var strTitles = new Array();
	var strDescriptions = new Array();
	var strUrls = new Array();
	
	var intSlideSpeedMs = 0;
	var intSlideTimeoutMs = 0;
	var intCaptionSpeedMs = 0;
	
	var intSlideHeight = parseInt($("#" + containerId).css("height"));
	var intSlideWidth = parseInt($("#" + containerId).css("width"));
	
	// html required for slideshow
	strHtml += '<div id="slides" style="display:none">';
	strHtml += '</div>';
	strHtml += '<div id="caption">';
	strHtml += '    <div id="caption_background"></div>';
	strHtml += '    <div id="caption_textbox">';
	strHtml += '        <p id="caption_title">Title</p><span id="caption_chevron">></span>';
	strHtml += '        <p id="caption_desc">Caption</p>';
	strHtml += '    </div>';
	strHtml += '    <a id="caption_link"></a>';
	strHtml += '</div>';
	strHtml += '<img id="preload_anim" src="images/spinner.gif" height="51" width="51" alt="" />';
	
	// Insert required html into slideshow container
	$("#" + containerId).html(strHtml);
	
	// Read xml config file
	$.get("slideshow.xml", {}, function (xml)
	{
		strHtml="";
		
		// Get config values
		intSlideSpeedMs = parseInt($(xml).find("slide").parent().attr("slideSpeedMs"));
		intSlideTimeoutMs = parseInt($(xml).find("slide").parent().attr("slideTimeoutMs"));
		intCaptionSpeedMs = parseInt($(xml).find("slide").parent().attr("slideCaptionSpeedMs"));
		
		// Iterate 'slide' nodes
		$(xml).find("slide").each(function (i)
		{
			// Fill arrays from xml data
			strImages.push($(this).find("slideImage").text());
			strTitles.push($(this).find("slideTitle").text());
			strDescriptions.push($(this).find("slideDesc").text());
			strUrls.push($(this).find("slideUrl").text());
			
			// Create image for each slide
			strHtml += '<img src="' + $(this).find("slideImage").text() + '" height="' + intSlideHeight + 
				'" width="' + intSlideWidth + '" alt="' + i + '"' + ' />';
		});
		
		// Insert image 'stack' into document
		$("#slides").html(strHtml);
		
		// Preload first image
		preloadImage(0);
	});
	
	function preloadImage(index)
	{
		if (index < strImages.length)
		{
			// Preload specified image in images array,
			// calling imageLoaded when done
			objImage = new Image();
			objImage.onload = imageLoaded;
			objImage.src = strImages[index];
			
			// Show preload animation
			$("#preload_anim").css("display","block");
		}
	}
	
	function imageLoaded()
	{
		// Hide preload animation
		$("#preload_anim").css("display","none");
		
		// Show image stack
		$("#slides").css("display","block");
		 
		// Show caption overlay ensuring it is z-ordered just above image stack
		$("#caption").css("z-index",strImages.length+1);
		$("#caption").css("display","block");
		 
		// Begin slideshow
		cycleSlides();
	}
	
	function cycleSlides()
	{
		// Cycle through slides, calling updateCaption after each slide is shown
		$("#slides").cycle({fx:'fade', speed:intSlideSpeedMs, timeout:intSlideTimeoutMs, after:updateCaption});
	}

	function updateCaption()
	{
		// Get index of current slide
		var index = parseInt(this.alt);
		
		// Position textbox just outside viewable area
		$("#caption_textbox").css("top", intSlideHeight);
		
		// Update caption title, description and url
		$("#caption_title").text(strTitles[index]);
		$("#caption_desc").text(strDescriptions[index]);
		$("#caption_link").attr("href", strUrls[index]);
		
		// Slide caption text up from bottom
		$("#caption_textbox").animate({top:0}, intCaptionSpeedMs);
	}
}