// JavaScript Document
document.onmousemove = mouseMove; 
document.onmousedown = mouseDown; 

var move_box = false;	//checker to move box
var box_to_move = "";	//string that indicates the box to be moved

var mouse_prev_x = 0;	//previous position of the mouse
var mouse_prev_y = 0;	//previous position of the mouse

var leaf_placing = 0;	//checker that indicates if placing a leaf wish
var leaf_of_choice = 0;	//indicates the leave of choice to be placed

var show_others_wish = false;	//checker to indicate whether to show the wish of others
var wish_to_show = "";			//string to indicate the wish to be shown
var box_name = 'insert a new location';	//string to indicate the original wish making box


var move_leaf = false; //checker that indicates to move leave 
var leaf_to_move = ''; //string that indicates the leaf to be moved

//when the mouse have been clicked
function mouseDown(ev){
	
	/*
	if (!ev) var ev = window.event;
	if (ev.target) targ = ev.target;	
	*/
	
	//places the leave to some interesting place on the window
	if(leaf_placing ){
		//alert("I love to place leaf");
		leaf_placing = false;
	  	//var d = document.getElementById('leaf_holder');
	  	document.getElementById('place leaf instruction').style.left = -1000;

		document.body.style.cursor = "default";		
		
		//updates the display over here in the interface
		document.getElementById('current_wish').innerHTML = document.getElementById('my_wish').value;
		document.getElementById('current_name').innerHTML = document.getElementById('name').value;
		
		//sends all the stuff to the server for recording
		wish = document.getElementById('my_wish').value;
		name = document.getElementById('name').value;		
		email = document.getElementById('email').value;		
		position_x = ((document.getElementById('leaf_holder').style.left.replace(/px/,"")*1));		
		position_y = ((document.getElementById('leaf_holder').style.top.replace(/px/,"")*1));		
	
		xajax_recordWish(leaf_of_choice, wish, name, email, position_x , position_y);		
	}
	

	/*
	else if(!leaf_placing){
		if (ev.target) targ = ev.target;			
		alert(targ.innerHTML);
	}*/
}

