
var photoTaggerAjaxFile = "http://cpr.iub.edu/photoTagger/ajax.cfm";
var contentFiles = "http://cpr.iub.edu/uploads";

var tagBorderStyle_normal = "2px dotted #00ff00";
var tagBorderStyle_admin = "2px dotted #00ff00";
var tagBorderStyle_none = "0px dotted #00ff00";

var useTagBG = "#ffffff";
var useTagOpacity = "0.01";
var useTagOpacityIE = useTagOpacity * 100;


//-------------------------------------------------------------------------------------------------------------

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dxOffset = 0;
var dyOffset = 0;

var thumbWidth = 100;
var thumbHeight = 100;
var thumbTop = 0;
var thumbLeft = 0;
var borderThickness = 10;

var oldWidth = 0;
var oldHeight = 0;
var newWidth = 0;
var newHeight = 0;


var boxRad = 20;
var editedBox = "";
var boxH = boxRad * 2;
var boxW = boxRad * 2;
var boxX = 0;
var boxY = 0;



//  initPhotoTagger(1635,false,"taggerDiv_1635","photoDiv_1635","#ff0000","0.4","tagLinks_1635","<br />");

function initPhotoTagger(pid,admin,taggerDiv,photoDiv,setTagBG,setTagOpacity,tagLinksDiv,tagLinksDelim)
{

	if (!(setTagBG)) { } else { useTagBG = setTagBG; }
	if (!(setTagOpacity)) { } else { useTagOpacity = setTagOpacity; }

	document.onmousemove = update;
	document.onmouseover = update;
	document.onclick = update;

	update();

	oldWidth = boxW;
	oldHeight = boxH;
	newWidth = boxW;
	newHeight = boxH;

	loadTaggablePhoto(pid,admin,taggerDiv,photoDiv,tagLinksDiv,tagLinksDelim);

}





function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)
  updateImgOffset('photoDiv');
}



function updateImgOffset(d)
{

	if (!(document.getElementById(d)))
	{
	}
	else
	{
		dxOffset = document.getElementById(d).offsetLeft;
		dyOffset = document.getElementById(d).offsetTop;
	}

}




function tagSpot(d)
{
	
	mPos = GetElementAbsolutePos(d);
	dX = mPos.x;
	dY = mPos.y;
	var bX = mousex - dX;
	var bY = mousey - dY;

	if (navigator.appName=="Microsoft Internet Explorer")
	{
		bX += document.documentElement.scrollLeft + d.offsetLeft;
		bY += document.documentElement.scrollTop + d.offsetTop;
	}

//	showBox(d,w,h,bX,bY);
	tBoxID = "tagBox";
	editedBox = tBoxID;
	var tBox = document.getElementById(tBoxID);
	tBox.style.position = "absolute";
	tBox.style.top = bY + "px";
	tBox.style.left = bX + "px";
	tBox.style.width = boxW + "px";
	tBox.style.height = boxH + "px";
	tBox.style.display = "block";


}




function saveBoxInfo()
{
	boxX = document.getElementById(editedBox).offsetLeft;
	boxY = document.getElementById(editedBox).offsetTop;
	boxW = document.getElementById(editedBox).offsetWidth;
	boxH = document.getElementById(editedBox).offsetHeight;
}

function saveBox()
{

	var boxCaption = document.getElementById('boxCaption').value;	
	var photoID = document.getElementById('form_photoID').value;
	var tempurl = photoTaggerAjaxFile + "?action=saveBox&boxCaption="+boxCaption+"&boxX="+boxX+"&boxY="+boxY+"&boxW="+boxW+"&boxH="+boxH+"&photoID="+photoID;
//	alert(tempurl);
	var aj = ajax("passive",tempurl,"");
//	document.getElementById('debug').innerHTML = aj;
	window.location.reload(true);
}


function deleteTagBox(tid)
{
	var tempurl = photoTaggerAjaxFile + "?action=deleteBox&tag_id=" + tid;	
	var aj = ajax("passive",tempurl,"");
	window.location.reload(true);
}








