var isScrollingToolbox = false;


$(document).ready(function()
{
    /*
    UpdateVisibleToolbox();
    $("#ddToolboxSelect").change(function()
    {
        UpdateVisibleToolbox();
    });
    */

    $(".headElementTemplate").draggable({ helper: "clone",
        start: function(e, ui)
        {
            $(ui.helper).addClass("ui-draggable-helper");
            var source = $(ui.helper).attr("src");
            $(ui.helper).attr("title", "");
            //$(".headElementTemplate").wTooltip("destroy");
            if (source.endsWith("_sm.png"))
            {
                $(ui.helper).attr("src", source.replace("_sm.png", ".png")); //swap in actual size image
            }
        },
        stop: function(e, ui)
        {
            var newElement = $(ui.helper).clone();
            var highestZ = GetHighestZIndexOfHeadElements();
            newElement.css("z-index", highestZ + 1);
            ApplyPieceAttributesToDomElement(newElement);
            AddPieceToStarArea(newElement);
        },
        appendTo: $("#starArea")
    });

    //Init dialog/////////////////////
    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        width: 400,
        buttons: {
            Ok: function()
            {
                $(this).dialog('close');
            }
        }

    });
    $("#savingDialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        width: 400,
        open: function()
        {
            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove(); //remove close btn 
        }
    });
    $("#savingDoneDialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        width: 400,
        buttons: {
            Ok: function()
            {
                $(this).dialog('close');
            }
        }

    });
    //////////////////////////////////

    //Preload large versions of pieces//////////////////////
    $(".headElementTemplate").each(function()
    {
        var src = $(this).attr("src");
        if (src.endsWith("_sm.png"))
        {
            var myImage = $("<img />").attr("src", src.replace("_sm.png", ".png"));
            myImage.hide();
            $("body").append(myImage); //must add them to the dom before the image is actually loaded.
        }
    });
    ////////////////////////////////////////////////////////

    $("#btnSendToFriend").click(function()
    {
        DisplayUrlDialog();
    });

    $("#twitterIcon").click(function()
    {
        SendToTwitter();
    });

    $("#facebookIcon").click(function()
    {
        SendToFacebook();
    });

    $("#btnPrint").click(function()
    {
        PrintHeadElements();
    });


    $(".btnToolboxUp, .btnToolboxDown").click(function()
    {
        //alert("scrolling: " + scrollingToolbox);
        if (isScrollingToolbox == true)
        {
            return;
        }

        isScrollingToolbox = true;

        //$("#btnToolboxUp, #btnToolboxDown").disable();
        //var visibleToolBoxItems = $("#tools_middle > img:visible");
        //alert($(this).parents(".toolbox").children(".tools_middle").children("img:visible").length);
        var visibleToolBoxItems = $(this).parents(".toolbox").children(".tools_middle").children("img:visible");

        if ($(this).hasClass("btnToolboxUp"))
        {
            var previousElement = $(visibleToolBoxItems[0]).prev();
            //alert("next: " + nextElement);
            if (previousElement.length != 0)
            {
                $(visibleToolBoxItems[visibleToolBoxItems.length - 1]).slideUp("normal", function() { isScrollingToolbox = false; });
                previousElement.slideDown("normal", function() { isScrollingToolbox = false; });
                if (previousElement.prev().length == 0)
                {
                    $(this).parents(".toolbox").find(".btnToolboxUp").fadeOut();
                    //$("#btnToolboxUp").fadeOut();
                }
                //$("#btnToolboxDown").fadeIn();
                $(this).parents(".toolbox").find(".btnToolboxDown").fadeIn();
            }
        }
        else if ($(this).hasClass("btnToolboxDown"))
        {
            var nextElement = $(visibleToolBoxItems[visibleToolBoxItems.length - 1]).next();
            //alert("next: " + nextElement);
            if (nextElement.length != 0)
            {
                //$("#btnToolboxUp").show();
                $(visibleToolBoxItems[0]).slideUp("normal", function() { isScrollingToolbox = false; });
                nextElement.slideDown("normal", function() { isScrollingToolbox = false; });
                if (nextElement.next().length == 0)
                {
                    $(this).parents(".toolbox").find(".btnToolboxDown").fadeOut();
                    //$("#btnToolboxDown").fadeOut();
                }
                //$("#btnToolboxUp").fadeIn();
                $(this).parents(".toolbox").find(".btnToolboxUp").fadeIn();
            }
        }
        //isScrollingToolbox = false;
    });

    $("#btnSaveToGallery").click(function()
    {
        $.ajax({
            type: "POST",
            url: "SaveStarService.asmx/SaveStar",
            data: "{faceName:'', faceQueryString:'" + CreateUrlQueryString() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function(XMLHttpRequest)
            {
                $("#lblSavingMessage").show();
                $("#lblDoneSaving").hide();
                $("#savingDialog").dialog("open");
            },
            success: function(data, textStatus)
            {
                $("#lblSavingMessage").hide();
                $("#lblDoneSaving").show();
                $("#savingDialog").dialog("close");
                $("#savingDoneDialog").dialog("open");
            },
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                var exception = eval("(" + XMLHttpRequest.responseText + ")");
                //alert(XMLHttpRequest.responseText);
                //$('#RSSContent').html(exception.Message);
                //alert(exception.Message);
                alert("An Error Occured saving your star: " + exception.Message);

            },
            complete: function(XMLHttpRequest, textStatus)
            {
                //$("#savingDialog").dialog("close");
            }
        });
    });

    CreatePiecesFromUrl();
});





