// MALX image scroller
// Aug 2007

// declare as globals

// User values - change these to suit purpose

var imagesVisible = 5; 		// Number of images visible
var imageWidth = 100;			// Width of the image panel (copy from css)
var imageHeight = 80;		// Height of the image panel (copy from css)
var cssOffPos = 0;				// Position of arrow background image in the OFF state
var cssOnPos = -40;				// Position of arrow background image in the ON state
var cssOverPos = -80;			// Position of arrow background image in the OVER state
var cssVerticalPos = 15;		// Vertical offset for arrow background images (copy from gallery css)



// It should not be necessary to change anything below this line
//============================================================================================

// Fixed values
var stripObj;
var leftArrowObj;
var rightArrowObj;
var stripSlide = 0;					// Used in move functions to track how far the image has slid
var totalImages = 50;  			// Arbritary number - updated with php calculated values when the page loads
var imagesRight = 10; 			// Arbritary number - updated with php calculated values when the page loads
var imagesLeft = 0;					// Stores the number of hidden images on the left
var clipLeft = 0;															// Holds the current left clip value of the image strip layer
var clipRight = imageWidth*imagesVisible;			// Holds the current right clip value of the image strip layer
var clipWidth = imageWidth*imagesVisible;			// Holds the current width of the image strip layer
var stripPos = 0;
var stripWidth = clipWidth	// The strip width and the clip width are the same at the start

function initScroll (catTotalImages) { 		// Reset everything using image count category
 	imagesRight = catTotalImages-imagesVisible; 			
	imagesLeft = 0;
	clipLeft = 0;
	stripPos = 0;
	clipRight = imageWidth*imagesVisible;
	stripObj=document.getElementById('picstrip');					// get the pic strip layer object
	stripObj.style.width=clipWidth+'px';									// sets the starting width
	stripObj.style.clip = 'rect(0px, '+clipRight+'px, '+imageHeight+'px, '+clipLeft+'px)'; 	// Sets initial clipping
	stripObj.style.left = '0px';
	leftArrowObj=document.getElementById('leftArrow'); 		// get the left arrow nav object
	rightArrowObj=document.getElementById('rightArrow'); 	// get the left arrow nav object
	leftArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';  	// Switch off the left arrow
	rightArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';  	// Switch on the right arrow
	if (catTotalImages > imagesVisible) {			// If enough pics switch on the right arrow
			rightArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';  
	} else {
			rightArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';
	}
	
	// Set opening caption which is the content of the "caption" div set by midpic.php
	
	CHN1GLOBALS.chosenCaption = document.getElementById("caption").innerHTML;

}

function moveLeft() {  // Used by the RIGHT pointing arrow on the right of the strip
	
	stripSlide += 10;
	stripPos = parseInt(stripObj.style.left);  // read layer position	
	stripWidth = parseInt(stripObj.style.width);  // read layer width 
	
	if ( stripSlide <= imageWidth && imagesRight > 0 ){			
			
			// Increase width of layer by width of one image on first iteration only
			if (stripSlide<20) {      	
				stripWidth+=imageWidth;   	  						
				stripObj.style.width=stripWidth+'px'; // set new width
			}
			
			// Move layer left
			stripPos-=10; 	  // decrement the stripPos value
			stripObj.style.left=stripPos+'px'; // set new position
				
			// 	Move clipping right (so 'window' apparently remains static)					
			clipLeft+=10;			// increment the left clip value
			clipRight+=10;		// increment the right clip value
			var clipstring = 'rect(0px, '+clipRight+'px, '+imageHeight+'px, '+clipLeft+'px)'; // Set new clip
      stripObj.style.clip = clipstring;
			
			// When image has finished sliding update the hidden images counters
			if (stripSlide==imageWidth) {
				imagesRight-=1;
				imagesLeft+=1;
			}
			
			// Change state of arrows if necessary
			leftArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';		
			if (imagesRight==0) rightArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';

			// Recall the function	
			setTimeout(moveLeft,20); // call moveLeft) in 20 msec	
									
		} else {		
			stripSlide = 0;  // Reset stripSlide
			return;	
	}	
}

function moveRight() {  // Used by the LEFT pointing arrow on the left of the strip
	
	stripSlide += 10;
	stripPos=parseInt(stripObj.style.left); // read layer position
	stripWidth = parseInt(stripObj.style.width);  // read layer width
	
	if (stripSlide <= imageWidth && imagesLeft > 0) {
	
			// Decrease width of layer by width of one image on last iteration only 
			if (stripSlide==imageWidth) {
				stripWidth-=imageWidth;
				stripObj.style.width=stripWidth+'px'; // set new width
			}
	
			// Move layer right
			stripPos+=10; 	  // increment the stripPos value
			stripObj.style.left=stripPos+'px'; // set new position
			
			// 	Move clipping left (so 'window' apparently remains static)	
			clipLeft-=10;			// decrement the left clip value		
			clipRight-=10;		// decrement the right clip value 	
			var clipstring = 'rect(0px, '+clipRight+'px, '+imageHeight+'px, '+clipLeft+'px)'; // Set new clip
      stripObj.style.clip = clipstring;	
			
			// When image has finished sliding update the hidden images counters
			if (stripSlide==imageWidth) {
				imagesRight+=1;
				imagesLeft-=1;
			}
			
			// Change state of arrows if necessary
			rightArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';
			if (imagesLeft==0) leftArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';			
			 
			// Recall the function
			setTimeout(moveRight,20); // call moveRight() in 20 msec
			
		} else {		
			stripSlide = 0; // Reset stripSlide
			return;	
	}	
}


function arrowOver(arrow) {
	if (arrow == 'left' && imagesLeft > 0) leftArrowObj.style.backgroundPosition = cssOverPos+'px '+cssVerticalPos+'px ';
	if (arrow == 'right' && imagesRight > 0) rightArrowObj.style.backgroundPosition = cssOverPos+'px '+cssVerticalPos+'px ';	
	return;
}
function arrowOut(arrow) {
	if (arrow == 'left') {
		if (imagesLeft > 0) {
			leftArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';
		} else {
			leftArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';
		}
	}
	if (arrow == 'right') {
		if (imagesRight > 0) {
			rightArrowObj.style.backgroundPosition = cssOnPos+'px '+cssVerticalPos+'px ';
		} else {
			rightArrowObj.style.backgroundPosition = cssOffPos+'px '+cssVerticalPos+'px ';
		}
	}	
	return;
}