// JScript File

// Page Wide State
var activeTagsID = null;
var activeImage = null;
var activeImageMouseX;
var activeImageMouseY;
var activePersonID = -2;
var activePersonName = "";
var activePersonEmail = "";

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

function tagHit()
{
  var name = ge('name').value;
  var invite_email = ge('invite_email').value;

  // Bail if no name entered and no active user
  if( (activePersonID == -2 || activePersonName == "") && name == "")
    return;

  if (ge('name').value.toLowerCase() == 'me') {
      activePersonID = -1;
      activePersonName = 'Me';
  }

  if( activePersonID != -2 && activePersonID != -3 ) {
    // This is a friend/active user (email isn't needed, set to false)
    addTagToPage(activeTagsID, activePersonName, false, activePersonID, activeImage, activeImageMouseX, activeImageMouseY);

    // Loop to find activeFriendID and move to Super Friends
    friendCount = friends.length;
    for( index = 0; index < friendCount; index += 2 )
      if( friends[index + 1] == activePersonID ) {
        add_superfriend(friends[index], friends[index + 1]);
        friends.splice(index, 2);
        break;
      }
  }
  else if( activePersonID == -3 ) {
    // Tagging either an invited user from superfriends, or tagging with remembered text tag in superfriends
    addTagToPage(activeTagsID, activePersonName, activePersonEmail, -3, activeImage, activeImageMouseX, activeImageMouseY);
  }
  else {
    // New text tag or new invited user.
    addTagToPage(activeTagsID, htmlspecialchars(name), invite_email, -3, activeImage, activeImageMouseX, activeImageMouseY);
    add_superfriend(htmlspecialchars(name), -3, invite_email);
  }

  resetSelector();
}

function add_superfriend(name, id, email) {
  superfriends.push({name: name, id: id, email: email});
}

function imageMouseDown(event, image, tagsID)
{
    
    
  if(ge(tagsID).childNodes.length > 29) {
    // Too many tags on the image
    if(!ge(tagsID+'_error')) {
      var errorDiv = document.createElement('div');
      errorDiv.id = tagsID+'_error';
      errorDiv.innerHTML = '<i>You\'ve reached the tag limit for this photo.</i>';
      var errorParent = ge(tagsID).childNodes[0];
      errorParent.parentNode.insertBefore(errorDiv, errorParent);
    } else {
      ge(tagsID+'_error').style.display = 'block';
    }
    return;
  }

  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);

  /*dpd("page   " + event.pageX + " " + event.pageY);
  dpd("client " + event.clientX + " " + event.clientY);
  dpd("bodyscroll " + document.body.scrollLeft + " " + document.body.scrollTop);
  dpd("docescroll " + document.documentElement.scrollLeft + " " + document.documentElement.scrollTop);

  dpd("-" + activeImage.id + " " + mousePosX(event) + " " + mousePosY(event));
  dpd(">" + activeImage.id + " " + activeImageMouseX + " " + activeImageMouseY);*/
  updateFrame(activeImage, activeImageMouseX, activeImageMouseY);
  //dtime("Click UpdateFrame");
  return false;
}

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

function frameMouseDown(event)
{
  activeImageMouseX = mousePosX(event) - findX(activeImage);
  activeImageMouseY = mousePosY(event) - findY(activeImage);
  //dpd(">" + activeImage.id + " " + activeImageMouseX + " " + activeImageMouseY);
  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;

  // Before constraints
  frameX = findX(image) + imageMouseX;
  frameY = findY(image) + imageMouseY;
  //dpd("+" + frameX + " " + frameY);
  //dpd("c" + imageMouseX + " " + imageMouseY);

  // Apply Constraints
  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);
  //dpd("+" + frameX + " " + frameY);
  
  
  
  // Move and minus 6 for the frame border
  ge('frame').style.left = (frameX - (frameWidth/2) - 6) + "px";
  ge('frame').style.top = (frameY - (frameHeight/2) - 6) + "px";

  // Move Editor to the right
  //dpd("min" + imageMinX + " " + imageMinY);
  ge('selector').style.left = (imageMinX + 220) + "px";
  ge('selector').style.top = imageMinY + "px";

  // Make sure they're visible
  show('selector');
  show('frame');
  
  
}

function populateSelector()
{
  // Build HTML for Selector Userlist and Hide/Show/Change Labels
  // takes activePersonID and #name value into consideration

  // Special Case where specific person is chosen
  if( activePersonID != -2 && activePersonName != "" ) {
    selectorContents = '<input type="checkbox" checked="checked" onclick="pHit(this);" id="a1" value="' 
                     + activePersonID 
                     + '"/>' 
                     + activePersonName + '<br/>';
  }
  // General Case where name filter might be filled and no active person
  else {
    index = 0;
    foundCount = 0;
    selectorContents = "";
    filter = ge('name').value.toLowerCase();
    filterLen = filter.length;
    if( filter == "" )
      filter = null;

    // First Build HTML from Super Friends (Me + Previously Chosen)
    superFriendCount = superfriends.length;
    for( index = 0; index < superFriendCount; index++ ) {
      if( !filter || superfriends[index].name.toLowerCase().indexOf(filter) != -1 ) {
        selectorContents += '<input type="checkbox" onclick="pHit(this);" name="f'+foundCount
                         +'" id="f'+foundCount
                         +'" friend="' + htmlspecialchars(superfriends[index].name)
                         + '" email="' + htmlspecialchars(superfriends[index].email)
                         + '" value="' + superfriends[index].id 
                         + '"/><label for="f'+foundCount+'">'
                         + superfriends[index].name + '</label><br/>';
        lastFoundName = superfriends[index].name;
        lastFoundEmail = superfriends[index].email;
        lastFoundID = superfriends[index].id;
        foundCount++;
      }
    }

    // Maybe add a Divider
    if( foundCount > 0)
      selectorContents += "<hr/>";

    // Second Build HTML from the Rest of the Friends
    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="' + htmlspecialchars(friends[index]) + '" value="' + htmlspecialchars(friends[index+1]) + '"/><label for="f'+foundCount+'">' + friends[index] + '</label><br/>';
        lastFoundName = friends[index];
        lastFoundID = friends[index+1];
        foundCount++;
      }
    }

    // Found Single Match
    if( foundCount == 1 ) {
      activePersonID = lastFoundID;
      activePersonName = lastFoundName;
      activePersonEmail = lastFoundEmail;
      selectorContents = '<input type="checkbox" onclick="pHit(this);" name="s1" id="s1" friend="' + htmlspecialchars(activePersonName) + '" email="' + htmlspecialchars(activePersonEmail) + '" value="' + htmlspecialchars(activePersonID) + '" checked="checked"/>' + activePersonName;
    }
  }

  // Set Userlist
  ge('userlist').innerHTML = selectorContents;

  hide('invite_section'); 
  // If no user is Chosen, might hide userlist
  if(foundCount == 0) {
    hide('userlist');
    hide('userlistlabel');
    show_invite_section(filter);
  } else {
    show('userlist');
    show('userlistlabel');
  }
}

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

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


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

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

  // Remove the previous tag if it exists
  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)
{
    
  //dpd('removeTag ' + tagID + " from " + tagsID + " (" + ge(tagID) + "|" + ge(tagsID) + ")");
  var tagDiv = ge(tagID);
  var tagsDiv=tagDiv.parentNode;
  remove_node(tagDiv);
  
  if(tagsDiv.childNodes.length < 30 && ge(tagsID+'_error')) {
    ge(tagsID+'_error').style.display = 'none';
  }
 
  if( tagsDiv.childNodes.length == 0 )
    show(tagsID + "_none");
  return false;
}