﻿//Script file to draw out the multiple questions for the Selection Type of "Egen text" Question.

/* JSON Objects
{"d":[
    {"__type":"multiQuestion", 
    "questionText":"Choose a colour", 
    "type":0,
    "firstitem":"colours......" 
    "answers":
        [
            {"answertext":"red", "default":"false", "result":"},
            {"answertext":"blue", "default":"false", "result":"},
            {"answertext":"green", "default":"true", "result":"},
            {"answertext":"orange", "default":"false", "result":"},
            {"answertext":"yellow", "default":"true", "result":"}
        ]
    }]
};
*/

//var JSON1 = '{"multifraga":[{"__type":"multiQuestion","questionText":"Choose a colour","type":"checkbox","answers":[{"answertext":"red", "default":"false", "result":"},{"answertext":"blue", "default":"false", "result":"},{"answertext":"green", "default":"true", "result":"},{"answertext":"orange", "default":"false", "result":"},{"answertext":"yellow", "default":"true", "result":"}]}]};';
/*var JSON1 = '{"multifraga": [{"__type": "multiQuestion", "questionText": "Choose a colour", "type": 1, "answers": [{"answertext": "red", "checked": "false", "result": ""},{"answertext": "blue", "checked": "false", "result": ""},{"answertext": "green", "checked": "true", "result": ""},{"answertext": "orange", "checked": "false", "result": ""},{"answertext": "yellow", "checked": "true", "result": ""}]}]}';
var JSON2 = '';
var JSON3 = '{"multifraga": [{"__type": "multiQuestion", "questionText": "Choose a colour", "type": 0, "answers": [{"answertext": "red", "checked": false, "result": ""},{"answertext": "blue", "checked": false, "result": ""},{"answertext": "green", "checked": true, "result": ""},{"answertext": "orange", "checked": false, "result": ""},{"answertext": "yellow", "checked": true, "result": ""}]}]}';
var JSON4 = '';
var JSON5 = '';
var JSON6 = '';
var JSON7 = '';
var JSON8 = '';
var JSON9 = '';
var JSON10 = '';*/
var et1rendered = false;
var et2rendered = false;
var et3rendered = false;
var et4rendered = false;
var et5rendered = false;
var et6rendered = false;
var et7rendered = false;
var et8rendered = false;
var et9rendered = false;
var et10rendered = false;

function drawBaseDiv(Valfri) {
    baseDiv = "<tr id='row_" + Valfri + "'><td colspan='3'><div class='div_multifraga' id='MultiFraga_" + Valfri + "'><table width='100%' id='Table_MultiFraga_" + Valfri + "'><tr><td valign='top' width='150' class='td_visassom'>Visas som : <br /><p><input type='radio' onclick='radioVisaCheck(this);' class='visassom' valfri='" + Valfri + "' value='0' name='visas_" + Valfri + "' checked id='visas_" + Valfri + "_dropdown'/><label for='visas_" + Valfri + "_dropdown'>Dropdown</label></p><p><input type='radio' onclick='radioVisaCheck(this);' valfri='" + Valfri + "' class='visassom' value='1' name='visas_" + Valfri + "' id='visas_" + Valfri + "_checkbox'/><label for='visas_" + Valfri + "_checkbox'>Checkbox</label></p><!--<p><input type='radio' name='visas_" + Valfri + "' id='visas_" + Valfri + "_radio'/><label for='visas_" + Valfri + "_radio'>Dropdown</label></p>--></td><td class='td_multifraga' id='Td_MultiFraga_" + Valfri + "_val'><div id='Div_MultiFraga_" + Valfri + "_Alternatives'><div class='div_dd_rubrik'>Rullistans rubrik :<input type='text' id='answer_" + Valfri + "_0' name='answer_" + Valfri + "'></div></div><a href='#' class='a_laggatill_multisvar' onclick='addNewOption(" + Valfri + "); return false;'>Lägg till</a></td></tr></table></div></td></tr>"
    $("tr#tr_Valfri_" + Valfri).after(baseDiv);
    $("tr#tr_Valfri_" + Valfri).next("tr").addClass("multifragarow");
    $("tr#tr_Valfri_" + Valfri).next("tr").attr("tr_valfri_" + Valfri);
    
    try
    {
        var JSONobj = eval('JSON' + Valfri);
        if (JSONobj != "" && eval('et' + Valfri + 'rendered == false')) {
            
            JSONMultifraga = eval('(' + JSONobj + ')');
            switch (JSONMultifraga.multifraga[0].type) {
                case 0:
                    $("#visas_" + Valfri + "_dropdown").attr("checked", "checked");
                    $("#Div_MultiFraga_" + Valfri + "_Alternatives div.div_dd_rubrik").css({ "display": "block" });
                    $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "none" });
                    
                    break;
                case 1:
                    $("#visas_" + Valfri + "_checkbox").attr("checked", "checked");
                    $("#Div_MultiFraga_" + Valfri + "_Alternatives div.div_dd_rubrik").css({ "display": "none" });
                    $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "inline" });
                    break;
            }

            $("#Valfri_" + Valfri).val(JSONMultifraga.multifraga[0].questionText)

            //draw the mulitple choices
            //if (eval('et' + Valfri + 'rendered') == false)
            //alert("rendering");
            renderJSON(Valfri, JSONMultifraga);

            //eval('et' + Valfri + 'rendered  = true;');
        }
    }
    catch (err) {
        //alert("Fel vid JSON Objekt")
        $("#Valfri_" + Valfri).val("test")
    }
}

