function init() {
    var sups = document.getElementsByTagName("img");
    var leerimg = new Image();
    leerimg.src = "./img/sp.gif";
    if (!sups) return false;
    for (var i = 0; i < sups.length; i++) {
        var sup = sups[i].alt;
        if (sup != null && !isNaN(sup)) {
            if (sup>0 && bilderarray[sup]) {
                if (bilderarray[sup]["pic"]!="") {
                    sups[i].onmouseover = new Function("ereignis", "FN.position_ermitteln(ereignis); artikelbildzeigen(" + sup + ");");
                    sups[i].onmouseout = new Function("ereignis2", "FN.schliessen();");
                } else {
                    sups[i].src = leerimg.src;
                }
            }
        }
    }
}
function artikelbildzeigen(nr) {
  if (bilderarray[nr]) {            
        if (FN.container) FN.schliessen();
        document.getElementsByTagName("body")[0].appendChild(FN.erzeugen());
        FN.artikelbildueber.nodeValue = bilderarray[nr]["bez"];
        FN.holen(nr);
  } else {
    alert("Bild für "+nr+" wurde nicht gefunden.");
  }
}


var FN = {
 container: null,		
 artikelbildueber: null,
 artikelbildabsatz: null,
 mausX: 0,
 mausY: 0,
 div_breite: 450,
 div_hoehe: 340,
 abstandX: 10,
 abstandY: 10,
 rollX: 0,
 rollY: 0,

 erzeugen: function() {
  FN.container = document.createElement("div");
  FN.container.id = "artikelbild";
  FN.container.style.width = FN.div_breite + "px";
  FN.container.style.height = FN.div_hoehe + "px";
  var pos_x = (FN.mausX + FN.abstandX + FN.div_breite < window.innerWidth || FN.div_breite + FN.abstandX > FN.mausX)?
   FN.mausX + FN.abstandX :	
   FN.mausX - FN.div_breite - FN.abstandX;	
  
  var pos_y = (FN.div_hoehe + FN.abstandY + FN.mausY<window.innerHeight)?
   FN.mausY + FN.abstandY :	
   FN.mausY - FN.div_hoehe - FN.abstandY;	
  
  FN.container.style.left = FN.rollX + pos_x + "px";
  FN.container.style.top = FN.rollY + pos_y + "px";
  // Bild-Ünerschrift
  FN.titel = document.createElement("h1");
  FN.artikelbildueber = document.createTextNode(FN.artikelbildvorspann);
  FN.titel.appendChild(FN.artikelbildueber);
  // Link zum Schließen
  var fn_link = document.createElement("a");
  fn_link.setAttribute("href", "javascript:FN.schliessen()");
  // Absatz für Bild vorbereiten
  FN.artikelbildabsatz = document.createElement("p");
  // zusammensetzen
  FN.titel.appendChild(fn_link);
  FN.container.appendChild(FN.titel);
  FN.container.appendChild(FN.artikelbildabsatz);

  FN.anfasser = FN.titel; // oder ... = FN.container
  FN.anfasser.onmousedown = FN.ziehen_vorbereiten;
  FN.anfasser.style.cursor = "move";

  return FN.container;
 },

 holen: function(nr) {
  // Bildladen.
    var adder = document.createElement("div");
    if (bilderarray[nr]) {
        if (bilderarray[nr]["pic"]!="") {
            var fn_bild = document.createElement("img"); 
            fn_bild.src = bilderarray[nr]["pic"];
            fn_bild.style.border = "2px solid rgb(217,218,232)";            
            fn_bild.width = "180";
            fn_bild.height = "288";
            fn_bild.align = "left";
           // fn_bild.style.width = "180";
           // fn_bild.style.height = "288";
            adder.appendChild(fn_bild);        
            // var nicht_gefunden = document.createTextNode("Artikelbild:" +fn_bild.src );
            // adder.appendChild(nicht_gefunden);
        } else {
            var nicht_gefunden = document.createTextNode("Artikelbild " + nr + " wurde nicht gefunden! ");
            adder.appendChild(nicht_gefunden);
        }
        if (bilderarray[nr]["beschreibung"]!="") {
            var isbn = document.createElement("p");
            isbn.style.padding = "5px";
            isbn.innerHTML = bilderarray[nr]["beschreibung"];
            adder.appendChild(isbn);
        }
    } else {
        var nicht_gefunden = document.createTextNode("Keine Daten für " + nr + " gefunden! ");
        adder.appendChild(nicht_gefunden);

    }
    FN.artikelbildabsatz.appendChild(adder);
  },

 schliessen: function() {
  document.getElementsByTagName("body")[0].removeChild(FN.container);
  FN.container = null;
 },

 ziehen_vorbereiten: function(ereignis) {
  if (!ereignis) var ereignis = window.event;
  FN.position_ermitteln(ereignis);
  document.onmousemove = FN.ziehen;
  document.onmouseup = FN.stopp;
 },

 position_ermitteln: function(ereignis) {
  if (!ereignis) var ereignis = window.event;  
  FN.mausX = ereignis.clientX;
  FN.mausY = ereignis.clientY;
  FN.roll();

  // Safari rechnet clientX/Y vom Dokumentenanfang aus
  if (FN.mausX > FN.rollX && FN.rollX >= window.innerWidth) FN.mausX -= FN.rollX;
  if (FN.mausY > FN.rollY && FN.rollX >= window.innerHeight) FN.mausY -= FN.rollY;
 },

 roll: function() {
  if (isFinite(self.pageYOffset)) {	// DOM
   FN.rollX = self.pageXOffset;
   FN.rollY = self.pageYOffset;
  } else if (isFinite(document.documentElement && document.documentElement.scrollTop)) {	// IE neu
   FN.rollX = document.documentElement.scrollLeft;
   FN.rollY = document.documentElement.scrollTop;
  } else if (isFinite(document.body.scrollTop)) {	// IE alt
   FN.rollX = document.body.scrollLeft;
   FN.rollY = document.body.scrollTop;
  }
 },

 ziehen: function(ereignis) {
  if (!ereignis) var ereignis = window.event;
  document.onmousedown = FN.stopp;
  // 1.) aktuelle Position ermitteln
  var kastenX = parseInt(FN.container.style.left.slice(0,-2));
  var kastenY = parseInt(FN.container.style.top.slice(0,-2));
  // 2.) alte Mausposition speichern
  var mausX_alt = FN.mausX;
  var mausY_alt = FN.mausY;
  // 3.) neue Mausposition ermitteln
  FN.position_ermitteln(ereignis);
  // 4.) um die Differenz verschieben
  FN.container.style.left = kastenX + FN.mausX - mausX_alt + "px";
  FN.container.style.top = kastenY + FN.mausY - mausY_alt + "px";
 },

 stopp: function() {
  document.onmousemove = null;
  document.onmouseup = null;
  // gleicht Sicherheitsmaßnahme in FN.ziehen() aus
  if (document.onmousedown) {
   document.onmousedown = null;
   FN.anfasser.onmousedown = FN.ziehen_vorbereiten;
  }
 }

};
window.onload = init;