source: Dev/trunk/js/sequencerScripts.js @ 182

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var sequencer = {   // GLOBAL VAR TO STORE SEQUENCER SETTINGS!
    uid: "",                // The unique id of this sequencer (not DB related!). This will help to avoid global var conflicts. Assign this randomly! (STRING)
    session: {              // Properties of the currently loaded session
        title: "",              // Title or name (STRING)
        uid: "",                // Database UID of the current session (STRING)
        pipeline: {             // Pipeline
            uids: [],               // Uids of objects in pipeline (STRING)
            types: [],              // Types of objects in pipeline (STRING)
            upToDate: []            // Whether or not object displays are up to date (BOOL)
        }
    },
    state: {                // Operating state of the sequencer
        editing: false,         // Whether or not one of the contained child objects is currently being edited or in edit mode. Which one can be determined from the selectedStep property.
        numSteps: 0,            // Number of steps currently drawn in the editor (not necessarily same as number of steps in pipeline!) (INTEGER)
        loaded: false,          // Whether or not the sequencer content has been updated for the first time (BOOL)
        selectedStep: {         // Properties of the currently selected step
            uid: "",                // UID of this step (STRING)
            index: null               // The 'index' of this step in the current sequencer view (NOT the pipeline!) (INTEGER)
        }        
    },
    settings: {             // Various settings to determine the workings of the sequencer
        content: {              // Properties related to the content view of the sequencer
            contentType: "session", // Type of the loaded parent object
            width: null,            // Width of the viewing area (INTEGER)
            height: null,           // Height of the viewing area (INTEGER)
            maxObjects: null,       // The maximum number of content elements to be displayed at once time (INTEGER)
            orientation: "horizontal"        // Whether the editor should be a vertical or horizontal editor (STRING)
        },
        efficientUpdating: true // Whether or not to use selective querying of the database for new step objects. True will only refresh out-of-date steps, False will refresh the whole pipeline
    }
}


function SubmitToolbox(type) {
    deselectStep();
    var c = "objectToCreate="+type;
    var u = "createObject.php";
        
    newAjaxRequest(c, u, function(result) {
        sequencer.session.pipeline.uids.push(removeNL(result.responseText));
        sequencer.session.pipeline.types.push(type);
        sequencer.session.pipeline.upToDate.push(false);
        updateSequencer();
    }, true);
}

function clickStep(uid) {
    if (uid == sequencer.state.selectedStep.uid) {  // user deselected a currently selected step.
        deselectStep();
    }
    else {
        if (sequencer.state.selectedStep.uid != undefined && sequencer.state.selectedStep.uid != "") {
            deselectStep();
            selectStep(uid);
        }
        else {
            selectStep(uid);
        }        
    }
}

function selectStep(uid) {
    var element = document.getElementById(uid);
    if (element) {
        addClass(element, "selected");
        var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(uid)];
        ajaxInfoRequest(uid, document.getElementById("infoPanelContent"), type);
        sequencer.state.selectedStep.uid = uid;
        sequencer.state.selectedStep.index = null;  //Don't know how to do this yet.
    }
}

function deleteStep() {
    // check if a step is selected
    if (sequencer.state.selectedStep.uid == null) {
        return;
    }
    var uid = sequencer.state.selectedStep.uid;
    // deselect the step to reset the info panel and selection code
    deselectStep();
    // splice the step's data from the pipeline
    var index = sequencer.session.pipeline.uids.indexOf(uid);
    if (index >= 0 && index < sequencer.session.pipeline.uids.length) {
        sequencer.session.pipeline.uids.splice(index, 1);
        sequencer.session.pipeline.types.splice(index, 1);
        sequencer.session.pipeline.upToDate.splice(index, 1);
        // Then delete the step visually
        var element = document.getElementById(uid);
        var divider;
        if (!element.nextSibling) {
            // the element is at the end of the pipeline
            // therefore we remove the previous divider.
            // Note: it could also be the only element left in the pipeline!
            divider = (element.previousSibling) ? element.previousSibling : false;
            if (divider != false) {
                divider.parentNode.removeChild(divider);
            }
        }
        else {
            // the element is at any position except the last, therefore we remove the next divider
            divider = (element.nextSibling) ? element.nextSibling : false;
            if (divider != false) {
                divider.parentNode.removeChild(divider);
            }
        }
        
        // Finally, remove the element itself.
        element.parentNode.removeChild(element);
        sequencer.state.numSteps--;
        
    }
}

