function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft,curtop];
}

function capture_face_points(e) {
	var coordX = coordY = coordOffset = 0;
	
	coordOffset = findPos(document.getElementById('uploaded_image'));
	coordX = e.clientX + document.documentElement.scrollLeft - coordOffset[0];
	coordY = e.clientY + document.documentElement.scrollTop - coordOffset[1];	
	
	var visual_clientY;
	var visual_clientX;
	
	visual_clientX = e.clientX + document.documentElement.scrollLeft;
	visual_clientY = e.clientY - 4 + document.documentElement.scrollTop;
		
	//Grab mouse coords from clicks and stick them in hidden var for php to handle
	if(document.getElementById('point1').value == "x,y") {
		document.getElementById('point1').value = coordX + "," + coordY;
		document.getElementById('indicator_point1').style.display = 'block';
		document.getElementById('indicator_point1').style.top = visual_clientY + "px";
		document.getElementById('indicator_point1').style.left = visual_clientX + "px";
	}
	else if(document.getElementById('point2').value == "x,y") {
		document.getElementById('point2').value = coordX + "," + coordY;
		document.getElementById('indicator_point2').style.display = 'block';
		document.getElementById('indicator_point2').style.top = visual_clientY + "px";
		document.getElementById('indicator_point2').style.left = visual_clientX + "px";
	}
	else if(document.getElementById('point3').value == "x,y") {
		document.getElementById('point3').value = coordX + "," + coordY;
		document.getElementById('indicator_point3').style.display = 'block';
		document.getElementById('indicator_point3').style.top = visual_clientY + "px";
		document.getElementById('indicator_point3').style.left = visual_clientX + "px";
		
		//change shown div to crop confirm
		document.getElementById('show_example').style.display = 'none';
		document.getElementById('crop_confirm').style.display = 'block';
	}
}

function reset_face_points() {
	//reset indicated points
	document.getElementById('point1').value = "x,y";
	document.getElementById('indicator_point1').style.display = 'none';
	document.getElementById('point2').value = "x,y";
	document.getElementById('indicator_point2').style.display = 'none';
	document.getElementById('point3').value = "x,y";
	document.getElementById('indicator_point3').style.display = 'none';

	//change shown div back to example
	document.getElementById('crop_confirm').style.display = 'none';
	document.getElementById('show_example').style.display = 'block';

}