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

/* 
 * You can change the type of sequencer by including a hidden input field with id "contentTypeField" in your document.
 * The initEditor() method will then adjust internal variables in the sequencer object to match that type of content.
 * 
 * Note: code makes heavy use of shorthand functions:
 * ce(var) = document.createElement(var);
 * ge(var) = document.getElementById(var);
 * Defined in generalscripts.js
 */

var sequencer = createVarArray();

// Basic functions, intialization, updating

function createVarArray(){
    // Function that returns creates the global variable object, the sequencer's variable storage.
    
    if (sequencer) delete window.sequencer;
    return {   // 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)
            }
        },
        survey: {               // Properties of the loaded survey, if applicable (either this or the session tree above is filled in!) [THIS IS NOT CURRENTLY USED AND I SHOULD DELIBERATE ON WHAT VARIABLES TO PUT IN THIS TREE TO MAKE A FUNCTIONAL EDITOR THAT ALSO MATCHES THE DB FORMAT!]
            title: "",              // Title or the name of the survey (STRING)
            uid: "",                // Uid of the survey (STRING)
            description: "",        // Description of the survey (STRING)
            questions: {            // Properties of the questions contained within this survey
                uids: [],               // An array of uids of the questions, in the order that they appear in the survey (STRING)
                upToDate: []            // Whether or not a certain question needs an update (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 selectedObject property. (BOOL)
            updating: false,        // Whether or not new steps are currently being queried (to disable any further actions) (BOOL)
            numSteps: 0,            // Number of objects currently drawn in the editor (not necessarily same as number of objects in pipeline/survey!) (INTEGER)
            loaded: false,          // Whether or not the sequencer content has been updated for the first time (BOOL)
            selectedObject: {       // 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)
            },
            pages: {                // State regarding page division of content objects
                total: null,            // The number of pages the content is divided across
                currentPage: null       // The page that is currently displayed in the sequencer            
            }
        },
        settings: {             // Various settings to determine the workings of the sequencer
            content: {              // Properties related to the content view of the sequencer
                contentType: null,      // Type of the loaded parent object (STRING)
                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: null,      // Whether the editor should be a vertical or horizontal editor (STRING)
                pages: false            // Whether or not to divide content across pages
            },
            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 (BOOL)
        }
    };

}

