var activeTagsID = null
var activeImage = null;
var activeImageMouseX;
var activeImageMouseY;
var activePersonID = -2;
var activePersonName = "";

var frameHeight = 50;
var frameWidth = 50;
function tag_people_setup()
{
  populateSelector();
  registerKeys();
}

function tagHit()
{
  
  if( (activePersonID == -2 || activePersonName == "") && ge('name').value == "")
    return;

  if( activePersonID != -2 && activePersonID != -3 ) {
    
    addTagToPage(activeTagsID, activePersonName, activePersonID, activeImage, activeImageMouseX, activeImageMouseY);

    
    friendCount = friends.length;
    for( index = 0; index < friendCount; index += 2 )
      if( friends[index + 1] == activePersonID ) {
        superfriends.push(friends[index], friends[index + 1]);
        friends.splice(index, 2);
        break;
      }
  }
  else if( activePersonID == -3 ) {
  
    addTagToPage(activeTagsID, activePersonName, -3, activeImage, activeImageMouseX, activeImageMouseY);
  }
  else {
 
    addTagToPage(activeTagsID, ge('name').value, -3, activeImage, activeImageMouseX, activeImageMouseY);

  
    superfriends.push(ge('name').value, -3);
  }

  resetSelector();
}

function imageMouseDown(event, image, tagsID)
{
  dtimestart();
  if( image != activeImage ) {
    activeImage = image;
    activeTagsID = tagsID;
    activePersonID = -2;
    activePersonName = "";
    if( ge('name').value != "" ) {
      ge('name').value = "";
      populateSelector();
    }
  }
  dtime("Click ActivePerson");

  activeImageMouseX = mousePosX(event) - findX(activeImage);
  activeImageMouseY = mousePosY(event) - findY(activeImage);


  updateFrame(activeImage, activeImageMouseX, activeImageMouseY);
 
  return false;
}

function imageMouseUp()
{
  ge('name').focus();
  ge('name').select();
}

function frameMouseDown(event)
{
  activeImageMouseX = mousePosX(event) - findX(activeImage);
  activeImageMouseY = mousePosY(event) - findY(activeImage);
  
  updateFrame(activeImage, activeImageMouseX, activeImageMouseY);
}

function frameMouseUp()
{
  ge('name').focus();
  ge('name').select();
}

function updateFrame(image, imageMouseX, imageMouseY)
{
  imageMinX = findX(image);
  imageMinY = findY(image);
  imageMaxX = imageMinX + image.width;
  imageMaxY = imageMinY + image.height;

 
  frameX = findX(image) + imageMouseX;
  frameY = findY(image) + imageMouseY;
  
  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('frame').style.left = (frameX - (frameWidth/2) - 6) + "px";
  ge('frame').style.top = (frameY - (frameHeight/2) - 6) + "px";

  
  ge('selector').style.left = (imageMinX - 190) + "px";
  ge('selector').style.top = imageMinY + "px";

  show('selector');
  show('frame');
}

function populateSelector()
{
  
  
  if( activePersonID != -2 && activePersonName != "" ) {
    selectorContents = "<input type=checkbox checked onclick='pHit(this);' id='a1' value='" 
                     + activePersonID 
                     + "'>" 
                     + activePersonName + "<br>";
  }
 
  else {
    index = 0;
    foundCount = 0;
    selectorContents = "";
    filter = ge('name').value.toLowerCase();
    filterLen = filter.length;
    if( filter == "" )
      filter = null;

   
    superFriendCount = superfriends.length;
    for( index = 0; index < superFriendCount; index += 2 ) {
      if( !filter || superfriends[index].toLowerCase().indexOf(filter) != -1 ) {
        selectorContents += "<input type=checkbox onclick=\"pHit(this);\" name='f"+foundCount
                         +"' id='f"+foundCount
                         +"' friend=\"" + escapeQuotes(superfriends[index]) 
                         + "\" value=" + superfriends[index+1] 
                         + "><label for='f"+foundCount+"'>" 
                         + unescapeQuotes(superfriends[index]) + "</label><br>";
        lastFoundName = superfriends[index];
        lastFoundID = superfriends[index+1];
        foundCount++;
      }
    }

    
    if( foundCount > 0)
      selectorContents += "<hr>";

   
    friendCount = friends.length;
    for( index = 0; index < friendCount; index += 2 ) {
      if( !filter || friends[index].toLowerCase().indexOf(filter) != -1 ) {
        selectorContents += "<input type=checkbox onclick=\"pHit(this);\" name='f"+foundCount+"' id='f"+foundCount+"' friend=\"" + friends[index] + "\" value=" + friends[index+1] + "><label for='f"+foundCount+"'>" + unescapeQuotes(friends[index]) + "</label><br>";
        lastFoundName = friends[index];
        lastFoundID = friends[index+1];
        foundCount++;
      }
    }

    
    if( foundCount == 1 ) {
      activePersonID = lastFoundID;
      activePersonName = lastFoundName;
      selectorContents = "<input type=checkbox onclick=\"pHit(this);\" name='s1' id='s1' friend=\"" + activePersonName + "\" value=" + activePersonID + " checked >" + unescapeQuotes(activePersonName)+"";
    }
  }

 
  ge('userlist').innerHTML = selectorContents;

  
  if(foundCount == 0) {
    hide('userlist');
    hide('userlistlabel');
  } else {
    show('userlist');
    show('userlistlabel');
  }
}

function resetSelector()
{
  hide('selector');
  hide('frame');
  activeTagsID = null;
  activeImage = null;
  activeImageMouseX = 0;
  activeImageMouseY = 0;
  activePersonID = -2;
  activePersonName = "";
  ge('name').value = "";
  populateSelector();
}

function addTagToPage(tagsID, personName, personID, tagImage, tagX, tagY)
{

  if(ge(tagsID).childNodes.length > 29){
   return;
  }
  
  photoID = tagImage.getAttribute('pid');
  newTagID = photoID + "_" + personID + "_" + personName;

  newTagID = escapeQuotes(newTagID); 

  percentX = (tagX*100)/tagImage.width;
  percentY = (tagY*100)/tagImage.height;
  
  newHTML = personName;
  newHTML += "<input type='hidden' name='tag_"+photoID+"[]' id=\"tag_" + newTagID + "\"";
  newHTML += " value='" + photoID + "_" + personID + "_" + personName + "_"+ percentX + "_" + percentY + "'>";
  newHTML += " <a href='#' onclick=\"return removeTag('" + newTagID + "', '" + tagsID + "');\">remove</a>";
  
  newDiv = document.createElement("div");
  newDiv.id = newTagID;
  newDiv.innerHTML = newHTML;

 
  rmTagsDiv = ge(tagsID);  
  rmTagDiv = ge(newTagID);
  if( rmTagDiv && rmTagsDiv )
    rmTagsDiv.removeChild(rmTagDiv);

  ge(tagsID + '_none').style.display = "none";
  ge(tagsID).appendChild(newDiv);
}

function removeTag(tagID, tagsID)
{
  

  tagsDiv = ge(tagsID);
  tagDiv = ge(tagID);
  tagsDiv.removeChild(tagDiv);
  
  if( tagsDiv.childNodes.length == 0 )
    show(tagsID + "_none");
  return false;
}