/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
//Accordion

$(document).ready(function() {
  $("> div", "#questionsDispos").draggable({
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    handle: "h3",
    connectToSortable: ".questions"
  });

  $(".replot_box").accordion({
    header: "> div > h3",
    collapsible: true,
    active: false,
    autoHeight: false,
    autoActivate: true
  });

  $(".replot_box").sortable({
    axis: "y",
    handle: "h3",
    items: "div",
    receive: function(event, ui) {
      $(ui.item).removeClass();
      $(ui.item).removeAttr("style");
      $(".replot_box").accordion("add", "<div>" + ui.item.hmtl() + "</div>");
    }
  });

  $("#questionsDispos").accordion({
    header: "> div > h3",
    collapsible: true,
    active: false,
    autoHeight: false
  });
  $("button").button();
  $('#addAccordion').click(function() {
    var newDiv = "<div><h3>Q4 New Question</h3><div>"+accordion_content+"</div></div>";
    $('.replot_box').append(newDiv)
    $('.replot_box').accordion("refresh");
  });
});

//global variable for accordion
var accordion_content = "";



var tech_name = "";
var tech_id = "";
var dev_name = "";
var param_name = "";
var dev_id = "";
var para_type = "";
var sight = "";
var x_Axis = "";
var y_Axis = "";
var test = "";
var block_id = "";
var temps = "";
var DrawAreaArray = new Object();
//Ausgewaehlte values werden hier rein gelesen:
var checkedTempValue = [];
checkedTempValueArray = [];


//globale Variablen von File:
DrawAreasFromFile = [];
var technologie_temp = [];
var device_temp = [];
var curve_temp = [];
var sight_temp = [];
var temperatures_temp = [];
var xValue_temp = [];
var yValue_temp = [];


function assert(condition, message) {
    if (!condition) {
        message = message || "Assertion failed";
        if (typeof Error !== "undefined") {
            throw new Error(message);
        }
        throw message; // Fallback
    }
}

//Size of assoziative array
Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

function xmlrequest(){
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}

function invertCheckboxes(){
    for(var i=0;i<document.filter_list.length;++i)
    {
        if (document.forms[0].elements[i].type == "checkbox")
        {
            document.forms[0].elements[i].checked = !document.forms[0].elements[i].checked;
        }
    }
}

//DEVICE NAME AUSWAHL BEFÜLLEN
function updateDeviceNameSelect(e){

    //Inhalt auslesen:
    tech_id = e.options[e.selectedIndex].value;
    tech_name = e.options[e.selectedIndex].text;

    //alert(tech_name + "hat ID: " + tech_id);
    //Ajax teil:

    if (tech_name == "") {
        document.getElementById("plot_dev_name").innerHTML = "";
        return;
    } else {
        xmlhttp = xmlrequest();

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("plot_dev_name").innerHTML = xmlhttp.responseText;
            }
        };

        xmlhttp.open("GET","include/get_sql_result.php?t="+tech_id,true);
        xmlhttp.send();

    }
}

//PARAMETER AUSWAHL BEFÜLLEN (KIND OF CURVE)
function updateParameterSelect(e){
    dev_id = e.options[e.selectedIndex].value;
    dev_name = e.options[e.selectedIndex].text;
    //Ajax teil:

    if (dev_id == "")
    {
        document.getElementById("plot_param_name").innerHTML = "";
        return;
    }
    else
    {
        xmlhttp = xmlrequest();

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("plot_param_name").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","include/get_sql_result.php?d="+dev_id,true);
        xmlhttp.send();
    }

}

//MDM -> SIGHT AUSWAHL BEFÜLLEN (WHICH SIGHT)
function updateSightSelect(e){
    para_type = e.options[e.selectedIndex].value;

    //Ajax teil:
    if (para_type == "") {
        document.getElementById("plot_mdm_file").innerHTML = "";
        return;
    } else {
        xmlhttp = xmlrequest();

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("plot_mdm_file").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","include/get_sql_result.php?p="+para_type+"&d="+dev_id,true);
        xmlhttp.send();
    }

}

