layers = []

layerControlHtml = '<li>' + 
                   '  <input type="checkbox" checked class="visible">' +
                   '  <input type="radio" name="active" class="active">' +
                   '  <canvas width="50" height="50"></canvas>' +
                   '  <a href="#" class="delete">Delete</a>' +
                   '</li>'

function Layer(z)
{
    //alert("init layer 1")
    this.i = -1;
    this.hidden = false;
    this.canvas = $('<canvas width="'+canvasWidth+'" height="'+canvasHeight+'"></canvas>');
    this.controls = $(layerControlHtml)
    
    //Dynamically init for excanvas in IE.
        //alert("init layer 2")
        //G_vmlCanvasManager.initElement(this.canvas[0])
        //G_vmlCanvasManager.initElement(this.controls.find("canvas")[0])
    
    $("#canvas_container").append(this.canvas)
    
    this.context = this.canvas[0].getContext("2d");
    
    this.context.lineCap = "round";
    
    var active = "checked";
    if (!layers.length)
    {
        active = "checked";
        activeLayer = this;
    }
    
    $("#layers").prepend(this.controls)
    this.controls.attr("id", unique_id("layer-ctrl"))
    
    this.controls.find("input").change(function() {
        updateLayers();
    });
    
    this.controls.find("a.delete").click(function() {
        $(this).data("layer").remove();
        return false;
    }).data("layer", this)
    
    this.previewContext = this.controls.find("canvas")[0].getContext("2d");
    
    layers.unshift(this)
    this.activate();
}

Layer.prototype.zIndex = function()
{
    return 2 * (layers.length - this.i)
}

Layer.prototype.update = function()
{
    $(this.canvas).css("z-index", this.zIndex());
    
    if (this.controls.find(".visible:checked").length)
    {
        this.canvas.show();
        this.hidden = false;
    }
    else
    {
        this.canvas.hide();
        this.hidden = true;
    }
    
    if (this.controls.find(".active:checked").length)
    {
        nextLayer = this
    }
    
    this.previewContext.clearRect(0, 0, 50, 50)
    this.previewContext.globalCompositeOperation = "copy"
    this.previewContext.drawImage(this.canvas[0], 0, 0, 50, 50);
    if (this == activeLayer && !tool.hidesWorkingCanvas)
    {
        this.previewContext.globalCompositeOperation = "source-over"
        this.previewContext.drawImage($("#working_canvas")[0], 0, 0, 50, 50);
    }
}

Layer.prototype.activate = function ()
{
    this.controls.find(".active").attr("checked", "checked");
    updateLayers();
}

Layer.prototype.remove = function()
{
    if (confirm("Do you really want to delete this layer?  This cannot be undone."))
    {
        layers.splice(this.i, 1);
        if (this.controls.find(".active:checked").length)
        {
            commit(nextTool);
            if (layers.length == 0)
            {
                activeLayer = new Layer();
            }
            else
            {
                layers[0].activate();
            }
        }
        $(this.canvas).remove();
        $(this.controls).remove();
        
        updateLayers();
    }
}

function updateLayers()
{
    for (var i=0; i < layers.length; i++)
    {
        var layer = layers[i]
        layer.i = i;
        layer.update();
    }
    
    if (tool.hidesWorkingCanvas || activeLayer.hidden)
    {
        $("#working_canvas").hide()
    }
    else
    {
        $("#working_canvas").show().css("z-index", activeLayer.zIndex() + 1)
    }
}