/*
    Verweis-Matrix (map) bei Verweisensitive-Graphiken
    synchron zur Schriftgrößeneinstellung des
    Benutzers dynamisch anpassen

    Grafikausschnitte ein und ausblenden

    Dynamische Boxen
    verschieben, Größe ändern, schließen, Inhalt anpassen

    copyright: Roger Veneziano - IT-Service
               www-rvs-ka.de

*/

//Das Objekt, das gerade bewegt wird.
var dragobject = null;

var dnd_box = null;
var dnd_iframe = null;
var dnd_folie = null;

var border_top = null;
//var border_bottom = null;
var border_b_border = null;
var border_b_outline = null;
var border_t_border = null;
var border_t_outline = null;
var border_left = null;
var border_l_border = null;
var border_l_outline = null;
var border_right = null;
var border_r_border = null;
var border_r_outline = null;
var border_seedge = null;
var border_swedge = null;
var border_needge = null;
var border_nwedge = null;

// aktuelle Mausposition
var posx = 0;
// Mausposition zu beginn der Bewegung
var posx0 = 0;
// Abstand der Box vom Parent zu Beginn der Bewegung
var boxLeft0 = 0;
// Breite der Box zu Beginn der Bewegung
var boxWidht0 = 0;

// aktuelle Mausposition
var posy = 0;
// Mausposition zu beginn der Bewegung
var posy0 = 0;
// Abstand der Box vom Parent zu Beginn der Bewegung
var boxTop0 = 0;
// Höhe der Box zu Beginn der Bewegung
var boxHeight0 = 0;

// Umrechnungsfaktor px zu em;
var factor = 0;
var border_l_width = 0;
var border_r_width = 0;
var border_t_height = 0;
var border_tges_height = 0;
var border_b_height = 0;
var border_bo_height = 0;

var breite = 0;
var hoehe = 0;

var mapFactor = 0;
// Originalgröße des Bildes
// Höhe
var pxMapOrig = 634;
// Breite 697!

// selectedImage ist das beim überfahren angezeigte Image
var selectedImage = null;
// boxImage ist das Image zur Box
var boxImage = null;
var hasBox = false;
var node = null;
var child = null;

// action should be done when hideBox is called
var onClose = null;

function positioniereImage (imgImage) {
    // da jetzt alle images gleich gr0ß sind, sollt dies nun entfallen...
    return;
    var pxSchnitt = 0;
    var arrCoords = new Array();
    // Umrechnungsfaktor px zu em;
    var factor = parseFloat(getElement("id", "Musen-Tempel", 0).style.width) / getElement("id", "Musen-Tempel", 0).offsetWidth ;
    // Differenz des Originals (anhand dessen die Koordinaten ermittelt wurden) zum tatsächlichen Bild
    var differ = 34 - int_leer_navcont - parseFloat(getElement("id", "Musen-Tempel", 0).style.width);
    //alert (factor);
    pxSchnitt = getElement("id", "Musen-Tempel", 0).offsetHeight ;

/*
    if ((pxSchnitt/ pxMapOrig) == mapFactor){
        // nichts berechnen, wenn die Schriftart nicht geändert wurde!
        return;
    }
*/
    mapFactor = pxSchnitt/pxMapOrig;
    //var myId = imgImage.id.split("_bunt")[0]; 20080218
    var myId = imgImage.id; //20080218

    arrCoords = getCoords(myId, arrImgCoords).split(",");
    arrCoords.shift();
    //arrCoords = getCoords(Knoten.id).split(",");
    //alert (mapFactor + " " + Knoten.id + " " + arrCoords);
    //alert("left="+arrCoords[0]* mapFactor);
    //alert(imgImage.id + "/" + imgImage.style.left + "/" + imgImage.style.top + "/" + imgImage.style.width);

    //alert (left + ' ' + right);

    imgImage.style.left = Math.round(arrCoords[0] * mapFactor)+differ/factor + "px";
    imgImage.style.top = Math.round(arrCoords[1] * mapFactor) + "px";
    imgImage.style.width = Math.round(arrCoords[2] * mapFactor) + "px";
    imgImage.style.height = Math.round(arrCoords[3] * mapFactor) + "px";
    //alert(imgImage.id + "/" + imgImage.style.left + "/" + imgImage.style.top + "/" + imgImage.style.width);
}



function removeChild (strNode, strChild) {
  var child = getElement("id", strChild, 0);
  var node = getElement("id", strNode, 0)
  //alert(child.id + " " + strChild);
  if (child != false){
      verschwunden = node.removeChild(child);
  }
}

