var galleryitemwidth = 906;
var imagemargin = 0;
var viewportwidth = 898;
var sliderwidth = 898;
var sliderheight = 15;
var sliderimgwidth = 890;
var sliderimgheight = 13;
var handlewidth = 46;
var handleheight = 13;
var arrowwidth = 12;
var arrowheight = 13;
var arrowoffset = 0;	// "indentation" of curved end of arrow object
var handleXmin = 0;
var handleXmax = 0;
var tracklength = 0;	// total traverse of handle
var initCursorOffsetX = 0;
var initCursorOffsetY = 0;
var galwidth = 0;	// total width of gallery (incl the viewport)
var galtraverse = 0;	// total traverse of gallery
var galmagfactor = 0;	// "gearing" of gallery movement with slider
var galpaddingfactor = 0;	//	takes care of margins & padding in the list items

window.onload = function() {
	initDisplay();
}

function initDisplay() {
	//	Check for DOM support
	var d = document;
	if(d.getElementById) {
		//	Set up some variables
		handleXmin = arrowwidth - arrowoffset;
		handleXmax =  sliderwidth - handlewidth - arrowwidth + arrowoffset;
		tracklength = handleXmax - handleXmin;
		//	Set up the gallery
		if(d.getElementById("gallery")) {
			var galleryholder = d.getElementById("galleryholder");
			galleryholder.style.overflow = "hidden";
			var gallery = d.getElementById("gallery");
			//	Now count the number of items in the gallery
			var galleryitems = gallery.getElementsByTagName("li");
			//	And calculate the gallery width - first the "basic" width
			galwidth = galleryitems.length * (galleryitemwidth + galpaddingfactor);
			if(galwidth > 0) {
				//	At least one item in the gallery
				for(var i = 0; i < galleryitems.length; i++) {
					//	Find any gallery items containing an image
					var tempimage = galleryitems[i].getElementsByTagName("img");
					if(tempimage.length != 0) {
						//	Get the image width
						var tempwidth = tempimage[0].width;
						galleryitems[i].style.width = (galleryitemwidth + imagemargin) + "px";
						galwidth += tempwidth;
					}
				}
			}
			galtraverse = galwidth - viewportwidth;
			if(galtraverse < 0) {
				galtraverse = 0;
			}
			galmagfactor = galtraverse / tracklength;
		}
		//	Set up variables	
		//	Create slider track, handle and arrows
		if(d.getElementById("slidertrack")) {
			var slidertrackholder = d.getElementById("slidertrack");
			var slidertrack = d.createElement("img");
			slidertrack.setAttribute("src","images/slidertrack-new.jpg");
			slidertrack.style.position = "absolute";
			slidertrack.style.left = "0px";
			slidertrack.style.top = "0px";
			slidertrack.style.width = sliderimgwidth + "px";
			slidertrack.style.height = sliderimgheight + "px";
			slidertrackholder.appendChild(slidertrack);
			var sliderhandle = d.createElement("img");
			sliderhandle.setAttribute("src","images/sliderhandle-new.jpg");
			sliderhandle.setAttribute("id","sliderhandle");
			sliderhandle.style.position = "absolute";
			sliderhandle.style.left = handleXmin + "px";
			sliderhandle.style.top = "0px";
			sliderhandle.style.width = handlewidth + "px";
			sliderhandle.style.height = handleheight + "px";
			sliderhandle.style.zIndex = "20";
			slidertrackholder.appendChild(sliderhandle);
			var arrowleft = d.createElement("img");
			arrowleft.setAttribute("src","images/arrow_left.gif");
			arrowleft.setAttribute("id","arrowleft");
			arrowleft.style.position = "absolute";
			arrowleft.style.left = "0px";
			arrowleft.style.top = "0px";
			arrowleft.style.width = arrowwidth + "px";
			arrowleft.style.height = arrowheight + "px";
			arrowleft.style.zIndex = "15";
			slidertrackholder.appendChild(arrowleft);
			var arrowright = d.createElement("img");
			arrowright.setAttribute("src","images/arrow_right.gif");
			arrowright.setAttribute("id","arrowright");
			arrowright.style.position = "absolute";
			arrowright.style.left = (sliderwidth - arrowwidth) + "px";
			arrowright.style.top = "0";
			arrowright.style.width = arrowwidth + "px";
			arrowright.style.height = arrowheight + "px";
			arrowright.style.zIndex = "15";
			slidertrackholder.appendChild(arrowright);
			//	Create mouse over/out functions for slider track,
			//	handle and arrows
			if(cS) {
				//	Initialise if CSS cursor style supported
				slidertrack.onmouseover = function() {
					mouseOverTrack();
				}
				slidertrack.onmouseout = function() {
					mouseOutTrack();
				}
				sliderhandle.onmouseover = function() {
					mouseOverHandle();
				}
				sliderhandle.onmouseout = function() {
					mouseOutHandle();
				}
				arrowleft.onmouseover = function() {
					mouseOverArrowLeft();
				}
				arrowleft.onmouseout = function() {
					mouseOutArrowLeft();
				}
				arrowright.onmouseover = function() {
					mouseOverArrowRight();
				}
				arrowright.onmouseout = function() {
					mouseOutArrowRight();
				}
			}
			//	Create remaining "mouse" handlers
			slidertrack.onclick = function(event) {
				clickTrack(event);
			}
			document.onmouseup = function(event) {
				mouseUpHandle(event);
			}
			sliderhandle.onmousedown = function(event) {
				mouseDownHandle(event);
			}
			arrowleft.onclick = function() {
				clickArrowLeft();
			}
			arrowright.onclick = function() {
				clickArrowRight();
			}
		}
	}
}

