// JavaScript Document

//vars voor loop
var timeCountLoop = 0;
var duration = 2000;
var timeInt = 40;
var distance = 0;//= afgelegde weg tijdens navigatie
var routeArrayLoop = new Array();
var distancesArrayLoop = new Array();
var directionLoop = "x";
var radius = 50;

function getDistances(tempRoute,getDistancesDirection){
	
	var distances = new Array();
	var tempEven = 0;
	var tempOdd = 0;
	var sum = 0;
	
	//startpositie lezen
	switch (getDistancesDirection){
		case 'x':
			tempEven = currX;
			tempOdd = currY;
			break;
		case 'y':
			tempEven = currY;
			tempOdd = currX;
			break;
		default:
			tempEven = currX;
			tempOdd = currY;
			break;
	}
	
	//array opvullen
	for (i=0;i < tempRoute.length;i++){
		switch (i%2){
			case 0:
				sum = sum + Math.abs(tempEven - tempRoute[i]);
				distances[i] = sum;
				tempEven = tempRoute[i];
				break;
			case 1:
				sum = sum + Math.abs(tempOdd - tempRoute[i]);
				distances[i] = sum;
				tempOdd = tempRoute[i];
				break;
		}
	}
	return distances;
};

function navigate(startDirection,route){
	distancesArrayLoop = getDistances(route,startDirection);
	routeArrayLoop = route;
	directionLoop = startDirection;
	runNavigateLoop();
};

function runNavigateLoop(){
	//positie berekenen en uitvoeren ifv timeCount(0->1)
	var distance = Math.round( smooth(timeCountLoop,true,true,1) * distancesArrayLoop[distancesArrayLoop.length-1]); //afgelegde weg in pixels
	
	var d1 = 0;
	while (distance > distancesArrayLoop[d1]+radius){
		d1++;	
	};
	
	var d2 = 0;
	while (distance > distancesArrayLoop[d2]-radius){
		d2++;	
	};
	
	var tempX = currX;
	var tempY = currY;
	if(d1 == d2 || d1 == distancesArrayLoop.length-1){ //rechtdoor
		switch (directionLoop){
			case "x":
				if (d1%2 == 0){//begonnen met x
					if (d1 == 0){
					tempX = currX + (routeArrayLoop[d1]-currX) *  distance/distancesArrayLoop[d1];
					}
					else{
					tempX = currX + (routeArrayLoop[d1]-currX) *  (distance-distancesArrayLoop[d1-1])/(distancesArrayLoop[d1]-distancesArrayLoop[d1-1]);
					currY = routeArrayLoop[d1-1];
					tempY = routeArrayLoop[d1-1];
					}
					render(tempX,currY);
				}
				else{
					tempY = currY + (routeArrayLoop[d1]-currY) * (distance-distancesArrayLoop[d1-1])/(distancesArrayLoop[d1]-distancesArrayLoop[d1-1]);
					currX = routeArrayLoop[d1-1];
					tempX = routeArrayLoop[d1-1];
				}
				break;
			case "y":
				if (d1%2 == 0){//begonnen met y
					if (d1 == 0){
					tempY = currY + (routeArrayLoop[d1]-currY) *  distance/distancesArrayLoop[d1];
					}
					else{
					tempY = currY + (routeArrayLoop[d1]-currY) *  (distance-distancesArrayLoop[d1-1])/(distancesArrayLoop[d1]-distancesArrayLoop[d1-1]);
					currX = routeArrayLoop[d1-1];
					tempX = routeArrayLoop[d1-1];
					}
				}
				else{
					tempX = currX + (routeArrayLoop[d1]-currX) * (distance-distancesArrayLoop[d1-1])/(distancesArrayLoop[d1]-distancesArrayLoop[d1-1]);
					currY = routeArrayLoop[d1-1];
					tempY = routeArrayLoop[d1-1];
				}
				break;
			default:
				break;
		}
	}
	else{ //ronding
		switch(directionLoop){
			case "x":
				if(d1%2 == 0){//begonnen met x -> van horizontaal naar verticaal
					// X-coordinate
					if (tempX < routeArrayLoop[d1]){//going-right
						tempX = routeArrayLoop[d1] - radius + radius * Math.sin( (distance - distancesArrayLoop[d1] + radius)/2/radius * Math.PI/2 );
					}
					else{//going-left
						tempX = routeArrayLoop[d1] + radius - radius * Math.sin( (distance - distancesArrayLoop[d1] + radius)/2/radius * Math.PI/2 );
					}
					// Y-coordinate
					if(tempY > routeArrayLoop[d1+1]){//going-up
						tempY = currY - radius + radius * Math.sin( (1 - (distance - distancesArrayLoop[d1] + radius)/2/radius) * Math.PI/2 );
					}
					else{//going-down
						tempY = currY + radius - radius * Math.sin( (1 - (distance - distancesArrayLoop[d1] + radius)/2/radius) * Math.PI/2 );
					}
				}
				else{// van verticaal naar horizontaal
					if (tempY < routeArrayLoop[d1]){
						tempY = routeArrayLoop[d1] - radius + radius * Math.sin( (distance - distancesArrayLoop[d1] + radius)/2/radius * Math.PI/2 );
					}
					else{
						tempY = routeArrayLoop[d1] + radius - radius * Math.sin( (distance - distancesArrayLoop[d1] + radius)/2/radius * Math.PI/2 );
					}
					
					if(tempX > routeArrayLoop[d1+1]){
						tempX = currX - radius + radius * Math.sin( (1 - (distance - distancesArrayLoop[d1] + radius)/2/radius) * Math.PI/2 );
					}
					else{
						tempX = currX + radius - radius * Math.sin( (1 - (distance - distancesArrayLoop[d1] + radius)/2/radius) * Math.PI/2 );
					}
				}
				break;
			case "y":
				break;
		}
	}
	render(tempX,tempY);
	
	if (distance >= distancesArrayLoop[distancesArrayLoop.length-1]){//stopt
		timeCountLoop=0;
		currX = tempX;
		currY = tempY;
		}
	else{//herhaalt met nieuwe timeCount
		timeCountLoop += timeInt/duration;
		t= setTimeout("runNavigateLoop()",timeInt);
		};
};

