/** reqiuires:
efw.core
efw.event
**/

(function(efw, undefined) {
  var eJsLightbox = {
    init: function(images) {
      var box = eJsLightbox.createBox(images.length);
      eJsLightbox.create(box);
      eJsLightbox.replaceImage(images[0][0], images[0][2]);
      eJsLightbox.currentIndex = 0;
      eJsLightbox.imagesLength = images.length;
      eJsLightbox.createThumbs(images);
      eJsLightbox.addEvents();
    },
    change: function(src, desc, index) {
      var currentSrc = document.getElementById('e-js-lightbox-image').getElementsByTagName('img')[0].getAttribute('src');
      eJsLightbox.currentIndex = index;
      if(src != currentSrc) {
        var elms = document.getElementById('e-js-lightbox-thumbs').getElementsByTagName('img');
        for(i = 0; i < elms.length; i++) {
          elms[i].id = "";
        }
        eJsLightbox.replaceImage(src, desc);
      }
    },
    replaceImage: function(src, desc) {
      var imageBox = document.getElementById('e-js-lightbox-image');
      var currentImage = imageBox.getElementsByTagName('img')[0];
      currentImage.style.display = "none";
      var newImg = new Image();
      newImg.src = src;
      newImg.alt = desc;
      newImg.title = desc;
      newImg.onload = function() {
        imageBox.replaceChild(newImg, currentImage);
        currentImage.style.display = "inline-block";
        document.getElementById('e-js-lightbox-description').innerHTML = desc;
      }
    },
    createThumbs: function(images) {
      var list = document.getElementById('e-js-lghtbox-thumbs-list');
      var appendImages = function(images, i) {
        var li = document.createElement('li');
        var img = document.createElement('img');
        img.id = (i == 0)? 'e-js-lightbox-aktiv' : '';
        img.height = "40";
        img.width = "40";
        img.src = images[i][1];
        img.alt = images[i][2];
        img.title = images[i][2];
        img.style.display = "none";
        img.onload = function(e) {
          eJsLightbox.displayThumb(this);
        }
        img.onmousedown = function() {
          eJsLightbox.change(images[i][0], images[i][2], i);
          this.id = 'e-js-lightbox-aktiv';
        }
        li.appendChild(img);
        list.appendChild(li);
      }
      for(i = 0; i < images.length; i++) {
        appendImages(images, i);
      }
    },
    displayThumb: function(elm) {
      elm.style.display = "inline-block";
    },
    createBox: function(len, curSrc, curDesc) {
      return  '<div id="e-js-lightbox-box">'+
                '<a id="e-js-lightbox-close"></a>'+
                '<div style="clear: both"></div>' +
                '<div id="e-js-lightbox-cc">'+
                '<table id="e-js-lightbox-current">'+
                  '<tr><td id="e-js-lightbox-image">'+
                    '<img>'+
                  '</td></tr>'+
                '</table>'+
                '<div id="e-js-lightbox-description"></div>'+
                '<div style="clear: both"></div>' +
                '</div>'+
                '<div id="e-js-lightbox-thumbs">'+
                  '<a id="e-js-lightbox-left"></a> ' +
                  '<a id="e-js-lightbox-right"></a> ' +
                  '<div id="e-js-lightbox-thumbs-box">' +
                    '<ul id="e-js-lghtbox-thumbs-list" style="width: '+ ((len*50)) +'px">' +
                    '</ul>' +
                  '</div>' +
                  '<div style="clear: both"></div>' +
                '</div>'+
              '</div>';
    },
    create: function(box) {
      if(document.getElementById('e-js-lightbox') == null) {
        var body   = document.getElementsByTagName('body')[0];
        var elm    = document.createElement('div');
        elm.id = 'e-js-lightbox';
        body.appendChild(elm);
      }
      document.getElementById('e-js-lightbox').style.display = "block";
      document.getElementById('e-js-lightbox').innerHTML = '<div id="e-js-lightbox-bg"></div>' + box;   
      if(eJsLightbox.imagesLength > 11) {
        document.getElementById('e-js-lightbox-right').style.display = "block";
      }
    },
    addEvents: function() {
      // Markieren unterbinden
      var stopDefault = function(e) {
        if (e && e.preventDefault) {
          e.preventDefault();
        }
        else {
          window.event.returnValue = false;
        }
        return false;
      }
    
      var elm = document.getElementById('e-js-lightbox-image').getElementsByTagName('img')[0];
      elm.onclick = function() {
        //Nächstes Bild
      }
    
      document.getElementById('e-js-lightbox-close').onclick = function(e) {
        document.getElementById('e-js-lightbox').style.display = "none";
        stopDefault(e);
      }
      document.getElementById('e-js-lightbox-bg').onclick = function(e) {
        document.getElementById('e-js-lightbox').style.display = "none";
        stopDefault(e);
      }
      
      document.getElementById('e-js-lightbox-left').onmouseover = function() {
        movl = setInterval(function() {
          var ul     = document.getElementById('e-js-lightbox-thumbs-box').getElementsByTagName('ul')[0];
          var target = 0;
          var left   = ul.style.left;
          if(left == "") {
            left = 0;
          }
          
          if(parseInt(left) != 0) {
            document.getElementById('e-js-lightbox-right').style.display = "block";
          }

          if(parseInt(left) == 0) {
            document.getElementById('e-js-lightbox-left').style.display = "none";
          }
          
          if(parseInt(left) < parseInt(target)) {
            ul.style.left = parseInt(left)+5 + "px";
          }
        }, 25);
      }
      document.getElementById('e-js-lightbox-left').onmouseout = function() {
        clearInterval(movl);
      }
      
      document.getElementById('e-js-lightbox-right').onmouseover = function() {
        movr = setInterval(function() {
          var ul     = document.getElementById('e-js-lightbox-thumbs-box').getElementsByTagName('ul')[0];
          var box    = document.getElementById("e-js-lightbox-thumbs-box").clientWidth;
          var target = box - ul.scrollWidth;
          var left   = ul.style.left;
          if(left == "") {
            left = 0;
          }
          
          if(parseInt(left) != 0) {
            document.getElementById('e-js-lightbox-left').style.display = "block";
          }

          if((parseInt(left)*-1) == (50*eJsLightbox.imagesLength-550)) {
            document.getElementById('e-js-lightbox-right').style.display = "none";
          }

          if(parseInt(left) > parseInt(target)) {
            ul.style.left = parseInt(left)-5 + "px";
          }
        }, 25);
      }
      document.getElementById('e-js-lightbox-right').onmouseout = function() {
        clearInterval(movr);
      }
    }
  }
  
  efw.lightbox = function(images) {
    return eJsLightbox.init(images);
  }
})(efw);