function loadTaggerForm(pid,taggerDiv)
{
	code = "";
	code += "<p>";
	code += "Caption: <input type=\"text\" id=\"boxCaption\" style=\"width:400px;\" />";
	code += "<br /><br />";
	code += "Box Action: <select id='grabAction'><option value='move'>Move</option><option value='resize'>Resize</option></select>";
	code += "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";
	code += "Ratio: <select id='ratioType'><option value='fixed'>Fixed</option><option value='stretchable'>Stretchable</option></select>";
	code += "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";
	code += "<input type=\"hidden\" id=\"form_photoID\" value=\""+pid+"\" />";
	code += "<button onClick=\"saveBox();\">SaveBox</button>";
	code += "</p>";
	document.getElementById(taggerDiv).innerHTML = code;
//	document.write(code);

}





function loadTaggablePhoto(pid,admin,taggerDiv,photoDiv,tagLinksDiv,tagLinksDelim)
{
	
	tempurl = photoTaggerAjaxFile + "?action=getPhoto&photoID="+pid;
	aj = ajax("passive",tempurl,"");
	tpA = parseQueryXML(aj,"<upload>","</upload>");
	if (tpA.length==1)
	{
		tp_id = parseQueryXML(tpA[0],"<upload_id>","</upload_id>");
		tp_file = parseQueryXML(tpA[0],"<upload_file>","</upload_file>");
		var code = "";
		code += "<img id=\"photo"+pid+"\"";
		if (admin)
		{
			code += " onmousedown=\"tagSpot(this);\"";
		}
		
		
		code += " style=\"position:relative; border:none;\" src=\""+contentFiles+"/"+tp_file+"\">";
		
		
		if (admin)
		{
			code += "<div id=\"tagBox\" style=\"display:none;\" class=\"photoBox_tagging\">";
			code += "	<div onMouseDown=\"grabAction(document.getElementById('tagBox'));\"";
			code += "	 style=\"float:right; background-color:#cccccc; border:1px solid #000000; color:#000000; padding:2px;\">";
			code += "	 [~]";
			code += "	</div>";
			code += "</div>";
		}
		
		document.getElementById('debug').value = code;
		
		document.getElementById(photoDiv).innerHTML = code;

		if (admin) { loadTaggerForm(pid,taggerDiv); }

		loadPhotoTags(pid,admin,taggerDiv,photoDiv,tagLinksDiv,tagLinksDelim);
	
	}

}