//Temperatur AUSWAHL BEFÜLLEN
function updateTemparatureSelectfield(e){
    sight = e.options[e.selectedIndex].value;
    //Ajax teil:

    if (sight == "")
    {
        document.getElementById("temperatur_block").innerHTML = "";
        return;
    }
    else
    {
        xmlhttp = xmlrequest();

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("temperatur_block").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","include/get_sql_result.php?s="+sight+"&temp=1&d="+dev_id,true);
        xmlhttp.send();
    }

}

//Längen/Weiten AUSWAHL BEFÜLLEN
function updateWidthLengthSelectfield(){


        xmlhttp = xmlrequest();

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("width_length_block").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","include/get_sql_result.php?s="+sight+"&temp=1&d="+dev_id+"&w=1",true);
        xmlhttp.send();
}

//X - Y - Achsen Auswahl befüllen:
function updateXAxisYAxisSelect(from_replot = 0){

    //Temperaturen auslesen: (nur wenn nicht von replotfunktion kommend)
    if(from_replot == 0){
        var inputElements = getElementsByClassName(document,'messageCheckbox');
        checkedTempValue = [];
        for(var i=0; i < inputElements.length; ++i){
              if(inputElements[i].checked){
                   checkedTempValue.push(inputElements[i].value);
              }
            }
        //alle values auf einen String schreiben um sie per Get zu uebergeben
        checkedTempValue.toString();
        checkedTempValue = checkedTempValue.join(',');
    }

    //Ajax teil:
    if (checkedTempValue == "") {

        alert("No temperatures are chosen!!!");
        return;

    } else {
            xmlhttp_get_ids = xmlrequest();
            xmlhttp_fill = xmlrequest();

        //Wenn erster request finished und response ready:
        xmlhttp_get_ids.onreadystatechange = function() {
            if (xmlhttp_get_ids.readyState == 4 && xmlhttp_get_ids.status == 200) {
                //document.getElementById("plot_area").innerHTML = xmlhttp.responseText;//vorheriger weg
                //var data = eval("(" + xmlhttp.responseText + ")"); //unsicher
                var data = JSON.parse(xmlhttp_get_ids.responseText); //hier kommt JSON Objekt zurück
                var array = [];

                //Objekt in Array verwandeln:
                for(var x in data){
                    array.push(data[x]);
                }

                //wenn mehrere werte -> mit komma abtrennen
                block_id = array.join(',');

                // Wenn zweiter request finished -> füllen
                xmlhttp_fill.onreadystatechange = function() {
                    if (xmlhttp_fill.readyState == 4 && xmlhttp_fill.status == 200) {
                        document.getElementById("plot_X_Axis").innerHTML = xmlhttp_fill.responseText;
                        document.getElementById("plot_Y_Axis").innerHTML = xmlhttp_fill.responseText;
                    }
                };

                //Zweiten Request starten (X-und Y-Achsen Auswahl befüllen)
                var x = 1;
                var y = 1;
                alert("zweiter Request");
                xmlhttp_fill.open("GET","include/get_sql_result.php?x="+x+"&y="+y+"&b="+block_id,true);
                xmlhttp_fill.send();

            }
        };
        alert("erster Request");
        //Erster Request: (Holt Block ID) Hier muss noch Länge und Weite miteingehen:

        //Temperaturen auslesen: (nur wenn nicht von replotfunktion kommend)
        if(from_replot == 0){
            var inputElementsLW = getElementsByClassName(document,'messageCheckboxGeo');
            checkedLWValues = [];
            for(var i=0; i < inputElementsLW.length; ++i){
                  if(inputElementsLW[i].checked){
                       checkedLWValues.push(inputElementsLW[i].value);
                  }
                }
            //alle values auf einen String schreiben um sie per Get zu uebergeben
            checkedLWValues.toString();
            checkedLWValues = checkedLWValues.join(',');
                    alert(checkedLWValues);
        }


        xmlhttp_get_ids.open("POST","include/get_sql_result.php?d="+dev_id+"&temps="+checkedTempValue+"&pt="+para_type+"&s="+sight,true);
        xmlhttp_get_ids.send();

    }


}

