var serverbasedir = "http://gallery.mattiasschlenker.de/albums/";
var albdir = "/";
var rwdimgsrc = "http://images.mattiasschlenker.de/blog.mattiasschlenker.de/rwdbutton.gif";
var fwdimgsrc = "http://images.mattiasschlenker.de/blog.mattiasschlenker.de/fwdbutton.gif";
var cbuttonsrc = "http://images.mattiasschlenker.de/blog.mattiasschlenker.de/closebutton.gif";
var minaddheight = 172;

// Suche von Position und Groesse eines Objektes:      
function galFindPos(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 galSetStyle(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; }
  }
}

// Panel zerstören
function galDestroyPanel() {
  if (document.getElementById("photopanel")) {
    var paneldiv = document.getElementById("photopanel");
    var bdy = document.getElementsByTagName("body")[0];
    var cbutton = document.getElementById("panel-closebutton");
    bdy.removeChild(cbutton);
    bdy.removeChild(paneldiv);
  }
}

// Unterliegenden Kasten strecken...
function galStretchField () {
  var bbox = document.getElementById("textfield");
  var coords = galFindPos(bbox);
  var maxheight = 0;
  for (i=0; i<allimages.length; i++) {
    maxheight = Math.max(maxheight, allimages[i][4]);
  }
  // alert(coords[3]);
  if (coords[3] < maxheight + minaddheight) {
    // galSetStyle(bbox, "height", (maxheight + minaddheight) + "px");
  }
}

// Panel aufbauen
function galBuildPanel () {
  // var upper = document.getElementById("up-right");
  var upper = document.getElementById("barupper");
  // var lower = document.getElementById("footer-right");
  var lower = document.getElementById("textfield");
  var dimup = galFindPos(upper);
  var dimlo = galFindPos(lower);
  var posleft = dimup[0];
  var postop = dimup[1];
  var width = dimup[2];
  var height = dimlo[1] - dimup[1] + dimlo[3];
  var paneldiv = document.createElement("div");
  var bdy = document.getElementsByTagName("body")[0];
  paneldiv.setAttribute("id", "photopanel");
  galSetStyle(paneldiv, "position", "absolute");
  // galSetStyle(paneldiv, "left", dimup[0] + "px");
  galSetStyle(paneldiv, "left", (dimlo[0] + 1) + "px");
  // galSetStyle(paneldiv, "top", (dimup[1] + dimup[3] + 1) + "px");
  galSetStyle(paneldiv, "top", (dimlo[1]) + "px");
  galSetStyle(paneldiv, "width", (dimlo[2] - 3) + "px");
  galSetStyle(paneldiv, "height", Math.max(900, (dimlo[3] + 1)) + "px");
  // paneldiv.onclick = galDestroyPanel;
  bdy.appendChild(paneldiv);
  galBuildClose();
  // alert(posleft + " " + postop + " " + width + " " + height);
}

function galBuildClose () {
  var paneldiv = document.getElementById("photopanel");
  var bdy = document.getElementsByTagName("body")[0];
  var pcoords = galFindPos(paneldiv);
  var cbutton = document.createElement("img");
  cbutton.setAttribute("src", cbuttonsrc);
  cbutton.setAttribute("id", "panel-closebutton");
  galSetStyle(cbutton, "position", "absolute");
  galSetStyle(cbutton, "left", (pcoords[0] + pcoords[2] - 26) + "px");
  galSetStyle(cbutton, "top", (pcoords[1] + 128) + "px");
  cbutton.onclick = galDestroyPanel;
  bdy.appendChild(cbutton);
}

// Alle Thumbnails mit onclicks verdrahten
function galWireOnclick () {
  var thumbtab = document.getElementById("mfs_gallery");
  var tcells = thumbtab.getElementsByTagName("a"); 
  for (var i=0; i<tcells.length; i++) {
    tcells[i].onclick = galItemClicked;
  }
}

function galItemClicked () {
  // alert(this.getAttribute("id"));
  galDestroyPanel();
  galStretchField();
  galBuildPanel();
  var thisitem = -1;
  for (var i=0; i<allimages.length; i++) {
    if ("mfs-img-" + i == this.getAttribute("id")) {
      thisitem = i;
    }
  }
  galPanelAppendNav(thisitem);
  galPanelAppendImg(thisitem);
  galAppendLargeLink(thisitem);
  // alert(allimages[thisitem]);
  return false;
}

function galPanelAppendImg(imgid) {
  var paneldiv = document.getElementById("photopanel");
  var imgdiv = document.createElement("div");
  var imgnode = document.createElement("img");
  imgnode.setAttribute("src", serverbasedir + allimages[imgid][1]);
  imgnode.setAttribute("id", "showedimage");
  imgnode.setAttribute("width", allimages[imgid][3]);
  imgnode.setAttribute("height", allimages[imgid][4]);
  imgdiv.appendChild(imgnode);
  paneldiv.appendChild(imgdiv);
}

function galAppendLargeLink(imgid) {
  var paneldiv = document.getElementById("photopanel");
  var linkdiv = document.createElement("div");
  var anode = document.createElement("a");
  // var tnode = document.createTextNode("Please click here to download this image in full resolution");
  var tnode = document.createTextNode("Bild in voller Auflösung betrachten");
  anode.setAttribute("id", "largeimagelink");
  anode.setAttribute("target", "_blank");
  anode.setAttribute("href", serverbasedir + allimages[imgid][2]);
  anode.appendChild(tnode);
  linkdiv.setAttribute("id", "linkdiv");
  linkdiv.appendChild(anode);
  paneldiv.appendChild(linkdiv);
}

