/**
 * 0.007 Im Feld "S" kann jetzt als 4. Parameter der size übergeben werden
 * 0.006 showModal eingebaut (ex7) 
 * 0.005 Text, Number und Date eingeführt; CSS-Klasse auch für den Rahmen definiert
 * 0.004 CSS-Klassen eingeführt
 * 0.003 Einfaches Formular ist mit editInfo und Daten aufrufbar, cancel und acceptHandler kann übergeben werden (ex5)
 * Regelt die Verarbeitung von Formularen
 * In EditInfo steht die Struktur des Formulars
 * mit show kann es in einem dom-Element dargestellt werden
 * mit get und set kann der Inhalt eines einzelnen Editfeldes gelesen und geschrieben werden
 * mit getData, fillData und setData kann ein ganzer Datensatz ausgetauscht werden
 * 
 * --- BRAUCHT container.js
 */
forms = {
  createInstance: function(editInfo){
    var res = { // Definition des form-Objektes
      info: editInfo,
      type: "Form",
      show: function(domElement,title){ // in einem DOM-Element darstellen
        domElement.className = "phiFrame"
        var tmp = document.createElement("table")
        tmp.className = "phi"
        if (title!==undefined){ // Formular hat einen Kopf
          tmp.createCaption()
          tmp.caption.className = "phi"
          tmp.caption.innerHTML = title
        }  
        var linkList = {} // Zeiger auf alle Container (Kombination aus Objekt und Edit-Element)
        for (var it in editInfo){ // editInfoListe durchgehen
          var line = document.createElement("tr") // neue Zeile
          line.className = "phi"
          if(editInfo.hasOwnProperty(it)){
            var pars = editInfo[it]
            var cell = document.createElement("td") // neue Zelle für den dargestellten Namen
            cell.className = "phi"
            cell.innerHTML = pars[0] // Namen hineinschreiben
            line.appendChild(cell)
            var cell = document.createElement("td") // neue Zelle für das Editfeld
            cell.className = "phi"
            switch (pars[1].charAt(0)){
              case 'L': // Label einbauen; Daten sind nur vom Programm, nicht vom Benutzer änderbar
                var span = document.createElement("span");
                span.className = "phi"
                linkList[it] = containers.createInstance(span); // neuen Zugriffscontainer in die Liste
                span.innerHTML = pars[2] // Zeichenkette eintragen
                cell.appendChild(span)
              break
              case 'S': case 'N' : case 'D' :// Textfeld einbauen; Daten sind vom Benutzer als Zeichenkette änderbar
                var input = document.createElement("input")
                input.className = "phi"
                switch (pars[1].charAt(0)){
                  case 'S': input.type = "text"; if (pars[3]!==undefined&&!isNaN(pars[3])) input.size=pars[3]; break;
                  case 'N': input.type = "number"; break;
                  case 'D': input.type = "date"; break;
                }
                linkList[it] = containers.createInstance(input)
                input.value = pars[2]
                cell.appendChild(input)
              break;
            }
            line.appendChild(cell)
          }
          tmp.appendChild(line)
        }
        domElement.linkList = linkList // die Linklist wird direkt in das domElement eingehängt !!!
        domElement.appendChild(tmp)
      },
      get: function(domElement,symName){ // holt die Daten aus einem Container aus der Linkliste
        var it = domElement.linkList[symName] // wollen doch mal im dom-Element nachschauen...
        if (it === undefined) return null  // da war aber nix
        return it.get()
      },
      set: function(domElement,symName,value){ // setzt die Daten in einem Container der Linkliste
        var it = domElement.linkList[symName]
        if (it === undefined) return
        it.set(value)
      },
      setData: function (domElement,obj){ // trägt alles in die entsprechenden Felder des Dialogs, was in den Schlüsseln übereinstimmt
        for (var it in obj){
          this.set(domElement,it,obj[it])
        }
      },
      fillData: function(domElement,obj){ // trägt alles in den Datensatz obj ein, was in den Schlüsseln übereinstimmt
        for (var it in obj){
          var that = this.get(domElement,it)
          if (that!==null) obj[it]=that
        }        
      },
      getData: function(domElement){ // gibt einen Datensatz mit allen Schlüsseln und Inhalten des Formulars zurück
        var result = {}
        var object = domElement.linkList
        for (var it in object){
          result[it] = object[it].get()
        }
        return result
      },
      addButtons: function(domElement,onAbort,onAccept){
        var div = document.createElement("div");
        div.className = "phiButton"
        var btn = document.createElement("span")
        btn.className = "phiButton"
        btn.innerHTML = "Abbruch"
        btn.onclick = onAbort
        div.appendChild(btn)
        var btn = document.createElement("span")
        btn.className = "phiButton"
        btn.innerHTML = "OK"
        btn.onclick = onAccept
        div.appendChild(btn)
        domElement.appendChild(div)
        // domElement.appendChild(document.createElement("br"))
      }
    }
    return res
  }, // createInstance
  apply: function(title,domElement,editInfo,data,onAbort,onAccept){ // führt einen kompletten Editvorgang auf einem domElement aus
    var it = forms.createInstance(editInfo)
    it.show(domElement,title)
    it.setData(domElement,data)
    it.addButtons(domElement,onAbort,function(){onAccept(it.getData(domElement))})
  }, // apply
  showModal: function(title,editInfo,data,onAbort,onAccept){
    var frame = document.createElement("div")
    frame.style.position = "absolute"
    frame.style.left = "100px"; frame.style.top = "100px"
    this.apply(title,frame,editInfo,data,
               function(){onAbort(); document.body.removeChild(frame)},
               function(it){onAccept(it); document.body.removeChild(frame)}
    )
    document.body.appendChild(frame)
  } // showModal
}
// form und so sind im html-Teil als domElements definiert !!!
function print(it){ // nur, wenn in der HTML-Seite ein DIV mit id="so" existiert...
  if (typeof it === "object") it = JSON.stringify(it)
  so.innerHTML = so.innerHTML + it
}
function ex7(){
  forms.showModal("Test *****",{Name:["Name","S","Johnny"],Alter:["Age","N","27"],Geburtsdatum:["*","D","01.01.1930"]},{Name:"Robert Rothhardt", Alter:"53",Geburtsdatum:"21.12.1961"},
              function(){alert("no")},function(it){alert(JSON.stringify(it))})
}
/* Benötigtes HTML-Dokument:



  
  
  
    







*/