Index: Dev/branches/jos-branch/js/questionEditorScripts.js
===================================================================
--- Dev/branches/jos-branch/js/questionEditorScripts.js	(revision 233)
+++ Dev/branches/jos-branch/js/questionEditorScripts.js	(revision 235)
@@ -1,3 +1,6 @@
+// Old, should not be used anymore after class-based QuestionEditor() is finished!!!!!
 var qUID, parentObjectUID, qName, qTag, qType, qAnswerLength;
+
+var questionEditor = new QuestionEditor();
 
 function selectAnswerType(){
@@ -42,8 +45,9 @@
 }
 
-function createNewInputLabel(text, target) {
+function createNewInputLabel(text, target, side) {
     var newLabel = document.createElement("label");
     if (target) newLabel.setAttribute("for",target);
     newLabel.innerHTML = text;
+    if (side) newLabel.className = side;
     return newLabel;
 }
@@ -64,25 +68,4 @@
 }
 
-
-///////////////////
-/* INT SELECTION */
-///////////////////
-
-function selectIntType() {
-    var selectBox = document.getElementById("questionType");
-    var content = document.getElementById("questionEditor_questionParams");
-    // Add minimum value input
-    var minValueBox = createNewElement("input","text","minValueBox", "questionParamField", null);
-    var minValueBoxLabel = createNewInputLabel("Minimum value:", "minValueBox");
-    addClass(minValueBoxLabel, "formLineBreak");
-    content.appendChild(minValueBoxLabel);
-    content.appendChild(minValueBox);
-    // Add maximum value input
-    var maxValueBox = createNewElement("input", "text", "maxValueBox", "questionParamField", null);
-    var maxValueBoxLabel = createNewInputLabel("Maximum value:","maxValueBox");
-    addClass(maxValueBoxLabel, "formLineBreak");
-    content.appendChild(maxValueBoxLabel);
-    content.appendChild(maxValueBox);
-}
 
 /////////////////////
@@ -171,21 +154,27 @@
 }
 
+//////////////////////////////////////////
+/* QUESTION EDITOR CLASS BASED APPROACH */
+//////////////////////////////////////////
+
 function QuestionEditor() {
     // Properties    
-    this.uid = null;
-    this.element = null;
-    this.paramsElement = null;
-    
+    this.uid = null;    // The uid of the question contained in this editor
+    var me = this;      // Retarded self-reference because: Javascript
+    this.element = null;    // The parent div element containing the questionEditor
+    this.paramsElement = null;  // The parent parameters element where all the input sets will be located
+    this.paramSets = null;  // The currently enabled input sets to be displayed in the paramsElement
+    
+    // Methods
     // Basic functionality
     this.setValues = function(arguments) {
-        // Query question information from database, then fill element fields with correct information.
-        
+        var question = JSON.parse(arguments);        
     }
     this.init = function() {
         // Outer div
-        this.element = ce("div");
-        this.element.className = "smallFrame questionEditor";
-        this.element.id = sequencer.state.selectedObject.uid;
-        this.uid = sequencer.state.selectedObject.uid;
+        me.element = ce("div");
+        me.element.className = "smallFrame questionEditor";
+        me.element.id = sequencer.state.selectedObject.uid;
+        me.uid = sequencer.state.selectedObject.uid;
         // Header
         var titleDiv = ce("div");
@@ -193,37 +182,42 @@
         var numberDiv = ce("div");
         numberDiv.className = "listNumber";
-        numberDiv.innerHTML = "4";
+        numberDiv.innerHTML = "4"; //TODO
         var nameSpan = ce("span");
-        nameSpan.id = "qTitleField";
+        nameSpan.id = "qeTitleField";
         nameSpan.innerHTML = "New question";
         titleDiv.appendChild(numberDiv);
         titleDiv.innerHTML += "Editing: ";
         titleDiv.appendChild(nameSpan);
-        this.element.appendChild(titleDiv);
+        me.element.appendChild(titleDiv);
     
         //Content area
         var contentDiv = ce("div");
         contentDiv.className = "content";
-        var bodyText = createNewElement("textarea", null, "qBodyTextField", "qBodyTextField", null);
+        var bodyText = createNewElement("textarea", null, "qeBodyTextField", "qeBodyTextField", null);
         bodyText.value = "Question body text goes here";
-    
-    
+        contentDiv.appendChild(bodyText);
+        
         // The dynamic questionParams div, where all the control elements and inputs will be located
         var questionParams = ce("div");
-        this.paramsElement = questionParams;
+        me.paramsElement = questionParams;
         questionParams.className = "questionParams";
-        contentDiv.appendChild(bodyText);
-        var qIdentField = createNewElement("input", "text", "qIdentField", "questionParamField", null);
-        var qIdentField_lbl = createNewInputLabel("Question code:","qIdentField", "l");
-        questionParams.appendChild(qIdentField_lbl);
-        questionParams.appendChild(qIdentField);
-    
-        var qTypeField = createNewElement("select", null, "qTypeField", "questionParamField", null);
-        var qTypeField_lbl = createNewInputLabel("Answer type:","qTypeField", "l");
-        questionParams.appendChild(qTypeField_lbl);
-        questionParams.appendChild(qTypeField);
-        qTypeField.addEventListener("change", function(){
-            debugger;
-            selectAnswerType();
+        questionParams.id = "qeQuestionParamsDiv";
+        
+        var basicContainer = ce("div");
+        basicContainer.className = "basicInputs";
+        
+        var qeCodeField = createNewElement("input", "text", "qeCodeField", "qeParamField", null);
+        var qeCodeField_lbl = createNewInputLabel("Question code:","qeCodeField", "l");
+        basicContainer.appendChild(qeCodeField_lbl);
+        basicContainer.appendChild(qeCodeField);
+    
+        var qeTypeField = createNewElement("select", null, "qeTypeField", "qeParamField", null);
+        var qeTypeField_lbl = createNewInputLabel("Answer type:","qeTypeField", "l");
+        basicContainer.appendChild(qeTypeField_lbl);
+        basicContainer.appendChild(qeTypeField);
+        questionParams.appendChild(basicContainer);
+        qeTypeField.addEventListener("change", function(){
+            //debugger;
+            me.selectAnswerType();
         }, false);
         // Add the select options. Do this in a block scope to prevent the o1 var from messing things up. 
@@ -233,29 +227,29 @@
             o1.value = null;
             o1.text = "";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "int";
             o1.text = "Integer";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "scale";
             o1.text = "Scale";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "choice";
             o1.text = "Multiple choice";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "text";
             o1.text = "Text";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         }
     
         contentDiv.appendChild(questionParams);
-        this.element.appendChild(contentDiv);
+        me.element.appendChild(contentDiv);
     
         // Controls bar
@@ -267,25 +261,17 @@
         controlsDiv.appendChild(btnSave);
         btnSave.addEventListener("click", function(){
-            swapQuestionState(true);
+            me.save();
         }, false);
         btnDiscard.addEventListener("click", function(){
-            swapQuestionState(false);
+            me.discard();
         }, false);
-        this.element.appendChild(controlsDiv);
+        me.element.appendChild(controlsDiv);
+        me.paramSets = new Array();
+        me.paramSets.push("basic");
+    }
+    this.save = function() {
         var request = {
-            "uid": this.uid,
-            "type": "Question"
-        }
-        var requestString = "args="+JSON.stringify(request);
-        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
-            // Fill in the element with the correct values
-            // Result is sent to setValues in object form already, perhaps better idea to send in string format and parse within the target method?
-            this.setValues(JSON.parse(result.responseText));
-        }, true);
-    }
-    this.submit = function() {
-        var request = {
-            "title": ge("qTitleField").value,
-            "type": ge("qTypeField").value
+            "title": ge("qeTitleField").value,
+            "type": ge("qeTypeField").value
         }
         
@@ -294,7 +280,10 @@
         }, true);
     }
