//Scrolling the top header

	$(document).ready(function(){
		
		//var numberOfSlides = 12; //need to get this from php variable eek!!
		
		$("#debugTool").append("number of Slides:"+numberOfSlides)//debug
		var numberOfSlidesOnDisplay = 4;
		var widthOfSlide = 147;
		var rollLeft = true;
		var rollRight = true; //to stop rollOver functions when slides reach beginning or end of reel
		var n=0;
		var p=0; //position of slideTray
		//$("#debugTool").append("****JAVASCRIPT CHECK****")//debug
		//$("#debugTool").append("<br />Slide Tray Positions:")//debug
		
		var tilePosition = new Array();
		
		for (n=0; n<numberOfSlides-numberOfSlidesOnDisplay+1; n++) {
		
		tilePosition.push(-(n*widthOfSlide));
		//$("#debugTool").append("<br />"+tilePosition[n])//debug
		
		}
		
		if ( numberOfSlides < numberOfSlidesOnDisplay || numberOfSlides == numberOfSlidesOnDisplay ) {
		// $("#debugTool").append("<br />===============Arrows not needed")//debug
		 //need to remove arrow buttons
		 $('#leftArrow').css('backgroundPosition', '0px' );
		 $('#rightArrow').css('backgroundPosition', '-72px' );
			
		} else { // $("#debugTool").append("<br />=================Arrows needed")//debug 
		
			$("#leftArrow").click(function() {slideRight();})
			$("#rightArrow").click(function() {slideLeft();})
			$('#leftArrow').css('backgroundPosition', '0px' );
		}
		
		function slideLeft() {
			p++;
			$('#leftArrow').css('backgroundPosition', '-72px' );
		  if (p>numberOfSlides || p == n) {
				p = n-1; 
					$('#rightArrow').css('backgroundPosition', '-72px' );
					$('#leftArrow').css('backgroundPosition', '-72px' );
					rollLeft = true;
					rollRight = false;
				} else {
					$('#leftArrow').css('backgroundPosition', '-72px' );
					$('#rightArrow').css('backgroundPosition', '0px' );
					rollLeft = true;
					rollRight = true;
				}
				
			RollOver(rollLeft,rollRight);	
			
		  //	$("#debugTool").append("<br />p: "+p)//debug
			$("#slideTray").animate({left: tilePosition[p]+"px"},"slow");
			//$("#debugTool").append("<br />left: "+tilePosition[p]+"px")//debug
		}
		
		function slideRight() { 
			p--;
		    if (p<0 || p == 0) {
				p = 0;
				$('#leftArrow').css('backgroundPosition', '0px' );
				$('#rightArrow').css('backgroundPosition', '0px' );
				rollLeft = false;
				rollRight = true;
			} else {
				$('#leftArrow').css('backgroundPosition', '-72px' );
				$('#rightArrow').css('backgroundPosition', '0px' );
				rollLeft = true;
				rollRight = true;		
			}
			RollOver(rollLeft,rollRight);
			
			//$("#debugTool").append("<br />p: "+p)//debug
			$("#slideTray").animate({left: tilePosition[p]+"px"},"slow");
			//$("#debugTool").append("<br />right: "+tilePosition[p]+"px")//debug
		}
		
		function RollOver(rollLeft,rollRight) {
				//$("#debugTool").append("<br />rollLeft: "+rollLeft+"<br />rollRight: "+rollRight)//debug
				if ( rollLeft == true ) {
					$("#leftArrow").mouseover(function(){$('#leftArrow').css('backgroundPosition', '-36px' )});
					$("#leftArrow").mouseout(function(){$('#leftArrow').css('backgroundPosition', '-72px' )});
				} else {
					$("#leftArrow").mouseover(function(){$('#leftArrow').css('backgroundPosition', '0px' )});
					$("#leftArrow").mouseout(function(){$('#leftArrow').css('backgroundPosition', '0px' )});
				}
				
				if (rollRight == true ) {
					$("#rightArrow").mouseover(function(){$('#rightArrow').css('backgroundPosition', '-36px' )});
					$("#rightArrow").mouseout(function(){$('#rightArrow').css('backgroundPosition', '-0px' )});
				} else {
					$("#rightArrow").mouseover(function(){$('#rightArrow').css('backgroundPosition', '-72px' )});
					$("#rightArrow").mouseout(function(){$('#rightArrow').css('backgroundPosition', '-72px' )});
				}
						
		}
				
	  });