function galJumpTo() {
  // alert(this.getAttribute("id"));
  var thisitem = -1;
  for (var i=0; i<allimages.length; i++) {
    if ("jump-to-image-" + i == this.getAttribute("id") || 
	"rwdfwd-to-image-" + i == this.getAttribute("id")) {
      thisitem = i;
    }
  }
  var imgdiv = document.getElementById("showedimage");
  var imglink = document.getElementById("largeimagelink");
  imglink.setAttribute("href", serverbasedir + allimages[thisitem][2]);
  imgdiv.setAttribute("src", serverbasedir + allimages[thisitem][1]);
  imgdiv.setAttribute("width", allimages[thisitem][3]);
  imgdiv.setAttribute("height", allimages[thisitem][4]);   
  var navdiv = document.getElementById("navtable");
  var navimages = navdiv.getElementsByTagName("img");
  navimages[0].setAttribute("id", "rwdfwd-to-image-" + ((thisitem + allimages.length  - 1) % allimages.length));
  navimages[1].setAttribute("id", "jump-to-image-" + ((thisitem + allimages.length  - 2) % allimages.length));
  navimages[1].setAttribute("src", serverbasedir + allimages[(thisitem + allimages.length  - 2) % allimages.length][0]);
  navimages[2].setAttribute("id", "jump-to-image-" + ((thisitem + allimages.length  - 1) % allimages.length));
  navimages[2].setAttribute("src", serverbasedir + allimages[(thisitem + allimages.length  - 1) % allimages.length][0]);
  navimages[3].setAttribute("id", "jump-to-image-" + ((thisitem + allimages.length  - 0) % allimages.length));
  navimages[3].setAttribute("src", serverbasedir + allimages[(thisitem + allimages.length  - 0) % allimages.length][0]);
  navimages[4].setAttribute("id", "jump-to-image-" + ((thisitem + allimages.length  + 1) % allimages.length));
  navimages[4].setAttribute("src", serverbasedir + allimages[(thisitem + allimages.length  + 1) % allimages.length][0]);
  navimages[5].setAttribute("id", "jump-to-image-" + ((thisitem + allimages.length  + 2) % allimages.length));
  navimages[5].setAttribute("src", serverbasedir + allimages[(thisitem + allimages.length  + 2) % allimages.length][0]);
  navimages[6].setAttribute("id", "rwdfwd-to-image-" + ((thisitem + allimages.length + 1) % allimages.length));
  // alert(allimages[thisitem]);
  return false;
}

function galPanelAppendNav(imgid) {
  var paneldiv = document.getElementById("photopanel");
  var navdiv = document.createElement("div");
  var navtab = document.createElement("table");
  navtab.setAttribute("id", "navtable");
  var navtbd = document.createElement("tbody");
  var navtr = document.createElement("tr");
  var rwdtd = document.createElement("td");
  var rwdimg = document.createElement("img");
  rwdimg.setAttribute("src", rwdimgsrc);
  rwdimg.setAttribute("id", "rwdfwd-to-image-" + ((imgid + allimages.length  - 1) % allimages.length));
  rwdimg.onclick = galJumpTo;
  rwdtd.appendChild(rwdimg);
  var fwdtd = document.createElement("td");
  var fwdimg = document.createElement("img");
  fwdimg.setAttribute("src", fwdimgsrc);
  fwdimg.setAttribute("id", "rwdfwd-to-image-" + ((imgid + allimages.length  + 1) % allimages.length));
  fwdimg.onclick = galJumpTo;
  fwdtd.appendChild(fwdimg);
  var nav0 = document.createElement("td");
  var img0 = document.createElement("img");
  img0.setAttribute("src", serverbasedir + allimages[(imgid + allimages.length  - 2) % allimages.length][0]);
  img0.setAttribute("id", "jump-to-image-" + ((imgid + allimages.length  - 2) % allimages.length));
  img0.onclick = galJumpTo;
  nav0.appendChild(img0);
  var nav1 = document.createElement("td");
  var img1 = document.createElement("img");
  img1.setAttribute("src", serverbasedir + allimages[(imgid + allimages.length  - 1) % allimages.length][0]);
  img1.setAttribute("id", "jump-to-image-" + ((imgid + allimages.length  - 1) % allimages.length));
  img1.onclick = galJumpTo;
  nav1.appendChild(img1);
  var nav2 = document.createElement("td");
  var img2 = document.createElement("img");
  img2.setAttribute("src", serverbasedir + allimages[imgid][0]);
  img2.setAttribute("id", "jump-to-image-" + imgid);
  img2.onclick = galJumpTo;
  nav2.appendChild(img2);
  var nav3 = document.createElement("td");
  var img3 = document.createElement("img");
  img3.setAttribute("src", serverbasedir + allimages[(imgid + 1) % allimages.length][0]);
  img3.setAttribute("id", "jump-to-image-" + ((imgid + 1) % allimages.length));
  img3.onclick = galJumpTo;
  nav3.appendChild(img3);
  var nav4 = document.createElement("td");
  var img4 = document.createElement("img");
  img4.setAttribute("src", serverbasedir + allimages[(imgid + 2) % allimages.length][0]);
  img4.setAttribute("id", "jump-to-image-" + ((imgid + 2) % allimages.length));
  img4.onclick = galJumpTo;
  nav4.appendChild(img4);
  navtr.appendChild(rwdtd);
  navtr.appendChild(nav0);
  navtr.appendChild(nav1);
  navtr.appendChild(nav2);
  navtr.appendChild(nav3);
  navtr.appendChild(nav4);
  navtr.appendChild(fwdtd);
  navtbd.appendChild(navtr);
  navtab.appendChild(navtbd);
  navdiv.appendChild(navtab);
  paneldiv.appendChild(navdiv);
}

// function run() {
//  galWireOnclick();
  // galBuildPanel();
  // alert("Hallo Welt!");
// }