function removeAreas(strMapname) {
    var myMap = getElement("id", strMapname, 0)

    var childs = getElement("tagname", "area", 0);
    /* Firekox ist hier leider Fehlerhaft!
       Es werden jeweils nur die Hälfte der Areas korrekt zurückggeben.
       Daher hier rekusriv löschen bis wirklich alle weg sind. */
    childs = myMap.areas;
    j = childs.length;
    while (j > 0) {
        for (i = 0; i < j; i++) {
             try {
                 var verschwunden = myMap.removeChild(childs[i]);
             } catch (e) {

             }
        }
        childs = myMap.areas;
        j = childs.length;
    }
}

function getCoords(strAreaId, arrAreas){
    for (var i = 0; i < arrAreas.length; ++i) {
        if (arrMap[i] == strAreaId){
             return arrAreas[i];
        }
    }
}

// <area shape="rect" coords="28,252,119,333" href="#" onclick="showBox('umkleide')"
// id="Umkleide" alt="Umkleide + Abstellräume" title="Umkleide + Abstellräume" style="" >
function createArea(strAreaId,mapFactor){

    var myAreas = getCoords(strAreaId, arrAreas);
    var myArea = document.createElement("area");

    arrCoords = myAreas.split(",");
    myArea.title = arrCoords[0];
    myArea.alt = arrCoords[0];
    myArea.id = "map"+strAreaId;
    if (arrCoords[1] == "box") {
      //myArea.href = "javascript:showBox('" + strAreaId + "','"+ strAreaId+"')";
      myArea.href = "?ShowBox=" + strAreaId;
    }else{
      //myArea.href = "javascript:hideBox('dnd_box')";
      myArea.href = "./";
      myArea.style.cursor = "default"
    }
    myArea.onmouseover = showImageEv;
    myArea.onmouseout = hideImageEv;
    myArea.style.Color = "white";

    arrCoords.shift();
    arrCoords.shift();
    switch (arrCoords.length) {
    case 3:
        myArea.shape = "circle"
        break;
    case 4:
        myArea.shape = "rect"
        break;
    default:
        myArea.shape = "poly"
        break;
    }

    for (var i = 0; i < arrCoords.length; ++i) {
        arrCoords[i] = parseInt(arrCoords[i] * mapFactor);
    }

    myArea.coords = arrCoords.join(",");

    return myArea;
}

function createAreas(strMapname, mapFactor, strIncludingDiv){

    var myMap = getElement("id", strMapname, 0);
    for (var i = 0; i < arrMap.length; ++i) {
         try {
            myMap.appendChild(createArea(arrMap[i], mapFactor));
        } catch(e){
            alert(e);
        }
    }
    var Ausgabebereich = getElement("id", strIncludingDiv, 0);
    Ausgabebereich.appendChild(myMap);

    childs = myMap.areas;
    j = childs.length;
    for (i = 0; i < j; i++) {
         try {
                 //alert ('c ' + childs[i].title + ' ' + childs[i].coords);
         } catch (e) {
                 alert (e);
         }
    }

}

/*
function createMap(strMapname, mapFactor, strIncludingDiv){
    var myMap = document.createElement("map");
    myMap.id = strMapname;
    myMap.name = strMapname;

    for (var i = 0; i < arrMap.length; ++i) {
        myArea = createArea(arrMap[i], mapFactor);
        myMap.appendChild(myArea);
        myAreas[myAreas.length] = myArea;
    }
    var Ausgabebereich = getElement("id", "Architektur", 0);
    Ausgabebereich.appendChild(myMap);
}
*/


function appendChild () {
  //alert(child);
  if (child != null){
      node.appendChild(child);
  }
}

function berechneMap (strImage, strMapname, strIncludingDiv) {
                                                        //   alert(strImage+ strMapname+ strIncludingDiv);
    imgImage = getElement("id", strImage, 0);

    //var arrCoords = new Array();

    pxSchnitt = imgImage.offsetHeight ;
    //alert(pxSchnitt/ pxMapOrig+"/"+mapFactor);
    //window.statusBar = pxSchnitt;

    if ((pxSchnitt/ pxMapOrig) == mapFactor){
        // nichts berechnen, wenn die Schriftart nicht geändert wurde!
        return;
    }
    /* mapFactor erst nach createAreas setzen,
       da offensichtlich die Abarbeitung nicht imemr zum Abschluss kommt,
       vermutlich wenn der Bentzer in dieser Zeit etwas anderes anfordert!
       Sonst kann es vorkommen, dass mapFactor bereits umgerechnet ist,
       die map aber nicht neu berechnt wurde!

    mapFactor = pxSchnitt/pxMapOrig;

    */

/*
    removeChild(strIncludingDiv, strMapname)
    createMap(strMapname, mapFactor, strIncludingDiv);
*/
    removeAreas(strMapname)
    createAreas(strMapname, pxSchnitt/pxMapOrig, strIncludingDiv);
    mapFactor = pxSchnitt/pxMapOrig;
}