function loadSequencer() {
    // Reads hidden fields created by PHP, copies the values into the global var then deletes them.
    
    // Load hidden fields and set required properties in global object var.
    try {
        // settings fields first
        initSequencer();
        
        switch (sequencer.settings.content.contentType.toLowerCase()) {
            case "session":
                // Content-related fields next
                var fPipelineString = ge("pipelineStringField");
                var fPipelineTypes = ge("pipelineTypeField");
                var fSessionUid = ge("sessionField");
                var fSessionTitle = ge("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);
                }
                break;
            case "survey":
                var fSurveyUid = ge("surveyUidField");
                var fQuestionUids = ge("questionUidsField");
                var fSurveyTitle = ge("surveyTitleField");
                var fnumQuestions = ge("numQuestionsField");
                var fSurveyDescription = ge("surveyDescriptionField");
                sequencer.survey.title = fSurveyTitle.value;
                sequencer.survey.uid = fSurveyUid.value;
                sequencer.survey.description = fSurveyDescription.value;
                sequencer.survey.questions.uids = stringToArray(fQuestionUids.value, ",");
                break;
            default:
                break;
        }
        
        
        sequencer.state.numSteps = 0;
        sequencer.state.loaded = false;
        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 = ge("hiddenInputs");
    hiddenInputs.parentNode.removeChild(hiddenInputs);
    
    // finally, run updateSequencer to refresh the visual display of the pipeline
    updateSequencer();
}

function initSequencer() {
    // Called from loadSequencer(). Sets sequencer.settings properties depending on content type and values passed by PHP in hidden fields (currently only one), then removes these fields.
    // Example: stuff like editor orientation, width/height, content type, maxObjects contained, etc...
    
    // load settings fields first
    var fContentType = ge("sContentTypeField");
    var content = ge("seqContent");
    //sequencer.settings.content.contentType = fContentType.value.toLowerCase();
    sequencer.settings.content.contentType = fContentType.value;
    //Then select settings from a few presets
    
    switch (sequencer.settings.content.contentType.toLowerCase()) {
        case "session":
            sequencer.settings.content.orientation = "horizontal";
            sequencer.settings.content.width = 800;
            sequencer.settings.content.height = 125;
            content.style.width = sequencer.settings.content.width+"px";
            content.style.height = sequencer.settings.content.height+"px";
            addClass(content, "horizontal");
            break;
        case "survey":
            sequencer.settings.content.orientation = "vertical";
            sequencer.settings.content.width = 800;
            sequencer.settings.content.height = "auto";
            content.style.width = sequencer.settings.content.width+"px";
            content.style.height = sequencer.settings.content.height+"px";
            addClass(content, "vertical");
            break;
        default:
            break;
    }
    fContentType.parentNode.parentNode.removeChild(fContentType.parentNode);
}

// Updating, drawing, formatting

function updateSequencer() {
    // Code that manages drawing and adding of new visual representations of objects in the sequencer.

    /*
         * 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.
         */
        
    switch (sequencer.settings.content.contentType.toLowerCase()) {
        case "session":
            updateSequencer_Session();
            break;
        case "survey":
            updateSequencer_Survey();
            break;
        default:
            // Why would this even be called?
            break;
    }
    
    
    
    
    //console.log(sequencer);
    sequencer.state.updating = false;   // Re-enable new actions
}

function updateSequencer_Session() {
    var content = ge("seqContentWrapper");
    var requestString, needsUpdating;
    var args;
    
    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
        // Stop running this function if the pipeline does not contain any elements to draw
        if (sequencer.session.pipeline.uids.length == 0 || !sequencer.session.pipeline.uids.length) return;
        // First clear the entire content wrapper, just for safety and in case efficientUpdating is off
        while (content.firstChild) {
            content.removeChild(content.firstChild);
        }
        args = [];
        needsUpdating = [];
        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
            args.push({
                uid: sequencer.session.pipeline.uids[i],
                type: sequencer.session.pipeline.types[i]
            });
            needsUpdating.push(new Array(i, sequencer.session.pipeline.uids[i], sequencer.session.pipeline.types[i]));
        }
        
        requestString = "args="+JSON.stringify(args);
        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
            content.removeChild(loadingGif);
            insertNewObjects(result.responseText, needsUpdating);
        }, true);
        sequencer.state.loaded = true;
        var loadingGif = ce("div");
        loadingGif.innerHTML = "<img src='images/ui/ajax-loader-round.gif' style='float: left; margin:auto auto;' />";
        content.appendChild(loadingGif);
    }
    else {
        // This means that one or more steps are being added, not an entire pipeline's worth of them
        needsUpdating = new Array();
        args = [];
        // 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]));
            args.push({
                uid: sequencer.session.pipeline.uids[i],
                type: sequencer.session.pipeline.types[i]
            });        
        }
        
        requestString = "args="+JSON.stringify(args);
        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
            insertNewObjects(result.responseText, needsUpdating);
        }, true);
        
        // Optional bit with the loading GIF
        for (var i = 0; i < needsUpdating.length; i++) {
            var loadingDiv = ce("div");
            loadingDiv.className = "displayStep loading";
            loadingDiv.innerHTML = "<img src='images/ui/ajax-loader-round.gif' />";
            if (needsUpdating[i][0] > sequencer.state.numSteps-1) {
                content.appendChild(loadingDiv);
                sequencer.state.numSteps++;
            }
            else {
                content.replaceChild(loadingDiv, content.childNodes[i][0]*2);
            }
        }
        updateDividers();
    // End optional
    }
}

