//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;

function reset_lista(){
    var field=$j('#tag-name').val();
    if(field=="Digita un nome..."){
           $j('#tag-name').val('');
    }
}

function pulisci(){
    var field=$j('#tag-name').val();
    if(field=="Digita un nome..."){
        $j('#tag-name').val('');
    }
}

function ricarica_pagina(){
        window.location.reload(true);
}

function lista_amici_tag(suid,search,foto){
		  $j('#listaamici').html('');
		  var lista= $j('#listaamici').val();
    $j("#errore_nome").hide();
    if(search.length == 0) {
			// Hide the suggestion box.
//			$j('#listaamici').html('');
			$j('#tag-name').val('');
    } else {
			$j.post("element/amicilistatag.php?id="+suid, {queryString: ""+search+"",prov: ""+prov+"",idf: ""+idfoto+"",foto: ""+foto+""}, function(data){
				if(data.length >2) {
				  $j('#listaamici').html('');
					$j("#listaamici").html(data);
				}
			});
		}
}

function tagga_foto(suid,proven,idf){
  $j("#start_tag").show();
  // tolgo link prossima foto
  togli_link_foto();
  prov=proven;
  idfoto=idf;

  // cambia cursore
  $j('#cropp').css('cursor','crosshair');
 
	//Append #tag-target content and #tag-input content
	$j("#fotoattuale").append('<div id="tag-target"></div><div id="tag-input"><input type="text" id="tag-name" value="Digita un nome..." style="width:200px;" onkeypress="pulisci()" onkeyup="lista_amici_tag('+suid+',this.value);" onclick="reset_lista();" /><div id="listaamici"></div><div class="error" id="errore_nome">Inserire un nome corretto</div></div>');
	
	//$j("#fotoattuale").click(function(e){
	$j("#cropp").click(function(e){		
		//Determine area within element that mouse was clicked
		mouseX = e.pageX - $j("#fotoattuale").offset().left;
		mouseY = e.pageY - $j("#fotoattuale").offset().top;
		
		//Get height and width of #tag-target
		targetWidth = $j("#tag-target").outerWidth();
		targetHeight = $j("#tag-target").outerHeight();
		
		//Determine position for #tag-target
		targetX = mouseX-targetWidth/2;
		targetY = mouseY-targetHeight/2;
		
		//Determine position for #tag-input
		inputX = mouseX+targetWidth/2;
		inputY = mouseY-targetHeight/2;
		
		//Animate if second click, else position and fade in for first click
		if($j("#tag-target").css("display")=="block")
		{
			$j("#tag-target").animate({left: targetX, top: targetY}, 500);
			$j("#tag-input").animate({left: inputX, top: inputY}, 500);
		} else {
			$j("#tag-target").css({left: targetX, top: targetY}).fadeIn();
			$j("#tag-input").css({left: inputX, top: inputY}).fadeIn();
		}
		
		//Give input focus
		$j("#tag-name").focus();	
	});

	//If cancel button is clicked
	$j('button[type="reset"]').click(function(){
		closeTagInput();
	});
	
	//If enter button is clicked within #tag-input
	$j("#tag-name").keyup(function(e) {
		if(e.keyCode == 13) submitTag('','');
	});	
	
	$j("#tag-name").keyup(function(e) {
		if(e.keyCode == 27)	closeTagInput();
		$j('#cropp').css('cursor','pointer');
	});		
	
	//If submit button is clicked
	$j('button[type="submit"]').click(function(){
		submitTag('','');
	});
	
}

function submitTag(nome,id)
{
  if(nome==undefined){
	tagValue = $j("#tag-name").val();
	}else{
  tagValue = nome;
  }
  if(id!=undefined || tagValue.length>3){
        // scrivo il tag
        $j.ajax({ // APRI FUNZIONE JQUERY
            type: 'post',
            url: 'element/tagset.php',
            data: 'id='+id+'&x='+targetX+'&y='+targetY+'&prov='+prov+'&idf='+idfoto+'&name='+tagValue,
            dataType: 'json',
            success: function(data, status){
                  $j('#listaamici').html('');
                	//Adds a new list item below image. Also adds events inline since they are dynamically created after page load
                	$j("#taggati").append('<span id="hotspot-item-' + data.msg + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + id + ','+data.msg+')" onmouseover="showTag('+data.msg+')" onmouseout="hideTag(' + data.msg + ')">(Rimuovi)</span></span>');
                	
                	//Adds a new hotspot to image
                	$j("#fotoattuale").append('<div id="hotspot-' + data.msg + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');
            }
        }); // funzione jquery close  
 
	     closeTagInput();
  }else{
      $j("#errore_nome").show();
  }
}

function closeTagInput()
{
	$j("#tag-target").fadeOut();
	$j("#tag-input").fadeOut();
	$j("#tag-name").val("");
}

function removeTag(i,id)
{
        $j("#hotspot-item-"+id).fadeOut();
      	$j("#hotspot-"+id).fadeOut();
        // rimuovo il tag
        $j.ajax({ // APRI FUNZIONE JQUERY
            type: 'post',
            url: 'element/tagremove.php',
            data: 'id='+id+'&idu='+i,
            dataType: 'json',
            success: function(data, status){

            }
        }); // funzione jquery close  
}

function showTag(i)
{
	$j("#hotspot-"+i).addClass("hotspothover");
}

function mostra_tag(id,targetX,targetY,tagValue){
  $j("#fotoattuale").append('<div id="hotspot-'+id+'" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');
	$j("#hotspot-"+id).addClass("hotspothover");
}

function hideTag(i)
{
	$j("#hotspot-"+i).removeClass("hotspothover");
}