var tagging = 0;
var imgOffsetLeft = 0;
var imgOffsetTop = 0;

$(document).ready(function () {
   if ($("#main_photo").length)
   {
      imgOffset = $("#main_photo").offset();
      imgOffsetLeft = parseInt(imgOffset.left);
      imgOffsetTop = parseInt(imgOffset.top);
      if (tags.length)
      {
         jQuery.each(tags, function(){addTag(this);});
      }
      $('#start_tag button').click(function(){startTagging();});
      $('#stop_tag button').click(function(){stopTagging();});
      $('#stop_tag').hide();
      
      $("#autocomplete").autocomplete({ 
          data: users
      });      
      
      $("#namepicker").hide();
      $("#namepicker form").submit(function(){submitTag();return false;});
      
    }
});

function addTag(tag)
{
   //imgOffset = $("#main_photo").offset();
   tag_x = parseInt(imgOffsetLeft) + parseInt(tag.x);
	tag_y = parseInt(imgOffsetTop) + parseInt(tag.y);
	note_y = tag_y + parseInt(tag.height) + 5;
						
	tag_area = $('<div id="div_'+tag.id+'" class="tag"><img src="/images/transparent.gif" /></div>').css({ left: tag_x + 'px', top: tag_y + 'px', width: tag.width + 'px', height: tag.height + 'px' });
	tag_text = $('<div id="tag_'+tag.id+'" class="tag_note" >'+tag.tag+'</div>').css({ left: tag_x + 'px', top: note_y + 'px'});
	
	$('body').append(tag_area);
	$('body').append(tag_text);
   
   note_x = tag_x + ((tag.width - parseInt($('#tag_'+tag.id).width()))/2); 
   $('#tag_'+tag.id).css('left', note_x);
   $('#tag_'+tag.id).hide();
   $('#div_'+tag.id).hover(function(){showNote('tag_'+tag.id)}, function(){hideNote('tag_'+tag.id)});
} 

function showNote(id)
{ 
   if (tagging == 0)
   { 
      $('#'+id).show();
   }
}

function hideNote(id)
{
   if (tagging == 0)
   {
      $('#'+id).hide();
   }
}

function startTagging()
{ 
   $('.tag').addClass('tag_show');
   $('.tag_note').show();
   $('#start_tag').hide();
   $('#stop_tag').show();
   tagging = 1; 
   $('#main_photo').addClass('crosshair');
   $('#main_photo').click(function(e){
      //imgOffset = $("#main_photo").offset();
      showNamePicker(e.pageX, e.pageY, e.pageX-imgOffsetLeft, e.pageY-imgOffsetTop);
   });
}

function stopTagging()
{
   $('.tag').removeClass('tag_show');
   $('.tag_note').hide();
   $('#start_tag').show();
   $('#stop_tag').hide();
   tagging = 0;
   $('#main_photo').unbind('click');
   $('#main_photo').removeClass('crosshair');
   $('#namepicker').hide();
   $('#namepicker input').attr('value', '');
}

function showNamePicker(offset_x, offset_y, x, y)
{
   $('#main_photo').unbind('click');
   $('#namepicker').css({left: offset_x+'px', top: offset_y+'px'});
   $('#new_x').val(x);
   $('#new_y').val(y);
   $('#namepicker').show();
   $('#autocomplete').focus();
}

function submitTag()
{
   var new_x = $('#new_x').val(); if (new_x < 40) { x = 0; } else { x = new_x - 40; }
   var new_y = $('#new_y').val(); if (new_y < 40) { y = 0; } else { y = new_y - 40; }
   var newNote = $('#autocomplete').val(); 
   jQuery.post('/album/tag_add/'+photo_id, {x: new_x, y: new_y, name: newNote}, function(response) {
      if (response != "0")
      {
         var results = response.split(":");
         var newTag = {"x":x,"y":y,"width":"80","height":"80","id": results[0],"tag":newNote};
         addTag(newTag);
         $('#tagged').append('<div class="tagged"><a href="/profile/view/'+results[0]+'"><img src="'+results[2]+'" /> '+newNote+'</a><h6><a href="/album/tag_del/'+results[1]+'">remove</a></h6></div>');
         $('.tag').addClass('tag_show');
         $('.tag_note').show();            
      }
   }, 'text');
   $('#namepicker').hide();
   $('#namepicker input').attr('value', '');
   $('#main_photo').click(function(e){showNamePicker(e.pageX, e.pageY, e.pageX-imgOffsetLeft, e.pageY-imgOffsetTop);});
}