//global vars
var d = document;
var blnDrag = false;
var dragXoffset = 0;
var dragYoffset = 0;
var divDrag = document.getElementById("divDrag");
var targetPic = null;
var scrollHeight = null;
var draggedSongId = null;
var dragged_artist = null;
var dragged_album = null;

var MAX_PICS = 2;
 
function move(e)
{
    if (e == null) 
    { 
        e = window.event 
    } 
    if (e.button <= 1 && blnDrag)
    {
        var xPos = e.clientX - dragXoffset;
        
        //get the divs offset
        var xMax = xPos + divDrag.offsetWidth;
        var sizes = getWindowSize();
        
        if(xPos >= 0 && xMax <= sizes[0])
        {
            divDrag.style.left = xPos + "px";
        }
        else if(xMax > sizes[0])
        {
            divDrag.style.left = sizes[0] - divDrag.offsetWidth + "px";
        }
        else
        {
            divDrag.style.left = "0px";
        }
        
        var yPos = e.clientY - dragYoffset;
        var yMax = yPos + divDrag.offsetHeight;
        
        if(yPos >= 0 && yMax <= sizes[1]) 
        {
            divDrag.style.top = yPos + "px";
        }
        else if(yMax > sizes[1])
        {
            divDrag.style.top = sizes[1] - divDrag.offsetHeight + "px";
        }
        else
        {
            divDrag.style.top = "0px";
        }
        
        return false;
    }
}

function reset(e) 
{
  d.onmousemove = null;
  d.onmouseup = null;
  blnDrag = false;
}

function resetPicture(e)
{
    var target = e.target != null ? e.target : e.srcElement;
    
    //get the targets coords
    /*var x = target.style.left;
    var y = target.style.top;
    
    //compare to the coords of the divUserPics
    var divUserPics = d.getElementById("divUserPics");
    
    var div_x = divUserPics.style.left;
    var div_y = divUserPics.style.top;
    
    alert(x + " and " + div_x);*/
    var bln_drop = false;
    
    if(target.id == "divUserPics")
    {
        bln_drop = true;
    }
    else
    {
        var tgt = target;
        
        while(tgt != null)
        {
            if(tgt.id == "divUserPics")
            {
                var bln_drop = true;
                break;
            }
            else
            {
                tgt = tgt.parentNode;
            }
        }
    }
    
    if(bln_drop == true)
    {
        d.onmousemove = null;
        d.onmouseup = null;
        blnDrag = false;
        targetPic = null;
        scrollHeight = null;
        
        var src = null;
    
        if(d.getElementById("imgDrag") != null)
        {
            src = d.getElementById("imgDrag").src;
            //remove the div
            d.getElementsByTagName("body")[0].removeChild(d.getElementById("imgDrag"));
            
        }
        
        var divUserPics = d.getElementById("divUserPics");
        
        var imgs = divUserPics.getElementsByTagName("img");
        
        if(imgs.length > MAX_PICS - 1)
        {
            //remove the last selection before adding the new one
            var spans = divUserPics.getElementsByTagName("span");
            
            var remove_span = spans[MAX_PICS - 1];
            
            divUserPics.removeChild(remove_span);
        }
        
        var span = d.createElement("span");
        var img  = span.appendChild(d.createElement("img"));
        img.src = src;
        img.className = "userSelection";
        img.style.height = "40px";
        img.style.width = "40px";
        img.title = dragged_artist + " - " + dragged_album;
        
        var tr = d.getElementById(draggedSongId);
        
        img.onclick = function(){songSelected(tr);}
        
        //reset global
        //draggedSongId = null;
        
        if(divUserPics.hasChildNodes())
        {
            //want to insert the new node before
            var old_span = divUserPics.getElementsByTagName("span")[0];
            
            divUserPics.insertBefore(span, old_span);
        }
        else
        {   
            divUserPics.appendChild(span);
        }
        
        saveUserPics();
    }
    else
    {
        d.onmousemove = null;
        d.onmouseup = null;
        blnDrag = false;
        targetPic = null;
        scrollHeight = null;
        
        if(d.getElementById("imgDrag"))
        {
            //remove the div
            d.getElementsByTagName("body")[0].removeChild(d.getElementById("imgDrag"));
        }
    }
}

function saveUserPics()
{
    //check to see if the user is logged in
    if(readCookie("isc_key"))
	{
	    //get the two song ids and pass to the db
	    var url = "http://" + getDomain() + "/php/addUserPicks.php";
    
        var params = new ajaxParameters();
        params.add("isc_key", isc_key);
        params.add("song_1", draggedSongId);
        params.add("song_2", draggedSongId);
        
        //add some sort of saving-in-progress-sign
    	
        makeAjaxPOSTRequest(url, params, user_picks_callback, true);
    }
    else
    {
        //don't need to do anything.. can't save the selections
    }
}

