//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;
$(document).ready(function() {
    //Dynamically wrap image
    $(".fotoEtiket").wrap('<div id="tag-wrapper"></div>');

    //Dynamically size wrapper div based on image dimensions
    $("#tag-wrapper").css({ width: $("img").outerWidth(), height: $("img").outerHeight() });

    //Append #tag-target content and #tag-input content
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name" class="lblYazi">Arkadaşını yaz ya da etiketle:</label><input type="text" id="tag-name"><button type="button">Ekle</button><button type="reset">iptal</button></div>');
    $("#tag-input").append($("#arkadas").html());

    $(".arkadas li").click(function() {
        var id = $(this).attr("id");
        var text = $(this).text();
        id = id.split('-')[1];
        submitTag(id + "$" + text);
    });

    $("#tag-name").keyup(function(e) {
        var deger = $(this).val();
        var aranacak;
        $(".arkadas li").each(function() {
            aranacak = $(this).text();
            if (aranacak.substring(0, deger.length) != deger) {
                $(this).css("display", "none");
            }
            else {
                $(this).css("display", "");
            }
            //$("#cikti").text(aranacak + " - " + deger);
        });
    });

    //$("#tag-wrapper").click(function(e){
    $(".fotoEtiket").click(function(e) {
        //Determine area within element that mouse was clicked
        mouseX = e.pageX - $("#tag-wrapper").offset().left;
        mouseY = e.pageY - $("#tag-wrapper").offset().top;

        //Get height and width of #tag-target
        targetWidth = $("#tag-target").outerWidth();
        targetHeight = $("#tag-target").outerHeight();

        //Determine position for #tag-target
        targetX = mouseX - targetWidth / 2;
        targetY = mouseY - targetHeight / 2;
        
        //Database kaydı için
        targetXdb = e.pageX-50;
        targetYdb = e.pageY-50;

        //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 ($("#tag-target").css("display") == "block") {
            $("#tag-target").animate({ left: targetX, top: targetY }, 500);
            $("#tag-input").animate({ left: inputX, top: inputY }, 500);
        } else {
            $("#tag-target").css({ left: targetX, top: targetY }).fadeIn();
            $("#tag-input").css({ left: inputX, top: inputY }).fadeIn();
        }

        //Give input focus
        $("#tag-name").focus();
    });

    //If cancel button is clicked
    $('button[type="reset"]').click(function() {
        closeTagInput();
    });

    //If enter button is clicked within #tag-input
    $("#tag-name").keyup(function(e) {
        if (e.keyCode == 13) return;
    });

    //If submit button is clicked
    $('button[type="button"]').click(function() {
        submitTag();
    });

});

function submitTag(deger) {
    var uid = "";
    if (deger == null) {
        tagValue = $("#tag-name").val();
    }
    else {
        tagValue = deger.split('$')[1];
        uid = deger.split('$')[0];
    }
    var resimID = $("#resim23").attr("title");
    
    //Adds a new list item below image. Also adds events inline since they are dynamically created after page load
    $("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Kaldır)</span></p>');

    //Adds a new hotspot to image
    $("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');

    ajaxPage("ajaxPage/EtiketFoto.aspx?KullaniciId="+uid+"&tagValue="+tagValue+"&Top="+targetYdb+"px&Left="+targetXdb+"px&FotoId="+resimID+"&Islem=Ekle");

    tagCounter++;

    $(".arkadas li").each(function() {
        $(this).css("display", "");
    });
    $(".arkadas li").css("display", "");
    closeTagInput();
}

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

function removeTag(i) {
    $("#hotspot-item-" + i).fadeOut();
    $("#hotspot-" + i).fadeOut();
    ajaxPage("ajaxPage/EtiketFoto.aspx?Id="+i+"&Islem=Sil");
}

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

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


function ajaxPage(sayfa) {
    var html = $.ajax({
        url: sayfa,
        cache: false,
        async: false
    }).responseText;
    //alert(html);
}