function deselectStep() {
    if (!sequencer.state.selectedStep.uid) return;
    var element = document.getElementById(sequencer.state.selectedStep.uid);
    removeClass(element, "selected");
    sequencer.state.selectedStep.uid = null;
    sequencer.state.selectedStep.index = null;
    var infoPanel = document.getElementById("infoPanelContent");
    while (infoPanel.firstChild) infoPanel.removeChild(infoPanel.firstChild);
}

function ajaxInfoRequest(uid, el, type) {
    var c = "uid="+uid;
    c += "&type="+type;
    var u = "getInfo.php";
    newAjaxRequest(c, u, function(result) {
        el.innerHTML = result.responseText;
    }, true);
}

function updateSequencer() {

    /*
 * Description:
 * This function updates the visual elements in the sequencer content view to match the current state of the sequencer.session.pipeline property.
 * It queries the database for object properties via AJAX (returnStep/Display/.php), then inserts divider div's in between where needed.
 */
    var content = document.getElementById("seqContentWrapper");
    if (sequencer.state.loaded == false || sequencer.settings.efficientUpdating == false) {  // This is the first update of the sequencer since page load, therefore it contains no previous steps
        // First clear the entire content wrapper, just for safety and in case efficientUpdating is off
        while (content.firstChild) {
            content.removeChild(content.firstChild);
        }
        // Compose a request string - "uids=1,2,3&types=a,b,c"
        var requestString = "uids=";
        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
            requestString += sequencer.session.pipeline.uids[i]+",";
            sequencer.state.numSteps++;
        }
        
        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
        requestString += "&types=";
        for (var j = 0; j < sequencer.session.pipeline.types.length; j++) {
            requestString += sequencer.session.pipeline.types[j]+",";
        }
        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
        newAjaxRequest(requestString, "returnStep.php", function(result) {
            content.innerHTML = result.responseText;
            updateDividers();
            sequencer.state.loaded = true;
            for (var i = 0; i < sequencer.session.pipeline.upToDate.length; i++) {
                sequencer.session.pipeline.upToDate.length[i] = true;
            }
            if (content.childNodes[0].nodeType == 3) content.removeChild(content.childNodes[0]);
        }, true);
    }
    else {
        // Pack together all needed updates in one request string, insert responseText.firstChild whenever sequencer.session.pipeline.upToDate[i] == false
        debugger;
        var needsUpdating = new Array();
        // Add steps that need updating to the needsUpdating array (index, uid, type).
        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
            if (sequencer.session.pipeline.upToDate[i] == true) continue;
            needsUpdating.push(new Array(i, sequencer.session.pipeline.uids[i], sequencer.session.pipeline.types[i]));
        }
        // Now that we have an array of the steps that need to be refreshed, we compose a requestString.
        var requestString = "uids=";
        for (var i = 0; i < needsUpdating.length; i++) {
            requestString += needsUpdating[i][1]+",";
        }
        if (requestString.slice(-1) == ",") requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
        requestString += "&types=";
        for (var i = 0; i < needsUpdating.length; i++) {
            requestString += needsUpdating[i][2];
        }
        if (requestString.slice(-1) == ",") requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
        
        // perform the AJAX request
        newAjaxRequest(requestString, "returnStep.php", function(result) {
            insertNewSteps(result.responseText, needsUpdating);
        }, true);
    }
    
}