function loadPhotoTags(pid,admin,taggerDiv,photoDiv,tagLinksDiv,tagLinksDelim)
{
	
	var tempurl = photoTaggerAjaxFile + "?action=getTags&photoID="+pid;
	var aj = ajax("passive",tempurl,"");
//	document.getElementById('photoDiv').innerHTML += "<hr />" + aj;
	var ptA = parseQueryXML(aj,"<photoTag>","</photoTag>");
	if (ptA.length > 0)
	{
		
		var tagLinksCode = "";
		var tempDelim = "";
		
		var code = "";
		for (i=0;i<ptA.length;i++)
		{
			var tag_id = parseQueryXML(ptA[i],"<tag_id>","</tag_id>")[0];
			var tag_caption = parseQueryXML(ptA[i],"<tag_caption>","</tag_caption>")[0];
			var tagX = parseQueryXML(ptA[i],"<tagX>","</tagX>")[0];
			var tagY = parseQueryXML(ptA[i],"<tagY>","</tagY>")[0];
			var tagW = parseQueryXML(ptA[i],"<tagW>","</tagW>")[0];
			var tagH = parseQueryXML(ptA[i],"<tagH>","</tagH>")[0];
			code += "<div id=\"photoTag_"+tag_id+"\"";
			if (admin)
			{
				code += " class='photoBox_admin'";
			}
			else
			{
				code += " class='photoBox_tagged'";
			}
			code += " style=\"height:"+tagH+"px; width:"+tagW+"px; top:"+tagY+"px; left:"+tagX+"px;\"";
			if (!(admin))
			{
				code += " onclick=\"alert('"+tag_caption+"');\"";
				code += " onmouseover=\"showTagBox("+tag_id+");\""
			}
			if (!(admin))
			{
				code += " onmouseout=\"hideTagBox("+tag_id+");\"";
			}
			code += ">.";
			if (admin)
			{
				code += "<div style=\"float:right; font-size:8pt; background-color:#cccccc; border:1px solid #000000;\">";
				code += "<a href=\"javascript:;\"";
				code += " style=\"color:#000000; text-decoration:none; padding:3px;\"";
				code += " onclick=\"deleteTagBox("+tag_id+");\"";
				code += ">X</a>";			
				code += "</div>";
			}
			code += "</div>";


			if (!(tagLinksDiv)) {}
			else
			{
				tagLinksCode += tempDelim + "<a class='tagCaptionLink' href=\"javascript:;\" onmouseover=\"showTagBox("+tag_id+");\" onmouseout=\"hideTagBox("+tag_id+");\">"+tag_caption+"</a> \n";
				tempDelim = tagLinksDelim;
			}
		
		
//			code += "<div id=\"tagCaptionDiv\" class=\"tagCaptionDiv\">\n</div>\n";
			document.getElementById(photoDiv).innerHTML += code;
			if (!(tagLinksDiv)) { }
			else
			{
				tagLinksCode += "<a class='tagCaptionLink' href='javascript:;' onmouseover=\"showTagBox("+pid+");\" onmouseout=\"hideTagBox("+pid+");\"></a>";
				document.getElementById(tagLinksDiv).innerHTML = tagLinksCode;
			}
		
		}
		
	}
}





function parseQueryXML(rText, sTag, eTag)
{
	r = new Array;
	var sTagLen = sTag.length;
	var i = 0;
	while ( (rText.search(sTag) > -1) && (rText.search(eTag) > -1) && ( rText.search(sTag) < rText.search(eTag) ) )
	{
		stringStart = rText.search(sTag) + sTagLen;
		stringEnd = rText.search(eTag);
		stringString = rText.substring(stringStart, stringEnd);
		r[i] = stringString;
		rText = rText.replace(sTag,"");
		rText = rText.replace(eTag,"");
		i++;
	}
	return r;
}










function showPhotoTag(p)
{
	p.style.border = tagBorderStyle_normal;	
}
function hidePhotoTag(p)
{
	p.style.border = tagBorderStyle_none;	
}


function showTagBox(tid)
{
	var del = document.getElementById("photoTag_"+tid);

/*
	del.style.backgroundColor = useTagBG;
	del.style.borderColor = "#000000";
	del.style.borderWidth = "1px";
	del.style.borderStyle = "solid";
	if (navigator.appName=="Microsoft Internet Explorer")
	{
		del.style.filter="alpha(opacity="+useTagOpacityIE+")";
	}
	else
	{
		del.style.opacity = useTagOpacity;
	}
*/

	del.style.display = "block";
}

function hideTagBox(tid)
{
	var del = document.getElementById("photoTag_"+tid);
/*
	if (navigator.appName=="Microsoft Internet Explorer")
	{
		del.style.filter="alpha(opacity="+1+")";
	}
	else
	{
		del.style.opacity = "0.01";
	}
*/
	del.style.display = "none";
}

function fillCaptionDiv(cd,cap)
{
	document.getElementById('tagCaptionDiv_'+cd).innerHTML=cap;
}

function clearCaptionDiv(cd)
{
	document.getElementById('tagCaptionDiv_'+cd).innerHTML='';	
}






function showTaggedPhoto()
{

	var r = "";

/*

				<div id="photo#photoID#_div" style="position:relative;">
						
					<!-- ============================================================ -->
					<input type="hidden" id="photoID" value="#photoID#" />	
					<img id="photo#photoID#" src="#CPR_URL#/uploads/#getPhoto.upload_file#" style="position:relative;" />



					<!-- ============================================================ -->

				</div>








*/
}