function user_picks_callback(xml)
{
    alert(xml);
}

function drag(e)
{
    if (e == null) 
    { 
        e = window.event;
    } 

    var target = e.target != null ? e.target : e.srcElement;
    
    //alert(target.className);

    if (target.className == "embeddedBackground" || target.className == "embeddedPopupTitleBar" || target.className == "spanText") 
    {  
        divDrag = d.getElementById("divDrag");
        blnDrag = true;

        dragXoffset = e.clientX - parseInt(divDrag.style.left);
        dragYoffset = e.clientY - parseInt(divDrag.style.top);

        document.onmousemove = move;
        document.onmouseup = reset;
        
        return false;
    }
    else if(target.className == "trOdd" || target.className == "trEven" || target.className == "trSelected" || target.className == "tdSong")
    {
        blnDrag = true;
        
        targetPic = target;
        
        document.onmousemove = dragPicture;
        document.onmouseup = resetPicture;
    }
}

function dragPicture(e)
{
    if(!d.getElementById("imgDrag"))
    {
        //alert("here");
        var x = e.clientX;
        var y = e.clientY;
        //get the parent until it is the tr
        var elem = targetPic;
        
        while(elem.tagName.toLowerCase() != "tr")
        {
            elem = elem.parentNode;
        }
        
        var hidFields = elem.getElementsByTagName("input");
        
        //elem is now the row
        var hidden = hidFields[1];
        draggedSongId = hidFields[2].value;
        
        //get the name of the artist and album
        //2nd and 3rd td .. text is within a span child
        
        var spans = elem.getElementsByTagName("span");
        dragged_artist = spans[1].firstChild.nodeValue;
        dragged_album = spans[2].firstChild.nodeValue;
        
        //create the image and append to the body where the mouse click was
        var img = d.createElement("img");
        img.id = "imgDrag";
        img.src = hidden.value;
        
        img.style.height = "40px";
        img.style.width = "40px";
        img.style.position = "absolute";
        img.style.border = "1px solid #000";
        
        var xPos = e.clientX; //- dragXoffset;
        //alert(xPos);
        //get the divs offset
        var xMax = xPos + img.offsetWidth;
        var sizes = getWindowSize();
        
        if(xPos >= 0 && xMax <= sizes[0])
        {
            img.style.left = xPos + "px";
        }
        else if(xMax > sizes[0])
        {
            img.style.left = sizes[0] - img.offsetWidth + "px";
        }
        else
        {
            //alert("here");
            img.style.left = "0px";
        }
        
        var yPos = e.clientY;// - dragYoffset;
        //alert(yPos);
        var yMax = yPos + img.offsetHeight;
        
        if(yPos >= 0 && yMax <= sizes[1]) 
        {
            img.style.top = yPos + "px";
        }
        else if(yMax > sizes[1])
        {
            img.style.top = sizes[1] - img.offsetHeight + "px";
        }
        else
        {
            //alert("herey");
            img.style.top = "0px";
        }
        
        d.getElementsByTagName("body")[0].appendChild(img);
        
        dragXoffset = e.clientX - parseInt(img.style.left);
        dragYoffset = e.clientY - parseInt(img.style.top);
        
        //get the position of the scroll bar in the div and keep it the same throughout the drag
        scrollHeight = d.getElementById("tbodySongs").scrollHeight;
    }
    else
    {
        d.getElementById("tbodySongs").scrollTop = scrollHeight;
        
        var imgDrag = d.getElementById("imgDrag");
        
        if (e == null) 
        { 
            e = window.event 
        } 
        if (e.button <= 1 && blnDrag)
        {
            var xPos = e.clientX; //- dragXoffset;
            //alert(xPos);
            //get the divs offset
            var xMax = xPos + imgDrag.offsetWidth;
            var sizes = getWindowSize();
            
            if(xPos >= 0 && xMax <= sizes[0])
            {
                imgDrag.style.left = xPos + 1 + "px";
            }
            else if(xMax > sizes[0])
            {
                imgDrag.style.left = sizes[0] - imgDrag.offsetWidth + "px";
            }
            else
            {
                //alert("here");
                imgDrag.style.left = "0px";
            }
            
            var yPos = e.clientY;// - dragYoffset;
            //alert(yPos);
            var yMax = yPos + imgDrag.offsetHeight;
            
            if(yPos >= 0 && yMax <= sizes[1]) 
            {
                imgDrag.style.top = yPos + 1 + "px";
            }
            else if(yMax > sizes[1])
            {
                imgDrag.style.top = sizes[1] - imgDrag.offsetHeight + "px";
            }
            else
            {
                //alert("herey");
                imgDrag.style.top = "0px";
            }
            
            d.getElementById("tbodySongs").scrollTop = scrollHeight;
            
            return false;
        }
    }
}