var buttons = Array();
var additional_buttons = Array();
var dragHelper;
var elementToDrag;
var deltaX;
var deltaY;
var x;
var y;
var parent_container;

var iMouseDown = false;
var lMouseState = false;

function OnLoad(toolbar_id)
{
    dragHelper = document.createElement('div');
    dragHelper.style.cssText = 'position:absolute; display:none; border:2px solid red; background-color: silver; z-index: 300;';
    document.body.appendChild(dragHelper);
    httpPost('/toolbars/ajax_toolbar.php', 'toolbar_id=' + toolbar_id);
}

function StartDrag(e)
{
    elementToDrag = e.currentTarget; 
    document.addEventListener("mousemove", Move, false);
    document.addEventListener("mouseup", StopDrag, false);
    iMouseDown = true;
    document.onmousedown = function() {return false;}
    return true;
}

function StopDrag(e)
{
    elementToDrag.style.border = "";
    for (var i = 0; i < elementToDrag.childNodes.length; i++)
    {
        elementToDrag.childNodes[i].style.visibility = 'visible';
    }    
    dragHelper.style.display = "none";
    document.removeEventListener("mousemove", Move, false);
    document.removeEventListener("mouseup", StopDrag, false);
    enumerateButtons();
    elementToDrag = null;
    iMouseDown = false;
    lMouseState = false;
    document.onmousedown = null;
    SaveOrder();
    return false;
}

function Log(s)
{
//    var l = document.getElementById("log");
//    l.innerHTML += "<br/>" + s;
}

function Move(e)
{
    var toolbar_container = document.getElementById("toolbar");
    var toolbar_pos = getPosition(toolbar_container);
    Log(toolbar_pos.x);
    Log(toolbar_pos.y);
    
    var additional_container = document.getElementById("additional_buttons");
    var additional_pos = getPosition(additional_container);

    // starting to drag
    if (iMouseDown && !lMouseState)
    {
        // clear all from drag helper
        while (dragHelper.childNodes.length > 0)
        {
            dragHelper.removeChild(dragHelper.childNodes[0]);
        }

        // add a copy of element we drag
        dragHelper.appendChild(elementToDrag.cloneNode(true));
        dragHelper.style.display = "block";
        dragHelper.style.left = elementToDrag.getAttribute('startLeft') + "px";
        dragHelper.style.top = elementToDrag.getAttribute('startTop') + "px";
       
        elementToDrag.style.border = '1px dashed gray';
        for (var i = 0; i < elementToDrag.childNodes.length; i++)
        {
            elementToDrag.childNodes[i].style.visibility = 'hidden';
        }
        

        
        Log(elementToDrag.getAttribute('startLeft'));
        Log(dragHelper.style.left);

        // get position
        x = parseInt(dragHelper.style.left);
        y = parseInt(dragHelper.style.top);
        deltaX = e.clientX - x;
        deltaY = e.clientY - y;
    }
    
    // move drag helper
    var newLeft = e.clientX - deltaX;
    dragHelper.style.left =  newLeft + "px";

    var newTop = e.clientY - deltaY;
    dragHelper.style.top =  newTop + "px";
      
    var isInserted = false;
    if (newTop < additional_pos.y)
    {
        for (var i = 0; i < buttons.length; i++)
        {
            var btn = buttons[i];
            
            if ((btn != elementToDrag) && (btn.getAttribute('startLeft') > newLeft))
            {
                elementToDrag.parentNode.removeChild(elementToDrag);
                toolbar_container.insertBefore(elementToDrag, btn);
                break;
            }
            
            if ((btn != elementToDrag) && (btn == buttons[buttons.length - 1]))
            {
                if (newLeft > btn.getAttribute('startLeft'))
                {
                    elementToDrag.parentNode.removeChild(elementToDrag);
                    toolbar_container.appendChild(elementToDrag);
                }
            }
        }
    }
    else
    {
        if (additional_buttons.length > 0)
        {
            for (var i = 0; i < additional_buttons.length; i++)
            {
                var btn = additional_buttons[i];
                
                if ((btn != elementToDrag) && (btn.getAttribute('startLeft') > newLeft))
                {
                    elementToDrag.parentNode.removeChild(elementToDrag);
                    additional_container.insertBefore(elementToDrag, btn);
                    break;
                }
                
                if ((btn != elementToDrag) && (btn == additional_buttons[additional_buttons.length - 1]))
                {
                    if (newLeft > btn.getAttribute('startLeft'))
                    {
                        elementToDrag.parentNode.removeChild(elementToDrag);
                        additional_container.appendChild(elementToDrag);
                    }
                }
            }
        }
        else
        {
            // empty additional buttons, add first button
            elementToDrag.parentNode.removeChild(elementToDrag);
            additional_container.appendChild(elementToDrag);
        }
    }
    
    lMouseState = iMouseDown;
    return false;
}

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function getPosition(e)
{
    var left = 0;
    var top  = 0;
    while (e.offsetParent)
    {
        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
        e     = e.offsetParent;
    }
    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

    return {x:left, y:top};
}



function enumerateButtons()
{
    buttons = Array();
    var cont = document.getElementById('toolbar');
    for (var i = 0; i < cont.childNodes.length; i++)
    {
        var btn = cont.childNodes[i];
        if ((btn.className == "btn") || (btn.className == "btn hover") || (btn.className == "sep"))
        {
            var pos = getPosition(btn);
            btn.setAttribute('startWidth', parseInt(btn.offsetWidth));
            btn.setAttribute('startLeft', pos.x);
            btn.setAttribute('startTop', pos.y);
            buttons.push(btn);
        }
    }
    
    additional_buttons = Array();
    var cont = document.getElementById('additional_buttons');
    for (var i = 0; i < cont.childNodes.length; i++)
    {
        var btn = cont.childNodes[i];
        if ((btn.className == "btn") || (btn.className == "btn hover") || (btn.className == "sep"))
        {
            var pos = getPosition(btn);
            btn.setAttribute('startWidth', parseInt(btn.offsetWidth));
            btn.setAttribute('startLeft', pos.x);
            btn.setAttribute('startTop', pos.y);
            additional_buttons.push(btn);
        }
    }    
}