(function() {

  var
    thumbs_links_text = null,
    thumbs_links = null,
    foto_text = null,
    current = 0,
    imgs = null,
    half_container_width = 0,
    pfeil_l = null,
    pfeil_r = null;

  var addEvent = function(obj, eventName, handler) {
    if (obj.addEventListener) {
      obj.addEventListener(eventName, handler, false);
      return true;
    } else if (obj.attachEvent) {
      return obj.attachEvent('on' + eventName, handler);
    } 
    return false;
  };

  var calc_width = function() {
    var width = 0;
    if (current == 0) { // Das erste Bild nicht zentrieren
      return width;
    }
    for (var i = 0; i < current; i++) {
      width += imgs[i].width;
    }
    if (current == (imgs.length - 1)) { // Das letze Bild nicht zentrieren
      return width - 2 * half_container_width + imgs[current].width;
    }
    /* Bild zentrieren */
    width -= half_container_width - Math.floor(imgs[current].width / 2);
    return width;
  };
  
  
  var removeClass = (function() {
    var d = document.createElement('div');
    if (d.classList) {
    	return function(element, css) {
    		element.classList.remove(css);
    	};
    } else {
    	return function(element, css) {
    		var r = new RegExp("\\s*\\b" + css + "\\b\\s*");
    		element.className = element.className.replace(r, ' ');
    	};
    }
  }());
  
  var addClass = (function() {
	var d = document.createElement('div');
	if (d.classList) {
		return function(element, css) {
			element.classList.add(css);
		};
	} else {
	    return function(element, css) {
	    	element.className = element.className + " " + css;
	    };
	}
  }());

  var update = function(new_current) {
    removeClass(imgs[current], 'current');  
    current = new_current;
    addClass(imgs[current], 'current');
    set_foto_text(imgs[current]);
    var width = calc_width() * -1;
    document.getElementById('fotos').style.left = width + 'px';
    if (current == 0) {
      pfeil_l.className = 'grau';
    } else {
      pfeil_l.className = '';
    }
    if (current == (imgs.length - 1)) {
      pfeil_r.className = 'grau';
    } else {
      pfeil_r.className = '';
    }
  };

  var left_click = function(event) {
    if (current > 0) {
      update(current - 1);
    }
  };

  var right_click = function(event) {
    if (current < (imgs.length - 1)) {
      update(current + 1);
    }
  };

  var jump_to = function(imgelement) {
    var filename = imgelement.src.split('/').pop();
    for (var i = 0, l = imgs.length; i < l; i++) {
      if (imgs[i].src.split('/').pop() == filename) {
        break;
      }
    }
    update(i);
  };
  
  var set_foto_text = function(foto) {
    if (foto_text) {
      while (foto_text.hasChildNodes()) {
        foto_text.removeChild(foto_text.firstChild);
      }
      if (foto.nodeName == 'IMG') {
        var name = foto.src.substring(foto.src.lastIndexOf('/') + 1);
        var title = bildtexte[name].Titel;
        var alt = bildtexte[name].Alternativ;
        foto_text.innerHTML = alt;
        foto_text.insertBefore(document.createElement('br'), foto_text.firstChild);
        foto_text.insertBefore(document.createTextNode(title), foto_text.firstChild);
      }
    }
  };

  var thumb_click = function(event) {
    var target = event.target || event.srcElement;
    jump_to(target);
  };
  
  var thumb_hover = function(event) {
    var target = event.target || event.srcElement;
    if (target.nodeName == 'IMG') {
      var offset = target.parentNode.offsetTop
      var name = target.src.substring(target.src.lastIndexOf('/') + 1);
      var title = bildtexte[name].Titel;
      thumbs_links_text.nodeValue = title;
      thumbs_links.style.top = offset + "px";
    }
  };
  
  var thumb_hover_clear = function(event) {
    thumbs_links_text.nodeValue = "";
  };

  var init = function(event) {
	thumbs_links = document.getElementById('thumbs_links');
	if (!thumbs_links) {
		return;
	}
	thumbs_links_text = thumbs_links.firstChild;
	foto_text = document.getElementById('foto_text');
	if (foto_text) {
		foto_text = foto_text.getElementsByTagName("td")[0];
	}
	pfeil_l = document.getElementById('pfeil_l');
    pfeil_r = document.getElementById('pfeil_r');
    var fotos = document.getElementById('fotos');
    if (fotos) {
      imgs = fotos.getElementsByTagName('img');
    }
    if (imgs && imgs.length && imgs.length > 0) {
      addEvent(pfeil_l, 'click', left_click);
      addEvent(pfeil_r, 'click', right_click);
      var w = 0;
      if (document.defaultView) {
        w = document.defaultView.getComputedStyle(document.getElementById('foto'), "").getPropertyValue('width');
      } else {
        w = document.getElementById('foto').currentStyle.width;
      }
      half_container_width = Math.floor(parseInt(w, 10) / 2);
      addEvent(document.getElementById('thumbs'), 'click', function(event) { thumb_click(event); });
      addEvent(document.getElementById('thumbs'), 'mouseover', function(event) { thumb_hover(event); });
      addEvent(document.getElementById('thumbs'), 'mouseout', function(event) { thumb_hover_clear(event); });
      update(0);
    }
  };

  addEvent(window, 'load', init);
  
}());