/*
    Drag and Drop / Resize Box

    Gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4, Opera


      copyright:
      Roger Veneziano - IT-Service
      www.rvs-ka.de

 */

// damit der IE nicht alles markiert, wenn man zieht...
function disable_select(object) {
    //if IE4+
    object.onselectstart=new Function ("return false")
    // ... wie auch immer ds zu erklären ist ts.. ts.. ts..
}


function transparency(object, rate) {

   myFilter = "Alpha(opacity=" + rate / 100 + ")";
   myOpacity = rate;
   object.Style.MozOpacity=myOpacity;
   object.Style.opacity=myOpacity;
   object.Style.KhtmlOpacity=myOpacity;
   object.Style.filter=myFilter;

}


function draginit() {
    /* Initialisierung der Überwachung der Events
       Wird aufgerufen, nachdem die Box erzeugt wurde.
       Reihenfolge der Events:
       draginit bei showbox
       drag bei mousenmove (bei jeder Mausbewegung nach draginit!)
       dragstart bei onmousedown

    */
    document.onmouseup = dragstop;
    document.onmousemove = drag;

    // damit der IE nicht alles markiert, wenn man zieht...
    disable_select(document);
    disable_select(dnd_folie);
    dnd_folie.style.MozUserSelect = "none";
    document.body.style.MozUserSelect = "none";
}


function dragstart(element) {
    /* Wird aufgerufen, wenn ein Objekt bewegt werden soll.
       Das geschieht, wenn der Benutzer die Maustaste drückt.
    */
                            //alert('start');
    if (dragobject==null){
        dragobject = getElement("id", element, 0);

        /*
        dnd_box = getElement("id", "dnd_box", 0);
        dnd_folie = getElement("id", "dnd_folie", 0);
        dnd_iframe = getElement("id", "dnd_iframe", 0);
        border_top = getElement("id", "border_top", 0);
        border_bottom = getElement("id", "border_bottom", 0);
        border_left = getElement("id", "border_left", 0);
        border_right = getElement("id", "border_right", 0);
        border_edge = getElement("id", "border_edge", 0);
        */

        dnd_folie.style.visibility = "visible";

        /* posx und posy wurden bereits in drag gesetz.
           posx ist der Abstand des Mauszeigers vom Elternobjekt von links.
           posy ist der Abstand des Mauszeigers vom Elternobjekt von oben.
           Elternobkejt ist das Element, von dessen Positionierung
           die Positionierung des dragobject abhängt.
           boxWidth0 ist die aktuelle Breite der Box.
           boxHeight0 ist die aktuelle Höhe der box.
        */
        boxWidth0 = parseFloat(dnd_box.style.width);
        boxHeight0 = parseFloat(dnd_box.style.height);

        /* posx0 die Mausposition zu Beginn der Bewegung
           boxLeft0 = der Abstand der linken Kante vom Parent des Objekts zu Beginn der Bewegung
        */
        switch (dragobject.id) {
        case "border_left":
        case "border_swedge":
        case "border_nwedge":
            posx0 = posx;
            boxLeft0 = dnd_box.offsetLeft;
            break;
        default:
            posx0 = posx;
            boxLeft0 = dragobject.offsetLeft;
        }

        /* posy0 die Mausposition zu Beginn der Bewegung
           boxTop0 = der Abstand der Oberkannte vom Parent des Objekts zu Beginn der Bewegung
        */
        switch (dragobject.id) {
        case "border_t_outline":
        case "border_t_border":
        case "border_nwedge":
        case "border_needge":
            posy0 = posy;
            boxTop0 = dnd_box.offsetTop;
            break;
        default:
            posy0 = posy;
            boxTop0 = dragobject.offsetTop;
        }

        factor = parseFloat(dnd_box.style.height) / dnd_box.offsetHeight;

    }
}


