var frameWidth = 166;
var frameHeight = 166;

function ge()
{
  var ea;
  for( var i = 0; i < arguments.length; i++ ) {
    var e = arguments[i];
    if( typeof e == 'string' )
      e = document.getElementById(e);
    if( arguments.length == 1 )
      return e;
    if( !ea )
      ea = new Array();
    ea[ea.length] = e;
  }
  return ea;
}

function show()
{
  for( var i = 0; i < arguments.length; i++ ) {
    var element = ge(arguments[i]);
    if (element && element.style) element.style.display = '';
  }
  return false;
}

function hide()
{
  for( var i = 0; i < arguments.length; i++ ) {
    var element = ge(arguments[i]);
    if (element && element.style) element.style.display = 'none';
  }
  return false;
}

function shown(el) {
    el = ge(el);
    return (el.style.display != 'none');
}

function findX(obj)
{
  var curleft = 0;
  if (obj.offsetParent) {
    while (obj.offsetParent) {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
    curleft += obj.x;
  return curleft;
}

function findY(obj)
{
  var curtop = 0;
  if(obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}

function mousePosX(e)
{
  var posx = 0;
  if (!e) var e = window.event;
  if (e.pageX)
    posx = e.pageX;
  else if (e.clientX && document.body.scrollLeft)
    posx = e.clientX + document.body.scrollLeft;
  else if (e.clientX && document.documentElement.scrollLeft)
    posx = e.clientX + document.documentElement.scrollLeft;
  else if (e.clientX)
    posx = e.clientX;
  return posx;
}

function mousePosY(e)
{
  var posy = 0;
  if (!e) var e = window.event;
  if (e.pageY)
    posy = e.pageY;
  else if (e.clientY && document.body.scrollTop)
    posy = e.clientY + document.body.scrollTop;
  else if (e.clientY && document.documentElement.scrollTop)
    posy = e.clientY + document.documentElement.scrollTop;
  else if (e.clientY)
    posy = e.clientY;
  return posy;
}

function showBoxAt(percentX, percentY)
{
//alert("over");
  thePhoto = ge('mainpic');
  if( thePhoto == null )
    alert('No photo found');
  thePhotoX = findX(thePhoto);
  thePhotoY = findY(thePhoto);
  ge('tagframeinside').innerHTML = "+ " + thePhotoX + "." + thePhotoY + "<br>";
  ge('tagframeinside').innerHTML += "% " + percentX + "." + percentY + "<br>";
  ge('tagframeinside').innerHTML += "d " + thePhoto.width + "." + thePhoto.height + "<br>";
  ge('tagframeinside').innerHTML += '= ' + ((percentX * thePhoto.width)/100) + "." + ((percentY * thePhoto.height)/100) + "<br>";
  newX = thePhotoX + ((percentX * thePhoto.width)/100) - (frameWidth/2);
  newY = thePhotoY + ((percentY * thePhoto.height)/100) - (frameHeight/2);
  ge('tagframeinside').innerHTML += "> " + newX + "." + newY;
  ge('tagframeinside').innerHTML = "";
//  alert(ge('tagframeinside').innerHTML);
  imageMinX = findX(thePhoto);
  imageMinY = findY(thePhoto);
  imageMaxX = imageMinX + thePhoto.width;
  imageMaxY = imageMinY + thePhoto.height;

  //alert(imageMinX);
 
  frameX = imageMinX + ((percentX * thePhoto.width)/100);
  frameY = imageMinY + ((percentY * thePhoto.height)/100);
  
  if(frameX < imageMinX + (frameWidth/2))
    frameX = imageMinX + (frameWidth/2);
  if(frameY < imageMinY + (frameHeight/2))
    frameY = imageMinY + (frameHeight/2);
  if(frameX > imageMaxX - (frameWidth/2))
    frameX = imageMaxX - (frameWidth/2);
  if(frameY > imageMaxY - (frameHeight/2))
    frameY = imageMaxY - (frameHeight/2);
  
  ge('tagframe').style.left = (frameX - (frameWidth/2) - 8) + "px";
  ge('tagframe').style.top = (frameY - (frameHeight/2) - 8) + "px";

  //ge('tagframe').style.left = "100px";
  //ge('tagframe').style.top = "100px";
  show('tagframe');
  
  //alert(frameX + "," + frameY + ","+ge('tagframe').style.left+"," + ge('tagframe').style.top);
  
}

function hide(elId){
	document.getElementById(elId).style.display = 'none';
} 
function show(elId){
	var e;
	e = document.getElementById(elId);
	e.style.display = '';
}