var faImagePath = 'http://images.cycle-sport.de/velo/gallery/albums/startseite/';

// n zufällige Images ziehen

function faFindRandomImages (length) {
  if (faImages[0].length > length) {
    var retval = new Array();
    while (retval.length < length) {
      var randval = Math.floor(Math.random() * faImages[0].length);
      if (!faArrayContains(retval, randval)) {
	retval.push(randval);
      }
    }
  }
  return retval;
}

function faArrayContains (array, value) {
  for (i=0;i<array.length;i++) {
    if (array[i] == value) { return true; }
  } 
  return false;
}

// Suche von Position und Groesse eines Objektes:      
function faFindPos(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 faSetStyle(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 faResize() {
  var minheight = 620;
  var tf = document.getElementById('textfield');
  var upr = document.getElementById('upper-right');
  if (tf.clientHeight + upr.clientHeight < minheight) {
    faSetStyle(tf, 'height', minheight - upr.clientHeight + 'px');
  }
  return true;
}

// Kleine Tabelle für die neun Vorschaubilder bauen
function faPreviewTable () {
  var sbr = document.getElementById("sidebar");
  var pvt = document.createElement("table");
  var tbody = document.createElement("tbody");
  var cols = 3;
  var row = 0;
  pvt.setAttribute('id', 'pvtable');
  tbody.setAttribute('id', 'pvtbody');
  pvt.appendChild(tbody);
  sbr.appendChild(pvt);
  for (var i=0;i<faRandomImages.length;i++) {
    if ((i % cols) == 0) {
      row += 1;
      // alert(row);
      tmptr = document.createElement("tr");
      tmptr.setAttribute("id", "prevthumbs-row-" + row);
      tbody.appendChild(tmptr);
    }
    var currtr = document.getElementById("prevthumbs-row-" + row);
    var td = document.createElement("td");
    currtr.appendChild(td);
    td.setAttribute('class', 'pvthumb');
    var img = document.createElement("img");
    td.appendChild(img);
    img.setAttribute("src", faImagePath + faImages[0][faRandomImages[i]][0]);
    img.setAttribute("id", "fa-sidebar-navigate-to-" + faRandomImages[i]);
    img.setAttribute("height", 64);
    img.setAttribute("width", 64);
    img.setAttribute("alt", i);
    faSetStyle(img, "border", "2px solid #ff7200");
    img.onclick = faPreviewClicked;
  }
  return true;
}

// Fläche Opaque erstellen: Fläche, Navigationsbuttons, Button fürs Schließen
function faOpaquePanel () {
  var bdy = document.getElementsByTagName('body')[0];
  var tfi = document.getElementById('textfield');
  var oppanel = document.createElement("div");
  var upr = document.getElementById('upper-right');
  var cbt = document.getElementById('closebutton');
  var positions = faFindPos(tfi);
  var uprpos = faFindPos(upr);
  closebutton = document.createElement("img");
  closebutton.setAttribute("src", "http://images.cycle-sport.de/velo/images/closebutton.png");
  closebutton.setAttribute("id", "closebutton");
  oppanel.setAttribute("id", "opaque");
  faSetStyle(oppanel, 'position', 'absolute');
  if (!tfi.style.setProperty) {
    faSetStyle(oppanel, 'left', (positions[0] + 1) + 'px', null);
    faSetStyle(oppanel, 'top', uprpos[1] + 'px', null);
    faSetStyle(oppanel, 'width', (positions[2]) + 'px', null);
    faSetStyle(oppanel, 'height', (positions[3]  + uprpos[3]) + 'px', null);
  } else {
    faSetStyle(oppanel, 'left', positions[0] + 'px', null);
    faSetStyle(oppanel, 'top', uprpos[1] + 'px', null);
    faSetStyle(oppanel, 'width', (positions[2] + 2) + 'px', null);
    faSetStyle(oppanel, 'height', (positions[3]  + uprpos[3]) + 'px', null);
  }
  closebutton.onclick = faClosePanel;
  oppanel.appendChild(closebutton);
  bdy.appendChild(oppanel);
  return true;
}

// Thumbnails für Navigation 
function faNavThumbs (imgid) {
  var bdy =  document.getElementsByTagName("body")[0];
  var divnav = document.createElement("div");
  var tfi = document.getElementById('textfield');
  var upr = document.getElementById('upper-right');
  var positions = faFindPos(tfi);
  var uprpos = faFindPos(upr);
  var posx = (positions[2] - 577) / 2 + positions[0];
  var posy = uprpos[1] + 12;
  var currimage = imgid; 
  var backbutton = document.createElement("img");
  var fwdbutton = document.createElement("img");
  backbutton.setAttribute("src", "http://images.cycle-sport.de/velo/images/button-rwd.gif");
  backbutton.setAttribute("id", "farwdnav");
  backbutton.setAttribute("title", "Ein Bild zurueck...");
  backbutton.setAttribute("height", 64);
  backbutton.setAttribute("width", 36);
  divnav.appendChild(backbutton);
  faSetStyle(backbutton, "margin", "6px");
  divnav.setAttribute("id", "navthumbs");
  faSetStyle(divnav, 'position', 'absolute');
  faSetStyle(divnav, 'left', posx + 54 + 'px');
  faSetStyle(divnav, 'top', posy + 'px');
  // Jetzt die eigentlichen Thumbnails
  var thumbimages = [
		     ((currimage - 2 + faImages[faImgSet].length) % faImages[faImgSet].length),
		     ((currimage - 1 + faImages[faImgSet].length) % faImages[faImgSet].length),
		     ((currimage + 0 + faImages[faImgSet].length) % faImages[faImgSet].length),
		     ((currimage + 1 + faImages[faImgSet].length) % faImages[faImgSet].length),
		     ((currimage + 2 + faImages[faImgSet].length) % faImages[faImgSet].length)
		     ];
  // alert(thumbimages);
  for (var i = 0;i<thumbimages.length;i++) {
    var fimage = thumbimages[i];
    // alert(fimage);
    var thumb = document.createElement("img");
    thumb.setAttribute("src", faImagePaths[faImgSet] + faImages[faImgSet][fimage][0]);
    thumb.setAttribute("alt", fimage);
    thumb.setAttribute("id", "fa-navigate-to-" + fimage);
    thumb.setAttribute("class", "uppernavthumb");
    thumb.setAttribute("height", "64");
    thumb.setAttribute("width", "64");
    faSetStyle(thumb, "border", "2px solid #ff7200");
    faSetStyle(thumb, "margin", "3px");
    thumb.onclick = faThumbClicked;
    divnav.appendChild(thumb);
  }
  
  fwdbutton.setAttribute("src", "http://images.cycle-sport.de/velo/images/button-fwd.gif");
  fwdbutton.setAttribute("id", "fafwdnav");
  fwdbutton.setAttribute("title", "Ein Bild vor...");
  fwdbutton.setAttribute("height", 64);
  fwdbutton.setAttribute("width", 36);
  divnav.appendChild(fwdbutton);
  faSetStyle(fwdbutton, "margin", "6px");
  bdy.appendChild(divnav);
  
  backbutton.onclick = faFwdRwd;
  fwdbutton.onclick = faFwdRwd;

  return true;
}


// Das eigentliche Bild
function faPlaceImage(num) {
  var imgnode = null;
  var bdy = document.getElementsByTagName('body')[0];
  var imgid = (num + faImages[faImgSet].length) % faImages[faImgSet].length;
  faCurrImg = imgid;
  var imgx = faImages[faImgSet][imgid][2];
  var imgy = faImages[faImgSet][imgid][3];
  var tfi = document.getElementById('textfield');
  var upr = document.getElementById('upper-right');
  var positions = faFindPos(tfi);
  var uprpos = faFindPos(upr);
  // Aus Bildgröße und Position des Feldes die Bildposition berechnen
  var posx = (positions[2] - imgx) / 2 + positions[0];
  var posy = ((positions[3] + uprpos[3] - imgy) / 2) + uprpos[1];
  // Y-Position einschränken, max 180px vom Rand weg:
  if (posy > (uprpos[1] + 180)) {posy = uprpos[1] + 180;}
  // Aber minimal 90px vom Rand weg
  if (posy < (uprpos[1] + 90)) {posy = uprpos[1] + 90;}
  if (document.getElementById('img-current')) {
    tmpimg = document.getElementById('img-current');
    bdy.removeChild(tmpimg);
  } 
  imgnode = document.createElement("img");
  imgnode.setAttribute("id", "img-current");
  imgnode.setAttribute("src", faImagePaths[faImgSet] + faImages[faImgSet][imgid][1]);
  imgnode.setAttribute("alt", imgid);
  imgnode.setAttribute("height", imgy);
  imgnode.setAttribute("width", imgx);
  faSetStyle(imgnode, 'position','absolute');
  faSetStyle(imgnode, 'left', posx + 'px');
  faSetStyle(imgnode, 'top', posy + 'px');  
  // Falls Navigation besteht, entfernen
  if (document.getElementById('navthumbs')) {
    tmpnavthumbs = document.getElementById('navthumbs');
    bdy.removeChild(tmpnavthumbs);
  }
  faNavThumbs(imgid);
  bdy.appendChild(imgnode);
  return true;
}

// Klick auf ein Thumbnail
function faPreviewClicked() {  
  faImgSet = 0;
  var raw = this.getAttribute("id");
  faNewPreviewClicked(raw)
  return true;
  
  // var raw = this.getAttribute("id");
  // var nextimage = 0;
  // faResize();
  // if(!document.getElementById('opaque')){
  //  faOpaquePanel(); 
  //  // faUpperNavButtons();
  // }
  // for (var i = 0;i<faImages[0].length;i++) {
  //  if (raw == ("fa-sidebar-navigate-to-" + i)) {
  //    nextimage = i;
  //  }
  // }
  // faPlaceImage(nextimage);
  // return true;
}

// Vor und zurueck...
function faFwdRwd () {
  var currimg = faCurrImg;
  if (this.getAttribute("id") == "fafwdnav") {
    faPlaceImage(currimg + 1);
  } else if (this.getAttribute("id") == "farwdnav") {
    faPlaceImage(currimg - 1);
  }
  return true;
}

// Ein bestimmes Thumbnail wurde angeklickt...
function faThumbClicked () {
  var raw = this.getAttribute("id");
  var nextimage = 0;
  for (var i = 0;i<faImages[0].length;i++) {
    if (raw == ("fa-navigate-to-" + i)) {
      nextimage = i;
    }
  }
  faPlaceImage(nextimage);
  return true;
}

// Schließen und aufräumen
function faClosePanel() {
  var bdy = document.getElementsByTagName('body')[0];
  var oppanel = document.getElementById('opaque');
  // var fwdbutton = document.getElementById('fafwdnav');
  // var rwdbutton = document.getElementById('farwdnav');
  var imgnode = document.getElementById('img-current');
  var navthumbs = document.getElementById('navthumbs');
  // bdy.removeChild(rwdbutton);
  // bdy.removeChild(fwdbutton);
  bdy.removeChild(navthumbs);
  bdy.removeChild(imgnode);
  bdy.removeChild(oppanel);
}