function mouseOverTrack() {
	//	Change cursor style
	var slidertrack = document.getElementById("slidertrack");
	slidertrack.style.cursor = "pointer";
}

function mouseOutTrack() {
	//	Restore default cursor style
	var slidertrack = document.getElementById("slidertrack");
	slidertrack.style.cursor = "default";
}

function clickTrack(ev) {
	//	Centre the slider handle at the current mouse position
	ev = ev || window.event;
	//	First capture the current position of the cursor
	var mousePos = mouseCoords(ev);
	//	Now the current position of "hmi" containing element
	var hmi = document.getElementById("hmi");
	var hmiPos = hmiCoords(hmi);
	//	Calculate the new slider position
	var sliderX = Math.floor(mousePos.x - hmiPos.x - (handlewidth / 2));
	if(sliderX <= handleXmin) {
		sliderX = handleXmin;
	} else if(sliderX >= handleXmax) {
		sliderX = handleXmax;
	}
	newSliderPos(sliderX); 
}

function mouseOverHandle() {
	//	Change cursor style
	var sliderhandle = document.getElementById("sliderhandle");
	//sliderhandle.style.cursor = "hand";
	sliderhandle.style.cursor = "pointer";
}

function mouseOutHandle() {
	var d = document;
	//	Restore default cursor style
	var sliderhandle = d.getElementById("sliderhandle");
	sliderhandle.style.cursor = "default";	
}

function mouseDownHandle(ev) {
	var d = document;
	//	Start mouse dragging function
	ev = ev || window.event;	// for the benefit of IE
	//	First capture the current position of the cursor
	var mousePos = mouseCoords(ev);
	//	Now the current position of "hmi" containing element
	var hmi = d.getElementById("hmi");
	var hmiPos = hmiCoords(hmi);
	//	And now the current position of the slider handle
	var sliderhandle = d.getElementById("sliderhandle");
	var sliderX = parseInt(sliderhandle.style.left);
	var sliderY = parseInt(sliderhandle.style.top);
	//	Calculate the offset between the cursor and handle positions
	initCursorOffsetX = mousePos.x - (hmiPos.x + sliderX);
	initCursorOffsetY = mousePos.y - (hmiPos.y + sliderY);
	//	Now register the event handler that will respond to the mousemove
	//	events that follow this mousedown event
	if(d.addEventListener) {
		//	DOM 2 - Firefox etc support
		d.addEventListener("mousemove",mouseMoveHandle,true);
	} else {
		//	IE model
		d.attachEvent("onmousemove",mouseMoveHandle);
	}
	//	No need for this event to propagate to other objects
	if(ev.stopPropagation) {
		ev.stopPropagation();
	} else {
		ev.cancelBubble = true;
	}
	//	Also prevent any default actions
	if(ev.preventDefault) {
		ev.preventDefault();
	} else {
		ev.returnValue = false;
	}
}

