var dragCursorY;
var dragItemStartY;
var dragList;
var dragItem;
var dragPlaceHolder;

function cursorPosition(obj)
{
    if(isNaN(window.scrollY))
        return obj.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    else
        return obj.clientY + window.scrollY;
}

function cursorPositionX(obj)
{
    if(isNaN(window.scrollX))
        return obj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    else
        return obj.clientX + window.scrollX;
}

function dragStart(eventObj)
{
    if(eventObj.offsetX < 20)
    {
        dragItem = this;
        
        // assign values to the top for moving
        dragItemStartY = this.offsetTop;
        this.style.top = this.offsetTop + 'px';
        
        // change the class so it floats
        this.className = 'drag';
        
        // create placeholder list item
        dragPlaceHolder.style.height = this.scrollHeight + 'px';
        dragPlaceHolder.SourceI = this;
        dragList.insertBefore(dragPlaceHolder, this);
        
        // get initial cursor position
        dragCursorY = cursorPosition(eventObj);
        
        // enable dragging event
        this.addEventListener('mousemove', dragMove, false);
    }
    
    // prevent text selection
	return preventSelection(eventObj);
}

function dragMove(eventObj)
{
    newY = dragItemStartY + cursorPosition(eventObj) - dragCursorY;
    
    if(newY < 0)
    {
        newY = 0;
    }
    if(newY > parseInt(dragList.scrollHeight) - parseInt(this.scrollHeight))
    {
        newY = parseInt(dragList.scrollHeight) - parseInt(this.scrollHeight);
    }
    
    // set new top
    this.style.top = newY + 'px';
    
    var yPos = newY + eventObj.offsetY;
    
    window.status = newY + ';' + yPos;

    var temp;
    var bestItem = 'end';
    
    var items = dragList.getElementsByTagName('li');
    
    for(var i = 0; i < items.length; i++)
    {   
        if(items[i].className != 'drag')
        {
            nodeMiddle = (items[i].clientHeight) / 2;
            
            if(yPos <= nodeMiddle)
            {
                bestItem = items[i];
                break;
            }
            
            yPos = yPos - items[i].clientHeight;
        }
    }
  
    if(bestItem == dragPlaceHolder || bestItem == dragPlaceHolder.SourceI)
        return;
    
    dragPlaceHolder.SourceI = bestItem;
    
    if(bestItem != 'end')
    {
        dragList.insertBefore(dragPlaceHolder, items[i]);
    }
    else
    {
        dragList.appendChild(dragPlaceHolder);
    }
    
    // prevent text selection
	return preventSelection(eventObj);
}

function dragStop()
{
    // delete the place holder
    if(dragPlaceHolder.SourceI != null)
    {
        dragPlaceHolder.SourceI = null;
        dragList.replaceChild(this, dragPlaceHolder);
    }
    
    this.style.top = 0;
    
    // remove the class that makes it float
    this.className = '';
    
    // disable dragging event
    this.removeEventListener('mousemove', dragMove, false);
    
    // update item rank in the database
    updateItemRank(this.id.substr(5));
}

// prevent text selection during dragging
function preventSelection(eventObj)
{
    if(eventObj.stopPropagation)
	{
	    eventObj.stopPropagation();
	}
	
	if(eventObj.preventDefault)
	{
	    eventObj.preventDefault();
	}
	else
	{
	    eventObj.returnValue = false;
	}
    
    return false;
}

function loadDragItem(element)
{
    if(element)
    {
        element.addEventListener('mousedown', dragStart, false);
        element.addEventListener('mouseup', dragStop, false);
    }
}

function loadDragList(id)
{
    dragList = document.getElementById(id);
    
    if(dragList)
    {
        if(dragList.childNodes.length > 0)
        {
            for(var i = 0; i < dragList.childNodes.length; i++)
            {
                loadDragItem(dragList.childNodes[i]);
            }
        }
    }
    
    dragPlaceHolder = document.createElement('li');
    dragPlaceHolder.className = 'placeholder';
    dragPlaceHolder.SourceI = null;
}