function loadSequencer() {
    /* 
     * Description:
     * Load data from hidden fields (put there by PHP), store them in the global var "sequencer" (as well as several initialization properties),
     * then remove the hidden fields from the HTML document tree.
     */
    
    // Load hidden fields and set required properties in global object var.
    try {
        
        var fPipelineString = document.getElementById("pipelineStringField");
        var fPipelineTypes = document.getElementById("pipelineTypeField");
        var fSessionUid = document.getElementById("sessionField");
        var fSessionTitle = document.getElementById("sessionTitleField");
    
        sequencer.session.title = fSessionTitle.value;
        sequencer.session.uid = fSessionUid.value;
        sequencer.session.pipeline.uids = stringToArray(fPipelineString.value, ",");
        sequencer.session.pipeline.types = stringToArray(fPipelineTypes.value, ",");
        sequencer.session.pipeline.upToDate = new Array();
        
        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
            sequencer.session.pipeline.upToDate.push(true);
        }
        sequencer.state.numSteps = 0;
        sequencer.state.loaded = false;
        sequencer.settings.content.orientation = "h";
        sequencer.settings.efficientUpdating = true;
    }
    catch (e) {
        // Alert developer of any errors while setting these variables
        for (error in e) alert(error.message);
    }
    
    // Then remove the hidden fields from the HTML document
    var hiddenInputs = document.getElementById("hiddenInputs");
    hiddenInputs.parentNode.removeChild(hiddenInputs);
    
    console.log(sequencer);
    // finally, run updateSequencer to refresh the visual display of the pipeline
    
    updateSequencer();
}

function insertNewSteps(responseText, needsUpdating) {
    debugger;
    var content = document.getElementById("seqContentWrapper");
    // Create a holder Div that converts the returned HTML to HTMLDivElements implicitly, so that they can be manipulated using DOM methods
    var holderDiv = document.createElement("div");
    holderDiv.innerHTML = responseText;
    // tempDiv will serve to 
    var tempDiv;
    if (holderDiv.firstChild.nodeType == "3") holderDiv.removeChild(holderDiv.firstChild);
    // Loop through 
    for (var i = 0; i < needsUpdating.length; i++) {
        tempDiv = holderDiv.firstChild;
        holderDiv.removeChild(holderDiv.firstChild);
        if (needsUpdating[i][0] > sequencer.state.numSteps-1) {
            // this step comes at the end of the pipeline
            content.appendChild(tempDiv);
            sequencer.state.numSteps++;
        }
        else {
            content.replaceChild(tempDiv, content.childNodes[needsUpdating[i][0]*2]);
        }
        // The element is now updated, therefore set this flag in the global var
        sequencer.session.pipeline.upToDate[needsUpdating[i][0]] = true;
    }
    
    // Then add or adjust dividers as needed!
    updateDividers();
}

function insertNewQuestion(responseText, needsUpdating) {
    /*
     * This is a test function displaying how to handle the visual object representation in solely javascript.
     * Communication of relevant variables between PHP and JS happens in JSON format.
     * PHP returns a JSON array of objects to be created by JS
     * JS then loops through this array and creates DIVS to be inserted into the sequencer.
     * These are inserted at the position needsUpdating gives us.
     */
    
    var content = document.getElementById("seqContent");
    var response = eval(responseText);
    
    for (var i = 0; i < response.length; i++) {
        var tempDiv = document.createElement("div");
        tempDiv.id = response.id;
        tempDiv.className = "displayStep";
        var divImage = document.createElement("img");
        divImage.src = "./images/displayStep.png";
        divImage.addEventListener("Click", function(e){
            selectStep(this.id);
        }, false);
        tempDiv.appendChild(divImage);
        var divLabel = document.createElement("p");
        divLabel.innerHTML = response.title;
        tempDiv.appendChild(divLabel);
        
        // This for needs to loop backwards so that the steps at the end of the pipeline are added or changed first. This keeps the childNodes index for all further steps intact.
        for (var j = needsUpdating.length; j >= 0; j--) {
            if (needsUpdating[j][1] != response.id) continue;
            if (needsUpdating[j][0] > sequencer.state.numSteps-1) {
                content.appendChild(tempDiv);
            }
            else {
                content.replaceChild(tempDiv, content.childNodes[j][0]*2);
            }
        }
    }
}