//Muss so geschrieben werden, dass er replot usebar ist
//Plotte los!
function plotData(DrawArea_replot = 0, AxisParam = 0){
    //Length & Width auslesen
    /*
    var inputElements = getElementsByClassName(document,'messageCheckboxGeo');
    checkedGeos = [];
    for(var i=0; i < inputElements.length; ++i){
          if(inputElements[i].checked){
               checkedGeos.push(inputElements[i].value);
          }
        }
    //alle values auf einen String schreiben um sie per Get zu uebergeben
    checkedGeos.toString();
    checkedGeos = checkedGeos.join(',');

    alert(checkedGeos);
    */

    //gewählte x und y werte abholen (nur wenn nicht von replot Funktion kommend):
    if(AxisParam == 0){
        x_Axis = document.getElementById("plot_X_Axis").options[document.getElementById("plot_X_Axis").selectedIndex].value;
        y_Axis = document.getElementById("plot_Y_Axis").options[document.getElementById("plot_Y_Axis").selectedIndex].value;
    }

    //alert("X Achse value: "+x_Axis);
    //alert("Y Achse value: "+y_Axis);

    xmlhttp = xmlrequest();

    //Wenn request finished und response ready:
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            if(DrawArea_replot == 0)
            {
                var x = document.getElementById("select_drawArea").selectedIndex;
                var y = document.getElementById("select_drawArea").options;
                DrawArea_number = y[x].value;
            }else
            {
                DrawArea_number = DrawArea_replot;
                //Nur reingehen, wenn von FileLoad kommend:
                alert("replot : Drawarea ist: " + DrawArea_number);
            }

            //define name of plot
            var name = "Techn.:" + tech_name + "Dev.:" + dev_name + "Curve:" + param_name + "Sight:" + sight;

            //Ganzer Link:
            alert("<img src='functions/simpleplot.php?bid="+ block_id +"&checkedtemps="+checkedTempValue+"&xaxis="+x_Axis+"&yaxis="+y_Axis+"&name="+name+"' />");
            document.getElementById(DrawArea_number).innerHTML = "<img src='functions/simpleplot.php?bid="+ block_id +"&checkedtemps="+checkedTempValue+"&xaxis="+x_Axis+"&yaxis="+y_Axis+"&name="+name+"' />";

            //richtiges Datenhandling:
            if(checkedTempValue.length > 1){
                checkedTempValueArray = checkedTempValue.split(",");
            }
            //für jeden Plot einen new plot() erstellen und der ListofPlots ausgefüllt anhängen
            assert(DrawAreaArray[DrawArea_number].ListofPlots.length === 0,"listofplots ist leer");
            for(i = 0; i < checkedTempValueArray.length; i++){
                DrawAreaArray[DrawArea_number].ListofPlots.push(new plot());
                DrawAreaArray[DrawArea_number].ListofPlots[i].setDrawArea(DrawArea_number);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setTechnology(tech_name);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setDevice(dev_name);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setCurve(para_type);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setSight(sight);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setTemps(checkedTempValueArray[i]);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setxValue(x_Axis);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setyValue(y_Axis);
                DrawAreaArray[DrawArea_number].ListofPlots[i].setBlockID(block_id);
            }
            alert(DrawAreaArray[DrawArea_number].ListofPlots[0].Temps);
        }
    };
    alert("Temperaturen in plotData(): "+checkedTempValueArray);
    xmlhttp.open("POST","include/get_sql_result.php?d="+dev_id+"&temps="+checkedTempValueArray+"&pt="+para_type+"&s="+sight,true);
    xmlhttp.send();

}

