// ____________________________________________________
//
// slideshow.js
//
// Functions for controlling the slideshow, navigation 
// between pictures and the sliding thumbnail window.
//
// This script dependant on the following variables
// to be defined elsewhere:
//	slideImages - array of URLs to images
//	slideLinks - array of URLs to navigate to on image click
//	slideExif - array of strings with Exif information for each slide
//	slideWidth - array of widths for each slide
//
// Some code used from the blending image slide show
// script from www.dynamicdrive.com. Other code from
// www.quirksmode.com.
//
// Brian Low 2006-03-01
// ____________________________________________________


var thumbs;                     // reference to thumbs div
var slider;                     // reference to slider div
var slide;                      // reference to slice img
var centering;			// reference to centering div
var isScrolling = 0;            // are we scrolling the thumbnails
var scrollOffset = 0;           // number of pixels to move the thumbnail each time the timer fires
var minScrollOffset;		// minimum allowed value for scrollOffset
var maxScrollOffset;		// maximum allowed value for scrollOffset
var scrollDelay = 25;           // interval between sliding thumbnails (milliseconds)
var slideSpeed = 2000;		// specify interval between each slide in the slideshow(milliseconds)
var isPlaying = 0;              // are we playing the slideshow
var currentImageIndex = 0;      // currently displayed image
var blendDuration = 500;        // duration of the blender filter in milliseconds
var debug = false;		// set to true to show debugging information
var lastTimeoutID = 0;		// return value from last call to setTimeout, used to reset timeout
var preloadImage;		// holder for the next preloaded image
var preloadIndex = 0;		// index to the currently loading image
var preloadDelay = 100;		// polling interval for preloading images (milliseonds)

function Window_Onload()
{
	thumbs = GetObj("thumbs");
	slider = GetObj("slider");
	slide = GetObj("slide");
	centering = GetObj("centering")
	
	thumbs.onmousemove = MouseMove;
	thumbs.onmouseleave = StopScrolling;
	
	maxScrollOffset = 0;
	minScrollOffset = thumbs.offsetWidth-slider.offsetWidth;
	if (minScrollOffset > maxScrollOffset)
		minScrollOffset = maxScrollOffset;
	
	ShowImage(currentImageIndex)
	SlideIt()
	PreloadImages()

	if (debug) DebugInit();
	if (debug) Debug("debugThumbs", "offsetWidth=" + thumbs.offsetWidth + ", style.width=" + thumbs.style.width);
}

window.onload = Window_Onload;


function MouseMove(e)
{
	if (!e)
		e = window.event;
	var obj = (e.srcElement ? e.srcElement : e.target);		// IE: srcElement, Firefox: e.target

	// Retrieve x position within the (thumbs) layer
	var x = (e.layerX ? e.layerX : e.x)						// IE: e.x, Firefox: e.layerX
	x = x + slider.offsetLeft

	s = "x=" + (e.x ? e.x : "") + ", ";
	s += "clientX=" + (e.clientX ? e.clientX : "") + ", ";
	s += "offsetX=" + (e.offsetX ? e.offsetX : "") + ", ";
	s += "layerX=" + (e.layerX ? e.layerX : "") + ", ";
	if (debug) Debug("debugMouse", "actual=" + x + " (" + obj.tagName + ", " + obj.id + ", " + s + ")");

	// Convert to scale -5 to +5
	x = x / thumbs.offsetWidth
	x = x * 2;
	x = x - 1;
	x = x * 10;


	scrollOffset = Math.pow(Math.abs(0.25*x), 3)
	scrollOffset = scrollOffset
	if (x>0)
		scrollOffset = scrollOffset * -1

	StartScrolling()

	if (debug) Debug("debugScaledX", x);
	if (debug) Debug("debugScrollOffset", scrollOffset);
}

function Scroll()
{
	var newX

	if (isScrolling)
	{
		newX = slider.offsetLeft + scrollOffset;
		if (debug) Debug("debugSlider", "offsetLeft=" + slider.offsetLeft + ", style.left=" + slider.style.left + ", newX=" + newX + ", min=" + minScrollOffset + ", max=" + maxScrollOffset);
		if (newX < minScrollOffset)
		{
			newX = minScrollOffset;
			slider.style.left = newX + "px";
		}
		else if (newX > maxScrollOffset)
		{
			newX = maxScrollOffset;
			slider.style.left = newX + "px";
		}
		else
		{
			slider.style.left = newX + "px";
		}
		setTimeout("Scroll()",scrollDelay);
	}
}

function StartScrolling()
{
	if (!isScrolling)
	{
		isScrolling = 1
		Scroll()
	}
}

function StopScrolling()
{
	isScrolling = 0
}


function ShowImage(imageIndex)
{
	if (slide)
	{
		if (slide.filters != null)
			slide.filters[0].apply()
		slide.src = slideImages[imageIndex];
		var newWidth = slideWidth[imageIndex];
		if (newWidth > 0) centering.style.width = newWidth + "px"
		SetInnerHTML("exif", slideExif[imageIndex]);
		if (slide.filters != null)
			slide.filters[0].play()
		currentImageIndex=imageIndex

		// Reset timeout in case user pressed Next/Prev during slideshow
		clearTimeout(lastTimeoutID);
		lastTimeoutID = setTimeout("SlideIt()",slideSpeed+blendDuration);
	}

	if (debug) Debug("debugImage", slideImages[imageIndex] + ", width=" + slideWidth[imageIndex] + "px, image " + (imageIndex+1) + " of " + slideImages.length)
	if (debug) Debug("debugExif", slideExif[imageIndex])
}

function SlideIt()
{
	if (isPlaying)
		Next()
}

function Next()
{
	currentImageIndex=(currentImageIndex<slideImages.length-1)? currentImageIndex+1 : 0
	ShowImage(currentImageIndex)
}

function Prev()
{
	currentImageIndex=(currentImageIndex>0)? currentImageIndex-1 : slideImages.length-1
	ShowImage(currentImageIndex)
}

function PlayPause(sender)
{
	isPlaying = !isPlaying
	SetInnerHTML("playpause", isPlaying ? "pause" : "play")
}

function Download()
{
	window.open(slideLinks[currentImageIndex])
}

function PreloadImages()
{
	if (preloadImage == null)
	{
		preloadImage = new Image();
		preloadImage.src = slideImages[preloadIndex];
	}
	else
	{
		if (preloadImage.width != 0)
		{
			preloadImage = null;
			preloadIndex++;
		}
	}
	if (preloadIndex < slideImages.length)
		setTimeout("PreloadImages()", preloadDelay);
	
	if (debug) Debug("debugPreload", "Preloading " + slideImages[preloadIndex] + ", current width=" + (preloadImage==null ? "null" : preloadImage.width));
}

function DebugInit()
{
	SetInnerHTML("debug",
			"Image: <span id='debugImage'></span><br>" +
			"Exif: <span id='debugExif'></span><br>" +
			"Mouse: <span id='debugMouse'></span><br>" +
			"Thumbs DIV: <span id='debugThumbs'></span><br>" +
			"Scaled X: <span id='debugScaledX'></span><br>" +
			"ScrollOffset: <span id='debugScrollOffset'></span><br>" +
			"Slider: <span id='debugSlider'></span><br>" +
			"Preload: <span id='debugPreload'></span><br>");
}

function Debug(element, text)
{
	SetInnerHTML(element, text);
}