function dragstop() {
    /* Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
       Wenn der Benutzer die Maustaste loslässt .
    */

    if (dragobject){
      for (var i = 0; i < arrBoxes.length; ++i) {
          if (arrBoxes[i][0] == dnd_iframe.name){
            saveBox(dragobject,i);
            break;
          }
      }
    }

    dragobject=null;
    if (dnd_folie){
        dnd_folie.style.visibility = "hidden";
    }

}

function drag(ereignis) {
    /* Wird aufgerufen, wenn eine Box sichtbar ist
       und die Maus bewegt wird.
    */
                             //alert('drag');
    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    if (dragobject==null){
        return;
    }
    /*
    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    */

    if(dragobject != null) {

        switch (dragobject.id) {
        case "dnd_box":
            boxStyleLeft = posx - posx0 + boxLeft0;
            if (posx<0){
              boxStyleLeft = 0 - posx0 + boxLeft0;
            }
            boxStyleTop = posy - posy0 + boxTop0;
            if (posy<0){
              boxStyleTop = 0 - posy0 + boxTop0;;
            }
            dragobject.style.left = (boxStyleLeft) * factor  + "em";
            dragobject.style.top = (boxStyleTop) * factor + "em";
            break;

        case "border_right":
             breite = (posx - posx0 + boxLeft0) * factor  + border_r_width;
             nach_rechts();
            break;

        case "border_left":
            nach_links();
            break;

        case "border_b_outline":
            nach_unten('border_b_outline');
            break;

        case "border_b_border":
            nach_unten('border_b_border');
            break;

        case "border_t_border":
            nach_oben('border_t_border');
            break;

        case "border_t_outline":
            nach_oben('border_t_outline');
            break;

        case "border_seedge":
            // nach rechts vergrößern
             breite = (posx - posx0 + boxLeft0) * factor  + border_r_width;
             nach_rechts();

            // nach unten vergrößern
            nach_unten('border_b_outline');
            break;

        case "border_swedge":
            nach_links();

            // nach unten vergrößern
            nach_unten('border_b_outline');
            break;

        case "border_needge":
            // nach rechts vergrößern
             breite = (posx - posx0 + boxLeft0) * factor  + border_r_width;
             nach_rechts();

            // nach oben vergrößern
            nach_oben();
            break;

        case "border_nwedge":
            nach_links();

            // nach oben vergrößern
            nach_oben('border_b_outline');
            break;

        }
    }

}

function nach_rechts(){

            /* Nur solange ziehen bis Mindesthöhe erreicht.
               Die Breite wird trotzdem gesetzt, damit diese immer gleich ist
            */
            if (breite <= 10){
                breite = 10;
            }

            dnd_box.style.width = breite + "em";
            dnd_iframe.style.width = breite  - border_r_width*2 + "em";
            dnd_folie.style.width = breite  - border_r_width*2 + "em";
            border_top.style.width = breite  - border_r_width*2  + "em";
            border_t_border.style.width = breite - border_r_width*2 + "em";
            border_t_outline.style.width = breite - parseFloat(border_r_border.style.width) * 2 + "em";
            border_b_border.style.width = breite - border_r_width*2 + "em";
            border_b_outline.style.width = breite - parseFloat(border_r_border.style.width) * 2 + "em";

}

function nach_links(){
            breite = (posx0 - posx) * factor + boxWidth0;

            /* Nur solange ziehen bis Mindesthöhe erreicht.
               Die Breite wird trotzdem gesetzt, damit diese immer gleich ist
            */
            if (breite > 10){
                dnd_box.style.left = ((posx - posx0 + boxLeft0) * factor) + "em";
            } else {
                breite = 10;
            }

            dnd_box.style.width = breite + "em";
            dnd_iframe.style.width = breite  - border_r_width*2 + "em";
            dnd_folie.style.width = breite  - border_r_width*2 + "em";
            border_top.style.width = breite  - border_r_width*2 + "em";
            border_t_border.style.width = breite - border_r_width*2 + "em";
            border_t_outline.style.width = breite - parseFloat(border_r_border.style.width) * 2 + "em";
            border_b_border.style.width = breite - border_r_width*2 + "em";
            border_b_outline.style.width = breite - parseFloat(border_r_border.style.width) * 2 + "em";

}

