// Javascript: Image tagging core

var imgObj = document.getElementById('image');
var tagTop;
var tagLeft;
var imgTagTop;
var imgTagLeft;
var tmp,i;
var name;
var tagId;
var totalTags = 0;
var tagOrder;
var imgWidth=imgObj.clientWidth;
var imgHeight=imgObj.clientHeight;

var browser=navigator.appName;
var IE = "Microsoft Internet Explorer";

var msgObj = document.getElementById('msg');
addEventListener('mousemove',FindTag,imgObj);

function FindTag(event)
{	
	var imgTop = parseInt(findPosY(document.getElementById("image")));
	var imgLeft = parseInt(findPosX(document.getElementById("image")));
//alert("imgTop:"+imgTop+", imgLeft:"+imgLeft );
	var mouseX = getClickX(event);
	var mouseY = getClickY(event);
	/////////////////////////////////////////////
	if(browser!=IE)
	{
	mouseY = mouseY - 290;
	
	mouseX = mouseX -35;//+ 10;
	}
	//alert("mouseX:"+mouseX+", mouseY:"+mouseY );
	
	for(i=1;i<=totalTags;i++)
	{
		startY = parseInt(document.getElementById('tagTop'+i).value);
		startX = parseInt(document.getElementById('tagLeft'+i).value);
		//startY = startY + 200;/////////////////////////////////////
		//startX = startX-30;		
		
		endX = startX + 188;
		endY = startY + 188;
		name = document.getElementById('userTagValue'+i).value;
		
		if((mouseX >= startX) && (mouseX <= endX) && (mouseY >= startY) && (mouseY <= endY))
		{
			HeighlightTag(startY,startX,name);
			return;
		}
	}
	HideTag();
}

function HeighlightTag(tagTop,tagLeft,tagName)
{	
	//alert("tagTop:"+tagTop+", tagLeft:"+tagLeft );
	var imgTop = findPosY(document.getElementById("image"));
	var imgLeft = findPosX(document.getElementById("image"));
	tagTop+=imgTop;	
	tagLeft+=imgLeft;
	
	document.getElementById('tagBox').style.display="block";
	document.getElementById('tagBox').style.top=tagTop + "px";
	document.getElementById('tagBox').style.left=tagLeft + "px";
	document.getElementById('tagBox').style.zIndex=100;
	document.getElementById('tagName').style.display="block";
	document.getElementById('tagName').innerHTML = tagName;
}

function HideTag()
{
	document.getElementById('tagBox').style.zIndex=0;
	document.getElementById('tagBox').style.display="none";
	document.getElementById('tagName').style.display="none";
}

function PrepareTagging()
{
	HideTag();
	imgObj.style.cursor= "crosshair";
	document.getElementById('stopTagging').style.display="block";
	addEventListener('click',TagHere,imgObj);
	removeEventListener('mousemove',FindTag,imgObj);	
}
function StopTagging()
{
	imgObj.style.cursor='default';
	document.getElementById('stopTagging').style.display='none';
	removeEventListener('click',TagHere,imgObj);
	removeEventListener('click',TagHere,document.getElementById('innerBox'));
	document.getElementById('tagBox').style.display='none';
	document.getElementById('innerBox').style.cursor='default';
	document.getElementById('peopleSelect').style.display='none';
	addEventListener('mousemove',FindTag,imgObj);
}

