var width = (screen.width || window.innerWidth)
var height = (screen.height || window.innerHeight)
var centre_vert = (width / 2)
var centre_hori = (height / 2)

var current_state = 0
var temp_pos = 0

var steps = 20
var delay = 10

var counter = 1

var num_of_positions = 4
var num_of_objects = 4
var num_of_properties = 4

// POSITION ARRAY
var position = new Array(num_of_positions)

for(i=0; i < num_of_positions; i++) {
	position[i] =  new Array(num_of_objects);
}

for(i = 0; i < num_of_positions; i++) {
	for(j = 0; j < num_of_objects; j++) {
		position[i][j] = new Array(num_of_properties);
	}
}
// position[0] = {{},{},{}}	 ...
// object 0	- position 0 - logo
position[0][0][0] = centre_vert - 400;  // left
position[0][0][1] =	centre_hori - 222  	// top
position[0][0][2] =	222;				// height
position[0][0][3] =	222; 	   			// width
// object 1	- position 0 - title
position[0][1][0] =	centre_vert - 170;
position[0][1][1] =	centre_hori - 197; //120;
position[0][1][2] =	76;
position[0][1][3] =	396;
// object 2	- position 0 - menu
position[0][2][0] =	centre_vert + 90; //240;
position[0][2][1] =	centre_hori - 117;//1;         // can't be 0 coz move() doesn't/can't go to 0 ? enigma
position[0][2][2] =	20;
position[0][2][3] =	400;
// object 3	- position 0 - line
position[0][3][0] =	centre_vert - 170; //240;
position[0][3][1] =	centre_hori - 120;
position[0][3][2] =	3;
position[0][3][3] =	565;

// object 0	- position 1
position[1][0][0] =	centre_vert - 400; //200;
position[1][0][1] =	30;
position[1][0][2] =	80;
position[1][0][3] =	80;
// object 1	- position 1
position[1][1][0] =	centre_vert - 310; //270;
position[1][1][1] =	34;
position[1][1][2] =	76;
position[1][1][3] =	396;
// object 2	- position 1
position[1][2][0] =	centre_vert + 90; //310;
position[1][2][1] =	117; // 30 + title height + 10
position[1][2][2] =	20;
position[1][2][3] =	400;
// object 3	- position 1
position[1][3][0] =	centre_vert - 400; //310;
position[1][3][1] =	112; // 30 + logo height + 2
position[1][3][2] =	2;
position[1][3][3] =	800;

// object 0	- position 2
position[2][0][0] =	centre_vert + 320; //600;
position[2][0][1] =	30;
position[2][0][2] =	80;
position[2][0][3] =	80;
// object 1	- position 2
position[2][1][0] =	centre_vert - 85;
position[2][1][1] =	34;
position[2][1][2] =	76;
position[2][1][3] =	396;
// object 2	- position 2
position[2][2][0] =	centre_vert + 90;;
position[2][2][1] =	117;
position[2][2][2] =	20;
position[2][2][3] =	400;
// object 3	- position 2
position[2][3][0] =	centre_vert - 400;
position[2][3][1] =	112;
position[2][3][2] =	2;
position[2][3][3] =	800;

// object 0	- position 3
position[3][0][0] =	centre_vert + 320;
position[3][0][1] =	30;
position[3][0][2] =	80;
position[3][0][3] =	80;
// object 1	- position 3
position[3][1][0] =	centre_vert - 82;
position[3][1][1] =	34;
position[3][1][2] =	76;
position[3][1][3] =	396;
// object 2	- position 3
position[3][2][0] =	centre_vert - 400;
position[3][2][1] =	117;
position[3][2][2] =	20;
position[3][2][3] =	400;
// object 3	- position 3
position[3][3][0] =	centre_vert - 90;
position[3][3][1] =	30;
position[3][3][2] =	105;
position[3][3][3] =	5;

// OBJECT ARRAY
var objects = new Array(num_of_objects)

objects[0] = "object01";
objects[1] = "object02";
objects[2] = "object03";
objects[3] = "object04";

// SPIEL ARRAY
var spiel = new Array(num_of_objects)

spiel[0] = "home_spiel";
spiel[1] = "about_us_spiel";
spiel[2] = "portfolio_spiel";
spiel[3] = "contact_us_spiel";