//when the mouse is moving
function mouseMove(ev){
	ev = ev || window.event; 
	//alert("Hello");
	document.getElementById("err_msg").innerHTML = "<b>Debugging</b><br>";
	document.getElementById("err_msg").innerHTML += "mouse X : "+(ev.clientX + document.body.scrollLeft - document.body.clientLeft)+"<br>\r\n";		
	document.getElementById("err_msg").innerHTML += "mouse Y : "+(ev.clientY + document.body.scrollTop  - document.body.clientTop)+"<br>\r\n";		
	document.getElementById("err_msg").innerHTML += "Client X : "+(ev.clientX )+"<br>\r\n";		
	document.getElementById("err_msg").innerHTML += "Client Y : "+(ev.clientY)+"<br>\r\n";			
	document.getElementById("err_msg").innerHTML += "Scroll Left  : "+(document.body.scrollLeft )+"<br>\r\n";		
	document.getElementById("err_msg").innerHTML += "Scroll Top  : "+(document.body.scrollTop  )+"<br>\r\n";			
	document.getElementById("err_msg").innerHTML += "Client Left: "+(ev.clientX + document.body.scrollLeft - document.body.clientLeft)+"<br>\r\n";		
	document.getElementById("err_msg").innerHTML += "Client Top Y : "+(ev.clientY + document.body.scrollTop  - document.body.clientTop)+"<br>\r\n";			
	document.getElementById("err_msg").innerHTML += "move box : "+move_box +"<br>\r\n";				
	document.getElementById("err_msg").innerHTML += "box to move : "+box_to_move +"<br>\r\n";					
	
	//moving the tool tip
	if(move_box && box_name == 'tool_tip'){
		//alert('tool_tip');						
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		
		
		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 20;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft +10;
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}	
	
	
	//moving the voting result box
	if(move_box && (box_name == 'about contents' || box_name == 'about contribute' || box_name == 'tag cloud content')){
		//alert('insert a new location');				
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		
		
		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 12;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)/2);
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}		
	
	//moving the voting result box
	if(move_box && box_name == 'Peoples choice'){
		//alert('insert a new location');				
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		
		
		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 12;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)/2);
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}	
	
	//moving the comments result box
	if(move_box && box_name == 'show comments'){
		//alert('insert a new location');				
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		
		
		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 12;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)/2);
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}		
	
	

	//moving the toggle box
	if(move_box && box_name == 'insert a new location'){
		//alert('insert a new location');				
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		
		
		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 12;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)/2);
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}	


	//moving the toggle box
	if(move_box && box_name == 'show you tube'){
		//alert('show you tube');		
		document.getElementById("err_msg").innerHTML += "New move X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x)+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New move Y :"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";

		/*
		document.getElementById(box_to_move).style.top = ((document.getElementById(box_to_move).style.top.replace(/px/,"")*1)) + ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  ;
		document.getElementById(box_to_move).style.left = ((document.getElementById(box_to_move).style.left.replace(/px/,"")*1)) + ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x  ;
		*/

		document.getElementById("err_msg").innerHTML += "Change X :"+ (ev.clientX + document.body.scrollLeft - document.body.clientLeft - mouse_prev_x )+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "Change Y:"+ (ev.clientY + document.body.scrollTop  - document.body.clientTop - mouse_prev_y  )+"<br>\r\n";		

		document.getElementById(box_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 12;
		document.getElementById(box_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - 200;
		
		document.getElementById("err_msg").innerHTML += "New position of box Y :"+ document.getElementById(box_to_move).style.top+"<br>\r\n";
		document.getElementById("err_msg").innerHTML += "New position of box X:"+ document.getElementById(box_to_move).style.left+"<br>\r\n";		

		document.getElementById("err_msg").innerHTML += "Width of box :"+ ((document.getElementById(box_to_move).style.width.replace(/px/,"")*1)+1) +"<br>\r\n";				
	}	
		
	
	//when choosing where to place the leaf after making the wish
	if(leaf_placing){
		document.getElementById("leaf_holder").style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 15;
		document.getElementById("leaf_holder").style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - 15;		
		
	  	document.getElementById('place leaf instruction').style.top = 	ev.clientY + document.body.scrollTop  - document.body.clientTop  - 10;
	  	document.getElementById('place leaf instruction').style.left = 	ev.clientX + document.body.scrollLeft - document.body.clientLeft + 25;			
	}
	
	if(move_leaf){
		document.getElementById(leaf_to_move).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  - 15;
		document.getElementById(leaf_to_move).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft - 15;				
		
	  	document.getElementById('place leaf instruction').style.top = 	ev.clientY + document.body.scrollTop  - document.body.clientTop  - 10;
	  	document.getElementById('place leaf instruction').style.left = 	ev.clientX + document.body.scrollLeft - document.body.clientLeft + 25;					
	}
	
	//do a box to show other people's wish
	if(show_others_wish){
		document.getElementById("wish"+wish_to_show).style.top = ev.clientY + document.body.scrollTop  - document.body.clientTop  + 10;
		document.getElementById("wish"+wish_to_show).style.left = ev.clientX + document.body.scrollLeft - document.body.clientLeft +10;				
	}
	

	mouse_prev_x = ev.clientX + document.body.scrollLeft - document.body.clientLeft;
	mouse_prev_y = ev.clientY + document.body.scrollTop - document.body.clientTop;
}


//hides the box
function toggle_insert_box(box_name_x){

	box_name = 	box_name_x;
	document.getElementById(box_name_x).style.left="-1000px";

	
	//document.getElementById('mini_show_map').style.left = "440px";
	//document.getElementById('mini_show_map').style.top	= "540px";		
}

//when shifting this latest leaf again
function specialShiftleaf(id){
	if(id =='leaf_holder') return;
	else 
	{
		
		//when placing leaf
		if(move_leaf ){
			
			document.getElementById('place leaf instruction').style.left = -1000;		
			position_x = ((document.getElementById(leaf_to_move).style.left.replace(/px/,"")*1));		
			position_y = ((document.getElementById(leaf_to_move).style.top.replace(/px/,"")*1));			
			leaf_to_move = leaf_to_move.replace(/leaf/,"");
			
			xajax_updateLeafLocation(leaf_to_move , position_x, position_y );
			
			move_leaf = false;		
			leaf_to_move = "";	
		}	
		//when moving leaf
		else{
	
			hideWish(0);		
			move_leaf = true;		
			leaf_to_move = id;			
	
		}		
		
	}

}

//when a mouse has clicked on a leaf
function shiftleaf(id){

	//when placing leaf
	if(move_leaf ){
		
	  	document.getElementById('place leaf instruction').style.left = -1000;		
		position_x = ((document.getElementById(leaf_to_move).style.left.replace(/px/,"")*1));		
		position_y = ((document.getElementById(leaf_to_move).style.top.replace(/px/,"")*1));			
		leaf_to_move = leaf_to_move.replace(/leaf/,"");
		
		xajax_updateLeafLocation(leaf_to_move , position_x, position_y );
		
		move_leaf = false;		
		leaf_to_move = "";	
	}	
	//when moving leaf
	else{

		hideWish(id);		
		move_leaf = true;		
		leaf_to_move = 'leaf'+id;			

	}


}

//start movign box
function move_toggle_box(element){
	move_box = true;
	box_name = element;
	box_to_move = element;

}

//stop box from moving
function fix_toggle_box(){
	move_box = false;
	box_name = null;	
	box_to_move = null;
}

//swap from wish to leaf choice
function swapWindows(now_name, next_name){


	var email = document.getElementById('email').value;	
	var wish = document.getElementById('my_wish').value;
	var name = document.getElementById('name').value;	

	
	if(wish =="" ){

		document.getElementById('wish_err').innerHTML = "Please wish for something";	
		return;
	}
	else if(name =="" ){

		document.getElementById('wish_err').innerHTML = "Please enter your name";	
		return;
	}
	else if(email == "") {

		document.getElementById('wish_err').innerHTML = "Please enter your email";	
		return;
	}
	
	
	curr_position_top = document.getElementById(now_name).style.top;
	curr_position_left = document.getElementById(now_name).style.left;	
	document.getElementById(now_name).style.top= -1000;	
	document.getElementById(next_name).style.top = 	curr_position_top ;
	document.getElementById(next_name).style.left = 	curr_position_left ;		
	//alert(element);
	//alert(next_name);
}

//attaches the leaf to the mouse to be placed
function showLeafs(leaf){
	leaf_of_choice = leaf;
	document.getElementById('wishing_leaf').src = "images/leaf"+leaf+".png";
	document.getElementById("choose a leaf box").style.top= -1000;		
	//alert(document.body.style.cursor );
	document.body.style.cursor = "hand";
	leaf_placing = true;
}

//when showing other people's wish
function showWish(id){
	if(leaf_placing) return;
	if(move_leaf) return;
	wish_to_show = id;
	show_others_wish = true;
}

//when time to hide other people's wish
function hideWish(id){
	show_others_wish = false;
	document.getElementById("wish"+id).style.left = '-1000px';	

}