var ajaxManager;
var currentX = 0;
var currentY = 0;
var shiftDown = false;

$(document).ready(function()
{

    ajaxManager = $.manageAjax.create("pixelQueue", { queue: "clear", cacheResponse: true, maxRequests: 1 });


    //load main image////////////////////
    //ensures this stuff will be displayed even if the load fails
    setTimeout(function()
    {
        $("#pnlLoadingIcon").fadeOut();
        $("#mainImage").fadeIn();
    }, 4000);

    $("#mainImage").load(function()
    {
        $("#pnlLoadingIcon").fadeOut();
        $("#mainImage").fadeIn();
    });
    ////////////////////////////////////


    $(document).keyup(function(e)
    {
        if (e.keyCode == 16)
        {
            shiftDown = false;
            return;
        }
    });


    $(document).keydown(function(e)
    {
        if (e.keyCode == 16)
        {
            shiftDown = true;
            return;
        }

        if (e.keyCode != 39 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 40)
        {
            $("#pnlCrosshair").hide();
            $("#pnlPixelExplorer").fadeOut();
            return true;
        }


        var increment;
        if (shiftDown)
        {
            increment = 10;
        }
        else
        {
            increment = 1;
        }

        $("#pnlPixelExplorer").fadeIn();
        $("#pnlCrosshair").show();
        $(".curious").css("cursor", "default");

        if (e.keyCode == 39)
        {
            var value = currentX + increment;
            if (value > 999)
            {
                value = 999;
            }
            currentX = value;
            DisplayCoordinates();
        }
        else if (e.keyCode == 37)
        {
            var value = currentX - increment;
            if (value < 0)
            {
                value = 0;
            }
            currentX = value;
            DisplayCoordinates();
        }
        else if (e.keyCode == 38)
        {
            var value = currentY - increment;
            if (value < 0)
            {
                value = 0;
            }
            currentY = value;
            DisplayCoordinates();
        }
        else if (e.keyCode == 40)
        {
            var value = currentY + increment;
            if (value > 999)
            {
                value = 999;
            }
            currentY = value;
            DisplayCoordinates();
        }

        $("#pnlCrosshair").css("left", (currentX - 11) + "px");
        $("#pnlCrosshair").css("top", (currentY - 11) + "px");


        return false;
    });


    $(".curious").mouseleave(function(e)
    {
        $("#pnlPixelExplorer").fadeOut();
    });

    $(".curious").mousemove(function(e)
    {
        $("#pnlCrosshair").hide();
        $(".curious").css("cursor", "crosshair");
        $("#pnlPixelExplorer").fadeIn();

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        currentX = x;
        currentY = y;

        DisplayCoordinates();
    });


});

function DisplayCoordinates()
{
    var x = currentX;
    var y = currentY;
    $("#lblX").text(x);
    $("#lblY").text(y);
    var pixelInfoUrl = "/PixelExplorer/LocationInfo/" + x + "/" + y;


    if (x < 500)
    {
        $("#pnlPixelExplorer").css("right", "20px");
        $("#pnlPixelExplorer").css("left", "");
    }
    else
    {
        $("#pnlPixelExplorer").css("right", "");
        $("#pnlPixelExplorer").css("left", "20px");
    }
    

    ajaxManager.add({

        beforeSend: function(result)
        {
            $("#pnlLockedPixel").hide();
            $("#pnlUnlockedPixel").hide();
            $("#pnlLoading").show();
        },
        success: function(result)
        {
            if (result.Unlocked == false)
            {
                $("#pnlLockedPixel").show();
                $("#pnlUnlockedPixel").hide();
                $("#pnlLoading").hide();
                $("#pnlSwatch").css("background-color", "White");
                $("#lblUnlockDate").text("");
                $("#lblUnlockerName").text("");
            }
            else
            {
                $("#pnlLockedPixel").hide();
                $("#pnlUnlockedPixel").show();
                $("#pnlLoading").hide();
                $("#pnlSwatch").css("background-color", result.Color);
                $("#lblUnlockDate").text(result.UnlockDate);
                $("#lblUnlockerName").text(result.UnlockerName);
            }
        },
        url: pixelInfoUrl

    });
}