+    this.reset = function() {
+        me.init();
+    }
     
     // Updating input fields
-    this.selectAnswertype = function () {
+    this.selectAnswerType = function () {
         // Switch statement, call this.type_x where x is the relevant answer type.
         // For all this.type_X funtions:
@@ -304,10 +293,100 @@
         // Important: use the this.paramsElement to access the questionParams div!
         // To fully make use of this class-based approach, the editor should be added to a global variable. This global variable should be removed on page unload!
+    
+        var type = ge("qeTypeField").value;
+        switch (type) {
+            case "int":
+                me.type_Integer();
+                break;
+            case "scale":
+                me.type_Scale();
+                break;
+            case "choice":
+                me.type_Choice();
+                break;
+            case "text":
+                me.type_Text();
+                break;
+            default:
+                //Do nothing
+                break;
+                
+        }
+    
+    }
+    this.checkInputSets = function () {
+        // Loop through all input containers in the paramsField
+        for (var n = 0; n < me.paramsElement.childNodes.length; n++) {
+            if (me.paramsElement.childNodes[n].className == "basicInputs") continue;
+            // Check if the class (inputSet) is currently in paramSets
+            if (me.paramSets.indexOf(me.paramsElement.childNodes[n].className) < 0) {
+                me.paramsElement.childNodes[n].parentNode.removeChild(me.paramsElement.childNodes[n]);
+                n--;
+            }
+            
+        }
+    }
+    
+    this.type_Integer = function () {
+        if (me.paramSets.indexOf("int_basic") < 0) {
+            me.paramSets = new Array("int_basic");
+        }
+        else return;
+        
+        me.checkInputSets();
+                
+        var qeMinValueField = createNewElement("input", "text", "qeMinValueField", "qeParamField", null);
+        var qeMinValueField_lbl = createNewInputLabel("Minimum value: ", "qeMinValueField", "l");
+        var qeMaxValueField = createNewElement("input", "text", "qeMaxValueField", "qeParamField", null);
+        var qeMaxValueField_lbl = createNewInputLabel("Maximum value: ", "qeMaxValueField", "l");
+        var container = ce("div");
+        container.className = "int_basic";
+        container.appendChild(qeMinValueField_lbl);
+        container.appendChild(qeMinValueField);
+        container.appendChild(qeMaxValueField_lbl);
+        container.appendChild(qeMaxValueField);
+        me.paramsElement.appendChild(container);
+        
     }
     this.type_Scale = function () {
-        
-    }
-    this.type_Integer = function () {
-        
+        if (me.paramSets.indexOf("scale_basic") < 0) {
+            me.paramSets = new Array("scale_basic");
+        }
+        else return;
+        // Clear any input sets that should not be there
+        me.checkInputSets();
+        
+        var container = ce("div");
+        container.className = "scale_basic";
+        
+        // Number of choices SELECT
+        var numChoicesField = createNewElement("select", null, "qeNumChoicesField", "qeParamField", null);
+        var numChoicesField_lbl = createNewInputLabel("Number of choices", "qeNumChoicesField", "l");
+        // SELECT options
+        for (var n = 2; n < 11; n++) {
+            var o = ce("option");
+            o.value = n-1;
+            o.text = n-1;
+            numChoicesField.appendChild(o);
+        }
+        container.appendChild(numChoicesField_lbl);
+        container.appendChild(numChoicesField);
+        
+        // Scale labels CHECKBOX and TEXTs
+        var legendsEnabledField = createNewElement("input", "checkbox", "qeLegendsEnabledField", "qeParamField", null);
+        var legendsEnabledField_lbl = createNewInputLabel("Enable legends", "qeLegendsEnabledField", "l");
+        container.appendChild(legendsEnabledField_lbl);
+        container.appendChild(legendsEnabledField);
+        
+        var upperLegendText = createNewElement("input", "text", "qeUpperLegendField", "qeParamField", null);
+        var lowerLegendText = createNewElement("input", "text", "qeLowerLegendField", "qeParamField", null);
+        var upperLegendText_lbl = createNewInputLabel("Upper legend", "qeUpperLegendField", "l");
+        var lowerLegendText_lbl = createNewInputLabel("Lower legend", "qeLowerLegendField", "l");
+        container.appendChild(lowerLegendText_lbl);
+        container.appendChild(lowerLegendText);
+        container.appendChild(upperLegendText_lbl);
+        container.appendChild(upperLegendText);
+        
+        me.paramsElement.appendChild(container);
     }
     this.type_Text = function () {
@@ -315,28 +394,56 @@
     }
     this.type_Choice = function() {
-        
-    }
-    
-}
-
-function newEditor() {
-    // Get variables, ofc not null...
-    var arguments = null;
-    var editor = new QuestionEditor(arguments);
-    editor.setValues(arguments);
-    ge("seqContentWrapper").appendChild(editor.element);
-// Etc. We can put the switchModes() command in here as well, I'd say...
-// Or should that be in the QuestionEditor class? That's probably better, since it has direct access to all the internal variables.
-}
-
-function startEditingQuestion(uid) {
-    if (sequencer.state.editing == true) return;
-    
-    var element = ge(uid);
-    var editor = new QuestionEditor();
-    var newElement = editor.createElement();
-    // Query parameters
-    editor.setValues(parameters);
-    element.parentNode.replaceChild(newElement, element);
-    sequencer.state.editing = true;
-}
+        debugger;
+        if (me.paramSets.indexOf("choice_basic")) {
+            me.paramSets = new Array("choice_basic");
+        }
+        else return;
+        
+        me.checkInputSets();
+        
+        var container = ce("div");
+        container.className = "choice_basic";
+        // num options SELECT
+        var numOptionsSelect = createNewElement("select", null, "qeNumOptionsField", "qeParamField", null);
+        var numOptionsSelect_lbl = createNewInputLabel("Number of options", "qeNumOptionsField", "l");
+        for (var n = 2; n < 11; n++) {
+            var o = ce("option");
+            o.value = n-1;
+            o.text = n-1;
+            numOptionsSelect.appendChild(o);
+        }
+        container.appendChild(numOptionsSelect_lbl);
+        container.appendChild(numOptionsSelect);
+        
+        me.paramsElement.appendChild(container);
+    }
+        
+    // Editing
+    this.editQuestion = function(uid) {
+        if (sequencer.state.editing == true) return;
+        if (sequencer.state.loaded == false) return;
+        sequencer.state.editing = true;
+        
+        var request = {
+            "type": "Question",
+            "uid": uid
+        }
+        
+        var requestString = "args="+JSON.stringify(request);
+        sequencer.state.loaded = false;
+        newAjaxRequest(requestString, getObject.php, function(result){
+            // Once results are in
+            questionEditor.setValues(result.responseText);
+            sequencer.state.loaded = true;
+        }, true);
+    }
+    this.createNewQuestion = function() {
+        if (sequencer.state.editing == true) return;
+        if (sequencer.state.loading == true) return;
+        sequencer.state.editing = true;
+    
+        me.reset();
+        var container = ge("seqContentWrapper");
+        container.appendChild(me.element);
+    }
+}
