var draggingElm = false;
var maxZ = 100;

window.onload = function()
{
    document.body.onmousemove = mouseMove;

    var elms = document.getElementById('blockContainer').getElementsByTagName('img');

    //Get the position of the baseImage
    var xOffset = -30;
    var yOffset = 0;
    var o = document.getElementById('baseImage');
    while(o)
    {
        xOffset += o.offsetLeft;
        yOffset += o.offsetTop;
        o = o.offsetParent;
    }

    var x = xOffset;
    var maxHeight = 0;
    var realMaxZ = 0;


    for(var i=0; i<elms.length; i++)
    {
        elms[i].onmousedown = function(e) {startDrag(e, this); return false;}
        elms[i].onmouseup = function() {draggingElm = false;}
        elms[i].ondragstart = function() {return false;}

        if(data)
        {
            elms[i].style.left = (xOffset + data[elms[i].src].x) + 'px';
            elms[i].style.top = (yOffset + data[elms[i].src].y) + 'px';
            elms[i].style.zIndex = maxZ + data[elms[i].src].z;
            realMaxZ = Math.max(realMaxZ, maxZ + data[elms[i].src].z);
        }
        else
        {
            elms[i].style.left = x + 'px';
            elms[i].style.zIndex = ++maxZ;
            x += elms[i].offsetWidth + 10;
            maxHeight = Math.max(maxHeight, elms[i].offsetHeight);
        }
    }

    if(!data)
        document.getElementById('blockContainer').style.height = (maxHeight + 10) + 'px';
    else
        maxZ = realMaxZ;
}

var draggingElm = false;

function startDrag(e, elm)
{
    var m = getMouse(e);

    var xOffset = -m.x;
    var yOffset = -m.y;
    var o = elm;
    while(o)
    {
        xOffset += o.offsetLeft;
        yOffset += o.offsetTop;
        o = o.offsetParent;
    }

    draggingElm = {'xOffset':xOffset,'yOffset':yOffset,'elm':elm};
    elm.style.zIndex = ++maxZ;

    return false;
}

function mouseMove(e)
{
    if(!draggingElm)
        return;

    if(document.selection)
        document.selection.empty();

    var m = getMouse(e);

    draggingElm.elm.style.left = (m.x + draggingElm.xOffset) + 'px';
    draggingElm.elm.style.top = (m.y + draggingElm.yOffset) + 'px';

    window.status = m.x + ',' + m.y;
}

function getMouse(e)
{
    if(typeof e == 'undefined')
    {
        if(document.documentElement) if(document.documentElement.scrollTop)
        {
            var scrollLeft = document.documentElement.scrollLeft;
            var scrollTop = document.documentElement.scrollTop;
        }
        else
        {
            var scrollLeft = document.body.scrollLeft;
            var scrollTop = document.body.scrollTop;
        }

        mouseX = event.clientX + scrollLeft;
        mouseY = event.clientY + scrollTop;
    }
    else
    {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }

    return {'x':mouseX,'y':mouseY};
}

function setForm(f)
{
    var elms = document.getElementById('blockContainer').getElementsByTagName('img');

    var str = '';

    //Get the position of the baseImage
    var xOffset = 0;
    var yOffset = 0;
    var o = document.getElementById('baseImage');
    while(o)
    {
        xOffset += o.offsetLeft;
        yOffset += o.offsetTop;
        o = o.offsetParent;
    }

    for(var i=0; i<elms.length; i++)
    {
        str += '&data[' + elms[i].style.zIndex + '][src]=' + elms[i].src;
        str += '&data[' + elms[i].style.zIndex + '][x]=' + (elms[i].offsetLeft - xOffset);
        str += '&data[' + elms[i].style.zIndex + '][y]=' + (elms[i].offsetTop - yOffset);
    }

    f.elements['data'].value = str;
}