function nach_oben(strObject){
            hoehe = (posy0 - posy) * factor + boxHeight0;

            /* Nur solange ziehen bis Mindesthöhe erreicht.
               Die Höhe wird trotzdem gesetzt, damit diese immer gleich ist
            */
            if (hoehe <= border_t_height*2){
                hoehe = border_t_height*2;
                posy = posy0 - (hoehe  - boxHeight0) / factor;
            }

            dnd_box.style.top = ((posy - posy0 + boxTop0) * factor) + "em";
            dnd_box.style.height = hoehe + "em";
            border_left.style.height = hoehe + "em";
            border_l_border.style.height = hoehe + "em";
            border_l_outline.style.height = hoehe + "em";
            border_right.style.height = hoehe  + "em";
            border_r_border.style.height = hoehe  + "em";
            border_r_outline.style.height = hoehe  + "em";
            dnd_iframe.style.height = hoehe  - border_t_height + "em";
            dnd_folie.style.height = hoehe  - border_t_height + "em";

            border_seedge.style.top = hoehe  + "em";
            border_swedge.style.top = hoehe  + "em";
            border_b_border.style.top = hoehe + border_bo_height + "em";
            border_b_outline.style.top = hoehe + "em";

}

function nach_unten(strObject){
            hoehe = (posy - posy0 + boxTop0) * factor;

            /* Nur solange ziehen bis Mindesthöhe erreicht.
               Die Höhe wird trotzdem gesetzt, damit diese immer gleich ist
            */
            if(hoehe <= border_t_height*2){
                hoehe = border_t_height*2;
            }

            if (strObject == 'border_b_outline'){
                border_b_outline.style.top = hoehe + "em";
                border_b_border.style.top = hoehe +  border_bo_height + "em";
            }else{
                border_b_border.style.top = hoehe + "em";
                border_b_outline.style.top = hoehe -  border_bo_height + "em";
            }
            border_left.style.height = hoehe + "em";
            border_l_border.style.height = hoehe + "em";
            border_l_outline.style.height = hoehe + "em";
            border_right.style.height = hoehe  + "em";
            border_r_border.style.height = hoehe  + "em";
            border_r_outline.style.height = hoehe  + "em";
            border_seedge.style.top = hoehe  + "em";
            border_swedge.style.top = hoehe  + "em";
            dnd_box.style.height = hoehe + "em";
            dnd_iframe.style.height =  hoehe - border_t_height + "em";
            dnd_folie.style.height =  hoehe - border_t_height + "em";

}

function showTip(source, strTipText, myTip){
    /*
    myTip = document.createElement("p");
    myTextNode = document.createTextNode(strTipText);
    myTip.appendChild(myTextNode);
    element = getElement("id","boxtext",0);
    element.appendChild(myTip);
    alert(Object.name);
    return;
    */
    //alert(element);
    if (!myTip){
        container=source.offsetParent;
        myTip = document.createElement("div");
        myTip.style.position = "absolute";
        if(container.offsetWidth > source.offsetLeft * 2){
            // rechts
            myTip.style.width = container.offsetWidth - source.offsetLeft - 40 + "px";
            myTip.style.left = source.offsetLeft + 20 + "px";
        }else{
            // links
            myTip.style.width = source.offsetLeft - 20 + "px";
            myTip.style.left = "10px";
        };

        if(container.offsetHeight > source.offsetTop * 2){
            myTip.style.top = source.offsetTop + 10 + "px";
        };
        myTip.className = "tooltip"

        myText = document.createElement("p");
        myTextNode = document.createTextNode(strTipText);
        myTip.appendChild(myTextNode);

        //element = getElement("id","boxtext",0);
        container.appendChild(myTip);
        if(container.offsetHeight <= source.offsetTop * 2){
            myTip.style.top = source.offsetTop - myTip.offsetHeight + "px";
        };

    }
    return myTip;


}

function hideTip(node){
    if (myTip){
        myTip.offsetParent.removeChild(node);
    }
    return null;
}

function linkBox(strSrcBox, strImage, myNode){
  linkBack = "javascript:backBox('" + myNode.getElement("id", "dnd_iframe", 0).name + "','";
  if (myNode.selectedImage){
    linkBack = linkBack + myNode.selectedImage.id + "',parent)";
  } else {
    linkBack = linkBack + "onclose:" + myNode.onclose + "',parent)";
  }

  myNode.showMyBox(strSrcBox, strImage, linkBack);
}

function backBox(strSrcBox, strImage, myNode){
  myNode.showMyBox(strSrcBox, strImage, '');
}

function showBox(strSrcBox, strImage){
    showMyBox(strSrcBox, strImage, '');
}