// THIS NEEDS SOME WORK! A LOT OF IT ACTUALLY!
function updateSequencer_Survey() {
    //debugger;
    var content = ge("seqContentWrapper");
    var requestString, needsUpdating, args;
    // Create a reference to the correct field, this might not be needed if we do not generalize the updateSequencer function and instead keep two separate update functions for separate content types.
    var variables = sequencer.survey;
    
    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
        // Stop running this function if the questions array does not contain any elements to draw
        if (sequencer.survey.questions.uids.length == 0 || !sequencer.survey.questions.uids.length) return;
        // First clear the entire content wrapper, just for safety and in case efficientUpdating is off
        while (content.firstChild) {
            content.removeChild(content.firstChild);
        }
        args = [];
        needsUpdating = [];
        for (var i = 0; i < sequencer.survey.questions.uids.length; i++) {
            args.push({
                uid: sequencer.survey.questions.uids[i],
                type: "Question"
            });
            needsUpdating.push(new Array(i, sequencer.survey.questions.uids[i], "Question"));
        }
        
        requestString = "args="+JSON.stringify(args);
        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
            //debugger;
            content.removeChild(loadingGif);
            insertNewObjects(result.responseText, needsUpdating);
        }, true);
        sequencer.state.loaded = false;
        var loadingGif = ce("div");
        loadingGif.innerHTML = "<img src='images/ui/ajax-loader-round.gif' style='float: left; margin:auto auto;' />";
        content.appendChild(loadingGif);
    }
    else {
        // This means that one or more steps are being added, not an entire pipeline's worth of them
        needsUpdating = new Array();
        args = [];
        // 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]));
            args.push({
                uid: sequencer.session.pipeline.uids[i],
                type: sequencer.session.pipeline.types[i]
            });        
        }
        
        requestString = "args="+JSON.stringify(args);
        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
            insertNewObjects(result.responseText, needsUpdating);
        }, true);
        
        // Optional bit with the loading GIF
        for (var i = 0; i < needsUpdating.length; i++) {
            var loadingDiv = ce("div");
            loadingDiv.className = "displayStep loading";
            loadingDiv.innerHTML = "<img src='images/ui/ajax-loader-round.gif' />";
            if (needsUpdating[i][0] > sequencer.state.numSteps-1) {
                content.appendChild(loadingDiv);
                sequencer.state.numSteps++;
            }
            else {
                content.replaceChild(loadingDiv, content.childNodes[i][0]*2);
            }
        }
        updateDividers();
    // End optional
    }
}