//Klassendefinition für DrawArea
function DrawArea(title) {

   //drei DIVs für eine DrawArea
   this.WrapperDiv = document.createElement("div");
   this.TitleDiv = document.createElement("div");
   this.ContentDiv = document.createElement("div");

   this.WrapperDiv.className = "drawArea";
   this.TitleDiv.className = "";
   this.ContentDiv.className = "";

   //this.ListofPlots = new plot();
   this.ListofPlots = [];

   //X und Y Achse:
   this.xValue = "";
   this.yValue = "";

   // öffentliche (public) Eigenschaften
   this.WrapperDiv.id = 0;
   this.title = title;
   //var newContent = document.createTextNode("new DrawArea");

   var h = document.createElement("h1"); //Erstelle H1 Html Element
   var t = document.createTextNode(title);
   h.appendChild(t);  //Hänge Titel Text bei H1 ein

   var text = document.createTextNode("Choose your options in the left box. Your graph will be displayed here. ");

   //this.WrapperDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu.
   this.TitleDiv.appendChild(h); //Titel hinzufügen
   this.ContentDiv.appendChild(text);

   //Title und Content bei Wrapper einhängen
   this.WrapperDiv.appendChild(this.TitleDiv);
   this.WrapperDiv.appendChild(this.ContentDiv);


   // privilegierte öffentliche Methode
   this.setId = function(id) {
       this.WrapperDiv.id = id;
    };

   this.setTitle = function(title) {
       this.title = title;
    };


}

//Klasse um Plots einer DrawArea zu speichern
function plot(){

    this.DrawArea = "";
    this.Technology = "";
    this.Device = "";
    this.Curve = "";
    this.Sight = "";
    this.Temps = "";
    this.xValue = "";
    this.yValue = "";
    this.BlockID = "";

   // privilegierte öffentliche Methode
   this.setDrawArea = function(id) {
       this.DrawArea = id;
    };

   this.setTechnology = function(technology) {
       this.Technology = technology;
    };

    this.setDevice = function(device) {
       this.Device = device;
    };

    this.setCurve = function(curve) {
       this.Curve = curve;
    };

    this.setSight = function(sight) {
       this.Sight = sight;
    };

    this.setTemps = function(temps) {
       this.Temps = temps;
    };

    this.setxValue = function(xValue) {
       this.xValue = xValue;
    };

    this.setyValue = function(yValue) {
       this.yValue = yValue;
    };

    this.setBlockID = function(BlockID) {
       this.BlockID = BlockID;
    };


}

function add_DrawArea(){
    // erstelle ein neues div Element
    // und gib ihm etwas Inhalt
    //currentDiv ist umschliessendes DIV der DrawAreas
    var currentDiv = document.getElementById("center_this");

    //Objekte in currentDiv zählen:
    var DrawArea_counter = getElementsByClassName(document,"drawArea").length;

    //object_counter erhöhen um neuer DrawArea die richtige ID zu geben
    DrawArea_counter++;
    alert("generate DrawArea: "+'DrawArea_'+ DrawArea_counter);
    newDrawArea = new DrawArea('DrawArea_'+ DrawArea_counter);
    //id festlegen um hinterher graphen in die richtige DrawArea zu bauen
    newDrawArea.setId("DrawArea_"+DrawArea_counter);

    // füge das neu erstellte Element und seinen Inhalt ins DOM ein - dem bestehenden DIV hinzufügen:
    currentDiv.appendChild(newDrawArea.WrapperDiv);

    //leeren Absatz einfügen
    var newbr = document.createElement("br");
    currentDiv.appendChild(newbr);

    //DrawArea in Array abspeichern:
    DrawAreaArray["DrawArea_"+DrawArea_counter] = newDrawArea;

    //Eigene Funktion um Dropdowns zu aktualisieren
    refreshPlotDropdowns();

}