function getMyElements(){
    dnd_box = getElement("id", "dnd_box", 0);
    dnd_folie = getElement("id", "dnd_folie", 0);
    dnd_iframe = getElement("id", "dnd_iframe", 0);
    border_top = getElement("id", "border_top", 0);
    border_b_border = getElement("id", "border_b_border", 0);
    border_b_outline = getElement("id", "border_b_outline", 0);
    border_t_border = getElement("id", "border_t_border", 0);
    border_t_outline = getElement("id", "border_t_outline", 0);
    border_left = getElement("id", "border_left", 0);
    border_l_border = getElement("id", "border_l_border", 0);
    border_l_outline = getElement("id", "border_l_outline", 0);
    border_right = getElement("id", "border_right", 0);
    border_r_border = getElement("id", "border_r_border", 0);
    border_r_outline = getElement("id", "border_r_outline", 0);
    border_seedge = getElement("id", "border_seedge", 0);
    border_swedge = getElement("id", "border_swedge", 0);
    border_needge = getElement("id", "border_needge", 0);
    border_nwedge = getElement("id", "border_nwedge", 0);
}

function showMyBox(strSrcBox, strImage, linkBack){
      if (strImage.substr(0, 8) == "onclose:" ){
        onClose = strImage.substr(8);
        strImage = "";
    }
    if (strImage.substr(0, 1) == "/" ){
        linkBack = strImage;
        while(linkBack.indexOf('$') != -1) {
          linkBack = linkBack.replace("$", "'");
        }
        linkBack = linkBack + "&_parent";
        strImage = "";
    }
    getMyElements();

    /*
      Falls bereits eine Box angezeigt wird, vor dem anzeigen der neuen Box die Koordinaten
      der alten Box speichern!
    */
    if (dnd_box.style.visibility == "visible") {
        for (var i = 0; i < arrBoxes.length; ++i) {
            if (arrBoxes[i][0] == dnd_iframe.name){
                 //alert(i +' '+dnd_iframe.name)
                 saveBox(dnd_box, i);
                 break;
            }
        }
    }

    border_l_width = parseFloat(border_left.style.width);
    border_t_height = parseFloat(border_top.style.height);
    border_r_width = parseFloat(border_right.style.width);
    border_bo_height = parseFloat(border_b_outline.style.height);
    border_b_height = parseFloat(border_b_border.style.height) + border_bo_height;
    border_tges_height = border_t_height + parseFloat(border_t_outline.style.height);

    var bi
    var newBoxCoords = false;
    for (var i = 0; i < arrBoxes.length; ++i) {
        if (arrBoxes[i][0] == strSrcBox){
             bi = i;
             if (readBoxCookie(bi)){
               newBoxCoords = true;
             };
             break;
        }
    }
    /* Das die Boxen jetzt immer vom Server angefordert werden, muss der Titel nicht mehr ausgetauscht werden.
       Zudem besteht nun auch die Möglichkeit den Text per HTML zu formatieren.
       titel = arrBoxes[bi][5].split(",")[0];
       boxtitel = getElement("id", "boxbez", 0);
       newtitel = document.createTextNode(titel);
       if (boxtitel.firstChild){
         boxtitel.replaceChild(newtitel, boxtitel.firstChild);
       } else {
         boxtitel.appendChild(newtitel);
       }
    */
    if (strImage > ""){
        hasBox = false;
        if (boxImage){
          myImage = boxImage.id;
          boxImage = null;
          hideImage(myImage);
        }
        showImage(strImage);
        // wenn box angezeigt wird, soll das zugehörige Image hervorgehoben bleiben, daher als boxImage merken
        boxImage = selectedImage;
    }
    source = "/include/dndbox/iframe.php?" + arrBoxes[bi][6];
    if (linkBack > ""){
      source = source + "&" + linkBack;
    }

    // Folgender Code ist nur nötig, wenn die Boxen per javascript:showBox(<name>,<name>) gesteuert werden.
    // Wegen eines Fehlers des MSIE jetzt doch immer ausführen!
    //if (newBoxCoords || dnd_iframe.name != strSrcBox){
    //if (1 == 0){
    //alert(strSrcBox+bi+source+arrBoxes[bi][0]);
      dnd_iframe.name = strSrcBox;
      dnd_iframe.src = source;

      boxLeft = parseFloat(arrBoxes[bi][1]);
      boxTop = parseFloat(arrBoxes[bi][2]);
      boxWidth = parseFloat(arrBoxes[bi][3]);
      boxHeight = parseFloat(arrBoxes[bi][4]);

      dnd_box.style.left = boxLeft + "em";
      dnd_box.style.top = boxTop + "em";
      dnd_box.style.width = boxWidth + "em";
      dnd_box.style.height = boxHeight + "em";

      dnd_folie.style.left = border_l_width  + "em";

      border_top.style.width = boxWidth  - border_l_width - border_r_width  + "em";
      border_t_border.style.width = boxWidth  - border_l_width - border_r_width  + "em";
      border_t_outline.style.width = boxWidth - parseFloat(border_l_border.style.width) * 2 + "em";

      border_b_border.style.width = boxWidth - border_l_width - border_r_width + "em";
      border_b_outline.style.width = boxWidth - parseFloat(border_l_border.style.width) * 2 + "em";
      dnd_iframe.style.width = boxWidth - border_l_width - border_r_width + "em";
      dnd_folie.style.width = boxWidth - border_l_width - border_r_width  + "em";

      border_left.style.height = boxHeight +  border_b_height + "em";
      border_l_border.style.height = boxHeight + border_b_height + "em";
      border_l_outline.style.height = boxHeight + "em";
      border_right.style.height = boxHeight + border_b_height + "em";
      border_r_border.style.height = boxHeight + border_b_height + "em";
      border_r_outline.style.height = boxHeight + "em";
      dnd_iframe.style.height = boxHeight - border_t_height + "em";
      dnd_folie.style.height = boxHeight - border_t_height + "em";

      border_b_outline.style.top = boxHeight + "em";
      border_b_border.style.top = boxHeight + border_bo_height + "em";

      border_seedge.style.top = boxHeight + "em";
      border_swedge.style.top = boxHeight + "em";


    //}

    if (MSIE) {
        myColor = border_t_outline.style.backgroundColor;
        border_t_border.style.backgroundColor = myColor;
        border_t_border.style.filter="Alpha(opacity=" + 0 + ")";
        border_r_border.style.backgroundColor = myColor;
        border_r_border.style.filter="Alpha(opacity=" + 0 + ")";
        border_b_border.style.backgroundColor = myColor;
        border_b_border.style.filter="Alpha(opacity=" + 0 + ")";
        border_l_border.style.backgroundColor = myColor;
        border_l_border.style.filter="Alpha(opacity=" + 0 + ")";
        border_seedge.style.backgroundColor = myColor;
        border_seedge.style.filter="Alpha(opacity=" + 0 + ")";
        border_swedge.style.backgroundColor = myColor;
        border_swedge.style.filter="Alpha(opacity=" + 0 + ")";
        border_needge.style.backgroundColor = myColor;
        border_needge.style.filter="Alpha(opacity=" + 0 + ")";
        border_nwedge.style.backgroundColor = myColor;
        border_nwedge.style.filter="Alpha(opacity=" + 0 + ")";
    }

    border_nwedge.style.cursor = "nw-resize";
    border_needge.style.cursor = "ne-resize";
    border_swedge.style.cursor = "sw-resize";
    border_seedge.style.cursor = "se-resize";
    border_t_border.style.cursor = "n-resize";
    border_l_border.style.cursor = "w-resize";
    border_r_border.style.cursor = "e-resize";
    border_b_border.style.cursor = "s-resize";

    mycross = getElement("id", "close", 0);
    if (ie5Up){
      mycross.style.cursor = "hand";
    } else {
      mycross.style.cursor = "pointer";
    }
    border_top.style.cursor = "move";
    //alert(getElement("id", "closer", 0).id);

    //alert(arrBoxes[i][1] + "/" + arrBoxes[i][2] + "/" + arrBoxes[i][3] + "/" + arrBoxes[i][4])
    draginit();
    hasBox = true;
    dnd_box.style.visibility = "visible";

    if (MSIE){
      /*  Ohne erkennbaren Grund zeigt MSIE6 die Box nicht korrekt an!
          Mit folgendem Code macht er es dann doch...
      */
      posy0 = 0;
      posy = 0;
      boxTop0 = border_b_border.offsetTop;
      factor = parseFloat(dnd_box.style.height) / dnd_box.offsetHeight;
      nach_unten('border_b_border');
    }
}