function updateDividers() {
    var content = document.getElementById("seqContentWrapper");
    for (var i = 0; i < content.childNodes.length; i++) {
        var element = content.childNodes[i];
        if (!hasClass(element, "displayStep")) {
            continue;
        }
        var lastElement = (element.previousSibling && element.previousSibling.nodeName == "DIV") ? element.previousSibling : false;
        var nextElement = (element.nextSibling && element.nextSibling.nodeName == "DIV") ? element.nextSibling : false;
        if (lastElement != false) {
            if (!hasClass(lastElement, "divider")){
                var newDivider = document.createElement("div");
                addClass(newDivider, "divider");
                addClass(newDivider, sequencer.settings.content.orientation);
                content.insertBefore(newDivider, element);
                delete newDivider;
            }
        }
        if (nextElement != false) {
            if (!hasClass(nextElement, "divider")){
                var newDivider = document.createElement("div");
                addClass(newDivider, "divider");
                addClass(newDivider, sequencer.settings.content.orientation);
                content.insertBefore(newDivider, nextElement);
                delete newDivider;
            }
        }
    }
}

function savePipeline (confirmSave) {
    var answer;
    if (confirmSave == true) {
        answer = confirm("Save changes to pipeline?");
    }
    else {
        answer = true;
    }
    if (answer == false) return;
    
    var requestString = "uids=";
    requestString += arrayToString(sequencer.session.pipeline.uids, ",");
    requestString += "&types=";
    requestString += arrayToString(sequencer.session.pipeline.types, ",");
    requestString += "&sessionUid=";
    requestString += sequencer.session.uid;
    newAjaxRequest(requestString, "savePipeline.php", function(result){
        console.log(result.responseText);
    }, true);
}

function editStep() {
    // first save
    
    //savePipeline(false);
    
    var postForm = document.createElement("form");
    var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(sequencer.state.selectedStep.uid)];
    postForm.action = type.toLowerCase()+"Editor.php";
    postForm.method = "POST";
    var objectUid = document.createElement("input");
    objectUid.type = "hidden";
    objectUid.name = "objectUid";
    objectUid.value = sequencer.state.selectedStep.uid;
    postForm.appendChild(objectUid);
    postForm.submit();
}

function moveStep (direction) {
    // Check if a step is selected
    
    if (sequencer.state.selectedStep.uid == null || direction == null) return;
    // Check if the step is not at either end of the pipeline
    var index = sequencer.session.pipeline.uids.indexOf(sequencer.state.selectedStep.uid);
    if ((index < 0) || (index >= sequencer.session.pipeline.uids.length) || (index == 0 && direction == -1) || (index == sequencer.session.pipeline.uids.length - 1 && direction == 1)) {
        alert("Cannot move out of bounds!");
        return;
    }
    
    // Find the two elements in the editor content display
    var content = document.getElementById("seqContentWrapper");
    var element = document.getElementById(sequencer.session.pipeline.uids[index]);
    var otherElement = document.getElementById(sequencer.session.pipeline.uids[index+direction]);
    // First buffer the two elements
    var tempElement = element.cloneNode(true);
    var tempOtherElement = otherElement.cloneNode(true);
    var placeHolderElement = document.createElement("div");
    placeHolderElement.id = "placeholder_element";
    content.replaceChild(placeHolderElement, otherElement);
    content.replaceChild(tempOtherElement, element);
    content.replaceChild(tempElement, placeHolderElement);
    //This should work.
    // A-B     Start positions, backup to tA and tB
    // A-X     Replace B with placeholder X
    // B-X     Replace A with tB
    // B-A     Replace placeholder X with tA.
    // The two elements are now swapped.
     
    // Now swap the array entries.
    sequencer.session.pipeline.uids[index] = sequencer.session.pipeline.uids.splice(index+direction, 1, sequencer.session.pipeline.uids[index])[0];
    sequencer.session.pipeline.types[index] = sequencer.session.pipeline.types.splice(index+direction, 1, sequencer.session.pipeline.types[index])[0];
     
}