Index: Dev/trunk/js/generalScripts.js
===================================================================
--- Dev/trunk/js/generalScripts.js	(revision 182)
+++ Dev/trunk/js/generalScripts.js	(revision 183)
@@ -133,2 +133,12 @@
     return s.replace(/[\n\r\t]/g,""); 
 }
+
+// Shorthand for document.createElement, because that pops up about three times every line of the main program
+function ce(s) {
+    return document.createElement(s);
+}
+
+// Shorthand for document.getElementById, same reason as above
+function ge(s) {
+    return document.getElementById(s);
+}
Index: Dev/trunk/js/sequencerScripts.js
===================================================================
--- Dev/trunk/js/sequencerScripts.js	(revision 182)
+++ Dev/trunk/js/sequencerScripts.js	(revision 183)
@@ -15,4 +15,12 @@
         }
     },
+    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
+        uid: "",                // Uid of the survey
+        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
+            upToDate: []            // Whether or not a certain question needs an update
+        }
+    },
     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.
@@ -21,10 +29,10 @@
         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)
+            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
+            contentType: "session", // Type of the loaded parent object (STRING)
             width: null,            // Width of the viewing area (INTEGER)
             height: null,           // Height of the viewing area (INTEGER)
@@ -139,76 +147,89 @@
 
     /*
- * 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.
- */
+     * 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");
+    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);
         }
-        // Compose a request string - "uids=1,2,3&types=a,b,c"
-        var requestString = "uids=";
+        args = [];
+        needsUpdating = [];
         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]);
+            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 = document.createElement("div");
+        loadingGif.innerHTML = "<img src='images/ui/ajax-loader-round.gif' style='float: left; margin:auto auto;' />";
+        content.appendChild(loadingGif);
     }
     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();
+        // 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]));
-        }
-        // Now that we have an array of the steps that need to be refreshed, we compose a requestString.
-        var requestString = "uids=";
+            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++) {
-            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);
-    }
-    
+            var loadingDiv = document.createElement("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
+    }
+    console.log(sequencer);
 }
 
 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.
-     */
+ * 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 {
-        
+        // settings fields first
+        initEditor();
+        
+        // Content-related fields next
         var fPipelineString = document.getElementById("pipelineStringField");
         var fPipelineTypes = document.getElementById("pipelineTypeField");
@@ -239,5 +260,4 @@
     hiddenInputs.parentNode.removeChild(hiddenInputs);
     
-    console.log(sequencer);
     // finally, run updateSequencer to refresh the visual display of the pipeline
     
@@ -245,62 +265,57 @@
 }
 