function mouseCoords(ev) {
	var d = document;
	if(ev.pageX || ev.pageY) {
		//	DOM 2 - Firefox etc support
		return {x:ev.pageX, y:ev.pageY};
	} else {
		//	IE model
		var xVal = ev.clientX + d.body.scrollLeft + d.documentElement.scrollLeft - d.body.clientLeft;
		var yVal = ev.clientY + d.body.scrollTop + d.documentElement.scrollTop - d.body.clientTop;
		return {x:xVal, y:yVal};
	}
}

function hmiCoords(target) {
	var d = document;
	var leftval = 0;
	var topval = 0;
	while(target.offsetParent) {
		leftval += target.offsetLeft;
		topval += target.offsetTop;
		target = target.offsetParent;
	}
	leftval += target.offsetLeft;
	topval += target.offsetTop;
	
	return {x:leftval, y:topval};
}

function newSliderPos(newX) {
	var d = document;
	var sliderhandle = d.getElementById("sliderhandle");
	sliderhandle.style.left = newX + "px";
	var gallery = d.getElementById("gallery");
	gallery.style.left = Math.floor((handleXmin - newX) * galmagfactor) + "px";
}

function mouseMoveHandle(ev) {
	var d = document;
	//	Move the slider handle and gallery items
	ev = ev || window.event;
	//	First capture the current position of the cursor
	var mousePos = mouseCoords(ev);
	//	Now the current position of "hmi" containing element
	var hmi = d.getElementById("hmi");
	var hmiPos = hmiCoords(hmi);
	//	Calculate the new slider position
	var sliderX = mousePos.x - hmiPos.x - initCursorOffsetX;
	var sliderY = mousePos.y - hmiPos.y - initCursorOffsetY;
	if(sliderX <= handleXmin) {
		sliderX = handleXmin;
	} else if(sliderX >= handleXmax) {
		sliderX = handleXmax;
	}
	newSliderPos(sliderX); 
	//	No need for this event to propagate to other objects
	if(ev.stopPropagation) {
		ev.stopPropagation();
	} else {
		ev.cancelBubble = true;
	}
	//	Also prevent any default actions
	if(ev.preventDefault) {
		ev.preventDefault();
	} else {
		ev.returnValue = false;
	}	
}

function mouseUpHandle(ev) {
	var d = document;
	ev = ev || window.event;
	//	Stop mouse dragging function
	if(d.removeEventListener) {
		//	DOM 2 - Firefox etc support
		d.removeEventListener("mousemove",mouseMoveHandle,true);
	} else {
		//	IE model
		d.detachEvent("onmousemove",mouseMoveHandle);
	}
	if(ev.stopPropagation) {
		ev.stopPropagation();
	} else {
		ev.cancelBubble - true;
	}
}

function mouseOverArrowLeft() {
	var arrowleft = document.getElementById("arrowleft");
	//arrowleft.style.cursor = "hand";
	arrowleft.style.cursor = "pointer";
}
function mouseOutArrowLeft() {
	var arrowleft = document.getElementById("arrowleft");
	arrowleft.style.cursor = "default";
}
function clickArrowLeft() {
	//	Move the slider handle one "list item" to the left
	var sliderhandle = document.getElementById("sliderhandle");
	var sliderX = parseInt(sliderhandle.style.left);
	if(galmagfactor != 0) {
		//	Only move the slider if the gallery width  > view port
		sliderX -= galleryitemwidth / galmagfactor;
	}
	if(sliderX <= handleXmin) {
		sliderX = handleXmin;
	}
	newSliderPos(sliderX);
}

function mouseOverArrowRight() {
	var arrowright = document.getElementById("arrowright");
	//arrowright.style.cursor = "hand";
	arrowright.style.cursor = "pointer";
}
function mouseOutArrowRight() {
	var arrowright = document.getElementById("arrowright");
	arrowright.style.cursor = "default";
}
function clickArrowRight() {
	//	Move the slider handle one "list item" to the right
	var sliderhandle = document.getElementById("sliderhandle");
	var sliderX = parseInt(sliderhandle.style.left);
	if(galmagfactor != 0) {
		//	Only move the slider if the gallery width  > view port
		sliderX += galleryitemwidth / galmagfactor;
	}
	if(sliderX >= handleXmax) {
		sliderX = handleXmax;
	}
	newSliderPos(sliderX);
}