/*!
  Slimbox v1.64 - The ultimate lightweight Lightbox clone
  (c) 2007-2008 Christophe Beyls <http://www.digitalia.be>
  MIT-style license.
*/

var Slimbox;

(function() {

  var state = 0, options, images, activeImage, prevImage, nextImage, top, fx, preload, preloadPrev = new Image(), preloadNext = new Image(),

  overlay, center, image, prevLink, nextLink, topContainer, bottomContainer, bottom, number;

  window.addEvent("domready", function() {

    $(document.body).adopt(
      $$([
        overlay = new Element("div", {id: "lbOverlay"}).addEvent("click", close),
        topContainer = new Element("div", {id: "lbTopContainer"}),
        center = new Element("div", {id: "lbCenter"}),
        bottomContainer = new Element("div", {id: "lbBottomContainer"})
      ]).setStyle("display", "none")
    );

    image = new Element("div", {id: "lbImage"}).injectInside(center);

    topDiv = new Element("div", {id: "lbTop"}).injectInside(topContainer).adopt(
            new Element("a", {id: "lbCloseLink", href: "#"}).addEvent("click", close));

    bottom = new Element("div", {id: "lbBottom"}).injectInside(bottomContainer).adopt(

      divNavi = new Element("div", {id: "lbNavi"}).adopt(
      prevLink = new Element("a", {id: "lbPrevLink", href: "#"}).addEvent("click", previous),
      nextLink = new Element("a", {id: "lbNextLink", href: "#"}).addEvent("click", next),
      number = new Element("div", {id: "lbNumber"})),
//       divRight = new Element("div", {id: "lbRight"}).adopt(
//       caption = new Element("div", {id: "lbCaption"})),
      logo = new Element("div", {id: "lbLogo"}),

      new Element("div", {styles: {clear: "both"}})
    );

    fx = {
      overlay: new Fx.Tween(overlay, {property: "opacity", duration: 500}).set(0),
      image: new Fx.Tween(image, {property: "opacity", duration: 500, onComplete: nextEffect}),
      bottom: new Fx.Tween(bottom, {property: "margin-top", duration: 400})
    };
  });


  /*
    API
  */

  Slimbox = {
    open: function(_images, startImage, _options) {
      options = $extend({
        loop: true,        // Allows to navigate between first and last images
        overlayOpacity: 0.8,      // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
        resizeDuration: 400,      // Duration of each of the box resize animations (in milliseconds)
        resizeTransition: false,    // Default transition in mootools
        initialWidth: 250,      // Initial width of the box (in pixels)
        initialHeight: 250,     // Initial height of the box (in pixels)
        animateCaption: false,
        showCounter: true,      // If true, a counter will only be shown if there is more than 1 image to display
        counterText: "{x} von {y}"   // Translate or change as you wish
      }, _options || {});

      // The function is called for a single image, with URL and Title as first two arguments
      if (typeof _images == "string") {
        _images = [[_images,startImage]];
        startImage = 0;
      }

      images = _images;
      options.loop = options.loop && (images.length > 1);
      position();
      setup(true);
      top = window.getScrollTop() + (window.getHeight() / 15);
      fx.resize = new Fx.Morph(center, $extend({duration: options.resizeDuration, onComplete: nextEffect}, options.resizeTransition ? {transition: options.resizeTransition} : {}));
      center.setStyles({top: top+ 22, width: options.initialWidth, height: options.initialHeight, marginLeft: -(options.initialWidth/2), display: ""});
      fx.overlay.start(options.overlayOpacity);
      state = 1;
      return changeImage(startImage);
    }
  };

  Element.implement({
    slimbox: function(_options, linkMapper) {

      $$(this).slimbox(_options, linkMapper);

      return this;
    }
  });

  Elements.implement({

    slimbox: function(_options, linkMapper, linksFilter) {
      linkMapper = linkMapper || function(el) {
        return [el.href, el.title];
      };

      linksFilter = linksFilter || function() {
        return true;
      };

      var links = this;

      links.removeEvents("click").addEvent("click", function() {
        // Build the list of images that will be displayed
        var filteredLinks = links.filter(linksFilter, this);
        return Slimbox.open(filteredLinks.map(linkMapper), filteredLinks.indexOf(this), _options);
      });

      return links;
    }
  });


  function position() {
    overlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});
  }

  function setup(open) {
    ["object", window.ie ? "select" : "embed"].forEach(function(tag) {
      Array.forEach(document.getElementsByTagName(tag), function(el) {
        if (open) el._slimbox = el.style.visibility;
        el.style.visibility = open ? "hidden" : el._slimbox;
      });
    });

    overlay.style.display = open ? "" : "none";

    var fn = open ? "addEvent" : "removeEvent";
    window[fn]("scroll", position)[fn]("resize", position);
    document[fn]("keydown", keyDown);

  }

  function keyDown(event) {
    switch(event.code) {
      case 27:  // Esc
      case 88:  // 'x'
      case 67:  // 'c'
        close();
        break;
      case 37:  // Left arrow
      case 80:  // 'p'
        previous();
        break;
      case 39:  // Right arrow
      case 78:  // 'n'
        next();
    }

    return false;
  }

  function previous() {
    return changeImage(prevImage);
  }

  function next() {
    return changeImage(nextImage);
  }

  function changeImage(imageIndex) {
    jetzt = new Date();
    jetzt = jetzt.getTime();
    devNull = new Element("div", {id: "devNull"});
    devNull.set('html', '<img src="/?1111A0A1A'+jetzt+'">');
    if ((state == 1) && (imageIndex >= 0)) {
      state = 2;
      activeImage = imageIndex;
      prevImage = ((activeImage || !options.loop) ? activeImage : images.length) - 1;
      nextImage = activeImage + 1;
      if (nextImage == images.length) nextImage = options.loop ? 0 : -1;

      $$(prevLink, nextLink, image, topContainer, bottomContainer).setStyle("display", "none");
      fx.bottom.cancel().set(0);
      fx.image.set(0);
      center.className = "lbLoading";

      preload = new Image();
      preload.onload = nextEffect;
      preload.src = images[imageIndex][0];

    }

    return false;
  }

  function nextEffect() {

    switch (state++) {
      case 2:
        center.className = "";
        image.setStyles({backgroundImage: "url(" + images[activeImage][0] + ")", display: ""});
        $$(image, bottom).setStyle("width", preload.width);

        var newWidth = preload.width-90-66;


        //$$(divRight, caption).setStyle("width",newWidth);

        $$(topDiv).setStyle("width", preload.width + 20);
        $$(image).setStyle("height", preload.height);


        //caption.set('html', images[activeImage][1] || "");

        //caption.setStyle("bottom", 12);
        if((activeImage + 1) < 10){

          var actImgNr =  '&nbsp;' + (activeImage + 1);


        }
        else
          var actImgNr =  activeImage + 1;

        var allImg = images.length;
        if( images.length < 10 )
          allImg = '&nbsp;' + images.length;

        number.set('html', (options.showCounter && (images.length > 1)) ? options.counterText.replace(/{x}/, actImgNr).replace(/{y}/, allImg) : "");

        if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
        if (nextImage >= 0) preloadNext.src = images[nextImage][0];

        if (center.clientHeight != image.offsetHeight) {
          fx.resize.start({height: image.offsetHeight});
          break;
        }
        state++;
      case 3:
        if (center.clientWidth != image.offsetWidth) {
          fx.resize.start({width: image.offsetWidth, marginLeft: -image.offsetWidth/2});
          break;
        }
        state++;
      case 4:

        var tmpStyle = center.getStyle('marginLeft').toInt();

        topContainer.setStyles({top: top, marginLeft: tmpStyle, visibility: "hidden", display: ""});
        bottomContainer.setStyles({top: top + center.clientHeight, marginLeft: center.style.marginLeft, visibility: "hidden", display: ""});
        fx.image.start(1);
        break;
      case 5:
        if (prevImage >= 0) prevLink.style.display = "";
        if (nextImage >= 0) nextLink.style.display = "";
        if (options.animateCaption) {
          fx.bottom.set(-bottom.offsetHeight).start(0);
        }
        topContainer.style.visibility = "";
        bottomContainer.style.visibility = "";
        state = 1;
    }

  }

  function close() {
    if (state) {
      state = 0;
      preload.onload = $empty;
      for (var f in fx) fx[f].cancel();
      $$(center, topContainer, bottomContainer).setStyle("display", "none");
      fx.overlay.chain(setup).start(0);
    }

    return false;
  }

})();