// moving box script                                                           //
// =================                                                           //
//                                                                             //
// Dieses Skript bietet eine einfache Möglichkeit, künstliche Popups           //
// im Browserfenster zu verschieben. Diese verhalten sich dabei, wie           //
// man es von normalen Fenstern erwartet: Man kann sie an der Titel-           //
// leiste anfassen und mit der Maus an den neuen Ort ziehen.                   //
//                                                                             //
// Für Web-Autoren:                                                            //
// - binde dieses Skript auf deiner Seite ein.                                 //
// - Um eine Box (div) beweglich zu machen,                                    //
//   ... gib ihr einen Titelbalken. Dieses Skript wird nach der ersten         //
//       DIV in der Box suchen und diese als Titelbalken verwenden.            //
//   ... gib ihr eine Id.                                                      //
//   ... rufe bei der Initialisierung der Seite register_box(id) auf.          //
// - Du kannst so viele Boxen definieren, wie du willst, und alle              //
//   beweglich gestalten.                                                      //
// - register_box() geht nur für sichtbare divs, weil unsichtbare keine        //
//   x/y-Koordinaten haben. Wenn du beweglichen Popups haben willst,           //
//   die erst später sichtbar werden, dann gib bei register_box als            //
//   zweiten Parameter 0 an:                                                   //
//   register_box("box1",0) ;   // Box ist zu Beginn unsichtbar                //
//   register_box("box2",1) ;   // Box ist von Anfang an sichtbar              //
//                                                                             //
// Disclaimer: Dieses Skript stammt von Homepapa.                              //
// Es kann für private und geschäftliche Zwecke frei verwendet werden.         //
// Allerdings: Wenn du es verkaufst, solltest du Homepapa am Gewinn beteiligen.//
// homepapa.ch - 2007                                                          //
// *************************************************************************** //

// Globale Variable (überall verfügbar)                                        //
var mx, my ;                           // Mauspositionen                       //
var movingBox = "" ;                   // in Bewegung befindliche Box          //

// 1. Mausposition verfolgen und Box bewegen                                   //
// -----------------------------------------                                   //
function mousePos(evnt){
  // (a) Mausposition                                                          //
  if(evnt) {
    my = evnt.clientY + window.document.body.scrollTop ;
    mx = evnt.clientX + window.document.body.scrollLeft ;
  }
  else {
    my = event.y + window.document.body.scrollTop ;
    mx = event.x + window.document.body.scrollLeft ;
  }
  // (b) Box bewegen                                                           //
  if(movingBox != "") {                               // müssen wir das denn?  //
    var mybox = document.getElementById(movingBox) ;  // Box anhand Id suchen  //
    mybox.posx = mx - mybox.deltax ;
    mybox.posy = my - mybox.deltay ;
    mybox.style.top = mybox.posy + "px" ;
    mybox.style.left = mybox.posx + "px" ;
  }
}
document.onmousemove = mousePos;       // von jetzt an Mausposition beachten   //


// 2. Hintergrund-Routinen                                                     //
// -----------------------                                                     //
// 2(a) Box ergreifen, wenn Maustaste gedrückt wird                            //
function seize(evnt) {
  // Der Titelbalken ist als Objekt definiert. Es kennt - unter Anderem -      //
  // - eine Methode namens "ergreifen" (genauer: "seize", diese hier)          //                                         
  // - eine Eigenschaft namens "mboxid", die die Id der bewegten Box enthält   //
  // Mit "this" ist das Titelbalken-Objekt gemeint.                            //
  var mybox = document.getElementById(this.mboxid) ;       // also DIESE Box wird bewegt           //
  if(mybox.posx + mybox.posy == 0) {                       // Wenn wir nicht wissen, wo sie steht, //
    mybox.style.position = "absolute" ;                    // versuchen wir, das rauszufinden,     //
    register_box(this.mboxid) ;                            // indem wir sie erneut registrieren    //
	mybox = document.getElementById(this.mboxid) ;         // und ihre Position ermitteln.         //
  }
  mybox.deltax = mx - mybox.posx ;                         // Wir ermitteln den Abstand zwischen   //
  mybox.deltay = my - mybox.posy ;                         // Mauszeiger und linker oberer Ecke    //
  movingBox = this.mboxid ;                                // der Box und notieren sie als bewegt  //
  this.style.cursor = "move" ;
}

// 2(b) eine Box loslassen, wenn die Maustaste losgelassen wird                                    //
function leggo(evnt) {
  movingBox = "" ;                                         // keine Box ist als beweglich notiert  //
  this.style.cursor = "default" ;
}

// 3. eine Box registrieren ("kennen lernen")                                                      //
// Das muss passieren, bevor man eine Box zu bewegen versucht.                                     //
// (am Besten ruft man ein "onLoad"-Script auf).                                                   //
// register_box bereitet Methoden und Eigenschaften vor, die fürs Bewegen gebraucht werden.        //
function register_box(boxid,show) {
  var mybox = document.getElementById(boxid) ;             // Box im HTML-Text finden              //
  var destx = mybox.offsetLeft;                            // ihre Koordinaten ermitteln           //
  var desty = mybox.offsetTop;                             // (this is based on outstanding        //
  var thisNode = mybox;                                    // theoretical background by            //
  while (thisNode.offsetParent &&                          // Andrew Clover @                      //
        (thisNode.offsetParent != document.body)) {        // http://www.doxdesk.com/personal/posts/evolt/20020422-pos.html
    thisNode = thisNode.offsetParent;                      // ....                                 //
    destx += thisNode.offsetLeft;                          // ...                                  //
    desty += thisNode.offsetTop;                           // ..                                   //
  }                                                        //.                                     //
  mybox.posx = destx ;                                     // diese Koordinaten als Eigenschaften  //
  mybox.posy = desty ;                                     // der jeweiligen Box eintragen         //
  var i ;
  for(i=0 ; i<mybox.childNodes.length ; i++) {             // Die Box genauer durchsuchen          //
    if(mybox.childNodes[i].tagName == "DIV") {             // und die erste DIV darin mit          //
      mybox.childNodes[i].onmousedown = seize ;            // Methode zum Ergreifen ("seize")      //
      mybox.childNodes[i].onmouseup   = leggo ;            // und Loslassen ("let go")             //
      mybox.childNodes[i].mboxid      = boxid ;            // sowie der Id der Box versehen.       //
	  mybox.style.position = "absolute" ;                  // Die Box erneut an ihrer absoluten    //
      mybox.style.top = mybox.posy + "px" ;                // Position platzieren                  //
      mybox.style.left = mybox.posx + "px" ;
      break ;
    }
  }
  if(show == 0) document.getElementById(boxid).style.display = "none" ;
  else document.getElementById(boxid).style.display = "block" ;
}