/********
*
*   Playhead (minimal version)
*
********/

function Playhead(){
  this.starttime;
}

Playhead.prototype.start = function(){
  this.starttime = new Date();
}

Playhead.prototype.getTime = function(){
  return (new Date()) - this.starttime;
}




/********
*
*   Fader
*
********/

Fader = {};

Fader.init = function(element_id){
  this.position = 0;
  this.playhead = new Playhead();
  this.prevbtn = document.getElementById('prevbtn');
  this.nextbtn = document.getElementById('nextbtn');
  var container = document.getElementById(element_id);
  this.images = container.getElementsByTagName('IMG');
	this.setStates();
	this.images[0].className = 'L1';
	var tekst = this.images[0].alt;
	document.getElementById('kleurnaam').innerHTML = tekst;
	document.getElementById('kleurnaam2').innerHTML = tekst;
	document.getElementById('kleurnaam3').innerHTML = tekst;
}

Fader.initPos = function(element_id, positie){
  this.position = positie;
  this.playhead = new Playhead();
  this.prevbtn = document.getElementById('prevbtn');
  this.nextbtn = document.getElementById('nextbtn');
  var container = document.getElementById(element_id);
  this.images = container.getElementsByTagName('IMG');
	this.setStates();
	this.images[positie].className = 'L1';
	var tekst = this.images[positie].alt;
	document.getElementById('kleurnaam').innerHTML = tekst;
	document.getElementById('kleurnaam2').innerHTML = tekst;
	document.getElementById('kleurnaam3').innerHTML = tekst;
}

Fader.fadeTo = function(index){	
  if(this.layer0) this.layer0.className = '';
  if(this.layer1) this.layer1.className = '';

  this.layer0 = this.images[this.position];
  this.layer1 = this.images[index];

 this.position = index;
  this.setOpacity(this.layer0, 1);
  this.setOpacity(this.layer1, 0);

  this.layer0.className = 'L0';
  this.layer1.className = 'L1';

  this.playhead.start();
  this.draw();
  var tekst = this.layer1.alt;
	document.getElementById('kleurnaam').innerHTML = tekst;
	document.getElementById('kleurnaam2').innerHTML = tekst;
	document.getElementById('kleurnaam3').innerHTML = tekst;

	this.setStates();
}


Fader.draw = function(){
  var scope = this;
  var loop = function(){scope.draw.call(scope)}
  var time = this.playhead.getTime();
  value = 0 + time/700;
  this.setOpacity(this.layer1, value);
  if(value < 1)
    window.setTimeout(loop, 60);
}


Fader.setOpacity = function(element, value){
  element.style.opacity = value;
  element.style.filter = 'alpha(opacity='+Math.round(100*value)+')';
}

Fader.showNext = function(){
	// Image overslaan als deze geen alt waarde heeft
	var value = 1;
	while( value < this.images.length && this.images[this.position+value].alt == "")
		value++;

	if(this.position == this.images.length-1) return;
	this.fadeTo(this.position+value);
}

/*Fader.showNext = function(){
	if(this.position == this.images.length-1) return;
	this.fadeTo(this.position+1);
}*/

Fader.showPrev = function(){
	// Image overslaan als deze geen alt waarde heeft
	var value = 1;
	while( this.images[this.position-value].alt == "" && this.position-value >= 0)
		value++;

	if(this.position == 0) return;
	this.fadeTo(this.position-value);
}

/*Fader.showPrev = function(){
	if(this.position == 0) return;
	this.fadeTo(this.position-1);
}*/


Fader.setStates = function(){
	this.prevbtn.className = (this.position <= 0) ? 'hidden' : '';
	this.nextbtn.className = (this.position == this.images.length -1) ? 'hidden' : '';
}