-function insertNewSteps(responseText, needsUpdating) {
-    debugger;
+function insertNewObjects(responseText, needsUpdating) {
+    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 (response[0].type.toLowerCase()) {
+        case "survey": case "application": case "dashboard":
+            insertNewSteps(response, needsUpdating);
+            break;
+        case "question":
+            insertNewQuestions(response, needsUpdating);
+            break;
+        default:
+            break;
+                
+    }
+}
+
+function insertNewSteps(response, 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("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);
+    // 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 = document.createElement("div");
-        tempDiv.id = response.id;
+        tempDiv.id = response[i].uid;
         tempDiv.className = "displayStep";
+        var divImageContainer = document.createElement("div");
+        divImageContainer.className = "displayStepIcon";
+        divImageContainer.addEventListener("click", function(){
+            clickStep(this.parentNode.id); 
+        }, false);
         var divImage = document.createElement("img");
-        divImage.src = "./images/displayStep.png";
-        divImage.addEventListener("Click", function(e){
-            selectStep(this.id);
-        }, false);
-        tempDiv.appendChild(divImage);
+        divImage.src = "images/icons/"+response[i].type.toLowerCase()+".png";
+        divImageContainer.appendChild(divImage);
+        tempDiv.appendChild(divImageContainer);
         var divLabel = document.createElement("p");
-        divLabel.innerHTML = response.title;
+        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; j >= 0; j--) {
-            if (needsUpdating[j][1] != response.id) continue;
+        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);
@@ -309,5 +324,64 @@
                 content.replaceChild(tempDiv, content.childNodes[j][0]*2);
             }
-        }
+            sequencer.session.pipeline.upToDate[needsUpdating[j][0]] = true;
+        }
+    }
+    
+    updateDividers();
+}
+
+function insertNewQuestions(response, needsUpdating) {
+    var content = document.getElementById("seqcContentWrapper");
+    // Loop through returned question objects
+    for (var i = 0; i < response.length; i++) {
+        // Define the outer frame
+        var frameDiv = document.createElement("div");
+        frameDiv.classname = "smallFrame question";
+        frameDiv.id = response[i].uid;
+        var titleDiv = document.createElement("div");
+        titleDiv.className = "smallTitle";
+        var numberDiv = document.createElement("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 document.createElement
+        
+        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.
+        
     }
 }
@@ -344,4 +418,5 @@
 
 function savePipeline (confirmSave) {
+    debugger;
     var answer;
     if (confirmSave == true) {
@@ -355,9 +430,12 @@
     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;
-    newAjaxRequest(requestString, "savePipeline.php", function(result){
+    console.log(requestString);
+    newAjaxRequest(requestString, "savesession.php", function(result){
         console.log(result.responseText);
     }, true);
@@ -416,2 +494,32 @@
      
 }
+
+function initEditor() {
+    // load settings fields first
+    var fContentType = document.getElementById("sContentTypeField");
+    var content = document.getElementById("seqContent");
+    //sequencer.settings.content.contentType = fContentType.value.toLowerCase();
+    sequencer.settings.content.contentType = "survey";
+    
+    var desiredWidth, desiredHeight;
+    
+    //Then select settings from a few presets
+    switch (sequencer.settings.content.contentType) {
+        case "session":
+            sequencer.settings.content.orientation = "h";
+            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";
+            break;
+        case "survey":
+            sequencer.settings.content.orientation = "v";
+            sequencer.settings.content.width = 600;
+            sequencer.settings.content.height = "auto";
+            content.style.width = sequencer.settings.content.width+"px";
+            content.style.height = sequencer.settings.content.height+"px";
+            break;
+        default:
+            break;
+    }
+}
Index: Dev/trunk/js/sequencerScripts_1.js
===================================================================
--- Dev/trunk/js/sequencerScripts_1.js	(revision 182)
+++ 	(revision )
@@ -1,561 +1,0 @@
-//THIS IS THE BACKUP!!!!!!!
-
-/* 
- * 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!
-    session: {              // Properties of the currently loaded session
-        title: "",              // Title or name
-        uid: "",                // Database UID of the current session
-        pipeline: {             // Pipeline
-            uids: [],               // Uids of objects in pipeline
-            types: [],              // Types of objects in pipeline
-            upToDate: []            // Whether or not object displays are up to date
-        }
-    },
-    state: {                // Operating state of the sequencer
-        numSteps: 0,            // Number of steps currently drawn in the editor (not necessarily same as number of steps in pipeline!)
-        loaded: false           // Whether or not the sequencer content has been updated for the first time
-    },
-    settings: {             // Various settings to determine the workings of the sequencer
-        content: {
-            width: null,
-            height: null,
-            orientation: "h"
-        },
-        efficientUpdating: true
-    }
-}
-
-
-function IsItemSelected(check, target) {
-    if (check.value) {
-        target.disabled = false;
-    }
-    else {
-        target.disabled = true;
-    }
-}
-
-function IsCheckEnabled(check, target) {
-    if (check.checked) {
-        target.disabled = false;
-        this.removeClass(target, "dis");
-        
-    }
-    else {
-        target.disabled = true;
-        this.addClass(target, "dis");
-    }
-}
-
-function SubmitToolbox(type) {
-    var c = "objectToCreate="+type;
-    var u = "createObject.php";
-    var a = true;
-    var pipeline = document.getElementById("pipelineStringField");
-    var pipelineType = document.getElementById("pipelineTypeField");
-    var pipelineUpdated = document.getElementById("pipelineUpdatedField");
-    document.getElementById("numSteps").value++;
-    
-    newAjaxRequest(c, u, function(result){
-        var resultUid = removeNL(result.responseText);
-        //resultUid.replace("\n","").replace("\r","");
-        
-        pipeline.value += resultUid+",";
-        pipelineType.value += type+",";
-        pipelineUpdated.value += "0,";
-        updateSequencer();
-    }, a);
-}
-
-function selectStep(uid) {
-    /*
-    
-    var nodes = document.getElementById("seqContentWrapper").childNodes;
-    for (var i = 0; i < nodes.length; i++) {     //loop through childNodes. Skip first node (whitespace)
-        if (hasClass(nodes[i], "displayStep")) {    //check if current childNode is a displayStep, not divider or text.
-            if (nodes[i].id == uid) {
-                if (hasClass(nodes[i], "selected")) {
-                    removeClass(nodes[i], "selected");
-                }
-                else {
-                    addClass(nodes[i], "selected");
-                }                
-            }
-            else {
-                removeClass(nodes[i], "selected");
-            }
-        }
-    }
-     */
-    // Hier is een snellere manier voor!
-    var element = document.getElementById(uid);
-    var prevElement = document.getElementById(document.getElementById("selectedStepField").value);
-    
-    if (!element || !hasClass(element, "displayStep")) {
-        return;
-    }
-    // misschien nog checks inbouwen of het echt wel een element is?
-    var selectedStepField = document.getElementById("selectedStepField");
-    if (!hasClass(element, "selected")) {
-        if (prevElement) {
-            removeClass(prevElement, "selected");
-        }
-        addClass(element, "selected");
-        selectedStepField.value = uid;
-        
-        var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
-        var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
-        var type = plType[pl.indexOf(uid)];
-        ajaxInfoRequest(uid, document.getElementById("infoPanelContent"), type);
-        
-        
-    }
-    else {
-        deselectStep(uid);
-    }
-    
-    
-// Update selected step field with uid of currently selected step.
-    
-    
-}
-
-function deleteStep() {
-    // delete an object from the session.
-    // note: does not actually remove the object from the database, only takes it out of the pipeline array.
-        
-    var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
-    var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
-    var plUpdated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
-    var selectedStep = document.getElementById("selectedStepField").value;
-    
-    // if no step has been selected, exit the function
-    if (selectedStep == undefined || selectedStep == "") {
-        return;
-    }
-    
-    // find the array index of the specified object uid, then remove it from all three arrays.
-    var index = pl.indexOf(selectedStep);
-    if (index >= 0 && index < pl.length) {
-        pl.splice(index, 1);
-        plType.splice(index, 1);
-        plUpdated.splice(index, 1);
-        // set the updated status of all objects from *index* and forward to "0" (out of date)
-        // this way they will be refreshed the next time updateSequencer(); is called, adn the visual display will match the new pipeline.
-        for (var i = index-1; i < plUpdated.length; i++) {
-            if (i >= 0 ) {
-                plUpdated[i] = "0";
-            }
-        }
-    }
-    
-    document.getElementById("pipelineStringField").value = arrayToString(pl, ",");
-    document.getElementById("pipelineTypeField").value = arrayToString(plType, ",");
-    document.getElementById("pipelineUpdatedField").value = arrayToString(plUpdated, ",");
-    deselectStep(selectedStep);     // Make sure the info panel is up to date as well. (Not showing anything, as it should be...)
-    document.getElementById("numSteps").value--;
-    
-    updateSequencer(false);
-    
-    
-    
-}
-
-function deselectStep(uid) {
-    var field = document.getElementById("selectedStepField");
-    field.value = "";
-    var element = document.getElementById(uid);
-    removeClass(element, "selected");
-    document.getElementById("infoPanelContent").innerHTML = "";
-}
-
-function ajaxStepRequest(UIDS, types) {
-    var c = "uids="+UIDS;
-    if (types != "") {
-        c += "&types="+types;
-    }
-    var u = "returnStep.php";
-    newAjaxRequest(c, u, function(result) {
-        document.getElementById("seqContentWrapper").innerHTML = result.responseText;
-    }, true);
-}
-
-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 drawSteps2() {
-    var content = document.getElementById("seqContentWrapper");
-    var pipeline = document.getElementById("pipelineStringField").value;
-    var pipelineTypes = document.getElementById("pipelineTypeField").value;
-    var numSteps = document.getElementById("numSteps").value;
-    if (numSteps > 0) {
-        pipeline = pipeline.replace(/,/g , ",divider,");    //regex search for commas, global (repeat), to represent them with visual dividers.
-        pipelineTypes = pipelineTypes.replace(/,/g, ",divider,");
-        ajaxStepRequest(pipeline, pipelineTypes);
-    }
-}
-
-function updateSequencer(firstLoad) {
-    // Load hidden field values
-    debugger;
-    var plString = document.getElementById("pipelineStringField").value;
-    var plTypeString = document.getElementById("pipelineTypeField").value;
-    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
-    var count = document.getElementById("numSteps").value;
-    
-    if (count < 1) {
-        document.getElementById("seqContentWrapper").innerHTML = "";
-        return;
-    }
-    // If this is on page-load time
-    if (firstLoad == true) {
-        var seqContent = document.getElementById("seqContentWrapper");
-        seqContent.innerHTML = "";
-        requestString = plString.slice(0, -1);
-        requestString = requestString.replace(/,/g, ",divider,");
-        newAjaxRequest("uids="+requestString, "returnStep.php", function(result) {
-            seqContent.innerHTML = result.responseText;
-        }, true);
-        
-        plUpdatedString = "";
-        for (var i = 0; i < plString.split(",").length-1; i++) {
-            plUpdatedString += "1,";
-        }
-        
-        document.getElementById("pipelineUpdatedField").value = plUpdatedString;
-    }
-    else {      // if not
-        var pl = stringToArray(plString, ",");    
-        var plType = stringToArray(plTypeString, ",");    
-        var plUpdated = stringToArray(plUpdatedString, ",");
-    
-        var count = pl.length;
-    
-        document.getElementById("numSteps").value = count;
-        var seqContent = document.getElementById("seqContentWrapper");
-        // hier zit een fout. Als er een deleted step nog in de pipeline staat haalt hij de eerste valid step weg ipv een text node.
-        // twee mogelijkheden: 
-        // 1: check of het text node is.
-        // 2: modulo check of het een even aantal steps is. Als alles klopt kan er onmogelijk een even aantal childNodes zijn.
-        if (seqContent.childNodes.length % 2 == 0 && seqContent.childNodes.length > 0) {
-            seqContent.removeChild(seqContent.childNodes[0]);
-            
-        }
-        
-        
-        for (var i = 0; i < pl.length; i++) {   // loop through pipeline contents
-            if (plUpdated[i] == "0") {   // if the element is not up to date
-                // first remove the step representation from the sequencer
-                //timeDiff.setStartTime();
-                
-            
-                // IMPROVISE !!!!!!!!!!
-                var elementByIndex = seqContent.childNodes[2*i];    // works with moved steps
-                var elementById = document.getElementById(pl[i]);   // works with ???, not moved steps though... Keeping this in here for future bugfixing. This value is not currently used.
-                var element = elementByIndex;
-            
-            
-                // END IMPROVISE !!!!!!!!!!!!
-                if (element == null) {
-                    element = document.createElement("div");
-                    element.name = "placeholder";
-                    seqContent.appendChild(element);
-                }
-                if (element.nextSibling) {
-                    var nextElement = element.nextSibling;
-                }
-                else {
-                    var nextElement = document.createElement("div");
-                    nextElement.name = "placeholderNext";
-                    seqContent.appendChild(nextElement);
-                }
-            
-                // now request a new step representation and insert it after previousElement
-                var holderDiv = document.createElement("div");
-                var requestString = "uids="+pl[i];
-            
-                if (plType[i]) {
-                    requestString += "&types="+plType[i];
-                }
-                // globally declare newDiv so it can be passed to the updateDividers function
-                var newDiv;
-            
-                newAjaxRequest(requestString, "returnStep.php", function(result) {
-                    holderDiv.innerHTML = result.responseText;
-                    newDiv = holderDiv.childNodes[1];            
-                    seqContent.replaceChild(newDiv, element);
-                    if (nextElement.name == "placeholderNext") {
-                        seqContent.removeChild(nextElement);
-                    }
-                    plUpdated[i] = "1";
-                }, false);
-            
-                       
-                // ALTERNATIVE METHOD TO REPLACECHILD!!!
-                //seqContent.removeChild(element);
-                //seqContent.insertBefore(newDiv, nextElement);
-            
-                // Now check if dividers are necessary.
-            
-                //alert("INSERT CODE FOR UPDATEDIVIDERS HERE!");
-                //alert(timeDiff.getDiff());
-                
-                // If seqContent contains any further entries when the last pipeline uid has been drawn, these are to be removed.
-                // This happens after the user performs a "delete step" operation and there is now one fewer step in the array than in seqContent.
-                // All steps other than the first and the last are auto-adjusted due to "out of date" flag.
-                if (i >= pl.length - 1) {
-                    
-                    // This is a really complicated way of saying "Delete the next two elements if they exist"
-                    while ((nextElement = newDiv.nextSibling) != undefined) {
-                        seqContent.removeChild(nextElement);
-                    }
-                    
-                }
-                // Do the same check for the first step in the pipeline. 
-                // Is there no more elegant solution for this? For instance, check if a step should be in the pipeline in the first place, else delete it and it's following divider
-                
-                
-                updateDividers(newDiv);
-            }
-        }
-    
-        // afterwards, convert the arrays back to strings and set to appropriate fields
-        var newUpdatedString = arrayToString(plUpdated, ",");
-        document.getElementById("pipelineUpdatedField").value = newUpdatedString;
-    }
-}
-
-function updateDividers (element) {
-    var seqContent = document.getElementById("seqContentWrapper");
-    
-    if (element.nextSibling){
-        var nextElement = element.nextSibling;
-    }
-    if (element.previousSibling) {
-        var previousElement = element.previousSibling;
-    }
-    
-    if (nextElement){
-        if (!hasClass(nextElement, "divider")) {
-            /*var holderDiv = document.createElement("div");
-            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
-                holderDiv.innerHTML = result.responseText;
-                var newDivider = holderDiv.childNodes[1];
-                seqContent.insertBefore(newDivider, nextElement);
-            }, false);*/
-            
-            var newDivider = document.createElement("div");
-            newDivider.className = "divider";
-            // set the divider type, depending on orientation of editor
-            // This currently does nothing, because editors haven't been generalized yet and there is no sequencer global var.
-            // Shame on me for including this...
-            if (sequencer.type) {
-                if (sequencer.type.indexOf("v") != -1) {
-                    addClass(newDivider, "vertical");
-                }
-                else if (sequencer.type.indexOf("h") != -1) {
-                    addClass(newDivider, "horizontal");
-                }
-                else {
-            // Do nothing
-            }
-            }
-            seqContent.insertBefore(newDivider, nextElement);
-                        
-        }
-    }
-    
-    if (previousElement){
-        if (!hasClass(previousElement, "divider")) {
-            var holderDiv = document.createElement("div");
-            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
-                holderDiv.innerHTML = result.responseText;
-                var newDivider = holderDiv.childNodes[1];
-                seqContent.insertBefore(newDivider, element);
-            }, false);
-        }
-    }
-    
-}
-
-function savePipeline (confirmSave) {
-    if (confirmSave==true) {
-        var answer = confirm("Save changes to pipeline?");
-    }
-    else {
-        var answer = true;
-    }
-    
-    
-    if (answer) {
-        var pipeline = document.getElementById("pipelineStringField").value;
-        pipeline = pipeline.slice(0, pipeline.length - 1);
-        var types = document.getElementById("pipelineTypeField").value;
-        types = types.slice(0, types.length - 1);
-        var session = document.getElementById("sessionField").value;
-        var requestString = "uids="+pipeline+"&types="+types+"&sessionUid="+session;
-        console.log(requestString);
-        
-        
-        var success;
-        newAjaxRequest(requestString, "savesession.php", function(result){
-            success = result.responseText;
-        }, true);
-        console.log(success);
-    }
-}
-
-function t_setOutOfDate() {
-    // if a step is currently selected
-    var uid = document.getElementById("selectedStepField").value;
-    if (uid == "") {
-        alert("No step selected!");
-        return;
-    }
-    
-    // convert to arrays for looping
-    var plString = document.getElementById("pipelineStringField").value;
-    var plTypeString = document.getElementById("pipelineTypeField").value;
-    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
-    
-    
-    var pl = stringToArray(plString, ",");    
-    var plType = stringToArray(plTypeString, ",");    
-    var plUpdated = stringToArray(plUpdatedString, ",");    
-    
-    // set the targeted element's tag for "Needs updating"
-    plUpdated[pl.indexOf(uid)] = "0";
-    
-    // then rewrite the content strings and set them to the appropriate fields
-    var newUpdatedString = arrayToString(plUpdated, ",");
-    document.getElementById("pipelineUpdatedField").value = newUpdatedString;
-}
-
-function editStep() {
-    // eerst saven, dan de object type zoeken in de typelist, dan redirecten naar de goede pagina
-    savePipeline(false);
-    
-    var pipeline = document.getElementById("pipelineStringField").value;
-    var pipelineTypes = document.getElementById("pipelineTypeField").value;
-    var selectedStep = document.getElementById("selectedStepField").value;
-    pipeline = stringToArray(pipeline, ",");
-    pipelineTypes = stringToArray(pipelineTypes, ",");
-    var stepType = pipelineTypes[pipeline.indexOf(selectedStep)];
-    var postForm = document.createElement("form");
-    postForm.action = stepType.toLowerCase()+"Editor.php";      //redirect to "type"editor.php
-    postForm.method = "POST";
-    var objectUid = document.createElement("input");
-    objectUid.type = "hidden";
-    objectUid.name = "objectUid";
-    objectUid.value = selectedStep;
-    postForm.appendChild(objectUid);
-    postForm.submit();
-}
-
-function moveStep (direction) {
-    // misschien maar eens een loadhiddenfields functie maken voor deze meuk?
-    
-    var selectedStep = document.getElementById("selectedStepField").value;
-    
-    if (selectedStep != undefined && selectedStep != "") {
-        var pipeline = stringToArray(document.getElementById("pipelineStringField").value, ",");
-        var pipelineTypes = stringToArray(document.getElementById("pipelineTypeField").value, ",");
-        var updated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
-    }
-    else {
-        alert("No step selected! Unable to move");
-        return;
-    }
-    
-    var id = pipeline.indexOf(selectedStep);
-    if ((id == 0 && direction == -1) || (id == pipeline.length-1 && direction == 1)){
-        alert("Cannot move out of bounds!");
-        return;
-    }
-    var tempString = pipeline[id], tempType = pipelineTypes[id];
-    
-    pipeline[id] = pipeline[id+direction];
-    pipelineTypes[id] = pipelineTypes[id+direction];
-    pipeline[id+direction] = tempString;
-    pipelineTypes[id+direction] = tempType;
-    updated[id] = "0";
-    updated[id+direction] = "0";
-    
-    pipeline = arrayToString(pipeline, ",");
-    pipelineTypes = arrayToString(pipelineTypes, ",");
-    updated = arrayToString(updated, ",");
-    
-    document.getElementById("pipelineStringField").value = pipeline;
-    document.getElementById("pipelineTypeField").value = pipelineTypes;
-    document.getElementById("pipelineUpdatedField").value = updated;
-    updateSequencer();
-    
-    // Then reselect the previously selected step
-    addClass(document.getElementById(selectedStep), "selected");
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