function TagHere(event)
{
	var clickX = getClickX(event);
	var clickY = getClickY(event);
	//alert(clickX +' cXY '+clickY);
	var imgTop = findPosY(document.getElementById("image"));
	var imgLeft = findPosX(document.getElementById("image"));
	
	//var imgTop = document.getElementById("image").offsetTop;
	//var imgLeft =document.getElementById("image").offsetLeft;
	
	//alert(imgTop +' iTL '+ imgLeft);
	tagTop = clickY - 94 + imgTop; 
	tagLeft = clickX - 94 + imgLeft; 
	
	/////////// Edited This protoin is for FF
	if(browser!=IE)
	{
	var temp =  clickY - imgTop - 94;
	tagTop = imgTop + temp + 120;
	temp = clickX - imgLeft - 94;
	tagLeft = imgLeft + temp + 120;
	
	}
	/////////
	
	
	//Top and Left position from where image starts
	imgTagTop = clickY - 94;
	imgTagLeft = clickX - 94;
	/////////////////////////////////
	if(browser!=IE)
	{
	var temp =  clickY - imgTop - 94;
	imgTagTop = imgTop + temp - 280;
	temp = clickX - imgLeft - 94;
	imgTagLeft = imgLeft + temp - 30;
	
	}
	
	
	
	
	
	var imgRight = imgLeft + imgWidth;
	var imgBottom = imgTop + imgHeight;

	if(tagTop<imgTop){
		tagTop = imgTop;
		imgTagTop = 0;
	}
	if(tagLeft<imgLeft){
		tagLeft = imgLeft;
		imgTagLeft = 0;
	}
	if(tagTop>(imgBottom-197)){
		tagTop = imgBottom-197;
		imgTagTop = imgHeight-197;
		////////////
		//imgTagTop = tagTop;
	}	
	if(tagLeft>(imgRight-197)){
		tagLeft = imgRight-197;
		imgTagLeft = imgWidth-197;
		/////////////////////////////
		//imgTagLeft = tagLeft;
	}

	document.getElementById('tagBox').style.display = "block";
	document.getElementById('tagBox').style.top = tagTop + "px";
	document.getElementById('tagBox').style.left = tagLeft + "px";
	document.getElementById('tagBox').style.zIndex = 100;	
	
	document.getElementById('innerBox').style.cursor='crosshair';
	addEventListener('click',TagHere,document.getElementById('innerBox'));	
	
	document.getElementById('peopleSelect').style.display = 'block';
	document.getElementById('peopleSelect').style.top = tagTop + "px";
	document.getElementById('peopleSelect').style.left = tagLeft + 200 + "px";
	document.getElementById('peopleSelect').style.zIndex = 200;
	document.getElementById('tagText').focus();
}

function AddTag()
{
	var alreadyTagged = document.getElementById("tagList").innerHTML;
	var val = document.getElementById("tagText").value;
	var pos = alreadyTagged.indexOf(val);
	if(pos>=0){
		msgObj.innerHTML="Already tagged "+val+" in this photo.";
		StopTagging();
	}else{
		totalTags++;
		tagOrder++;
		var tagUserId=document.getElementById("tagUserId").value;		  
		var tagName=val;
		var infoObj = document.getElementById("tagInfo");
		infoObj.innerHTML = infoObj.innerHTML + "<input type='hidden' id='userTagValue"+totalTags+"' value='"+val+"' />";
		infoObj.innerHTML = infoObj.innerHTML + "<input type='hidden' id='tagTop"+totalTags+"' value='"+imgTagTop+"' />";
	  	infoObj.innerHTML = infoObj.innerHTML + "<input type='hidden' id='tagLeft"+totalTags+"' value='"+imgTagLeft+"' />";
		  
		//Save in DB
		AddPhotoTag(photoId,imgTagTop,imgTagLeft,tagName,tagOrder,tagUserId);
		  
		val = "<b><a id='"+totalTags+"' onmouseover='HeighlightTag("+imgTagTop+","+imgTagLeft+",\""+val+"\""+")' style=\"cursor:pointer;color:#000000\" onmouseout='HideTag()'>"+val+"</a></b>(<b><a onmouseover='HeighlightTag("+imgTagTop+","+imgTagLeft+",\""+val+"\""+")' onclick='RemovePhotoTag("+tagOrder+","+photoId+")' style=\"cursor:pointer;color:#C81F1F\" onmouseout='HideTag()'>remove tag</a></b>)";
		tagObj = document.getElementById("tagList");
			 
		var tVal = tagObj.innerHTML;
		if(tVal && tVal!=" ")
			tagObj.innerHTML = tVal + " | " + val;
		else
			tagObj.innerHTML = val;
			
		tagObj.style.display = "block";   
	
    	DoChange(tagName);
    	//Clear the tagged user id
    	document.getElementById("tagUserId").value="";
	}
}

function DoChange(val)
{
	msgObj.innerHTML="Successfully tagged "+val+" in this photo.";
	StopTagging();
}

function ResetTotalTags(t,o)
{		
	totalTags=t;	
	tagOrder=o;
}