// Steuerung der Galerie-Animationen
var IMGFADE = 200;
var TEXTFADE = 80;
var TEXTPAUSE = 20;

var saferStyle = {};
// geklaut aus Spry.Effect.Opacity.prototype.animate
saferStyle.setOpacity = function(elem, opacity)
{
 if(/MSIE/.test(navigator.userAgent))
 {
  var tmp = Spry.Effect.getStyleProp(elem,'filter');
  if (tmp) tmp = tmp.replace(/alpha\(opacity=[0-9]{1,3}\)/g, '');
  elem.style.filter = tmp + "alpha(opacity=" + Math.floor(opacity*100) + ")";
 }
 else elem.style.opacity = opacity;

 if (opacity == 0)
 {
  // elem.style.display = 'none';
 }

};

//helper class
var Class = function(properties)
{
 var _class = function() {return this.initialize.apply(this, arguments);};
 _class.prototype = properties;
 _class.constructor = Class;
 return _class;
};

//wrapper eines description containers
//wird von ImgObject benutzt
var DescriptionObject = new Class
({
 initialize: function(description)
 {
  this._node = description;
  this._fadeIn = new Spry.Effect.Fade
  (
   description,
   {
 duration: TEXTFADE,
 from: 0,
 to: 100,
 toggle: false
   }
  );
  this._fadeOut = new Spry.Effect.Fade
  (
   description,
   {
 duration: TEXTFADE,
 from: 100,
  to: 0,
  toggle: false
   }
  );
 },
 hide: function()
 {
  this._fadeOut.start();
 },
 reset: function()
 {
  if (this._fadeIn.isRunning) this._fadeIn.cancel();
  if (this._fadeOut.isRunning) this._fadeOut.cancel();
  saferStyle.setOpacity(this._node, 0);
 },
 show: function()
 {
  this._fadeIn.start();
 }
});

//wrapper eines img-nodes
//beherscht fade-in/-out
var ImgObject = new Class
({
 initialize: function(img, description)
 {
  this._node = img;
  this._description = new DescriptionObject(description);
  this._fadeIn = new Spry.Effect.Fade
  (
   img,
   {
    duration: IMGFADE,
    from: 0,
    to: 100
   }
  );
  this._fadeOut = new Spry.Effect.Fade
  (
   img,
   {
    duration: IMGFADE,
    from: 100,
    to: 0
   }
  );
 },
 hide: function()
 {
  this._fadeOut.start();
  this._description.hide();
 },
 reset: function()
 {
  if (this._fadeIn.isRunning) this._fadeIn.cancel();
  if (this._fadeOut.isRunning) this._fadeOut.cancel();
  saferStyle.setOpacity(this._node, 0);
  this._description.reset();
 },
 show: function()
 {
  var _this = this;
  this._fadeIn.start();
  window.setTimeout(function() {_this._description.show();},
   TEXTFADE + TEXTPAUSE);
 }
});

//container zum Sammeln/Cachen aller angefragter img-Nodes
var ImgContainer = new Class
({
 initialize: function()
 {
  this._nodes = {};
 },
 get: function(index)
 {
  var _nodeId = "pic" + index;
  if (this._nodes[_nodeId] === undefined)
  {
   var _parent = document.getElementById(_nodeId);
   if (_parent === null) return undefined;
   this._nodes[_nodeId] = new ImgObject(
    _parent.getElementsByTagName("img")[0],
 document.getElementById("imgDescr" + index));
  }
  return this._nodes[_nodeId];
 }
});

//vereint ImgContainer+ImgObject
//per .start(index) kann die Galerie gestartet werden
//per .reset() wird die Galerie auf ihren Initialzustand gesetzt
var Gallery = new Class
({
 initialize: function(maxIndex)
 {
  this._currentIndex = 0;
  this._nextIndex = 0;
  this._maxIndex = maxIndex;
  this._imgBackward = document.getElementById('imgBackward');
  this._imgForward = document.getElementById('imgForward');
  this._imgs = new ImgContainer();
  this._addEvents();
 },
 //setzen der Events auf die Navi
 _addEvents: function()
 {
  var _this = this;
  this._imgBackward.onclick = function () {_this.showLastImg();}
  this._imgForward.onclick = function () {_this.showNextImg();}
 },
 //Ein-Ausblendung der Navi per display=none/block
 _fixNavi: function()
 {
  if (this._nextIndex === this._maxIndex) this._imgForward.style.display = 'none';
  else this._imgForward.style.display = 'block';
  if (this._nextIndex === 0) this._imgBackward.style.display = 'none';
  else this._imgBackward.style.display = 'block';
 },
 //blendet Bilder ein/aus
 //ignore wird beim initialen Laden verwendet, da noch kein Bild angezeigt ist,
 //muss das Ausblenden des "angezeigten" Bildes ignoriert werden
 _showImg: function(ignore)
 {
  var _hidden = this._getHiddenImg();
  if (_hidden === undefined) return; //abbrechen weil inkonsistenter Zustand
  var _shown = this._getShownImg();
  if (_shown === undefined) return; //abbrechen weil inkonsistenter Zustand

  _hidden.show();
  if (ignore === undefined ? true : !ignore) _shown.hide();
  this._currentIndex = this._nextIndex;
  this._fixNavi();
 },
 _getHiddenImg: function()
 {
  return this._imgs.get(this._nextIndex);
 },
 _getShownImg: function()
 {
  return this._imgs.get(this._currentIndex);
 },
 //setzt die Galerie auf ihren Initialzustand
 reset: function()
 {
  this._getShownImg().reset();
  this._currentIndex = 0;
  this._nextIndex = 0;
 },
 //wird aufgerufen durch die Navi
 showLastImg: function()
 {
  this._nextIndex = this._currentIndex - 1;
  this._showImg();
 },
 //wird aufgerufen durch die Navi
 showNextImg: function()
 {
  this._nextIndex = this._currentIndex + 1;
  this._showImg();
 },
 //startet die Galerie bei Bild x, definiert durch nextIndex
 start: function(nextIndex)
 {
  var _index = nextIndex !== undefined ? nextIndex : 0;
  this._currentIndex = _index;
  this._nextIndex = _index;
  this._showImg(true);
 }
});

var Lightboxx = new Class
({
 initialize: function(maxIndex)
 {
  this._maxIndex = maxIndex;
 },
 _startGallery: function(startWith)
 {
  if (this._gallery === undefined)
  {
   this._galleryContainer = document.getElementById('lightbox');
   this._gallery = new Gallery(this._maxIndex);
  }
  this._galleryContainer.style.display = 'block';
  this._gallery.start(startWith);
 },
 lbstart: function (startWith)
 {
  this._startGallery(startWith);
 },
 lbclose: function()
 {
  this._galleryContainer.style.display = 'none';
  this._gallery.reset();
 }
});