/*
    JavaScript functions used to demonstrate
    Building Web Pages using Scriptaculous and Prototype
    [Extending Scriptaculous and Switching Draggables with Sortables]

*/

var draggableClass;
var droppableClass;
var assetDataClass;
var containerDataClass;
var droppableElementsUseId;

/*
    initDraggableDroppable
    Purpose: To make the tree items draggable and the container items sortable (called after the BODY loads)

*/
function initDraggableDroppable(options) {
    draggableClass = options.draggableClass;
    droppableClass = options.droppableClass;
    assetDataClass = options.assetDataClass;
    containerDataClass = options.containerDataClass;
    droppableElementsUseId = options.droppableElementsUseId;
    createAllDraggables();
    createAllSortables();
}

/*
    dragStart
    
    Purpose: To make all container DIVs droppable.
    This is called after a drag event begins which allows the dragged
    element to be dropped into a container.
*/
function dragStart(element) {
    createAllDroppables();
}

/*
    createAllDroppables
    
    Purpose: To make all of the container DIV elements droppable.
*/
function createAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        container = containers[i];
        Droppables.add(container,{hoverclass: 'dropHover',onDrop:function(objectElement, containerElement){dropObject(objectElement, containerElement)}});
    }
}
/*
    createAllDraggables
    
    Purpose: To make all of the tree items DIV elements draggable.
*/
function createAllDraggables() {
    var assets = document.getElementsByClassName(draggableClass);
    for (var i = 0; i < assets.length; i++) {
            asset = assets[i];
            new Draggable(asset,{ghosting: true,revert:true,dragStart:function(element){dragStart(element)}});
    }
}
/*
    dropObject
    
    Purpose: To add the dropped object data to the top of the list - then make the containers sortable.
*/
function dropObject(objectElement, containerElement) {
    addObjectToContainer(objectElement, containerElement);
    destroyAllDroppables();
    createAllSortables();
}
/*
    addObjectToContainer
    
    Purpose: To extract the HTML fragment from the dragged element and insert it at the top of the container.
*/
function addObjectToContainer(objectElement, containerElement) {
    var assetDataElementArray = document.getElementsByClassName(assetDataClass,objectElement); // Locate the child div of this object that contains the actual data.
    var objectData = assetDataElementArray[0].innerHTML;
    assetHTML = "<div class=\"" + containerDataClass +"\">" + objectData + "</div>";

    new Insertion.Top(containerElement, assetHTML);
}
/*
    destroyAllDroppables
    
    Purpose: To remove that ability to drop into the containers.
*/
function destroyAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
   
    for (var i = 0; i < containers.length; i++) {
        sortedObjectList = containers[i].id
        Droppables.remove(sortedObjectList);
    }
}
/*
    createAllSortables
    
    Purpose: To make all of the containers sortable.
*/
function createAllSortables() {
    var containers = document.getElementsByClassName(droppableClass);
    var containerNames = getContainerNames();
    for (var i = 0; i < containers.length; i++) {
        containerId=containers[i].id;
        eval("Sortable.create(containerId, {tag:'div',dropOnEmpty:true,constraint:false,containment:[" + containerNames + "]});")
    }
}
/*
    getContainerNames
    
    Purpose: To retrieve a list of all of the container IDs (used to create the sortables).
*/
function getContainerNames() {
    containers = document.getElementsByClassName(droppableClass);
    containerObjectListNames = ""; 
    for (var i = 0; i < containers.length; i++) {
        containerObjectListNames += "\"" + containers[i].id + "\","; 
    }
    containerObjectListNames = containerObjectListNames.substring(0,containerObjectListNames.length-1);
    return containerObjectListNames;
}
/*
    destroyAllSortableLists
    
    Purpose: To remove that ability to sort the containers.
*/
function destroyAllSortableLists() {
    containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        sortedObjectListId = containers[i].firstChild.id
        Sortable.destroy(sortedObjectListId);
    }
}