//DrawArea löschen
function remove_DrawArea(){
    //ausgewählten Wert holen:
    var x = document.getElementById("editDrawArea").selectedIndex;
    var y = document.getElementById("editDrawArea").options;

    alert("DrawAreaIndex: "+y[x].value);

    var id_element = y[x].value;
    //alert(id_element);
    //var element = document.getElementById(id_element);

    var element = document.getElementById(id_element);
    alert("element: "+element);
    //checken ob etwas ausgewählt wurde und Element löschen
    if(element === null){
        alert("Choose a DrawArea!");
    }else{
    element.parentNode.removeChild(element);
    alert("reingesprungen " + element);
    }

    //Eigene Funktion um Dropdowns zu aktualisieren
    refreshPlotDropdowns();
}

//DrawArea Dropdowns auf Plot Seite aktualisieren
function refreshPlotDropdowns(){

    //-----Dropdown aktualisieren (auch das rechte)-----
    //Anzahl vorhandener DrawAreas holen:
    var DrawArea_counter = getElementsByClassName(document,"drawArea").length; //Anzahl DrawAreas
    //alert("Anzahl vorhandener DrawAreas: "+DrawArea_counter);

    //---------linkes Dropdown----------:
    var selectElement = document.getElementById('select_drawArea');

    //Default Wert löschen:
    for (var i=0; i<selectElement.length; i++)
    {
        if (selectElement.options[i].value === 'DrawArea_1' )
           selectElement.remove(i);
    }

    var option = document.createElement('option');

    //Options hinzufügen
    for(var i=1; i < DrawArea_counter+1 ;i++){
      var option = document.createElement('option');
      option.text = 'DrawArea '+i;
      option.value = 'DrawArea_'+i;
      selectElement.options[i] = option;
    }

    //---------rechtes Dropdown----------:
    selectElement = document.getElementById('editDrawArea');

    //Default Wert löschen:
    for (var i=0; i<selectElement.length; i++)
    {
        if (selectElement.options[i].value === 'DrawArea_1' )
           selectElement.remove(i);
    }

    for(var i=1; i < DrawArea_counter+1 ;i++){
      var option = document.createElement('option');
      option.text = 'DrawArea '+i;
      option.value = 'DrawArea_'+i;
      selectElement.options[i] = option;
    }


}

