//pos settings
pos1= new Array();
pos1["x"]=10;pos1["y"]=128;pos1["z"]=100;
pos2= new Array();
pos2["x"]=127;pos2["y"]=65;pos2["z"]=500;
pos3= new Array();
pos3["x"]=305;pos3["y"]=0;pos3["z"]=10000;
pos4= new Array();
pos4["x"]=480;pos4["y"]=65;pos4["z"]=500;
pos5= new Array();
pos5["x"]=600;pos5["y"]=128;pos5["z"]=100;
pos6= new Array();
pos6["x"]=305;pos6["y"]=170;pos6["z"]=0;
focused="";

//Define an object
function Box(){

	//var bname="";
	//var pos="";
	
	this.getPosX = function(){
		return this.pos["x"];
	}
	this.getPosY = function(){
		return this.pos["y"];
	}
	this.getPosZ = function(){
		return this.pos["z"];
	}
	this.getName = function(){
		return this.bname;
	}

	this.setPos = function(x,y,z){
		this.pos["x"] = x;
		this.pos["y"] = y;
		this.pos["z"] = z;

		return true;
	}
	return true;
}

function showSubtext(thebox){
	//Show the subtext
}

function swapBoxes(box){

	//	alert(box.getName()+" called!");

	//get the clicked box's info
	var x = box.getPosX();
	var y = box.getPosY();
	var z = box.getPosZ();
	var newbox = box.getName();

	var oldbox = focused.getName();

	//Move the currently focused (old box) to the new, unfocused position
	//$('#'+oldbox).css({left:x,top:y,"z-index":z});
	$('#'+oldbox).css({"z-index":z});

	$('#'+oldbox).animate({left:x,top:y});

	//Make the OLD link INactive
	$("#"+oldbox+" > .boxlink").hide();	

	//Make the OLD subtext INactive
	$("#"+oldbox+" > .subtext").hide();		

	//focus the new box
	//$("#"+newbox).css({left:200,top:100,"z-index":10000});
	$("#"+newbox).css({"z-index":10000});
	$("#"+newbox).animate({left:305,top:0}, function(){
		$("#"+newbox+" > .subtext").css('display','block');
		$("#"+newbox+" > .subtext").animate({opacity:1},500);
	} );

	//Make the NEW link active
	$("#"+newbox+" > .boxlink").css('display','block');
	$("#"+newbox+" > .boxlink").show();

	//set coordinates for old focused to where the new focused was
	focused.setPos(x,y,z);

	//alert( "old focused = " + oldbox +","+ focused.getPosX()+","+focused.getPosY()+","+focused.getPosZ());

	focused = box;

	//set coordinates for new focused front and center
	focused.setPos(pos3["x"],pos3["y"],pos3["z"]);

	//alert( "new focused = " +focused+" "+ focused.getName() +","+ focused.getPosX()+","+focused.getPosY()+","+focused.getPosZ());

}

$().ready( function(){

	//Init boxes
	var box1 = new Box;
		box1.bname="box1";
		box1.pos = pos1;
	var box2 = new Box;
		box2.bname="box2";
		box2.pos = pos2;
	var box3 = new Box;
		box3.bname="box3";
		box3.pos = pos3;
	var box4 = new Box;
		box4.bname="box4";
		box4.pos = pos4;
	var box5 = new Box;
		box5.bname="box5";
		box5.pos = pos5;
	var box6 = new Box;
		box6.bname="box6";
		box6.pos = pos6;

	//Currently focused box
	focused = box3;

	//Turn on link and subtext for start box

	//Set initial positions of the boxes
	$("#box1").css({left:pos1["x"],top:pos1["y"],"z-index":pos1["z"]});
	$("#box2").css({left:pos2["x"],top:pos2["y"],"z-index":pos2["z"]});
	$("#box3").css({left:pos3["x"],top:pos3["y"],"z-index":pos3["z"]});
	$("#box4").css({left:pos4["x"],top:pos4["y"],"z-index":pos4["z"]});
	$("#box5").css({left:pos5["x"],top:pos5["y"],"z-index":pos5["z"]});
	$("#box6").css({left:pos6["x"],top:pos6["y"],"z-index":pos6["z"]});

	//Bind actions
	$("#box1").bind("click", function(){ swapBoxes(box1); });
	$("#box2").bind("click", function(){ swapBoxes(box2); });
	$("#box3").bind("click", function(){ swapBoxes(box3); });
	$("#box4").bind("click", function(){ swapBoxes(box4); });
	$("#box5").bind("click", function(){ swapBoxes(box5); });
	$("#box6").bind("click", function(){ swapBoxes(box6); });
});