/*  IZA Design Customization Editor
 *  I am the walrus.
 *------------------------------------------------*/

function Editor(prefix)
{
  Editor.PREFIX = prefix;

  Editor.org_x = 0;
  Editor.org_y = 0;
  Editor.org_w = 0;
  Editor.org_h = 0;
  Editor.off_x = 0;
  Editor.off_y = 0;
  
  Editor.ACTION_NONE = 0;
  Editor.ACTION_MOVE = 1;
  Editor.ACTION_SIZE = 2;
  Editor.action = Editor.ACTION_NONE;
}


Editor.mu = function(e)
{
    action = Editor.ACTION_NONE;
    document.onmousemove = null;
    document.onmouseup = null;
    document.getElementById("placement").style.backgroundImage = "none";
    return false;
}

Editor.mm = function(e)
{
    if (!e)
        var e = window.event;

    var con_w = parseInt(document.getElementById(Editor.PREFIX+"pnlContainment").style.width);
    var con_h = parseInt(document.getElementById(Editor.PREFIX+"pnlContainment").style.height);
    var SVG = document.getElementById(Editor.PREFIX+"SVG");

    switch ( Editor.action )    
    {
        case Editor.ACTION_MOVE:
            var x = e.clientX - Editor.off_x + Editor.org_x;
            var y = e.clientY - Editor.off_y + Editor.org_y;

            var des_w = parseInt(SVG.style.width);
            var des_h = parseInt(SVG.style.height);
            if (x < 0)
                x = 0;
            else if (x > con_w - des_w)
                x = con_w - des_w;
            if (y < 0)
                y = 0;
            else if (y > con_h - des_h)
                y = con_h - des_h;

            var boundary = document.getElementById("boundary");
            boundary.style.left = x + "px";
            boundary.style.top = y + "px";

            document.getElementById(Editor.PREFIX+"hdnPosX").value = x;
            document.getElementById(Editor.PREFIX+"hdnPosY").value = y;
            break;

        case Editor.ACTION_SIZE:
            var aspectRatio = parseFloat(document.getElementById(Editor.PREFIX+"hdnAspectRatio").value);
            var boundary = document.getElementById("boundary");
            var x = parseInt(boundary.style.left);
            var y = parseInt(boundary.style.top);
            var h = e.clientY - Editor.off_y + Editor.org_h;
            if ( h < 16 )
                h = 16;
            else if ( h > con_h - y )
                h = con_h - y;
            
            
            var w = h * aspectRatio;
            if ( w > con_w - x )
            {
                w = con_w - x;
                h = w / aspectRatio;
            }
            
            SVG.style.width = w + "px";
            SVG.style.height = h + "px";

            document.getElementById(Editor.PREFIX+"hdnSize").value = w;
            break;
    }    
    return false;
}
  
Editor.md = function(e)
{
    if (!e)
        var e = window.event;
    var target = e.target != null ? e.target : e.srcElement;
    var SVG = document.getElementById(Editor.PREFIX+"SVG");
    var placement = "url("+document.getElementById(Editor.PREFIX+"hdnGarmentPlacement").value+")";

    if (target == SVG)
    {
        var boundary = document.getElementById("boundary");
        Editor.org_x = parseInt(boundary.style.left);
        Editor.org_y = parseInt(boundary.style.top);
        Editor.action = Editor.ACTION_MOVE;

        Editor.off_x = e.clientX;
        Editor.off_y = e.clientY;
        document.onmousemove = Editor.mm;
        document.onmouseup = Editor.mu;
        document.getElementById("placement").style.backgroundImage = placement;
        return false;
    }
    else if (target == document.getElementById("handle"))
    {
        Editor.org_w = parseInt(SVG.style.width);
        Editor.org_h = parseInt(SVG.style.height);
        Editor.action = Editor.ACTION_SIZE;

        Editor.off_x = e.clientX;
        Editor.off_y = e.clientY;
        document.onmouseup = Editor.mu;
        document.onmousemove = Editor.mm;
        document.getElementById("placement").style.backgroundImage = placement;
        return false;
    }
}

Editor.changeGarmentColor = function()
{
    var ddl = document.getElementById(Editor.PREFIX+"ddlGarmentColor");
    var hdnGarmentColor = document.getElementById(Editor.PREFIX+"hdnGarmentColor");
    hdnGarmentColor.value = ddl.value;
    Editor.initDesignEdit();
}