function fill_edit_box(){

    //Vorherige Checkboxen entfernen:
    document.getElementById("replot_box").innerHTML = "";

    //ausgewählten Wert holen:
    var x = document.getElementById("editDrawArea").selectedIndex;
    var y = document.getElementById("editDrawArea").options;
    var id_element = y[x].value;
    alert("current area changed: "+ id_element +"Titel: " +DrawAreaArray[id_element].title);

    //Textbox befüllen
    document.getElementById("title_text").value = DrawAreaArray[id_element].title;
    var size = Object.size(DrawAreaArray);
    alert("Anzahl DrawAreas: "+size);

    //Anzahl Plots in Plotlist:
    amount_plots_drawArea = DrawAreaArray[id_element].ListofPlots.length;
    alert(amount_plots_drawArea);

    //Schleife um für jeden Graphen eine Checkbox anzuzeigen
    for(var i = 0; i < amount_plots_drawArea; i++){

        //Werte der Graphen auslesen:
        var technology = DrawAreaArray[id_element].ListofPlots[i].Technology;
        var device = DrawAreaArray[id_element].ListofPlots[i].Device;
        var curve = DrawAreaArray[id_element].ListofPlots[i].Curve;
        var sight = DrawAreaArray[id_element].ListofPlots[i].Sight;
        var temps = DrawAreaArray[id_element].ListofPlots[i].Temps;
        var DrawArea = DrawAreaArray[id_element].ListofPlots[i].DrawArea;

        //alert("Technology " + technology + " Device: " + device + " Curve: " + curve + " Sight: " + sight + " temps: "+ temps);

        var input = document.createElement("input");

        //Accordion Überschrift:
        var accordion = document.createElement("h3");

        //Accordion Inhalt:
        var div_accordion = document.createElement("div");

        //Text in Accordion Header einfügen
        var label = document.createElement('label');
        label.htmlFor = "id";
        label.appendChild(document.createTextNode(technology+" "+device+" "+curve+" "+sight+" "+temps+" "));
        accordion.appendChild(label);

        //Checkbox:
        input.type = "checkbox";
        input.className = "PlotCheckbox"; // set the CSS class

        //alert("value checkbox: "+technology+" "+device+" "+curve+" "+sight+" "+temps);

        input.value = (technology+" "+device+" "+curve+" "+sight+" "+temps +" "+ DrawArea);
        input.name = "TEST";

        var title = (technology+" "+device+" "+curve+" "+sight+" "+temps +" "+ DrawArea);
        accordion_content = "<img src='./img/edit_button.png' style='width:22px;height:22px;' title='edit this plot' >" + title;
        addAccordion();

        /*
        //Plot Aktiv/Nicht Aktiv:
        div_accordion.appendChild(input);
        var label_2 = document.createElement("label_2");
        label_2.appendChild(document.createTextNode("active/not active"));
        div_accordion.appendChild(label_2);

        //Zeilenumbruch:
        var br = document.createElement("br");
        div_accordion.appendChild(br);

        //Edit Button einfügen:
        var editButton = document.createElement("img");
        editButton.src = "./img/edit_button.png";
        editButton.style= "width:22px;height:22px;";
        editButton.title = "edit this plot";
        div_accordion.appendChild(editButton);


        //Accordion einfügen
        document.getElementById("replot_box").appendChild(accordion);
        document.getElementById("replot_box").appendChild(div_accordion);
        */
    }
    alert("start accordion");
    //accordion aktivieren:
    //$( "#replot_box" ).accordion();

    alert("start2 accordion");
}

function set_DrawArea_title(){
   //Auslesen was in Textfeld steht:
    var text = document.getElementById("title_text").value;

    //Welche DrawArea?
    var x = document.getElementById("editDrawArea").selectedIndex;
    var y = document.getElementById("editDrawArea").options;
    var id_element = y[x].value;

    //Zum erneuten Auslesen zwischenspeichern:
    DrawAreaArray[id_element].setTitle(text);

    //Titel über Geschwisterelement im DOM setzen
    document.getElementById(id_element).previousSibling.childNodes[0].innerHTML = text ;

}

function replotfromEditBox(){
    //arrays leeren damit alte Daten verschwinden:
    var checkedPlots_split = [];
        checkedTempValue.length = 0;

    var checkedPlots = [];
    var inputElements = getElementsByClassName(document,'PlotCheckbox');
    for(var i=0; i < inputElements.length; ++i){
          if(inputElements[i].checked){
               checkedPlots.push(inputElements[i].value);
          }
        }

    //Globale Variablen neu zuweisen:
    for(var i = 0; i < checkedPlots.length; i++){
            checkedPlots_split[i] = checkedPlots[i].split(" ");
            /*
            alert("Technologie: "+checkedPlots_split[i][0]);
            alert("Device: "+checkedPlots_split[i][1]);
            alert("Curve: "+checkedPlots_split[i][2]);
            alert("Sight: "+checkedPlots_split[i][3]);
            alert("Temperatur: "+checkedPlots_split[i][4]);
            */
           checkedTempValue.push(checkedPlots_split[i][4]);
    }
    //Neuzuweisung globale Variablen (Vom ersten Graphen):
    tech_name = checkedPlots_split[0][0];
    dev_name = checkedPlots_split[0][1];
    para_type = checkedPlots_split[0][2];
    sight = checkedPlots_split[0][3] ;
    var DrawArea = checkedPlots_split[0][5] ;


    alert("replotfunktion: " +checkedPlots);
    alert(checkedPlots[0]);
    //Plotte mit neuen Daten los:
    updateXAxisYAxisSelect(1);
    plotData(DrawArea);

}

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