function hideBox(strBox){
    if (!hasBox){
      return;
    }
    /* leider ganz speziell!
       es wird die Funktion toggelHigh aufgerufen um den zur Box führenden Link
       zu entfärben...
       Wird auf Seite Einführung verwendet.
    */

    if (onClose){
        strClassName = onClose.substr(11,onClose.length);
        //alert(strClassName);
        toggleHigh('',strClassName,'');
        onClose = null;
    }

    for (var i = 0; i < arrBoxes.length; ++i) {
        if (arrBoxes[i][0] == dnd_iframe.name){
             break;
        }
    }

    // Koordinaten in der Box für Wiederanzeige speichern.
    myBox = getElement("id", strBox, 0);
    if (!myBox){
      myBox = parent.getElement("id", strBox, 0);
    }
    saveBox(myBox, i);
    dragstop();
    myBox.style.visibility = "hidden";
    hasBox = false;
    if (boxImage){
        myImage = boxImage.id;
        boxImage = null;
        hideImage(myImage);
    }
}


function saveBox(myBox, boxIndex){
    // leider nur als cookie 20080505

  arrBoxes[boxIndex][1] = parseFloat(myBox.style.left);
  arrBoxes[boxIndex][2] = parseFloat(myBox.style.top);
  arrBoxes[boxIndex][3] = parseFloat(myBox.style.width);
  arrBoxes[boxIndex][4] = parseFloat(myBox.style.height);
  if (navigator.cookieEnabled != true) {
    return;
  }

  // expires in one Month
  var a = new Date();
  a = new Date(a.getTime() +1000*60*60*24*30);

  var cookieName = arrBoxes[boxIndex][0];
  var cookieValue = arrBoxes[boxIndex].join(",");
  // speichert den Cookie zu dieser Box für einen Monat auf dem Client
  document.cookie = cookieName+'='+cookieValue+'; expires='+a.toGMTString()+';';


}

