function loadurl(fk_PhotoID) 
{

  try 
  {
    // Moz supports XMLHttpRequest. IE uses ActiveX.
    // browser detction is bad. object detection works for any browser
    xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(e) 
  {
    // browser doesn't support ajax. handle however you want
  }
       
  // Get the current values from the hidden form fields
  var PosX = document.getElementById('PosX').value;
  var PosY = document.getElementById('PosY').value;
  var Radius = document.getElementById('Radius').value;
  var Tag = document.getElementById('tagInput').value;

  // Hide the crosshair and info box
  hideTagBox();

  // the xmlhttp object triggers an event everytime the status changes
  // triggered() function handles the events
  xmlhttp.onreadystatechange = triggered;
       
  // open takes in the HTTP method and url.
  xmlhttp.open("GET", 'modules/Photos/ajax_save_tag.php?fk_PhotoID=' + fk_PhotoID + '&PosX=' + PosX + '&PosY=' + PosY +'&Radius=' + Radius + '&Tag=' + Tag);

  // send the request. if this is a POST request we would have
  // sent post variables: send("name=aleem&gender=male)
  // Moz is fine with just send(); but
  // IE expects a value here, hence we do send(null);
  xmlhttp.send(null);

  // Update the tagStatus atop the page
  document.getElementById('tagStatus').innerHTML = "<b>Tag for " + Tag + " saved.</b><br/>You can continue to tag the photo below.<br/>When you are done, click the 'Done Tagging' button to resume browsing.";
  //document.getElementById('tagStatus').innerHTML = '<b>Something Saved</b>';

}
       
function triggered() 
{

  // if the readyState code is 4 (Completed)
  // and http status is 200 (OK) we go ahead and get the responseText
  // other readyState codes:
  // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
  if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) 
  {
    // xmlhttp.responseText object contains the response.
    // Said variable can be outputted for an AJAX passthrough
    // document.getElementById("tagStatus").innerHTML = "";
  }

}


function getCoor( e, nextURL ) 
{

  // Get the current tagBox size
  var tagSize = document.getElementById('crosshair').width;

  // Get the image size
  var imageWidth = document.getElementById('myImg').width;
  var imageHeight = document.getElementById('myImg').height;

  // Calculate the image center
  var imageCenter = Math.floor( imageWidth / 2 );

  // Get the current mouse click position
  var mouseX = e.pageX;
  var mouseY = e.pageY;

  // Get the top left corner of the image
  var imageX = document.getElementById('myImg').x;
  var imageY = document.getElementById('myImg').y;

  // Get the mouse click position relative to the image
  var relX = ( mouseX - imageX );
  var relY = ( mouseY - imageY );

  // Correct the temp location so that the
  // tagBox will be centered instead of the topLeft
  offSet = Math.floor( tagSize / 2 );
  mouseX = mouseX - offSet;
  mouseY = mouseY - offSet;

  // Calculate for overlapping the edges
  var correctX = mouseX - ( imageWidth - offSet );
  var correctY = mouseY - ( imageHeight - offSet );

  // Correct for overlapping edges 

  // Correct for the left edge
  if( relX < offSet )
    mouseX = imageX;

  // Correct for the right edge
  if( relX > ( imageWidth - offSet ) ) // 604 - 75
    mouseX = imageX + imageWidth - tagSize;

  // Correct for the top edge
  if( relY < offSet )
    mouseY = imageY;

  // Correct for the bottom edge
  if( relY > ( imageHeight - offSet ) ) // 453 - 75
    mouseY = imageY + imageHeight - tagSize;

  // Set the new position of the marker box
  document.getElementById('crosshair').style.left = mouseX + 'px';
  document.getElementById('crosshair').style.top = mouseY + 'px';

  // Set the new position of the info box
  if( relX < imageCenter )
    document.getElementById('info').style.left = (mouseX + tagSize) + 'px';
  else
    document.getElementById('info').style.left = (mouseX - 187) + 'px'; 

  document.getElementById('info').style.top = mouseY + 'px';

  // Update the input text fields
  document.getElementById('PosX').value = relX;
  document.getElementById('PosY').value = relY;

  // Enable the overlay if tag mode is turned on
  var tagEnabled = document.getElementById('tagEnabled').value;

  // Finally, display the tagging block if the
  // tag mode is currently enabled
  if( tagEnabled == 'true' )
  {
    document.getElementById('crosshair').style.display = 'block';
    document.getElementById('info').style.display = 'block';
  }
  else
  {
    window.location = nextURL;
  }

  // Debugger
  // document.getElementById('words').innerHTML = "Relative: (" + relX + "," + relY + ' : ' + tagSize + ') Mouse: (' + mouseX + ', ' + mouseY + ') tag: ' + tagEnabled + ' :: ';
}