function addNewOption(Valfri) {
    $("#Div_MultiFraga_" + Valfri + "_Alternatives").append("<div class='div_alternative'><a href='#' onclick='removeOption(" + Valfri + ", this); return false;'><img height='9' border='0' width='7' alt='' src='_bilder/radera.gif'/></a>&nbsp;<input class='alternativetext' type='textbox' name='answer_" + Valfri + "' id='answer_" + Valfri + "_" + ($("#Div_MultiFraga_" + Valfri + "_Alternatives input.alternativetext").length + 1) + "'>&nbsp;<input type='checkbox' style='display:none' class='defaultchecked' name='default_" + Valfri + "_" + ($("#Div_MultiFraga_" + Valfri + "_Alternatives input.alternativetext").length + 1) + "'></div>")
    if ($("#MultiFraga_" + Valfri + " input[@id=visas_" + Valfri + "_checkbox]").is(":checked"))
        $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "inline" });
    else
        $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "none" });
}

function addOptions(Valfri, text, checked) {
    var checkedStr = "";
    if (checked==true)
        checkedStr = "checked";
    //alert(checked);
    $("#Div_MultiFraga_" + Valfri + "_Alternatives").append("<div class='div_alternative'><a href='#' onclick='removeOption(" + Valfri + ", this); return false;'><img height='9' border='0' width='7' alt='' src='_bilder/radera.gif'/></a>&nbsp;<input class='alternativetext' value='" + text + "' name='answer_" + Valfri + "' type='textbox' id='answer_" + Valfri + "_" + ($("#Div_MultiFraga_" + Valfri + "_Alternatives input.alternativetext").length + 1) + "'>&nbsp;<input type='checkbox' " + checkedStr + " style='display:none' class='defaultchecked' name='default_" + Valfri + "_" + ($("#Div_MultiFraga_" + Valfri + "_Alternatives input.alternativetext").length + 1) + "'></div>")
    
}

function removeOption(Valfri, removeLink) {
    $(removeLink).parent().remove();
}

function renderJSON(Valfri, JSONObj) {

    if (JSONObj.multifraga[0].type == 0) {
        $("#answer_" + Valfri + "_0").val(JSONObj.multifraga[0].answers[0].answertext);
    }

    for (i = 1; i < JSONObj.multifraga[0].answers.length; i++) {
        addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
    }

    if ($("#MultiFraga_" + Valfri + " input[@id=visas_" + Valfri + "_checkbox]").is(":checked"))
        $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "inline" });
    else
        $("#MultiFraga_" + Valfri + " input[@type=checkbox].defaultchecked").css({ "display": "none" });
}



function renderClientJSONTMP(Valfri, JSONObj, ofullstandig) {
    alert(JSONObj.multifraga[0].type);
}