function readBoxCookie(boxIndex){

  if (navigator.cookieEnabled != true) {
    return false;
  }

  cookieValue = readCookie(arrBoxes[boxIndex][0])
  if (cookieValue){
    cv = cookieValue.split(",");
    for(var i=1;i<5;i++) {
      arrBoxes[boxIndex][i] = cv[i];
    }
    return true;
  }
  return false;
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function showImageEv(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var elem = (evt.target) ? evt.target : evt.srcElement;
    /*
    var relTarget = (evt.relatedTarget) ? evt.relatedTarget : evt.fromElement;
    alert (relTarget.id);
    */

    showImage(elem.id.toLowerCase().substr(3));
}

function hideImageEv(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var elem = (evt.target) ? evt.target : evt.srcElement;
    /*
    var relTarget = (evt.relatedTarget) ? evt.relatedTarget : evt.fromElement;
    alert (relTarget.id);
    */
    hideImage(elem.id.toLowerCase().substr(3));
}

function hrefToJs(element, leg_name, image_name){
  /*
     Wenn die Boxen über javascript gesteuert werden sollen, das folgende return auskommentieren
     Nachteile: - kein zurück mit Browser-zurückfunktion
                - Text in Box beim verweis von Box zu Box wechselt verzögert
     Vorteile : - evtl. bessere Performance (browserabhängig)
     Bei Steuerung über javascript, zurück-links überprüfen!
  */
  //return;
  find = element.href.search(/\?ShowBox/);
  if (find != -1){
    element.href="javascript:showBox('"+leg_name+"','"+image_name+"')";
  }
}

function showImage(strImage){
    //alert (dnd_iframe.src);
    //var strSrcBox = 'umkleide';
    //alert (imgImage);

    // alert (strImage);
    //alert(strImage);

   //if (!hasBox){
        selectedImage = getElement("id", strImage, 0);
        if (selectedImage){
            positioniereImage(selectedImage);
            selectedImage.style.visibility = "visible";
            //alert (selectedImage.style.left);
        }
        leg_archi = getElement("id", "leg_" + strImage);
        if (leg_archi){
          leg_archi.style.color = "black";
          hrefToJs(leg_archi, strImage, strImage);
        }
    //}
}

function hideImage(strImage){


    //if (!hasBox){
        var Image = getElement("id", strImage, 0);
        if (Image){
            Image.style.visibility = "hidden";
        }
        if (hasBox && boxImage){
            showImage(boxImage.id);
        }
        // Hervorhebung der Legende zurücknehmen, wenn Box nicht mehr angezeigt wird
        if (boxImage && strImage == boxImage.id){
          return;
        }
        leg_archi = getElement("id", "leg_" + strImage);
        if (leg_archi){
          leg_archi.style.color = "";
        }

    //}
}