//SettingsFenster (für LOAD / SAVE)
function OpenSettingsWindow (Adresse) {
    MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=400,left=100,top=200");
    MeinFenster.document.write("<p>ein neues Fenster!<br>(Besser wäre aber eine dialog-Box!)</p>");
    MeinFenster.focus();
}

//Funktioniert soweit (27.06.2016)
function SaveConfigAs(){
    var filename = document.getElementById("save-filename").value;
    filename = filename + ".txt";
    //Die gesamte bisherige Auswahl muss da rein:
    var config = [];

    //Config erstellen:
    //Anzahl DrawAreas:
    var DrawArea_amount = Object.size(DrawAreaArray);

    //Anzahl Plots in Plotlist:
    for(var j = 1; j < DrawArea_amount+1; j++){

        amount_plots_drawArea = DrawAreaArray["DrawArea_"+j].ListofPlots.length;

        //Nur wenn schon Graphen gezeichnet wurden:
        if(amount_plots_drawArea > 0){
            //Werte der Graphen auslesen:
           // var DrawArea = DrawAreaArray["DrawArea_"+j].ListofPlots[0].DrawArea;

            var technology = DrawAreaArray["DrawArea_"+j].ListofPlots[0].Technology;
            //alert(technology);
            var device = DrawAreaArray["DrawArea_"+j].ListofPlots[0].Device;
            //alert(device);
            var curve = DrawAreaArray["DrawArea_"+j].ListofPlots[0].Curve;
            //alert(curve);
            var sight = DrawAreaArray["DrawArea_"+j].ListofPlots[0].Sight;
            var xValue = DrawAreaArray["DrawArea_"+j].ListofPlots[0].xValue;
            var yValue = DrawAreaArray["DrawArea_"+j].ListofPlots[0].yValue;
            var block_id = DrawAreaArray["DrawArea_"+j].ListofPlots[0].BlockID;

            var temps = [];
            //Temperaturen:
        for(var i = 0; i < amount_plots_drawArea; i++){
            temps.push(DrawAreaArray["DrawArea_"+j].ListofPlots[i].Temps);
        }
            //alert(temps);

            config.push(DrawAreaArray["DrawArea_"+j].title +":"+ technology+";"+device+";"+curve + ";" + sight + ";" + block_id + ";" + xValue + ";" + yValue + ";" +temps+"\n")

        }
        else{
            alert("No plots in DrawArea_"+j);
        }


    }
    //alert(config);
    //um letztes newline zu entfernen
    //
    config[config.length-1] = config[config.length-1].substring(0, config[config.length-1].length-1);
    var blob = new Blob(config, {type: "text/plain;charset=utf-8"});
    saveAs(blob, filename);  //FileSaver.js
}

