// to scroll the background images in the projects thumnail page

// user variables

var imageInterval = 2000; // show a new image every this many milliseconds (includes the animation time)
var tweenSteps = 20; // number of frames to use for the tween
var tweenStepFrequency = 50; // 1 tween frame every this many seconds tweenSteps

var dotrace = false; // for debugging

////////////////////////////////////////////////////////////////
//      only edit below here if you know what you are doing   //
////////////////////////////////////////////////////////////////

if (tweenSteps * tweenStepFrequency > imageInterval) { imageInterval = tweenSteps * tweenStepFrequency; }


var thumbs = new Thumbs();

function Thumbs () {
}


function Thumb  (id, width, height) {;
  this.images = new Array();
  this.proj_id = id;
  this.thumb_el = document.getElementById(id+'_thumb');
  this.link_el_id = id+'_link';
  this.curImg = 0;
  this.curBgPos = 0;
  this.slide_int;
  this.step_int;
  this.w = width;
  this.h = height;
  this.tween = new Array();
  this.steps = tweenSteps;
  this.curStep;
  this.tweenStartPos;
  this.on = false; // whether the mouse is over this or not
  this.sliding = false; // whether the background currently tweening or not
  
  this.attach_listeners = function () {
	  
	  var a_id = this.link_el_id;
	  var p_id = this.proj_id;
	  
    document.getElementById(a_id).onmouseover = function () {
	   thumbs[p_id].thumb_rollover();
    }
	
    document.getElementById(a_id).onmouseout = function () {
	   thumbs[p_id].thumb_rollout();
    }
	  
  }
  
  
  this.thumb_rollover = function () {
	  this.on = true;
	  if (!this.sliding) {
	      var js = 'thumbs["'+this.proj_id+'"].start_ss();';
	      this.slide_int = setTimeout(js ,imageInterval/3);
	  }
  }
  
  this.start_ss = function () {
	    var js = 'thumbs["'+this.proj_id+'"].next_image();';
	    this.slide_int = setInterval(js ,imageInterval);
	    this.next_image()
  }
  
  this.thumb_rollout = function () {
	  
	  if (!this.sliding) {
	    clearInterval(this.slide_int);
	    clearTimeout(this.slide_int);
	  }
		  
	  this.on = false;
  }
  
  
  this.next_image = function () {
	  this.sliding = true;
      this.curStep = 0;  // start tween from first step
	  this.curBgPos = this.curImg * this.w;   // incase bg is still moving from last tween put it at the start position
	  clearInterval(this.step_int);  // incase bg is still tweening from last one
 	  this.tweenStartPos = this.curBgPos; // recort the curret bg pos to measure the tween steps from
	  this.step_int = setInterval('thumbs["'+this.proj_id+'"].step();',tweenStepFrequency);
      this.curImg++; // set the curImage to be the one that will show after this tween
  }
  
  
  this.makeTween = function () {
	var cur_angle;
	var angle_change =    Math.PI / this.steps;
	for (var i = 0; i<=this.steps; i++) {
		cur_angle = angle_change*i;
	     this.tween.push(Math.round((Math.cos(cur_angle+(Math.PI))+1)*0.5*this.w));
	}
	
   }
  
  
  this.step = function () {
 	this.curStep++;
	
	
	if (this.curStep < this.tween.length) {
		

		
	  this.curBgPos = this.tweenStartPos + this.tween[this.curStep];
	  

	} else {
	  this.curBgPos = this.tweenStartPos + this.w;
	  clearInterval(this.step_int);
	  this.sliding = false;
	  
	  if (!this.on) {
	  	  clearInterval(this.slide_int);
	      clearTimeout(this.slide_int);
	  }

	  
	}
	this.thumb_el.style.backgroundPosition = Math.round(this.curBgPos)+"px 0px";
  }


  
  // initialise the tween;
  this.makeTween();


}

var trace_text = '';
function trace (txt) {
  if (dotrace) {
	var t = document.getElementById('trace');
	if (t == null) {
	  trace_text = txt;
	} else {
	  t.innerHTML = t.innerHTML + txt + '<br />';
	}
  }
}

window.onload = function () {
	
  if (dotrace) {

  var t = document.createElement('div');
  
  t.setAttribute('id', 'trace');
  
  document.getElementsByTagName('body')[0].appendChild(t);
  t.innerHTML = trace_text + '<br />';
  t.style.position="absolute"
  t.style.top = '0px';
  t.style.backgroundColor = '#FFFFFF';

  
  }
  
}