//Turns the dom element into a piece
function ApplyPieceAttributesToDomElement(newElement)
{
    newElement.removeClass("headElementTemplate");
    newElement.removeClass("ui-draggable-helper");
    newElement.addClass("headElement");
    
    newElement.draggable("destroy");    
    newElement.draggable({ stack: { group: "#starArea img", min: 50} });

    newElement.destroyContextMenu();
    newElement.contextMenu({ menu: "myMenu" },

        function(action, el, pos)
        {
            if (action == "delete")
            {
                $(el).fadeOut("normal", function() { $(el).remove(); });
                //$(el).remove();
            }
        }
    );
}

function AddPieceToStarArea(newElement)
{
    newElement.appendTo("#starArea");
}

function CreateUrl()
{
    var url = document.location.href.split("?")[0]; //chop off the query string
    return url + CreateUrlQueryString();
}

function CreateUrlQueryString()
{
    var url = "";
    var headElements = $(".headElement");
    headElements.each(function(count)
    {
        if (count == 0)
        {
            url += "?";
        }
        else
        {
            url += "&";
        }

        url += "p" + count + "=";

        var imgSrc = $(this).attr("src").toLowerCase();
        var imgName = imgSrc.substring(imgSrc.lastIndexOf("/") + 1, imgSrc.lastIndexOf(".png"));

        var myString = "";
        var x = $(this).css("left");
        var y = $(this).css("top");
        var z = $(this).css("z-index");
        myString += imgName;
        myString += "," + x;
        myString += "," + y;
        myString += "," + z;
        url += escape(myString);
    });
    return url;    
}

function PrintHeadElements()
{
    var headElements = $(".headElement");
    headElements.each(function(count)
    {
        var imgSrc = $(this).attr("src").toLowerCase();
        var imgName = imgSrc.substring(imgSrc.lastIndexOf("/") + 1, imgSrc.lastIndexOf(".png"));
        var x = $(this).css("left");
        var y = $(this).css("top");

        alert(imgName + ": " + x + ", " + y);      

    });
}

function DisplayUrlDialog()
{
    var url = CreateUrl();
    $("#urlShare").attr("value", "");
    $("#pnlDialogLoading").css("display", "block");
    $("#pnlDialogContent").css("display", "none");
    $("#dialog").dialog("open");

    $.get("GetTinyUrl.aspx?url=" + escape(url), function(data)
    {
        $("#urlShare").attr("value", data);
        $("#pnlDialogLoading").css("display", "none");
        $("#pnlDialogContent").css("display", "block");       
        

    });
}



function SendToTwitter()
{

    var url = CreateUrl();
    $("#urlShare").attr("value", "");
    $("#pnlDialogLoading").css("display", "block");
    $("#pnlDialogContent").css("display", "none");
    $("#dialog").dialog("open");

    $.get("GetTinyUrl.aspx?url=" + escape(url), function(data)
    {
        //$("#urlShare").attr("value", data);
        //$("#pnlDialogLoading").css("display", "none");
        //$("#pnlDialogContent").css("display", "block");

        window.location = "http://www.twitter.com/home?status=" + ("Check+out+my+ShareAStar+and+create+your+own!+" + data + "+@shareasalenews");
    });    
    
    //http://www.twitter.com/home?status=Checking+out+http://www.shareasale.com/photobooth.cfm?p=1+++++@shareasalenews
}

function SendToFacebook()
{
    var url = CreateUrl();
    //$.get("GetTinyUrl.aspx?url=" + escape(url), function(data)
    //{
        //$("#urlShare").attr("value", data);
        //$("#pnlDialogLoading").css("display", "none");
        //$("#pnlDialogContent").css("display", "block");

        window.location = "http://www.facebook.com/sharer.php?u=" + url;

    //});
    
    //http://www.facebook.com/sharer.php?u=http://www.shareasalephotobooth.com&t=ShareASale+Photo+Booth+1!

}

function CreatePiecesFromUrl()
{
    //alert("create pieces from url");


    var query = document.location.search.substring(1);
    if (query == "")
    {
        return;
    }
    var queryStringParamCount = query.split("&").length;

    for (var i = 0; i < queryStringParamCount; i++)
    {
        var paramValue = GetQueryVariable("p" + i);
        if (paramValue == null)
        {
            continue;
        }
        paramValue = unescape(paramValue);
        var imageName = paramValue.split(",")[0];
        var x = paramValue.split(",")[1];
        var y = paramValue.split(",")[2];
        var z = paramValue.split(",")[3];

        //alert("x: " + x);
        //alert("y: " + y);
        //alert("z: " + z);

        var newElement = $("<img src='images/pieces/" + imageName + ".png' />");
        newElement.css("position", "absolute");
        newElement.css("left", x);
        newElement.css("top", y);
        newElement.css("z-index", z);
        ApplyPieceAttributesToDomElement(newElement);
        AddPieceToStarArea(newElement);
        
        //alert("newElement x: " + newElement.css("left"));
    }
}

function GetQueryVariable(variable)
{
    var query = document.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++)
    {
        var pair = vars[i].split("=");
        if (pair[0] == variable)
        {
            return pair[1];
        }
    }
    return null;
} 

function GetHighestZIndexOfHeadElements()
{
    var headElements = $(".headElement");
    var highestZ = 0;
    headElements.each(function()
    {
        var z = $(this).css("z-index");
        var zFloat = parseFloat(z);
        if (zFloat != "NaN" && zFloat > highestZ)
        {
            highestZ = parseFloat(z);
        }
    });
    return highestZ;
}