Editor.changeDesignColor = function(i)
{
    var SVG = document.getElementById(Editor.PREFIX+"SVG");
    var ddl = document.getElementById(Editor.PREFIX+"ddlColor"+i);
    var colors = eval("("+document.getElementById(Editor.PREFIX+"hdnJSDesignColors").value+")");
    if ( ddl.value == "" )
        var color = "";
    else
        var color = colors[ddl.value];
    document.getElementById("spinner").style.display = "inline";
    SVG.onload = function() { document.getElementById("spinner").style.display = "none"; };
    SVG.src = SVG.src.replace(new RegExp("color"+i+"=[0-9a-f]*", "i"), "color"+i+"="+color);
    Editor.initDesignEdit();
}
  
Editor.changeTextCheck = function(i)
{
    var checkBox = document.getElementById(Editor.PREFIX+"chkText"+i);
    var textBox = document.getElementById(Editor.PREFIX+"txtText"+i);
    textBox.style.display = checkBox.checked ? "none" : "block";
}

Editor.setPlacementView = function()
{
    // background
    var background = document.getElementById("background");
    var Side = document.getElementById(Editor.PREFIX+"hdnSide").value;
    var GarmentImage = document.getElementById(Editor.PREFIX+"hdnGarmentImage").value;
    var GarmentColors = parseInt(document.getElementById(Editor.PREFIX+"hdnGarmentColors").value);
    var GarmentOffset = parseInt(document.getElementById(Editor.PREFIX+"hdnGarmentOffset").value)+1;
    var JSGarmentColors = eval("("+document.getElementById(Editor.PREFIX+"hdnJSGarmentColors").value+")");
    var GarmentColor = JSGarmentColors[parseInt(document.getElementById(Editor.PREFIX+"hdnGarmentColor").value)];

    background.style.backgroundColor = "transparent";
    var url = "url(custGarment.ashx?filename="+GarmentImage+"&side="+Side+"&colors="+GarmentColors;
    for (var i = 0; i < GarmentColor.length; i ++)
        url += "&color"+ (i+GarmentOffset) + "=" + GarmentColor[i];
    url += ")";
    background.style.backgroundImage = url;
    background.style.backgroundPosition = "left top";

    // containment
    var containment = document.getElementById(Editor.PREFIX+"pnlContainment");
    containment.style.display = "block";

    // boundary
    var hdnPosX = document.getElementById(Editor.PREFIX+"hdnPosX");
    var hdnPosY = document.getElementById(Editor.PREFIX+"hdnPosY");
    var hdnSize = document.getElementById(Editor.PREFIX+"hdnSize");
    var boundary = document.getElementById("boundary");
    boundary.style.left = parseInt(hdnPosX.value) + "px";
    boundary.style.top = parseInt(hdnPosY.value) + "px";

    // image
    var SVG = document.getElementById(Editor.PREFIX+"SVG");
    var aspectRatio = parseFloat(document.getElementById(Editor.PREFIX+"hdnAspectRatio").value);
    var width = parseInt(hdnSize.value);
    SVG.style.width = width + "px";
    SVG.style.height = width/aspectRatio + "px";

    // view
    var hdnView = document.getElementById(Editor.PREFIX+"hdnView");
    hdnView.value = "PLACEMENT";

    // events
    document.onmousedown = Editor.md;
}
  
Editor.setDesignView = function()
{
    var background = document.getElementById("background");
    var SVG = document.getElementById(Editor.PREFIX+"SVG");
    var containment = document.getElementById(Editor.PREFIX+"pnlContainment");
    var JSGarmentColors = eval("("+document.getElementById(Editor.PREFIX+"hdnJSGarmentColors").value+")");
    var GarmentColor = JSGarmentColors[parseInt(document.getElementById(Editor.PREFIX+"hdnGarmentColor").value)];
    containment.style.display = "none";

    background.style.backgroundImage = "url("+SVG.src+")";
    background.style.backgroundPosition = "center center";
    background.style.backgroundColor = '#'+GarmentColor[0];

    var hdnView = document.getElementById(Editor.PREFIX+"hdnView");
    hdnView.value = "DESIGN";

    document.onmousedown = null;
}
  
Editor.initDesignEdit = function()
{
    var hdnView = document.getElementById(Editor.PREFIX+"hdnView");
    switch ( hdnView.value )
    {
        case "DESIGN":
            Editor.setDesignView();
            break;
        default:
            Editor.setPlacementView();
    }
}