// JavaScript Document

<!-- now the image handling script -->

// global variables used while dragging
var offsetX = 0;
var selectedObj;
var frontObj = 0;


// set document-level event handlers
var theImages = document.getElementById("containerAllImages");
var theScrollBox =  document.getElementById("containerImageScroll");
//theScrollBox.scrollLeft = 2000;

theImages.onmousedown = engage;
document.onmouseup = release;

var scrollSpeed = 0;  // in pixels /ms
var scrollTimeStamp;   // time of last scroll
var scrollLastX;      // last requested scroll position
var mouseActive = false;  // true if mouse down state
scrollImages(2000);
var directionSelect =  ( Math.random() > 0.4);



function traceText(s)
{
		 var obj =  document.getElementById("footerlabel");
	obj.innerHTML = s ; 

}


function timerTick()
{
	if (!mouseActive) return;
	
    var d = new Date();
	var thisTime = d.getTime();
	var deltaTime = 0;
	if (scrollTimeStamp > 0)  {
		deltaTime = thisTime - scrollTimeStamp;
	}
	scrollTimeStamp = thisTime;
	
	var thisX = theScrollBox.scrollLeft;
	var deltaX = thisX - scrollLastX;
	scrollLastX = thisX;
	
	if (deltaTime != 0) {scrollSpeed = deltaX / deltaTime;}
	
	if (scrollSpeed > 1) scrollSpeed = 1;
    if (scrollSpeed < -1) scrollSpeed = -1;

	timerId = setTimeout(timerTick, 30); // tick every 50ms to measure speed
}


function timerTickDoAutoScroll()
{
	var d = new Date();
	var thisTime = d.getTime();
	var deltaTime = 0;
	
	if (scrollTimeStamp > 0) {
		deltaTime = thisTime - scrollTimeStamp;
	}
	scrollTimeStamp = thisTime;
	
	var theScroll = theScrollBox.scrollLeft;	
	var deltaX = deltaTime * scrollSpeed;
	var requestedScroll = theScroll + deltaX;
	
	// do bounce back if off the left
	if (requestedScroll <= 0) {
		scrollImages( -requestedScroll );  // bounce back and...
		scrollSpeed = -0.5 * scrollSpeed;			// reverse direction
	} else {
		 scrollImages(requestedScroll);
		 // do bounce back if off right
		 var scrollError = requestedScroll - theScrollBox.scrollLeft;
		 if (scrollError > 1) {
			 scrollImages(theScrollBox.scrollLeft - scrollError);  // bounce back
			  scrollSpeed = -0.5 * scrollSpeed;			// reverse direction
		 }
	 
	 }
	 


	scrollSpeed = scrollSpeed * 0.95;
	if (Math.abs(scrollSpeed) < 0.001) {
		scrollSpeed = 0;
	}
	
	if (scrollSpeed != 0) {
			timerId = setTimeout(timerTickDoAutoScroll, 30); 
	}

}


// setup timer
var timerId;



// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage(ev) {
    ev  = ev || window.event; 
    offsetX =   theScrollBox.scrollLeft - getMouseX(ev);  // just the offfset

	scrollTimeStamp = 0;  // flag as cleared
	scrollSpeed = 0;
	mouseActive = true;
	
	timerId = setTimeout(timerTick, 30); // tick to measure speed

	document.onmousemove = mouseMove;
return false;
}


function getMouseX(ev) {  
	if (ev) {
		return -ev.screenX;  // only interested in relative position and it needs reversing
	}
	return 0;
}



function mouseMove(ev){ 
    ev  = ev || window.event; 	
    var mouseX = getMouseX(ev);	
	scrollImages(mouseX + offsetX);
	
	return false;
} 


// positioning an object at a specific pixel coordinate
function scrollImages(x) {
    theScrollBox.scrollLeft = x;
	}




// restore everything as before (called by onMouseUp)
function release() {
	mouseActive = false;
    var d = new Date();
	scrollTimeStamp = d.getTime();
    document.onmousemove = null;
	
	timerId = setTimeout(timerTickDoAutoScroll, 30);


	 return false;
}


//function to add load event
function addLoadEvent(func) {
	if (window.onload == func) return;
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}






var loadingImages = false;
var initialMovementKickedOff = false;
var imagesToBeLoaded = 0;


function loadAllIamges() {


  if ((!document.images) || loadingImages) return true;

  loadingImages = true;
  imagesToBeLoaded = 0;

var containerAllImages =  document.getElementById("containerAllImages"); // document.images;
var allImages = containerAllImages.getElementsByTagName('img');;
//var allImages = document.images;
var index = 0;

for (var imageIndex in allImages)
	{
	  loadingImages = true;  // add dummy extra image to defer completion til we've finished
	  
	 initialMovementKickedOff = false;
		
	  var thisImage = allImages[imageIndex];
	 
	  if (thisImage.name != "")
  		{
		 imagesToBeLoaded++;  
		 thisImage.onLoad = imageLoaded();
   		 thisImage.src = "footerImages/" + thisImage.name;
  		}
		
	}


  
   
  loadingImages = false;
  
  
  if (imagesToBeLoaded < 1) startInitialMovement();
  
  return true;
}


function imageLoaded()
{
	if (--imagesToBeLoaded < 1 && !loadingImages ) startInitialMovement();
	
	return true;
}


function startInitialMovement()
{
	if ( initialMovementKickedOff ) return ;
	initialMovementKickedOff = true;
	
	mouseActive = false;
    var d = new Date();
	scrollTimeStamp = d.getTime();
    document.onmousemove = null;

    if (directionSelect) {
		scrollSpeed = -0.1;
	} else {
		scrollSpeed = 0.1;
	}
	
	timerId = setTimeout(timerTickDoAutoScroll, 30);
}



addLoadEvent(loadAllIamges);