/* Default-Werte, koennen spaeter ueberschrieben werden */

var thumbdir = "thumbs";
var largedir = "images";
var imgdescs = "descriptions.xml";
var thumbwidth = 60;
var thumbheight = 60;
var largewidth = 640;
var largeheight = 480;
var timeout = 40;
var minwidth = 4000;

/* Variablen initialisieren, die spaeter benoetigt werden */

/* Items, die angezeigt werden */
var showitems = new Array(0);
var req = null;
/* Startposition */
var pos = 0;
var scroll = 1;

// IE 7 und Mozilla
if (typeof XMLHttpRequest != 'undefined') {
  req = new XMLHttpRequest();
 }
if (!req) {
  // Internet Explorer 6 und älter
  try {
    req  = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
    try {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      req = null;
    }
  }
 }

/* XML parsen und Array generieren: */
function parsexml () {
  if (req.readyState == 4) {
    var tmpitems = req.responseXML.getElementsByTagName("item");
    for (var i=0; i<tmpitems.length; i++) {
      showitems[i] = tmpitems[i];
    }
    if (showitems.length > 0) {
      replaceinnerdiv ();
      setTimeout('moveleft()', timeout);
    }
  }
}

/* Alte Tabelle entfernen, neue aufbauen */
function replaceinnerdiv () {
  var outerdv = document.getElementById("outerdv");
  var innerdv = document.getElementById("innerdv");
  var imgtab = document.getElementById("scrollimages");
  /* neue Tabelle aufbauen */
  var tmptab = document.createElement("table");
  var tmptbody = document.createElement("tbody");
  var tmptr = document.createElement("tr");
  tmptab.setAttribute("id","scrollimages");
  for (var j=0; j<showitems.length*getcount(); j++) {
    var i = j % showitems.length;
    var tmptd = document.createElement("td");
    var tmpimg = document.createElement("img");
    tmpimg.setAttribute("src", thumbdir + "/" + 
			showitems[i].getElementsByTagName("image")[0].childNodes[0].data);
    tmpimg.setAttribute("width", thumbwidth);
    tmpimg.setAttribute("height", thumbheight);
    tmpimg.onclick = replacecontent;
    tmptd.appendChild(tmpimg);
    tmptr.appendChild(tmptd);
  }
  tmptbody.appendChild(tmptr);
  tmptab.appendChild(tmptbody);
  /* alte entfernen */
  innerdv.removeChild(imgtab);
  /* neue anhängen */
  innerdv.appendChild(tmptab);
  /* Handler für Scrollstart und Stop */
  outerdv.onmouseover = scrollstop;
  outerdv.onmouseout = scrollstart;
}

/* Ermitteln, wie oft die Tabelle wiederholt werden muss, damit sie nicht
   rausscrollt, sehr grosszuegig berechnet */
function getcount () {
  var singletabwidth = showitems.length * thumbwidth;
  var tabcount = minwidth / singletabwidth;
  return Math.ceil(tabcount);
}

/* Inneres DIV nach Links schieben */
function moveleft () {
  var outerdv = document.getElementById("outerdv");
  var innerdv = document.getElementById("innerdv");
  if (pos < showitems.length * thumbwidth) {
    pos = pos + 1;
  } else {
    pos = 0;
  }
  if (scroll > 0) {
    innerdv.style.left = '-' + pos + 'px';
    setTimeout('moveleft()', timeout);
  } else {
    setTimeout('moveleft()', 5 * timeout);
  }
}

/* Inhalte im Hauptfeld austauschen */
function replacecontent () {
  var src = this.getAttribute("src");
  resizetfi();
  if (document.getElementById('opaque')) {
    destroypane();
  }
  createpane(src);
  // alert(src);
}

/* Eintrag passend zum Thumbnail ermitteln */

function getobj (src) {
  for (var i=0; i<showitems.length; i++) {
    if (src == thumbdir + "/" + showitems[i].getElementsByTagName("image")[0].childNodes[0].data) {
      return showitems[i];
    }
  }
  return null;
}

function createpane(src) {
  var bdy = document.getElementsByTagName('body')[0];
  var tfi = document.getElementById('textfield');
  var oppanel = document.createElement("div");
  var positions = moFindPos(tfi);
  oppanel.setAttribute("id", "opaque");
  if (!tfi.style.setProperty) { 
    moSetStyle(oppanel, 'left', positions[0] + 'px', null);
    moSetStyle(oppanel, 'top', positions[1] + 'px', null);
    moSetStyle(oppanel, 'width', (positions[2] + 2) + 'px', null);
    moSetStyle(oppanel, 'height', positions[3] + 'px', null);
  } else {
    moSetStyle(oppanel, 'left', positions[0] + 'px', null);
    moSetStyle(oppanel, 'top', positions[1] + 'px', null);
    moSetStyle(oppanel, 'width',  positions[2] + 'px', null);
    moSetStyle(oppanel, 'height', positions[3] + 'px', null);
  }
  var entryobj = getobj(src);
  var limg = document.createElement("img");
  limg.setAttribute("src", largedir + "/" + entryobj.getElementsByTagName("image")[0].childNodes[0].data);
  oppanel.appendChild(limg);
  oppanel.onclick = destroypane;
  bdy.appendChild(oppanel);
}

function destroypane() {
  var bdy = document.getElementsByTagName('body')[0];
  var opq = document.getElementById('opaque');
  bdy.removeChild(opq);
}

// Suche von Position und Groesse eines Objektes:      
function moFindPos(obj) {
  var curleft = 0; 
  var curtop = 0;
  var width = obj.clientWidth;
  var height = obj.clientHeight;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
      curtop = obj.offsetTop
      while (obj = obj.offsetParent) {
	curleft += obj.offsetLeft
	curtop += obj.offsetTop
      }
  }
  return [curleft,curtop,width,height];
}

// Wrapper für setzen eines bestimmten Styles 
function moSetStyle(node, style, value) {
  if (node.style.setProperty) {
    // Mozilla, Opera, Konqueror und Konsorten
    node.style.setProperty(style, value, null);
  } else {
    // IE 5, 6, 7
    if (style == "position") { node.style.position = value; }
    if (style == "left") { node.style.left = value; }
    if (style == "top") { node.style.top = value; }
    if (style == "height") { node.style.height = value; }
    if (style == "width") { node.style.width = value; }
    if (style == "border") { node.style.border = value; }
    if (style == "margin") { node.style.margin = value; }
  }
}

// Ggf. Größenänderung des Tabellenhoehe
function resizetfi() {
  var minheight = 540;
  var tf = document.getElementById('textfield');
  if (tf.clientHeight < minheight) {
    moSetStyle(tf, 'height', minheight + 'px');
  }
  return true;
}

/* Scrollen stoppen wenn mit Maus drüber, starten wenn wieder weg */
function scrollstart () { scroll = 1; }
function scrollstop () { scroll = 0; }

function scrollinit () {
  req.open("GET", imgdescs, true);
  req.onreadystatechange = parsexml;
  req.send(null);
  
}