function updateDividers() {
    // Function that checks for correct number of dividers in the pipeline, adds or deletes as needed.
    
    var content = ge("seqContentWrapper");
    // Loop through all elements in seqContentWrapper
    for (var i = 0; i < content.childNodes.length; i++) {
        var element = content.childNodes[i];
        // If the element is not a displayStep, continue with the next childNode.
        if (!hasClass(element, "displayStep")) {
            continue;
        }
        // Get the two elements next to the current element, if they don't exist or are not displaySteps, store false.
        var lastElement = (element.previousSibling && element.previousSibling.nodeName == "DIV") ? element.previousSibling : false;
        var nextElement = (element.nextSibling && element.nextSibling.nodeName == "DIV") ? element.nextSibling : false;
        // If these elements exist, and they are not dividers, add an element in between.
        if (lastElement != false) {
            if (!hasClass(lastElement, "divider")){
                var newDivider = ce("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 = ce("div");
                addClass(newDivider, "divider");
                addClass(newDivider, sequencer.settings.content.orientation);
                content.insertBefore(newDivider, nextElement);
                delete newDivider;
            }
        }
    }
}

// Adding new objects

function submitToolbox(type) {
    // Handles new object creation code when user clicks on a toolbox button
    
    // Do not accept new creation requests if the sequencer is still updating a previous object.
    if (sequencer.state.updating == true) return;
    sequencer.state.updating = true;
    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 insertNewObjects(responseText, needsUpdating) {
    // Container function that calls different insertNewX() functions depending on content type. Called from updateSequencer().
    debugger;
    var response = JSON.parse(responseText);
    // For now I assume that only one type of element can be displayed in the editor at one time. Therefore, the type of response[0] is the type of all elements of response.
    switch (sequencer.settings.content.contentType.toLowerCase()) {
        case "session":
            insertNewSteps(response, needsUpdating);
            break;
        case "question":
            insertNewQuestions(response, needsUpdating);
            break;
        default:
            break;
                
    }
}

function addQuestion_Click() {
    if (sequencer.state.updating == true) return;
    sequencer.state.updating = true;
    deselectStep();    
    var c = "objectToCreate=question";
    var u = "createObject.php";
        
    newAjaxRequest(c, u, function(result) {
        debugger;
        sequencer.survey.questions.uids.push(removeNL(result.responseText));
        sequencer.survey.questions.upToDate.push(false);
        updateSequencer();
    }, true);
}

//> Session specific

function insertNewSteps(response, needsUpdating) {
    /*
         * This is a 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 = ge("seqContentWrapper");
    // Remove optional loading images
    for (var  i = 0; i < content.childNodes.length; i++) {
        if (hasClass(content.childNodes[i], "loading")) {
            content.removeChild(content.childNodes[i]);
        }
    }
    // End optional
    
    for (var i = 0; i < response.length; i++) {
        var tempDiv = ce("div");
        tempDiv.id = response[i].uid;
        tempDiv.className = "displayStep";
        var divImageContainer = ce("div");
        divImageContainer.className = "displayStepIcon";
        divImageContainer.addEventListener("click", function(){
            clickStep(this.parentNode.id); 
        }, false);
        var divImage = ce("img");
        divImage.src = "images/icons/"+response[i].type.toLowerCase()+".png";
        divImageContainer.appendChild(divImage);
        tempDiv.appendChild(divImageContainer);
        var divLabel = ce("p");
        divLabel.innerHTML = response[i].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-1; j >= 0; j--) {
            if (needsUpdating[j][1] != response[i].uid) continue;
            if (needsUpdating[j][0] > sequencer.state.numSteps-1) {
                content.appendChild(tempDiv);
            }
            else {
                content.replaceChild(tempDiv, content.childNodes[j][0]*2);
            }
            sequencer.session.pipeline.upToDate[needsUpdating[j][0]] = true;
        }
    }
    
    updateDividers();
}

function deleteStep() {
    // Delete a step from both the pipeline.uids variable and its visual representation from the sequencer. Does not actually delete object from database!
    
    // check if a step is selected
    if (sequencer.state.selectedObject.uid == null) {
        return;
    }
    var uid = sequencer.state.selectedObject.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 = ge(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--;
        
    }
}

//> Survey specific

function insertNewQuestions(response, needsUpdating) {
    //Code that inserts or replaces new object displays in the sequencer. Question version.
    
    var content = ge("seqContentWrapper");
    // Loop through returned question objects
    for (var i = 0; i < response.length; i++) {
        // Define the outer frame
        var frameDiv = ce("div");
        frameDiv.className = "smallFrame question";
        frameDiv.id = response[i].uid;
        var titleDiv = ce("div");
        titleDiv.className = "smallTitle";
        var numberDiv = ce("div");
        numberDiv.className = "listNumber";
        numberDiv.innerHTML = i.toString();
        titleDiv.appendChild(numberDiv);
        titleDiv.innerHTML += response[i].uid;
        frameDiv.appendChild(titleDiv);
        
        // The frame now has a header bar
        // On to the content frame
        // Will use new "ce();" function, shorthand for ce
        
        var contentDiv = ce("div");
        contentDiv.className = "content";
        var questionBody = ce("p");
        questionBody.innerHTML = response[i].description;
        var questionParamsDiv = ce("div");
        questionParamsDiv.className = "questionParamsView";
        questionParamsDiv.innerHTML = "Object type: "+response[i].type;
        contentDiv.appendChild(questionBody);
        contentDiv.appendChild(questionParamsDiv);
        frameDiv.appendChild(contentDiv);
        
        // And finally the controls div
        var controlsDiv = ce("div");
        controlsDiv.className = "controls";
        var editButton = ce("input");
        var removeButton = ce("input");
        editButton.value = "Edit";
        removeButton.value = "Remove";
        editButton.className = "smallButton";
        removeButton.className = "smallButton";
        editButton.addEventListener("click", function(e){
            alert('Editing not yet supported!');
        }, false);
        removeButton.addEventListener("click", function(e){
            alert('Removing not yet supported!');
        }, false);
        controlsDiv.appendChild(editButton);
        controlsDiv.appendChild(removeButton);
        frameDiv.appendChild(controlsDiv);
        
        // We now have a full question display DIV contained in the frameDiv variable. We should now add this to the sequencer content.
        for (var j = needsUpdating.length - 1; j >= 0; j--) {
            if (needsUpdating[j][1] != response[i].uid) continue;
            if (needsUpdating[j][0] > sequencer.state.numSteps-1) {
                content.appendChild(frameDiv);
            }
            else {
                content.replaceChild(frameDiv, content.childNodes[needsUpdating[j][0]*2]);
            }
            sequencer.state.numSteps++;
        }
    }
}

// general functions and user actions

function clickStep(uid) {
    // Handles selection of steps
    
    if (uid == sequencer.state.selectedObject.uid) {  // user deselected a currently selected step.
        deselectStep();
    }
    else {
        if (sequencer.state.selectedObject.uid != undefined && sequencer.state.selectedObject.uid != "") {
            // Change selection if something is already selected
            deselectStep();
            selectStep(uid);
        }
        else {
            // Make new selection if nothing was selected
            selectStep(uid);
        }        
    }
}

function selectStep(uid) {
    // Called from clickStep(), manages CSS class assignment and updating of state variables. Also calls for info panel update.
    
    var element = ge(uid);
    if (element) {
        addClass(element, "selected");
        var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(uid)];
        ajaxInfoRequest(uid, ge("infoPanelContent"), type);
        sequencer.state.selectedObject.uid = uid;
        sequencer.state.selectedObject.index = null;  //Don't know how to do this yet.
    }
}

function deselectStep() {
    // Called from clickStep(). Handles unassignment and updating of state variables. Clears info panel.
    
    if (!sequencer.state.selectedObject.uid) return;
    var element = ge(sequencer.state.selectedObject.uid);
    removeClass(element, "selected");
    sequencer.state.selectedObject.uid = null;
    sequencer.state.selectedObject.index = null;
    var infoPanel = ge("infoPanelContent");
    if (infoPanel) {
        while (infoPanel.firstChild) infoPanel.removeChild(infoPanel.firstChild);
    }
}

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

function savePipeline (confirmSave) {
    // Sends an AJAX request to the PHP server that saves the current pipeline. Does not yet support surveys.
    
    // First check if user should confirm save action or not.
    var answer;
    if (confirmSave == true) {
        answer = confirm("Save changes to pipeline?");
    }
    else {
        answer = true;
    }
    if (answer == false) return;
    // Then compose requestString for savesession.php, containing pipeline uids, types and the session uid.
    // TODO: should eventually include stuff like session name as well!
    var requestString = "uids=";
    requestString += arrayToString(sequencer.session.pipeline.uids, ",");
    requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
    requestString += "&types=";
    requestString += arrayToString(sequencer.session.pipeline.types, ",");
    requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
    requestString += "&sessionUid=";
    requestString += sequencer.session.uid;
    console.log(requestString);
    newAjaxRequest(requestString, "savesession.php", function(result){
        console.log(result.responseText);
    }, true);
}

function editStep() {
    // Redirects the browser to the appropriate editor for the selected step type.
    
    // first save
    savePipeline(false);
    // Then post relevant information so the next editor page knows what object it is supposed to be editing.
    var postForm = ce("form");
    var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(sequencer.state.selectedObject.uid)];
    postForm.action = type.toLowerCase()+"Editor.php";
    postForm.method = "POST";
    var objectUid = ce("input");
    objectUid.type = "hidden";
    objectUid.name = "objectUid";
    objectUid.value = sequencer.state.selectedObject.uid;
    postForm.appendChild(objectUid);
    postForm.submit();
}

function moveStep (direction) {
    // Moves the selected step up/down (left/right) in the pipeline.
    
    // Check if a step is selected
    if (sequencer.state.selectedObject.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.selectedObject.uid);
    if (index == -1) return;
    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 = ge("seqContentWrapper");
    var element = ge(sequencer.session.pipeline.uids[index]);
    var otherElement = ge(sequencer.session.pipeline.uids[index+direction]);
    // First buffer the two elements
    var tempElement = element.cloneNode(true);
    var tempOtherElement = otherElement.cloneNode(true);
    var placeHolderElement = ce("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];
    
    // Finally, rebind the onCLick events to work properly again. I don't know if this 'clones' the event as well (therefore re-adding them casuses memory bloat...) or not.
    for (var i = 0; i < tempOtherElement.childNodes.length; i++){
        var childNode = tempOtherElement.childNodes[i];
        if (hasClass(childNode, "displayStepIcon")) {
            childNode.addEventListener("click", function() {
                clickStep(this.parentNode.id);
            }, false);
        }
    }
    for (var i = 0; i < tempElement.childNodes.length; i++){
        var childNode = tempElement.childNodes[i];
        if (hasClass(childNode, "displayStepIcon")) {
            childNode.addEventListener("click", function() {
                clickStep(this.parentNode.id);
            }, false);
        }
    }
    
    
    
     
// The alternative is to use event bubbling to capture the event on a higher level.
// Basically, we bind a super-structure onclick event that uses e.target|| event.srcElement to determine which element to move and select.
// http://stackoverflow.com/questions/29624/how-to-maintain-correct-javascript-event-after-using-clonenodetrue
// Pro: clean implementation, less events binded.
// Con: Difficult, this already works fine, probably tougher to use in conjunction with multifunctionality (sessions, surveys, questionsets, etc in one kind of editor)
     
}

// WORK IN PROGRESS








/******************/
/* TEMP FUNCTIONS */
/******************/

// Temp function that creates a dummy question to test the insertNewQuestions function.
function debug_addQuestion() {
    // Derp, natuurlijk werkt de addQuestion call niet twee keer. Hij creeert twee keer exact hetzelfde object. Bottom line: het werkt. Nu de editing code voor deze questions gaan schrijven!
    var response = [{
        uid: "1234567890testuid",
        title: "dummyQuestion",
        description: "This is a dummy question, not a real one!",
        type: "question"
    }];
    
    var needsUpdating = [[
    0,
    "1234567890testuid",
    "question"
    ]];
    
    insertNewQuestions(response, needsUpdating);
}

// Temp function that articially switches content type when the page is already loaded, to easily test layout changes and content flow.
function debug_switchType() {
    var content = ge("seqContent");
    if (sequencer.settings.content.contentType == "session") {
        // Set to survey
        sequencer.settings.content.contentType = "survey";
        sequencer.settings.content.orientation = "vertical";
        removeClass(content, "horizontal");
        addClass(content, "vertical");
    }
    else {
        // Set to session
        sequencer.settings.content.contentType = "session";
        sequencer.settings.content.orientation = "horizontal";
        removeClass(content, "vertical");
        addClass(content, "horizontal");
    }
}