var CI = window.CI || {};
/*
lightbox

si applica ai tag a con class='lightbox'
mostra l'url dell'immagine linkata, l'url mostrato deve essere nell'att rel del tag a
*/

CI.lightbox = function(settings) {

  this.containerID = settings.containerID;
  this.init();
}

CI.lightbox.prototype =  {
    activeImgIndex: 0,
    recordCount: 0,

    init: function() {
      var overlay = document.createElement('div');
      overlay.id = 'overlay';
      var lightbox = document.createElement('div');
      lightbox.id = 'lightbox';
      overlay.style.width = $D.getViewportWidth()+'px';
      overlay.style.height = $D.getViewportHeight()+'px';
      document.getElementsByTagName('body')[0].appendChild(overlay);
      document.getElementsByTagName('body')[0].appendChild(lightbox);

      // trova il numero di immagini totale
      this.recordCount = count($D.getElementsByClassName('lightbox','a','dhtml-carousel'));


      // setta l'onClick dei link con classe lightbox
      var lightboxes = $D.getElementsByClassName('lightbox','a', this.containerID);
      $E.addListener(lightboxes, 'click', this.onLightboxClick, this, true);
    },

    SetActiveImageId: function(target){
      var li_id = target.parentNode.parentNode.getAttribute('id');
      li_id = parseInt( li_id.replace('carousel-item-','') );
      this.activeImgIndex = li_id;

      // gestire le freccette per essere abilitate/ disabilitate

    },

    // mostra la finestra modale
    onLightboxClick: function(e) {
      var target = $E.getTarget(e, true);
      //$E.stopEvent(e);
      if ( target.tagName.toLowerCase() == 'img' ) {
        this.loadImg(target);
      }
      $E.stopEvent(e);
      return false;
    },

    close: function(e) {
      $D.get('overlay').style.display = 'none';
      $D.get('lightbox').style.display = 'none';
    },

    getNext: function(e){
      $E.stopEvent(e);
      if( !this.changeImage(this.activeImgIndex + 1) ){
        // se non č possibile selezionare l'immagine successiva
        $E.removeListener('nextLink', 'click', this.getNext, this, true);
        $D.addClass('nextLink', 'disabled');
      }
    },

    getPrev: function(e){
      $E.stopEvent(e);
      if( !this.changeImage(this.activeImgIndex - 1) ) {
        // se non č possibile selezionare l'immagine precedente
        $E.removeListener('prevLink', 'click', this.getPrev, this, true);
        $D.addClass('prevLink', 'disabled');
      }
    },

    changeImage: function(id){
      // individua l'img da caricare
      var li_id = 'carousel-item-'+id;
      var li = $D.get(li_id);
      if( li ){
        var a = li.getElementsByTagName('a')[0];
        var img = a.getElementsByTagName('img')[0];
        // carica l'immagine
        this.loadImg( img );
        return true;
      } else {
        return false;
      }
    },

    // carica l'immagine
    loadImg: function(img){
      this.SetActiveImageId(img);

      var lightbox = $D.get('lightbox');//div in cui verrā inserita l'img

      var img_url = img.parentNode.getAttribute('rel');
      var img_width = img.parentNode.getAttribute('rel_width');
      var img_height = img.parentNode.getAttribute('rel_height');
      var winl = ($D.getViewportWidth() - img_width) / 2;
      var wint = ($D.getViewportHeight() - img_height) / 2;

      // var img_url = img.getAttribute('src');
      $D.get('overlay').style.display = 'block';
      $D.get('overlay').style.position = 'fixed'; // non ti far scrollare!

      $D.setStyle('lightbox', 'left', winl+'px');
      $D.setStyle('lightbox', 'top', wint+'px');
      $D.setStyle('lightbox', 'position', 'fixed'); // non ti far scrollare!

      lightbox.style.display = 'block';

      lightbox.innerHTML =
      '<img src="'+img_url+'" width="'+img_width+'" height="'+img_height+'" alt="" />'+
      '<a href="#" id="prevLink">precedente</a>&nbsp;&nbsp;' +
      '<a href="#" id="nextLink">successiva</a>';

      var lightbox_img = lightbox.getElementsByTagName('img')[0];
      $E.addListener(lightbox_img, 'click', this.close, this, true);

      $E.addListener('prevLink', 'click', this.getPrev, this, true);
      $E.addListener('nextLink', 'click', this.getNext, this, true);

      // disabilita le freccette sul primo e ultimo elemento
      if( this.activeImgIndex == 0 ) {
        $D.addClass('prevLink', 'disabled');
      } else if( this.activeImgIndex == this.recordCount){
        $D.addClass('prevLink', 'disabled');
      }
    }

  };