//Funktioniert soweit (27.06.2016)
function LoadConfigAs(){

    //Get File
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];

    //Init Variable for read content from textfile
    var read_input
    DrawAreasFromFile = [];
    technologie_temp = [];
    device_temp = [];
    curve_temp = [];
    sight_temp = [];
    block_id_temp = [];
    xValue_temp = [];
    yValue_temp = [];


    temperatures_temp = [];

    //output String:
    var loadedConfigDesription = "";

    //Supported FileType:alert
    var textType = "text/plain";

    //Get Area where information should be printed in
    var loadedConfig = document.getElementById('loadedConfig');

    //Check if Filetype is ok and read content:
    if (file.type.match(textType)) {
        var reader = new FileReader();
        //alert("Texttype in Ordnung");
        reader.onload = function(e) {
            read_input = reader.result;
            //alert("Inhalt der Textdatei: "+read_input);

            //Zeile um Zeile splitten:
            read_input = read_input.split("\n");

            for(var i = 0; i<read_input.length; i++){
                //array für temperaturen initialisieren:
                temperatures_temp[i] = [];

                DrawAreasFromFile[i] = read_input[i].split(":")[0]; //drawArea
                technologie_temp[i] = read_input[i].split(":")[1].split(";")[0]; //technology
                //alert("techn. : "+technologie_temp[i]);
                device_temp[i] = read_input[i].split(";")[1]; //device
                curve_temp[i] = read_input[i].split(";")[2];
                sight_temp[i] = read_input[i].split(";")[3];
                block_id_temp[i] = read_input[i].split(";")[4];
                xValue_temp[i] = read_input[i].split(";")[5];
                yValue_temp[i] = read_input[i].split(";")[6];

                //schleife um alle temperaturen abzuholen:
                for(var j = 7; j<read_input[i].split(";").length; j++){
                    temperatures_temp[i].push(read_input[i].split(";")[j]);
                }
                loadedConfigDesription = loadedConfigDesription + DrawAreasFromFile[i] + ":<br>Technology: "+ technologie_temp[i] + "<br>Device: "+ device_temp[i] +"<br>Curve: " + curve_temp[i] + "<br>Sight: " + sight_temp[i] + "<br>xAxis: " + xValue_temp[i] + "<br>yAxis: " + yValue_temp[i] + "<br>Temperatures: " +  temperatures_temp[i] +"<br><br>";
            }
            //Button um Config nachzuplotten einfügen:
            loadedConfigDesription = loadedConfigDesription + "<br><input type='button' value='Replot from this Config' onclick='ReplotConfig()'/>";
            //Schreibe Inhalt der Textdatei unter Ladebutton:
            loadedConfig.innerHTML = loadedConfigDesription;

        }

        reader.readAsText(file);
    } else {
        //alert("File not supported! Only .txt Files supported!");
    }

}

function ReplotConfig(){
    if (confirm("Are you sure? everything of the current session will be lost.") == true) {

        //erstmal alle vorhandenen DrawAreas löschen:
        var DrawArea_counter = getElementsByClassName(document,"drawArea").length; //wie viele DrawAreas gibt es momentan?
        for(var i = 1; i < DrawArea_counter + 1; i++ ){
            id_element = "DrawArea_" + i;
            var element = document.getElementById(id_element);
            if(element != null){
                element.parentNode.removeChild(element);
            }
        }

        //jetzt DrawAreas erzeugen, bis Anzahl gleich der Anzahl im Textfile
        while(DrawArea_counter < DrawAreasFromFile.length){
            add_DrawArea();
            DrawArea_counter = getElementsByClassName(document,"drawArea").length; //wie viele DrawAreas gibt es momentan?
        }

        //Plotte eingelesene Daten:


        for(var i = 0; i < DrawArea_counter; i++){
        //Neuzuweisung globale Variablen (Vom ersten Graphen):
            tech_name = technologie_temp[i];
            dev_name = device_temp[i];
            para_type = curve_temp[i];
            sight = sight_temp[i] ;
            x_Axis = xValue_temp[i];
            y_Axis = yValue_temp[i];
            block_id = block_id_temp[i];
            checkedTempValue = temperatures_temp[i];
            //alle values auf einen String schreiben um sie per Get zu uebergeben
            checkedTempValue.toString();
            checkedTempValue = checkedTempValue.join(',');

            alert("In replot funktion: temps: " + checkedTempValue);
            var DrawArea = DrawAreasFromFile[i] ;
            //Plotte mit neuen Daten los:
            alert("Aufruf von plotData Nummer " + i + "DrawAreas to plot: "+  DrawArea_counter);
            plotData(DrawArea,1);
        }

    }


}