var followMode = true;
var arrImageTags = new Array() ;
var frameSize = 126;
var taggedPersons = new Hash({});
var profileUrl = '/profileView/1';
var imageId = 'imageToTag';
var nameContId = 'taggedName';
var imgDim = new Object({
  startX : -1,
  startY : -1,
  endX : -1,
  endY : -1,
  width : 0,
  height : 0
});

Event.observe(window, 'load', function() {
  if($('rawImageLink'))
  {
    Event.observe('rawImageLink', 'mousemove', tag_checkRegion.bindAsEventListener());
  }
});

// imageTag object that stores the tags information
function imageTag(type, percentX, percentY, taggedFrameX, taggedFrameY, id, name)
{
  this.type = type;
  this.percentX = percentX;
  this.percentY = percentY;
  this.taggedFrameX = taggedFrameX;
  this.taggedFrameY = taggedFrameY;
  this.id =	id;
  this.name = name;
}

function initImgDim()
{
  var tag_img = $(imageId);

  //use getWidth() instead width (input type="image")
  imgDim.width = tag_img.getWidth();
  imgDim.height = tag_img.getHeight();
  imgDim.startX = tag_findX(tag_img);
  imgDim.startY = tag_findY(tag_img);
  imgDim.endX = imgDim.startX + imgDim.width;
  imgDim.endY = imgDim.startY + imgDim.height;

  return true;
}

function tag_getMousePos(axis, e)
{
  var pos=0;
  if(!e)
    var e=window.event;

  switch (axis) {
    case 'x':
      if(e.pageX)
        pos=e.pageX;
      else if(e.clientX&&document.body.scrollLeft)
        pos=e.clientX+document.body.scrollLeft;
      else if(e.clientX&&document.documentElement.scrollLeft)
        pos=e.clientX+document.documentElement.scrollLeft;
      else if(e.clientX)
        pos=e.clientX;
      break;

    case 'y':
      if(e.pageY)
       pos=e.pageY;
      else if(e.clientY&&document.body.scrollTop)
       pos=e.clientY+document.body.scrollTop;
      else if(e.clientY&&document.documentElement.scrollTop)
       pos=e.clientY+document.documentElement.scrollTop;
      else if(e.clientY)
       pos=e.clientY;
      break;
  }

  return pos;
}

function tag_showElAt(elName, x, y)
{
  var el = $(elName);
  el.style.left=x+"px";
  el.style.top=y+"px";

  el.show();
}

function tag_showName(index)
{
  initImgDim();
  var x = arrImageTags[index].percentX * imgDim.width / 100;
  var y = arrImageTags[index].percentY * imgDim.height / 100;
  $(nameContId).update(arrImageTags[index].name);

  //var frameWidth = el[1].taggedFrameX * imgDim.width * 0.01;

  var showX = imgDim.startX+x-$(nameContId).getWidth()/2;
  var showY = imgDim.startY+y;
  tag_showElAt(nameContId, showX, showY);
}

function tag_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 tag_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;
}

var tag_pixels_moved=0;
var toShow = null;
function tag_checkRegion(event) //show tag region
{
  if (tag_pixels_moved++%3 != 0)
    return;
  else
    tag_pixels_moved = 0;

  initImgDim();

  var xCoor, yCoor;
  xCoor = tag_getMousePos('x', event);
  yCoor = tag_getMousePos('y', event);
  var dist = null;
  toShow = null;

  arrImageTags.each(function(el, index){
    //alert(el.percentX);
    var posX = (el.percentX * imgDim.width / 100) + imgDim.startX;
    var posY = (el.percentY * imgDim.height / 100) + imgDim.startY;
    var dx, dy;
    var inRange = true;

    var frameWidth = el.taggedFrameX * imgDim.width * 0.01;
    var frameHeight = el.taggedFrameY * imgDim.height * 0.01;

    if (xCoor > (posX - (frameWidth/2)) && xCoor < (posX + (frameWidth/2)))
    {
      dx = posX - xCoor;
      if (dx < 0) dx = dx * -1;
    }
    else inRange = false;
    if (yCoor > (posY - (frameHeight/2)) && yCoor < (posY + (frameHeight/2)))
    {
      dy = posY - yCoor;
      if (dy < 0) dy = dy * -1;
    }
    else inRange = false;

    if (inRange)
    {
      if (dist == null || (dx+dy) < dist)
      {
        dist = dx+dy;
        toShow = index;
      }
    }
  });

  if (toShow != null)
  {
    tag_showName(toShow);
  }
  else
  {
    $(nameContId).hide();
  }
}

function tag_linkClicked(event)
{
  if (toShow != null && arrImageTags[toShow].type == 'person')
  {
    var re = new RegExp('0$', "g");
    var correctUrl = profileUrl.replace(re,arrImageTags[toShow].id);
    window.location = correctUrl;
  }
  else
  {
    return true;
  }
  return false;
}