var inlineLightbox = Class.create();

var $isFading = false;
var $fadingProcess = "";

inlineLightbox.prototype = {

  initialize: function() { },
  
  create: function(elm, i, noarrows, autoplay, thumbslider) {
    
    this.index = i;
    this.noarrows = noarrows;
    this.autoplay = false;
    this.thumbslider = thumbslider
    this.fadespeed = 1.2;
    this.waitspeed = 3
    if(thumbslider)this.fadespeed = 1;
    
    this.objLightbox = document.createElement("div");
    this.objLightbox.className = 'lightbox';
    this.objLightbox.style.display = 'none';
    elm.insertBefore(this.objLightbox, elm.firstChild);

    this.objOuterImageContainer = document.createElement("div");
    this.objOuterImageContainer.className = 'outerImageContainer';
    this.objLightbox.appendChild(this.objOuterImageContainer);

    this.objImageContainer = document.createElement("div");
    this.objImageContainer.className = 'imageContainer';
    this.objOuterImageContainer.appendChild(this.objImageContainer);

    this.objLightboxImage = document.createElement("img");
    this.objLightboxImage.className = 'lightboxImage';
    this.objLightboxImage.setAttribute('lbId',i);
    this.objImageContainer.appendChild(this.objLightboxImage);
    
    // START: on development by jan...
    this.objLightboxImageBuffer = document.createElement("img");
    this.objLightboxImageBuffer.className = 'lightboxImageBuffer';
    this.objLightboxImageBuffer.style.display = 'none'
    this.lightboxFirstLoad = true
    this.objImageContainer.appendChild(this.objLightboxImageBuffer);
    
    // END: ...on development by jan

    if(!noarrows) {
      this.objHoverNav = document.createElement("div");
      this.objHoverNav.className = 'hoverNav';
      this.objImageContainer.appendChild(this.objHoverNav);
  
      this.objPrevLink = document.createElement("a");
      this.objPrevLink.className = 'prevLink';
      this.objPrevLink.setAttribute('href','#');
      this.objPrevLink.setAttribute('lbId',i);
      this.objHoverNav.appendChild(this.objPrevLink);
  
      this.objNextLink = document.createElement("a");
      this.objNextLink.className = 'nextLink';
      this.objNextLink.setAttribute('href','#');
      this.objNextLink.setAttribute('lbId',i);
      this.objHoverNav.appendChild(this.objNextLink);
    }
    // START: on development by jan...
    if(thumbslider) {  

      thumbnails = elm.getElementsByClassName('thumbnails')[0];
      thumbnails.style.display = 'none';
      new Effect.BlindUp(thumbnails, {duration: 0, scaleContent: true});
      
      this.objLightboxToolbar = document.createElement("div");
      this.objLightboxToolbar.className = 'toolbar';
      this.objLightboxToolbar.style.position = 'absolute';
      this.objLightboxToolbar.style.left = '0';
      this.objLightboxToolbar.style.right = '0';
      this.objLightboxToolbar.style.bottom = '-42px';
      this.objLightboxToolbar.style.height = '30px';
      this.objLightboxToolbar.style.textAlign = 'right';
      
      this.objLightbox.style.marginBottom = '42px';
      
      this.objLightbox.appendChild(this.objLightboxToolbar);
      
      this.objGalerieIcon = document.createElement("img");
      this.objGalerieIcon.className = 'galerie icon';
      this.objGalerieIcon.style.cursor = 'pointer'
      this.objGalerieIcon.setAttribute('src','/con/cms/images/galerie-icon.gif');
      this.objGalerieIcon.onclick = function() {
        speed = 0.7
        if(!thumbnails.hasClassName('blindeable')){
          thumbnails.toggleClassName('show')
          thumbnails.addClassName('blindeable')
          if (thumbnails.hasClassName('show') ) {
            new Effect.BlindDown(thumbnails, {duration: speed, scaleContent: true});
            setTimeout(function() {thumbnails.removeClassName('blindeable')},(speed+0.02)*1000);
          }
          else {
            new Effect.BlindUp(thumbnails, {duration: speed, scaleContent: true});
            setTimeout(function() {thumbnails.removeClassName('blindeable')},(speed+0.02)*1000);
          }
        }
      }
      this.objGalerieIcon.onmouseover = function() {
        
      }

      this.objLightboxToolbar.appendChild(this.objGalerieIcon);
    }
    // END: ...on development by jan

    this.objLoading = document.createElement("div");
    this.objLoading.className = 'loading';
    this.objImageContainer.appendChild(this.objLoading);

    this.objLoadingLink = document.createElement("a");
    this.objLoadingLink.className = 'loadingLink';
    this.objLoadingLink.setAttribute('href','#');
    this.objLoadingLink.setAttribute('lbId',i);
    this.objLoadingLink.onclick = function() { myInlineLightbox.lightboxes[this.getAttribute("lbId")].end(); return false; };
    this.objLoading.appendChild(this.objLoadingLink);

    this.objLoadingImage = document.createElement("img");
    this.objLoadingImage.setAttribute('src', fileLoadingImage);
    this.objLoadingLink.appendChild(this.objLoadingImage);

    this.objImageDataContainer = document.createElement("div");
    this.objImageDataContainer.className = 'imageDataContainer';
    this.objImageDataContainer.setAttribute('lbId',i);
    this.objLightbox.appendChild(this.objImageDataContainer);

    this.objImageData = document.createElement("div");
    this.objImageData.className = 'imageData';
    this.objImageDataContainer.appendChild(this.objImageData);

    this.objImageDetails = document.createElement("div");
    this.objImageDetails.className = 'imageDetails';
    this.objImageData.appendChild(this.objImageDetails);

    this.objCaption = document.createElement("span");
    this.objCaption.className = 'caption';
    this.objImageDetails.appendChild(this.objCaption);
  },

  //
  //  start()
  //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  //
  start: function(imageLink) {
    // START: on development by jan...
    if(this.fading)
      return;
    
    this.fading = true;
    
    // END: ...on development by jan
    
    hideSelectBoxes();
    
    this.imageArray = [];
    this.imageNum = 0;

    if (!this.objLightbox.parentNode.getElementsByTagName){ return; }
    var anchors = this.objLightbox.parentNode.getElementsByTagName('a');

    // if image is NOT part of a set..
    if((imageLink.getAttribute('rel') == 'inlinebox')){
      // add single image to imageArray
      this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));     
    } else {
    // if image is part of a set..

      // loop through anchors, find other images in set, and add them to imageArray
      for (var i=0; i<anchors.length; i++){
        var anchor = anchors[i];
        if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
          this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
        }
      }
      this.imageArray.removeDuplicates();
      while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++;}
    }

    Element.show(this.objLightbox);

    this.changeImage(this.imageNum);
  },

  //
  //  changeImage()
  //  Hide most elements and preload image in preparation for resizing image container.
  //
  changeImage: function(imageNum) {
    if ( ! $isFading ) {
      // reseting the timeout, when loading image
      window.clearTimeout( $fadingProcess );
      
      $isFading = true;
      if(imageNum > this.imageArray.length - 1) imageNum = 0;
      if(imageNum < 0) imageNum = this.imageArray.length - 1;
  
      this.activeImage = imageNum;  // update global var
  
      // hide elements during transition
      //Element.show(this.objLoading);
      
      
      // START: on development by jan...
      this.objLightboxImageBuffer.src = this.objLightboxImage.src;
      
      var enableFade = function() {
        $isFading = false;
        this.fading = false;
        window.clearTimeout( fading );
      }
      
      fading = window.setTimeout(enableFade.bind(this), this.fadespeed*1000);
      
      // END: ...on development by jan
      
      if(!this.noarrows) {
        Element.hide(this.objHoverNav);
        Element.hide(this.objPrevLink);
        Element.hide(this.objNextLink);
      }
      Element.hide(this.objImageDataContainer); 
  
      
      
      this.imgPreloader = new Image();
      this.imgPreloader.index = this.index;
  
      
      
      // once image is preloaded, resize image container
      this.imgPreloader.onload=function(){
        
        lb = myInlineLightbox.lightboxes[this.index];
        
        Element.setSrc(lb.objLightboxImage, lb.imageArray[lb.activeImage][0]);
        lb.resizeImageContainer(this.width, this.height, lb);
        
      }
      this.imgPreloader.src = this.imageArray[this.activeImage][0];
      Element.hide(this.objLightboxImage);
      
      
    } else {
      // we are not fading because its already is fading..
    }
  },
  
  // START: on development by jan...
  alignmentImage: function(){
    con_w = this.objImageContainer.offsetWidth
    
    img_w = this.objLightboxImage.width
    this.objLightboxImage.style.position = 'absolute'
    this.objLightboxImage.style.left = '0px';
    this.objLightboxImage.style.top  = '0px'
    this.objLightboxImage.style.zIndex  = '2'
    
    img_w = this.objLightboxImageBuffer.width
    this.objLightboxImageBuffer.style.display = 'none'
    this.objLightboxImageBuffer.style.position = 'absolute'
    this.objLightboxImageBuffer.style.left = '0px';
    this.objLightboxImageBuffer.style.top  = '0px'
    this.objLightboxImageBuffer.style.zIndex  = '1'
  },
  // END: ...on development by jan

  //
  //  resizeImageContainer()
  //
  resizeImageContainer: function(imgWidth, imgHeight) {
    
    this.showImage();
    
    // get current height and width
    hCur = Element.getHeight(this.objOuterImageContainer);

    // scalars based on change from old to new
    yScale = (imgHeight / hCur) * 100;

    // calculate size difference between new and old image, and resize if necessary
    hDiff = hCur - imgHeight;

    if(!( hDiff == 0)){ new Effect.Scale(this.objOuterImageContainer, yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
    
    // if new and old image are same size and no scaling transition is necessary, 
    // do a quick pause to prevent image flicker.
    if(hDiff == 0){
      if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
    }

    if(!this.noarrows) {
      Element.setHeight(this.objPrevLink, imgHeight);
      Element.setHeight(this.objNextLink, imgHeight);
    }

    
  },

  //
  //  showImage()
  //  Display image and begin preloading neighbors.
  //
  showImage: function(){
    this.alignmentImage();
    Element.hide(this.objLoading);
    
    var finish = function(effect){
      myInlineLightbox.lightboxes[effect.element.getAttribute("lbId")].updateDetails();
      
      var after = function(){
        this.objLightboxImageBuffer.style.display = 'none';
        this.objLightboxImageBuffer.style.opacity = 1;
      }
      autoplay = false;
      if(!autoplay)this.objLightboxImageBuffer.style.display = 'none';
    }
    if(!this.lightboxFirstLoad){
      this.objLightboxImageBuffer.style.display = 'block';
    }else this.lightboxFirstLoad = false;
    
    new Effect.Appear(this.objLightboxImage, { queue: 'end', duration: this.fadespeed, afterFinish: finish.bind(this)})
    
    this.preloadNeighborImages();
  },

  //
  //  updateDetails()
  //  Display caption, image number, and bottom nav.
  //
  updateDetails: function() {

      var caption = "";
      var noCaption = false;
      
      if ( document.getElementsByClassName('noCaption').length > 0 )
        noCaption = true;
      
      if (! noCaption ) {
        if(this.imageArray[this.activeImage][1]) {
          caption = this.imageArray[this.activeImage][1];
        } 
        
        caption = "<span class='inlineSliderNumeration'>"+(this.activeImage+1)+"/"+this.imageArray.length+"</span> " + caption;
        
        Element.show(this.objCaption);
        Element.setInnerHTML(this.objCaption, caption);
  
        new Effect.Parallel(
          [ new Effect.SlideDown(this.objImageDataContainer, { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
            new Effect.Appear(this.objImageDataContainer, { sync: true, duration: 1.0 }) ], 
          { duration: 0.65, afterFinish: function(effect) { myInlineLightbox.lightboxes[effect.effects[0].element.getAttribute("lbId")].updateNav();} } 
        );
      }
    if(!this.noarrows)
      this.updateNav();
    
  },

  //
  //  updateNav()
  //  Display appropriate previous and next hover navigation.
  //
  updateNav: function() {
    Element.show(this.objHoverNav);       

    Element.show(this.objPrevLink);
    this.objPrevLink.onclick = function() {
      if ( ! $isFading ) {
        if ( typeof(thumbnails) != "undefined" ) {
          if(thumbnails.hasClassName('show')){
            new Effect.BlindUp(thumbnails, {duration: speed, scaleContent: true});
            thumbnails.removeClassName('show')
          }
        }
        lb = myInlineLightbox.lightboxes[this.getAttribute("lbId")];
        lb.changeImage(lb.activeImage - 1); return false;
      }
    }

    Element.show(this.objNextLink);
    this.objNextLink.onclick = function() {
      if ( ! $isFading ) {
        if ( typeof(thumbnails) != "undefined" ) {
          if(thumbnails.hasClassName('show')){
            new Effect.BlindUp(thumbnails, {duration: speed, scaleContent: true});
            thumbnails.removeClassName('show')
          }
        }
        lb = myInlineLightbox.lightboxes[this.getAttribute("lbId")];
        lb.changeImage(lb.activeImage + 1); return false;
      }
    }
  },

  //
  //  preloadNeighborImages()
  //  Preload previous and next images.
  //
  preloadNeighborImages: function(){

    preloadNextImage = new Image();
    preloadNextImage.src = this.imageArray[(((this.imageArray.length - 1) > this.activeImage) ? this.activeImage + 1 : 0)][0];
    
    preloadPrevImage = new Image();
    preloadPrevImage.src = this.imageArray[(this.activeImage > 0 ? this.activeImage - 1 : this.imageArray.length - 1)][0];
    
    if(this.autoplay) {
      var next = function() {
        this.changeImage(this.activeImage + 1);
      }
      $fadingProcess = window.setTimeout(next.bind(this), this.fadespeed*1000+this.waitspeed*1000);
    }

  },
  
  setFadeeable: function(eable){
    this.fadeeable = eable;
  },
  
  //
  //  end()
  //
  end: function() {
    Element.hide(this.objLightbox);
    showSelectBoxes();
  }
};

var inlineLightboxFactory = Class.create();
inlineLightboxFactory.prototype = {

  initialize: function() { },
  
  create: function() {
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementsByTagName('a');
    
    this.lightboxes = new Array();

    // loop through all anchor tags
    var n = -1;
    for (var i=0; i<anchors.length; i++){
      var anchor = anchors[i];
    
      var relAttribute = String(anchor.getAttribute('rel'));
    
      // use the string.match() method to catch 'lightbox' references in the rel attribute
      if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('inlinebox'))){
        anchor.onclick = function() {
          myInlineLightbox.lightboxes[this.getAttribute("lbId")].start(this);
          if(thumbnails.hasClassName('show')){
            new Effect.BlindUp(thumbnails, {duration: speed, scaleContent: true});
            thumbnails.removeClassName('show')
          }
          return false;
        }
        var elm = this.getContainer($(anchor));
        if(!elm.select('.lightbox').length) {
          n++;
          this.lightboxes[n] = new inlineLightbox();
          this.lightboxes[n].create(elm, n, elm.hasClassName('noarrows'), elm.hasClassName('autoplay'), elm.hasClassName('thumbslider'));
          if(elm.hasClassName('autostart'))
            this.lightboxes[n].start(anchor);
        }
        anchor.setAttribute("lbId", n);
      }
    }
  },

  getContainer: function(elm) {
    while(!elm.hasClassName('lightboxContainer') &&
          elm.tagName != 'body' &&
          !elm.hasClassName('innerarticle'))
      elm = $(elm.parentNode);
    return elm;
  }
};

function initInlineLightbox() { myInlineLightbox = new inlineLightboxFactory(); myInlineLightbox.create(); }
Event.observe($(window), 'load', initInlineLightbox, false);


/** language selection **/
function languageSelection() {
  var selector = document.getElementById('languageselector');
  var list = selector.childNodes;
  
  firstSkipped = false;
  selector.style.height = "2px";
  selector.style.padding = "3px";
  selector.style.marginTop = "30px";
  selector.style.zIndex = "10";
  selector.style.backgroundColor = "transparent";
  
  selector.style.border = "none";
  
  for ( index = 0; index < list.length; index++ ) {
    
    if ( ! firstSkipped ) {
      firstSkipped = true;
      
      el = list[index];
      
      // add click function to show others
      el.onclick = showSubElements;
      el.style.cursor = 'pointer';
      el.style.display = "block";
      el.style.marginTop = "-20px";
      el.style.cssFloat = "right";
      el.style.styleFloat = "right";
      
    } else {
       list[index].style.display = "none";
    }
  }
  
}
function showSubElements() {
  var selector = document.getElementById('languageselector');
  var list = selector.childNodes;
  
  firstSkipped = false;
  
  selector.style.backgroundColor = "#EEEEEE";
  
  
  for ( index = 0; index < list.length; index++ ) {
   
    if ( ! firstSkipped ) {
      firstSkipped = true;
      // add click function to show others
      el = list[index];
      
      el.onclick = languageSelection;
      
    } else {
      list[index].style.display = "block";
      list[index].style.cssFloat = "right";
      list[index].style.styleFloat = "right";
      list[index].style.marginRight = "20px";
      list[index].style.marginTop = "-10px";
      
      //list[index].childNodes[1].childNodes[3].style.textTransform = "lowercase";
           
    }
  }
}


Event.observe($(window), 'load', languageSelection, false);
/** language selction end **/