// HEADING ARRAY
var heading = new Array(num_of_objects)

heading[0] = "dummy";
heading[1] = "about_us_img";
heading[2] = "portfolio_img";
heading[3] = "dummy";

// INCREMENTS ARRAY
var increments = new Array(num_of_objects)

for(i = 0; i < num_of_objects; i++) {
 	increments[i] = new Array(num_of_properties);
}

// initialise increments to 0
for(i = 0; i < num_of_objects; i++) {
 	for(j = 0; j < num_of_properties; j++){
		increments[i][j] = 0
	}
}

// INC ARRAY - these will change as move() function iterates
var inc = new Array(num_of_objects)

for(i = 0; i < num_of_objects; i++) {
 	inc[i] = new Array(num_of_properties);
}

// initialise inc to 0
for(i = 0; i < num_of_objects; i++) {
 	for(j = 0; j < num_of_properties; j++){
		inc[i][j] = 0
	}
}

// called when page loads and sets positions of objects to first position
function init(){
	for(i = 0; i < num_of_objects; i++) {
		document.getElementById(objects[i]).style.left = position[0][i][0];
		document.getElementById(objects[i]).style.top = position[0][i][1];
		document.getElementById(objects[i]).style.height = position[0][i][2];
		document.getElementById(objects[i]).style.width = position[0][i][3];
		document.getElementById(objects[i]).style.visibility = "visible";
		document.getElementById(spiel[i]).style.left = centre_vert - 400;;
		document.getElementById(spiel[i]).style.top = 150;
	}
	document.getElementById(spiel[num_of_objects - 1]).style.left = centre_vert - 50;;
	document.getElementById(spiel[num_of_objects - 1]).style.top = 350;
	//document.getElementById(about_us_img).style.left = centre_vert - 50;;
	//document.getElementById(about_us_img).style.top = 350;
	//document.getElementById(heading[2]).style.left = centre_vert + 300;;
	//document.getElementById(heading[2]).style.top = 350;

	document.getElementById(spiel[2]).style.width = 800;
}

// moves objects
function move(position_num) {
	// debug
	//document.getElementById('txt').value = counter

	document.getElementById(spiel[current_state]).style.visibility = "hidden";
	document.getElementById(heading[current_state]).style.visibility = "hidden";

	if(counter < 2){ temp_pos = position_num }

	// CALCULATE INCREMENTS
	// if(counter < 2) { calculate increments calc_inc() }
	// call function as above
	// ie if first time
	if(counter < 2) {
		for(i = 0; i < num_of_objects; i++) {
			for(j = 0; j < num_of_properties; j++) {
				increments[i][j] = ((position[current_state][i][j] - position[position_num][i][j]) / steps)// do current_state and position_num
			}
		}
	}

	// SET POSITION	 - set_position()
	// ie if first time -
	// when we move objects we get its current position and in the next if() we add or subtract the increments from this
	if(counter < 2) {
		for(i = 0; i < num_of_objects; i++) {	// another for loop
			for(j = 0; j < num_of_properties; j++) {
				// do current_state and position_num
				inc[i][j] = position[current_state][i][j]
			}
		}
	}

	if(counter <= steps) {
		// set new values for positions - increment by increment value
		for(i = 0; i < num_of_objects; i++) { for(j = 0; j < num_of_properties; j++) {
				inc[i][j] = inc[i][j] - increments[i][j] // do current_state and position_num
		}	}

		// now move them
		for(i = 0; i < num_of_objects; i++) {
			document.getElementById(objects[i]).style.left = inc[i][0];
			document.getElementById(objects[i]).style.top = inc[i][1];
			document.getElementById(objects[i]).style.height = inc[i][2];
			document.getElementById(objects[i]).style.width = inc[i][3];
		}
		//var bob = document.getElementById(objects[3]).style.left;
		//document.getElementById('contactUs').style.left = bob;
		var timer = setTimeout("move();", delay);
		counter++
	}
	else {
		counter = 1
		current_state = temp_pos
		document.getElementById(spiel[current_state]).style.visibility = "visible";
		document.getElementById(heading[current_state]).style.visibility = "visible";
	}
	//document.getElementById(spiel[current_state]).style.visibility = "visible";
}