/**
 * Called when the user starts dragging a valid DIV.
 * DIV draggedDiv is the div that is about to be dragged
 * ID containerDivId is the ID of the div container. (used for drag boundaries) 
 *
 * If a DIV is returned, it will be this one used for dragging.
*/
function startEvent(draggedDiv,containerDivId) {


 	
  return draggedDiv;
}


/**
 * Called when the mouse is released, and dragging ends
 * DIV draggedDiv the dragged DIV
 * ID collisionDivId id of a div where a collision occured. Can be null
 * ID containerDivId id of the container
 */
function stopEvent(draggedDiv, collisionDivId, containerDivId) {
  if (collisionDivId != null) {	
    document.getElementById(collisionDivId + "_Members").innerHTML = document.getElementById(collisionDivId + "_Members").innerHTML + " - " +draggedDiv.innerHTML + "<br/>" ;
    document.getElementById(collisionDivId).style.backgroundColor = "#006699";
  }
  
  //document.getElementById(containerDivId).removeChild(draggedDiv);
}

/**
 * Called when draggedDiv is over a collision DIV
 */
function onCollide(draggedDiv, collisionDivId, containerDivId) {
  document.getElementById(collisionDivId).style.backgroundColor = "blue";
}

/**
 * Called when a collision ends over a collision DIV
 */
function onUncollide(draggedDiv, collisionDivId, containerDivId) {
  document.getElementById(collisionDivId).style.backgroundColor = "#006699";
}

/**
 * Called when div tried to go outside the container DIV
 */
function onOutsideBoundaries(draggedDiv, containerDivId) {
  //stopDragging();
}



/**
 * custom pointer over a dragging DIV
 */
function objMouseOver(obj) {
  obj.style.cursor = "pointer";
}