addLoadEvent(prepareSlideshow);

	function prepareSlideshow() {
	
	// get the gallery by id:	
		var gallery = $("gallery1");
		
	// modify gallery margin:
		gallery.style.marginBottom = "0";
	
	// hide the preloader:
		Element.hide('preLoaderImg');
	
	// set overflow to hidden
		gallery.style.overflow = "hidden";
		
	// get the image wrapper and make it visible:	
		var galleryElem = gallery.getElementsByTagName("div")[0];
		galleryElem.style.visibility = "visible";
		
	// intialise the parameters for the animation/scrolling:	
		var x_increment = 142;
		var y_increment = 0;
		var final_x = 0;
		var final_y = 0;
		var interval = 5;
	
	// get the number of images in the gallery:
	 if (galleryElem.getElementsByTagName("img")) {
		var galleryImages = galleryElem.getElementsByTagName("img");
		var numberImages = galleryImages.length;
	
	// set the correct width for the wrapper according to the number of images it contains
		galleryElem.style.width = (numberImages * x_increment) + "px";
	
	// set the x boundaries for the animation (partially based on the width of the gallery):
		var x_limit_left = -(numberImages * x_increment - 710);
		var x_limit_right = 0;
	 }
	
	// in case the image wrapper has not left and top positioning assigned yet:
	 if (!galleryElem.style.left) {
		galleryElem.style.left = "0px";
	 }
	 if (!galleryElem.style.top) {
		galleryElem.style.top = "0px";
	 }
	
	/* create the following html, only for users of javascript:
	
	*/

		var actionBar = document.createElement("div");
		actionBar.setAttribute('id','action-bar1');
		actionBar.setAttribute('class','action-bar');
		
		if (numberImages > 5) {	
		
			var controller = document.createElement("div");
			controller.setAttribute('id','controller1');
			controller.setAttribute('class','controller');
			actionBar.appendChild(controller);
		
			var leftScroll = document.createElement("img");
			leftScroll.setAttribute('src','/persistent/imgs/btnLeft.png');
			leftScroll.setAttribute('title','scroll left');
			leftScroll.setAttribute('class','left');	
			controller.appendChild(leftScroll);
		
			var rightScroll = document.createElement("img");
			rightScroll.setAttribute('src','/persistent/imgs/btnRight.png');
			rightScroll.setAttribute('title','scroll right');
			rightScroll.setAttribute('class','right');
			controller.appendChild(rightScroll);
		
			var controllerPara = document.createElement("p");
			controllerPara.setAttribute('id','controller1-para');
			var controllerParaTextContent = "Use the buttons to move through the showreel. Click on the images to display a larger version.";
			var controllerParaText = document.createTextNode(controllerParaTextContent);
			controllerPara.appendChild(controllerParaText);	
			actionBar.appendChild(controllerPara);
			
			var controllerImages = controller.getElementsByTagName("img");
			 
			// move the div containing the images when the buttons are clicked:
				// left button is first :
				controllerImages[0].onmousedown = function() {
					curr_xpos = parseInt(galleryElem.style.left);
					final_x = curr_xpos + x_increment;
					moveElement(galleryElem.getAttribute("id"),final_x,final_y,interval,x_limit_left,x_limit_right);
				}
				
				// right button is last
				controllerImages[1].onmousedown = function() {
					curr_xpos = parseInt(galleryElem.style.left);		
					final_x = curr_xpos - x_increment;
					moveElement(galleryElem.getAttribute("id"),final_x,final_y,interval,x_limit_left,x_limit_right);
				}		
				
			// button mouseover behaviors:
			for (var j=0; j < controllerImages.length; j++) {
				// swap the button image on mouseover:		
				controllerImages[j].onmouseover = function() {
				    splitSrc = this.src.split(/\.png/);
					splitSrc[0] = splitSrc[0] + "_over.png";
					this.src=splitSrc[0];
					
				// change the cursor on mouseover to a hand:				
					if (!document.all) { 
						this.style.cursor = "pointer"; 
					} else if (document.all) { 
						this.style.cursor = "hand"; 
					}
				}
				// swap the image back:			
				controllerImages[j].onmouseout = function() {
					splitSrc = this.src.split(/\_over\.png/);
					splitSrc[0] = splitSrc[0] + ".png";
					this.src=splitSrc[0];
				}
			}
			
		} else {
		
			var controllerPara = document.createElement("p");
			controllerPara.setAttribute('id','noController1-para');
			var controllerParaTextContent = "Click on the images to display the large version in its own lightbox.";
			var controllerParaText = document.createTextNode(controllerParaTextContent);
			controllerPara.appendChild(controllerParaText);	
			actionBar.appendChild(controllerPara);
		
		}
		
		insertAfter(actionBar,gallery);		

		 // update the controller paragraph when user mouses over the images:
		 
		 for (i=0; i<galleryImages.length; i++) {
			 galleryImages[i].onmouseover = function() {
				controllerParaText.nodeValue = this.getAttribute("title");
			 }			
			 galleryImages[i].onmouseout = function() {
				controllerParaText.nodeValue = controllerParaTextContent;
			 }					 
		 }
		}		
	
function moveElement(elementID,final_x,final_y,interval,x_limit_left,x_limit_right,y_limit_top,y_limit_bottom) {
var elem = $(elementID);
if (elem.movement) {
 	clearTimeout(elem.movement);
 }
if (!elem.style.left) {
 	elem.style.left = "0px";
 }
if (!elem.style.top) {
 	elem.style.top = "0px";
 }
 var xpos = parseInt(elem.style.left);
 var ypos = parseInt(elem.style.top);
 
 if (xpos == final_x && ypos == final_y) {
 	return true;
 }
 if (final_x > (x_limit_right + 1)) {
 	final_x = x_limit_right;
 }
 if (final_x < (x_limit_left -1)) {
 	final_x = x_limit_left;
 }
  if ((y_limit_bottom) && (final_y > (y_limit_bottom + 1))) {
 	final_y = y_limit_bottom;
 }
 if ((y_limit_top) && (final_y < (y_limit_top -1))) {
 	final_y = y_limit_top;
 }
 if (xpos < final_x) {
 	var dist = Math.ceil((final_x - xpos)/5);
 	xpos = xpos + dist;
 }
 if (xpos > final_x) {
 	var dist = Math.ceil((xpos - final_x)/5);
 	xpos = xpos - dist;
 }
 if (ypos < final_y) {
 	var dist = Math.ceil((final_y - ypos)/5);
 	ypos = ypos + dist;
 }
 if (ypos > final_y) {
 	var dist = Math.ceil((ypos - final_y)/5);
 	ypos = ypos - dist;
 }
 elem.style.left = xpos + "px";
 elem.style.top = ypos + "px"; 
 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+","+x_limit_left+","+x_limit_right+","+y_limit_top+","+y_limit_bottom+")";
 elem.movement = setTimeout(repeat,interval);
}