function render(renderX,renderY){
	
	windowWidth = document.body.clientWidth;
	windowHeight = document.body.clientHeight;
	
	var myWindow = document.getElementById("window");
	//myWindow.style.width = (pageWidth)+"px";
	//myWindow.style.height = (pageHeight)+"px";
	myWindow.style.left = Math.round(windowWidth/2 - pageWidth/2 - renderX)+"px";
	myWindow.style.top = Math.round(windowHeight/2 - menuHeight/2  - pageHeight/2 - renderY)+"px";

	var myBg01 = document.getElementById("windowBackground01");
	//myBg01.style.width = (bg01Width)+"px";
	//myBg01.style.height = (bg01Height)+"px";
	myBg01.style.left = Math.round(windowWidth/2 - bg01Width/2  - renderX * bg01MotionFactor )+"px";
	myBg01.style.top = Math.round(windowHeight/2 - menuHeight/2 - bg01Height/2 - renderY * bg01MotionFactor )+"px";

	
	var myBg02 = document.getElementById("windowBackground02");
	//myBg02.style.width = (bg02Width)+"px";
	//myBg02.style.height = (bg02Height)+"px"; 
	myBg02.style.left = Math.round(windowWidth/2 - bg02Width/2 - renderX * bg02MotionFactor )+"px";
	myBg02.style.top = Math.round(windowHeight/2 - menuHeight/2 - bg02Height/2 - renderY * bg02MotionFactor )+"px";
	

};

function jump(jumpX, jumpY){
	
	render(jumpX,jumpY)
	currX = jumpX;
	currY = jumpY;

}

function smooth(pct,start,end,strength){
	if (start == true && end == true){return (1 - Math.cos(pct*Math.PI))/2*strength + pct*(1-strength);}
	else if(start == true && end == false){return Math.sin(pct*Math.PI/2)*strength + pct*(1-strength);}
	else if(start == false && end == true){return 1 - Math.cos(pct*Math.PI/2)*strength + pct*(1-strength);}
	else{return pct;}
}

//navigate("x",new Array(100,-100,0,0));


function fadeObject(id, c1, c2, s1, s2) {
  var self = this;
  this.id      = id;
  this.elem    = false;
  this.colour  = {
    stt: [parseInt(c1.substr(0, 2), 16), parseInt(c1.substr(2, 2), 16), parseInt(c1.substr(4, 2), 16)],
    end: [parseInt(c2.substr(0, 2), 16), parseInt(c2.substr(2, 2), 16), parseInt(c2.substr(4, 2), 16)],
    now: [parseInt(c1.substr(0, 2), 16), parseInt(c1.substr(2, 2), 16), parseInt(c1.substr(4, 2), 16)]
  };
  this.steps   = [s1, s2];
  this.dir     = false;
  this.active  = false;
  this.queue   = [];
  this.msg     = [];
  this.message = 0;
  function d2h(num) {
    num = Math.round(num);
    return ((num < 16) ? "0" : "") + num.toString(16);
  }
  this.fade = function(message, direction) {
    this.elem = this.elem || document.getElementById(this.id);
    this.queue.push([message, direction]);
    for (var x = 0; x < this.queue.length; x++) {
      for (var y = x + 1; y < this.queue.length; y++) {
        if (this.queue[x][0] == this.queue[y][0] && this.queue[x][1] != this.queue[y][1]) {
          this.queue.splice(x, 1);
          this.queue.splice(y - 1, 1);
        }
      }
    }
    if (!this.active) setTimeout(function() { self.fadeLoop(); }, 10);
  };
  this.fadeLoop = function() {
    if (!this.active && this.queue.length) {
      if (this.dir && this.message != this.queue[0][0]) this.queue.unshift([this.message, false]);
      var msg = this.queue.shift();
      if (this.msg[msg[0]]) {
        this.active = true;
        this.elem.innerHTML = this.msg[this.message = msg[0]];
        this.dir = msg[1];
      }
    }
    if (this.dir) {
      var c1 = this.colour.stt, c2 = this.colour.end, s = this.steps[0];
    } else var c1 = this.colour.end, c2 = this.colour.stt, s = this.steps[1];
    for (var x = 0, cnow = "", inc = 0; x < 3; x++) {
      this.colour.now[x] += inc = (c2[x] - c1[x]) / s;
      cnow += this.colour.now[x] = (inc < 0) ? Math.max(this.colour.now[x], c2[x]) : Math.min(this.colour.now[x], c2[x]);
    } this.elem.style.color = "#" + d2h(this.colour.now[0]) + d2h(this.colour.now[1]) + d2h(this.colour.now[2]);
    if (cnow == c2.join("")) {
      this.active = false;
      if (!this.queue.length) {
        if (!this.dir) {
          if (this.msg[0]) {
            this.queue.push([0, true]);
            setTimeout(function() { self.fadeLoop(); }, 10);
          } else this.elem.innerHTML = "&nbsp;";
        }
      } else setTimeout(function() { self.fadeLoop(); }, 10);
    } else setTimeout(function() { self.fadeLoop(); }, 10);
  };
  if (window.addEventListener) {
    window.addEventListener('load', function() { self.fade(0, true); }, false); 
  } else if (window.attachEvent)
    window.attachEvent('onload', function() { self.fade(0, true); });
}