function renderClientJSON(Valfri, JSONObj, ofullstandig) {
    
    switch (JSONObj.multifraga[0].type) {
        case 0:
            /*draw dropdown*/
            ddString = JSONObj.multifraga[0].questionText + "<br><select id='dd_Valfri_" + Valfri + "' name='Valfri_" + Valfri + "'>"
            for (i = 0; i < JSONObj.multifraga[0].answers.length; i++) {
                var checkedStr = "";
                if (JSONObj.multifraga[0].answers[i].result != "")
                    if (JSONObj.multifraga[0].answers[i].result)
                        checkedStr = "selected"
                
                var tmpCheck ="";
                /*if(JSONObj.indexOf("¤")>0)
                   tmpCheck =  JSONObj.substring(0,JSONObj.indexOf("¤"));
                */
                
                var tmpCheck = document.getElementById("JSON"+Valfri);
                
                //var tmpCheck = JSONObj.stringify(foo);
                        
                ddString += "<option " + checkedStr+ " tmpCheck='" + tmpCheck + "' value='" + JSONObj.multifraga[0].answers[i].answertext + "'>" + JSONObj.multifraga[0].answers[i].answertext + "</option>"
                //addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
            }
            ddString += "</select>"

            if (JSONObj.multifraga[0].obligatorisk)
                ddString += " * ";

            $("#multifraga_" + Valfri + " td").html(ddString);
            break;
        case 1:
            /*draw  checkboxes*/

            ddString = "<p class='multiFragaQText'>" + JSONObj.multifraga[0].questionText;

            if (JSONObj.multifraga[0].obligatorisk)
                ddString += " * ";

            ddString += "</p>";

            for (i = 1; i < JSONObj.multifraga[0].answers.length; i++) {
                
                var checked = JSONObj.multifraga[0].answers[i].checked;

                if (ofullstandig)
                    checked = JSONObj.multifraga[0].answers[i].result == "true";
                
                defaultStr = "";
                if (checked)
                    defaultStr = "checked";

                ddString += "<p class='multiFcheckbox'>"
                + "<input type='checkbox' id='check_" + i + "_Valfri_" + Valfri + "' " + defaultStr + " name='Valfri_" + Valfri + "' value='" + JSONObj.multifraga[0].answers[i].answertext + "'><label id='label_check_" + i + "_Valfri_" + Valfri + "' for='check_" + i + "_Valfri_" + Valfri + "'>"
                + JSONObj.multifraga[0].answers[i].answertext
                + "</label></p>";
                //addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
            }
            $("#multifraga_" + Valfri + " td").html(ddString);
            break;
    }

    /*for (i = 0; i < JSONObj.multifraga[0].answers.length; i++) {
        addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
    }*/
}


function renderClientJSON_Redigera(Valfri, JSONObj, chosen, ofullstandig) {
    
    switch (JSONObj.multifraga[0].type) {
        case 0:
            /*draw dropdown*/
            ddString = JSONObj.multifraga[0].questionText + "<br><select id='dd_Valfri_" + Valfri + "' name='Valfri_" + Valfri + "'>"
            for (i = 0; i < JSONObj.multifraga[0].answers.length; i++) {
                var checkedStr = "";
                if (chosen != "")
                    if (JSONObj.multifraga[0].answers[i].answertext == chosen)
                        checkedStr = "selected"
                        
                ddString += "<option " + checkedStr+ " value='" + JSONObj.multifraga[0].answers[i].answertext + "'>" + JSONObj.multifraga[0].answers[i].answertext + "</option>"
                //addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
            }
            ddString += "</select>"

            if (JSONObj.multifraga[0].obligatorisk)
                ddString += " * ";

            $("#multifraga_" + Valfri + " td").html(ddString);
            break;
        case 1:
            /*draw  checkboxes*/

            ddString = "<p class='multiFragaQText'>" + JSONObj.multifraga[0].questionText;

            if (JSONObj.multifraga[0].obligatorisk)
                ddString += " * ";

            ddString += "</p>";

            for (i = 1; i < JSONObj.multifraga[0].answers.length; i++) {
                
                var checked = JSONObj.multifraga[0].answers[i].checked;

                if (ofullstandig)
                    checked = JSONObj.multifraga[0].answers[i].result == "true";
                
                defaultStr = "";
                if (checked)
                    defaultStr = "checked";

                ddString += "<p class='multiFcheckbox'>"
                + "<input type='checkbox' id='check_" + i + "_Valfri_" + Valfri + "' " + defaultStr + " name='Valfri_" + Valfri + "' value='" + JSONObj.multifraga[0].answers[i].answertext + "'><label id='label_check_" + i + "_Valfri_" + Valfri + "' for='check_" + i + "_Valfri_" + Valfri + "'>"
                + JSONObj.multifraga[0].answers[i].answertext
                + "</label></p>";
                //addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
            }
            $("#multifraga_" + Valfri + " td").html(ddString);
            break;
    }

    /*for (i = 0; i < JSONObj.multifraga[0].answers.length; i++) {
        addOptions(Valfri, JSONObj.multifraga[0].answers[i].answertext, JSONObj.multifraga[0].answers[i].checked)
    }*/
}

function radioVisaCheck(radio) {
    var Valfri_ = $(radio).attr('valfri')
    if ($(radio).val() == 0) {
        $("#Div_MultiFraga_" + Valfri_ + "_Alternatives div.div_dd_rubrik").css({ "display": "block" });
        $("#MultiFraga_" + Valfri_ + " input.defaultchecked").css({ "display": "none" });
    }
    else {
        $("#Div_MultiFraga_" + Valfri_ + "_Alternatives div.div_dd_rubrik").css({ "display": "none" });
        $("#MultiFraga_" + Valfri_ + " input.defaultchecked").css({ "display": "inline" });
    }
}