function enlarge(size)
{

  // Create an array of the various tag diamters
  // Note that as of this version, this array must
  // be manually adjusted to match the actual values
  // suggested by the program.
  var TagSizes = [ 50, 75, 100, 150, 200, 300 ];

  // Step through the TagSizes array and turn all of
  // the graphics to 'off'
  for( i = 0; i < TagSizes.length; i++ )
  {
    document.getElementById('SquareTag' + TagSizes[i] ).src = 'themes/openFace/images/modules/Photos/AutoTag_Size' + TagSizes[i] + '_Off.gif';
  }

  // Now turn on the newly selected TagSize
  document.getElementById('SquareTag' + size ).src = 'themes/openFace/images/modules/Photos/AutoTag_Size' + size + '_On.gif';

  // Adjust the crosshair box
  document.getElementById('crosshair').src = 'themes/openFace/images/modules/Photos/tagbox' + size + '.gif';

  // Adjust the radius (diameter) value so that the
  // rest of the JavaScript pieces can access it.
  document.getElementById('Radius').value = size;
  
  // Finally, hide the tag box so that the user will
  // have to reclick on the photo in order to display
  // the new tag box size.
  //
  // TODO: This piece should eventually be replaced
  // with something that automatically accomplishes
  // this for the user.
  hideTagBox();

} // end of function enlarge(size)

function hideTagBox()
{
  document.getElementById('crosshair').style.display = 'none';
  document.getElementById('info').style.display = 'none';
}

function populateInput(tagName, photoID)
{
  document.getElementById('tagInput').value = tagName;

  // Process the tag so the user does not have
  // to click on the 'Tag' button each time.
  loadurl(photoID);
}

function showAutoTagStatus()
{
  document.getElementById('autoTagStatus').style.display = 'block';
  document.getElementById('autoTagOptions').style.display = 'block';
  document.getElementById('tagEnabled').value = 'true';
  document.getElementById('myImgArea').href.disabled = 'true';
}

function hideAutoTagStatus(nextURL)
{
  document.getElementById('autoTagStatus').style.display = 'none';
  document.getElementById('autoTagOptions').style.display = 'none';
  document.getElementById('tagEnabled').value = 'false';
  document.getElementById('myImgArea').href = nextURL;
  hideTagBox();
}

function highlightTag(x,y,r,d)
{
  // Get the image position on the page
  var imageWidth = findPosX( document.getElementById('myImg') );
  var imageHeight = findPosY( document.getElementById('myImg') );

  document.getElementById('tagOver').src = 'themes/openFace/images/modules/Photos/tagbox' + d + '.gif';

  // Get the current tagging status.  If the admin is currently
  // tgging a photo, do not load the photo tag box
  var TagStatus = document.getElementById('tagEnabled').value;

  // Get new position coordinates for the crosshair
  var newCoorLeft = (x - r) + imageWidth;
  var newCoorTop = (y - r) + imageHeight;

  // Set the new coordinates
  document.getElementById('tagOver').style.left = newCoorLeft + 'px';
  document.getElementById('tagOver').style.top = newCoorTop + 'px';

  // Get the current tagging status.  If the admin is currently
  // tgging a photo, do not load the photo tag box
  var TagStatus = document.getElementById('tagEnabled').value;

  // Display the crosshair layer if the admin is not editing
  if( TagStatus == 'false' )
    document.getElementById('tagOver').style.display = 'block';

}

function unhighlightTag()
{
  // Hide the crosshair layer
  document.getElementById('tagOver').style.display = 'none';
}


function findPosX( obj ) 
{
  var curleft = 0;

  if( obj.offsetParent ) 
  {
    while( 1 )
    {
      curleft += obj.offsetLeft;

      if( !obj.offsetParent ) 
        break;

      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
  {
    curleft += obj.x;
  }

  return curleft;
}

function findPosY( obj )
{
  var curtop = 0;

  if( obj.offsetParent )
  {
    while( 1 )
    {
      curtop += obj.offsetTop;

      if( !obj.offsetParent )
        break;

      obj = obj.offsetParent;
    }
  } 
  else if( obj.y )
  {
    curtop += obj.y;
  }

  return curtop;
}