function getTagBoxes()
{
/*
					<cfquery name="getBoxes" datasource="#dbsrc#">
						SELECT * FROM photoTag WHERE upload_id = #photoID# ORDER BY tag_order
					</cfquery>
					<cfloop query="getBoxes">
					
						<cfset escapedCaption = getBoxes.tag_caption>
						<cfset escapedCaption = Replace(escapedCaption,"'","\'","All")>
						<cfset escapedCaption = Replace(escapedCaption,'"',"&quot;","All")>
						
				
						<div id="photo#getPhoto.upload_id#_box_#getBoxes.tag_id#" class='photoBox' style="position:absolute; height:#getBoxes.tagH#px; width:#getBoxes.tagW#px; top:#getBoxes.tagY#px; left:#getBoxes.tagX#px;" onMouseOver="fillCaptionDiv(#getPhoto.upload_id#,'#escapedCaption#');" onMouseOut="clearCaptionDiv(#getPhoto.upload_id#);"></div>
					</cfloop>


					<div id="tagCaptionDiv_#getPhoto.upload_id#" class="tagCaptionDiv"></div>	

*/
}









function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }
  }
}

function falsefunc() { return false; } // used to block cascading events







function grabAction(context)
{
	if (document.getElementById('grabAction').value=="resize")
	{
		startResizing(context);
	}
	else
	{
		grab(context);
	}
}








function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  orix = dragobj.offsetLeft;
  oriy = dragobj.offsetTop;
  elex = orix;
  eley = oriy;
  panelid = dragobj.id;
  update();
}

function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
  
	// Causes improper jump on the first grab
	elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);

	if (elex<0)
	{
	 elex += (0-elex);
	}
	if (eley<0)
	{
	 eley += (0-eley);
	}

    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
			
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS

  saveBoxInfo();

}





function startResizing(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  editedBox = context.id;
 
  document.onmousemove = resize;
  document.onmouseup = stopResizing;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();  
}

function resize(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {

	
    elex = orix + (mousex-grabx);	// Causes improper jump on the first grab
    eley = oriy + (mousey-graby);
	if (elex<0)
	{
	 elex += (0-elex);
	}
	if (eley<0)
	{
	 eley += (0-eley);
	}

    var new_width = Math.abs(mousex - grabx);
	var new_height = Math.abs(mousey - graby);
	if (document.getElementById('ratioType').value=="fixed")
	{
		var new_height = (oldHeight/oldWidth) * new_width;
	}
	
	
    dragobj.style.width = new_width + 'px';
    dragobj.style.height  = new_height + 'px';

	newWidth = document.getElementById(editedBox).offsetWidth;
	newHeight = document.getElementById(editedBox).offsetHeight;

	update(e);
	return false; // in IE this prevents cascading of events, thus text selection is disabled

  }

}




function stopResizing()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS

  saveBoxInfo();

}















var __isFireFox = navigator.userAgent.match(/gecko/i);  
//returns the absolute position of some element within document  
function GetElementAbsolutePos(element) {  
	var res = new Object();  
	res.x = 0; res.y = 0;  
	if (element !== null) {  
		res.x = element.offsetLeft;   	
		res.y = element.offsetTop;
		var offsetParent = element.offsetParent;  
		var parentNode = element.parentNode;  
		while (offsetParent !== null) {  
			res.x += offsetParent.offsetLeft;  
			res.y += offsetParent.offsetTop;  
			if (offsetParent != document.body && offsetParent != document.documentElement) {  
			res.x -= offsetParent.scrollLeft;  
			res.y -= offsetParent.scrollTop;  
		}  
		//next lines are necessary to support FireFox problem with offsetParent  
		if (__isFireFox) {  
			while (offsetParent != parentNode && parentNode !== null) {  
				res.x -= parentNode.scrollLeft;  
				res.y -= parentNode.scrollTop;  
				parentNode = parentNode.parentNode;  
			}      
		}  
		parentNode = offsetParent.parentNode;  
		offsetParent = offsetParent.offsetParent;  
		}  
	}  
	return res;  
} 


















