/**

 * Sexy LightBox - for mootools 1.2.3

 * @name      sexylightbox.v2.3.js

 * @author    Eduardo D. Sada - http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2

 * @version   2.3.3

 * @date      30-Oct-2009

 * @copyright (c) 2009 Eduardo D. Sada (www.coders.me)

 * @license   MIT - http://es.wikipedia.org/wiki/Licencia_MIT

 * @example   http://www.coders.me/ejemplos/sexy-lightbox-2/

*/



Element.implement({

	css: function(params){ return this.setStyles(params);} // costumbre jQuery

});



var SexyLightBox = new Class(

{

  Implements: [Options, Events],

	getOptions: {

    name          : 'SLB',

    zIndex        : 32000,

    color         : 'black',

    find          : 'sexylightbox',

    dir           : 'sexyimages',

    emergefrom    : 'top',

    background    : 'bgSexy.png',

    backgroundIE  : 'bgSexy.gif',

    buttons       : 'buttons.png',

    displayed     : 0,

    showDuration  : 200,

    showEffect    : Fx.Transitions.linear,

    closeDuration : 400,

    closeEffect   : Fx.Transitions.linear,

    moveDuration  : 1000,

    moveEffect    : Fx.Transitions.Back.easeInOut,

    resizeDuration: 1000,

    resizeEffect  : Fx.Transitions.Back.easeInOut,

    shake         : {

                      distance   : 10,

                      duration   : 100,

                      transition : Fx.Transitions.Sine.easeInOut,

                      loops      : 2

                    },

    BoxStyles     : { 'width' : 486, 'height': 320 },

    Skin          : {

                      'white' : { 'hexcolor': '#e8e8e8', 'captionColor': '#000000', 'background-color': '#000000', 'opacity': 0.6 },

                      'black' : { 'hexcolor': '#000000', 'captionColor': '#e8e8e8', 'background-color': '#000000', 'opacity': 0.6 },

                      'blanco': { 'hexcolor': '#e8e8e8', 'captionColor': '#000000', 'background-color': '#000000', 'opacity': 0.6 },

                      'negro' : { 'hexcolor': '#000000', 'captionColor': '#e8e8e8', 'background-color': '#000000', 'opacity': 0.6 }

                    }

	},

  

  overlay: {

    create: function(options) {

      this.options = options;

      this.element = new Element('div', {

        id      : 'mask-' + $time(),

        styles  : $merge(this.options.style, {

          'position'  : 'absolute',

          'top'       : 0,

          'left'      : 0,

          'opacity'   : 0,

          'z-index'   : this.options.zIndex

        }),

        events  : {

            click: function() {

              if (this.options.hideOnClick) {

                  if (this.options.callback) {

                    this.options.callback();

                  } else {

                    this.hide();

                  }

              }

            }.bind(this)

        } // events

      });

      

      this.hidden = true;

      this.inject();

    },



    inject: function() {

      this.target = document.id(document.body);

      this.element.inject(this.target, 'inside');



      if((Browser.Engine.trident4 || (Browser.Engine.gecko && !Browser.Engine.gecko19 && Browser.Platform.mac)))

      {

        var zIndex = this.element.getStyle('zIndex').toInt();

        if (!zIndex)

        {

          zIndex = 1;

          var pos = this.element.getStyle('position');

          if (pos == 'static' || !pos)

          {

            this.element.setStyle('position', 'relative');

          }

          this.element.setStyle('zIndex', zIndex);

        }

        zIndex = ($chk(this.options.zIndex) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;

        if (zIndex < 0)

        {

          zIndex = 1;

        }

        this.shim = new Element('iframe', {

          id          : "IF_"+new Date().getTime(),

          src         : '',

          scrolling   : 'no',

          frameborder : 0,

          styles      :

          {

            zIndex    : zIndex,

            position  : 'absolute',

            top       : 0,

            left      : 0,

            border    : 'none',

            opacity   : 0

          }

        });

        this.shim.inject(this.element, 'after');

      }



    },



    resize: function(x, y) {

      this.element.setStyles({ 'height': 0, 'width': 0 });

      if (this.shim) this.shim.setStyles({ 'height': 0, 'width': 0 });



      var win = window.getScrollSize();

      var chromebugfix = Browser.Engine.webkit ? (win.x - 25 < document.html.clientWidth ? document.html.clientWidth : win.x) : win.x;



      this.element.setStyles({

        width  : $pick(x, chromebugfix), //* chrome fix

        height : $pick(y, win.y)

      });

      

      if (this.shim)

      {

        this.shim.setStyles({ 'height': 0, 'width': 0 });



        this.shim.setStyles({

          width  : $pick(x, Math.max(win.x, document.html.clientWidth)), //* chrome fix

          height : $pick(y, win.y)

        });

      }

      return this;

    },



    show: function() {

      if (!this.hidden) return this;

      if (this.transition) this.transition.cancel();

      this.target.addEvent('resize', this.resize);

      this.resize();

      if (this.shim) this.shim.setStyle('display', 'block');

      this.hidden = false;

      

      this.transition = new Fx.Tween(this.element, {

        property   : 'opacity',

        duration   : this.options.showDuration,

        transition : this.options.showEffect,

        onComplete : function () { this.element.fireEvent('show'); }.bind(this)

      }).start(this.options.style.opacity);



      return this;

    },



    hide: function() {

      if (this.hidden) return this;

      if (this.transition) this.transition.cancel();

      this.target.removeEvent('resize', this.resize);

      if (this.shim) this.shim.setStyle('display', 'none');

      this.hidden = true;



      this.transition = new Fx.Tween(this.element, {

          property    : 'opacity',
          duration    : this.options.closeDuration,

          transition  : this.options.closeEffect,

          onComplete  : function() { 

            this.element.setStyles({ 'height': 0, 'width': 0 });

            this.element.fireEvent('hide');

          }.bind(this)

      }).start(0);





      return this;

    }



  },

  

  backwardcompatibility: function(option) {

    this.options.dir =  option.imagesdir || option.path || option.folder || option.dir;

    this.options.OverlayStyles = $extend(this.options.Skin[this.options.color], this.options.OverlayStyles || {});

  },

  

  preloadimage: function(url) {

    img     = new Image();

    img.src = url;

  },

  

	initialize: function(options) {

    this.setOptions(this.getOptions, options);

    this.backwardcompatibility(this.options);

        

    var strBG = this.options.dir+'/'+this.options.color+'/'+((Browser.Engine.trident4)?this.options.backgroundIE:this.options.background);

    var name  = this.options.name;

    

    this.preloadimage(strBG);

    this.preloadimage(this.options.dir+'/'+this.options.color+'/'+this.options.buttons);

    

    this.overlay.create({

      style       : this.options.Skin[this.options.color],

      hideOnClick : true,

      zIndex      : this.options.zIndex-1,

      callback    : this.close.bind(this),

      showDuration  : this.options.showDuration,

      showEffect    : this.options.showEffect,

      closeDuration : this.options.closeDuration,

      closeEffect   : this.options.closeEffect

    });



    this.lightbox = {};

 

    this.Wrapper = new Element('div', { 

      'id'      : name + '-Wrapper',

      'styles'  : {

        'z-index'   : this.options.zIndex,

        'display'   : 'none'

      }

    });

    

    this.Background = new Element('div', {

      'id'      : name + '-Background',

      'styles': {

        'z-index'   : this.options.zIndex + 1

      }

    }).injectInside(this.Wrapper);

    

    this.Contenedor = new Element('div', {

      'id'      : name + '-Contenedor',

      'styles'  : {

        'position'  : 'absolute',

        'width'     : this.options.BoxStyles['width'],

        'z-index'   : this.options.zIndex + 2

      }

    }).injectInside(this.Wrapper);



    

    this.Top = new Element('div', {id: name+'-Top', styles:{'background-image':'url('+strBG+')'}}).injectInside(this.Contenedor);

    

    this.CloseButton = new Element('a', {href:'#', html:'&nbsp;', styles:{'background-image': 'url('+this.options.dir+'/'+this.options.color+'/'+this.options.buttons+')'}}).injectInside(this.Top);

    new Element('div', {'id': name+'-TopLeft', 'styles': {'background-image':'url('+strBG+')'}}).injectInside(this.Top);

    

    this.Contenido = new Element('div', {

      'id'      : name + '-Contenido',

      'styles'  : {

        'height'            : this.options.BoxStyles['height'],

        'border-left-color' : this.options.Skin[this.options.color].hexcolor,

        'border-right-color': this.options.Skin[this.options.color].hexcolor

      }

    }).injectInside(this.Contenedor);



    this.bb          = new Element('div', {'id': name + '-Bottom'      , 'styles':{'background-image':'url('+strBG+')'}}).injectInside(this.Contenedor);

    this.innerbb     = new Element('div', {'id': name + '-BottomRight' , 'styles':{'background-image':'url('+strBG+')'}}).injectInside(this.bb);

    this.Nav         = new Element('div', {'id': name + '-Navegador'   , 'styles':{'color':this.options.Skin[this.options.color].captionColor}});

    this.Descripcion = new Element('strong',{'id': name + '-Caption'   , 'styles':{'color':this.options.Skin[this.options.color].captionColor}});



    this.Wrapper.injectInside(document.body);

  

    /**

     * AGREGAMOS LOS EVENTOS

     ************************/



    this.CloseButton.addEvent('click', function() {

      this.close();

      return false;

    }.bind(this));



    document.addEvent('keydown', function(event) {

      if (this.options.displayed == 1) {

        if (event.key == 'esc'){

          this.close();

        }



        if (event.key == 'left'){

          if (this.prev) {

            this.prev.fireEvent('click', event);

          }

        }



        if (event.key == 'right'){

          if (this.next) {

            this.next.fireEvent('click', event);

          }

        }

      }

    }.bind(this));





    window.addEvents({

        'resize': function() {

            if (this.options.displayed == 1)

            {

              this.replaceBox();

              this.overlay.resize();

            }

        }.bind(this),

        

        'scroll': function() {

            if (this.options.displayed == 1)

            {

              this.replaceBox();

            }          

        }.bind(this)

    });

    

    this.refresh();



    this.MoveBox = $empty();

	

  },



  hook: function(enlace) {

    enlace.blur();

    this.show((enlace.title || enlace.name || ""), enlace.href, (enlace.getProperty('rel') || false));

  },



  close: function() {

    this.animate(0);

  },

  

  refresh: function() {

    this.anchors = [];

    $$("a", "area").each(function(el) {

      if (el.getProperty('rel') && el.getProperty('rel').test("^"+this.options.find)) {

        el.addEvent('click', function() {

          this.hook(el);

          return false;

        }.bind(this));

        if (!(el.getProperty('id')==this.options.name+"-Left" || el.getProperty('id')==this.options.name+"-Right")) {

          this.anchors.push(el);

        }

      }

    }.bind(this));

  },



  animate: function(option) {

      // Mostrar el Lightbox

      if(this.options.displayed == 0 && option != 0 || option == 1)

      {

        this.overlay.show();

        this.options.displayed = 1;

        this.Wrapper.css({'display': 'block'});

      }

      else // Cerrar el Lightbox

      {

        this.Wrapper.css({

          'display' : 'none',

          'top'     : -(this.options.BoxStyles['height']+280)

        });

        

        this.overlay.hide();

        this.overlay.element.addEvent('hide', function() {

          if (this.options.displayed) {

            if (this.Image) this.Image.dispose();

            this.options.displayed = 0;

          }

        }.bind(this));

      }

  },

  

  

	/*

	Function: replaceBox

  @description  Cambiar de tamaņo y posicionar el lightbox en el centro de la pantalla

	*/

	replaceBox: function(data) {

      var size   = window.getSize();

      var scroll = window.getScroll();

      var width  = this.options.BoxStyles['width'];

      var height = this.options.BoxStyles['height'];



      if (this.options.displayed == 0)

      {

        var x = 0;

        var y = 0;

        

        // vertically center

        y = scroll.x + ((size.x - width) / 2);



        if (this.options.emergefrom == "bottom")

        {

          x = (scroll.y + size.y + 80);

        }

        else // top

        {

          x = (scroll.y - height) - 80;

        }

      

        this.Wrapper.css({

          'display' : 'none',

          'top'     : x,

          'left'    : y

        });

        this.Contenedor.css({

          'width'   : width

        });

        this.Contenido.css({

          'height'  : height - 80

        });

      }



      data = $extend({

        'width'  : this.lightbox.width,

        'height' : this.lightbox.height,

        'resize' : 0

      }, data || {});



      if (this.MoveBox) this.MoveBox.cancel();



      this.MoveBox = new Fx.Morph(this.Wrapper, {

        duration   : this.options.moveDuration,

        transition : this.options.moveEffect

      }).start({

        'left': (scroll.x + ((size.x - data.width) / 2)),

        'top' : (scroll.y + (size.y - (data.height + (this.navigator ? 80 : 48))) / 2)

      });



      if (data.resize)

      {

        if (this.ResizeBox2) this.ResizeBox2.cancel();

        this.ResizeBox2 = new Fx.Morph(this.Contenido, {

          duration   : this.options.resizeDuration,

          transition : this.options.resizeEffect

        }).start({ 'height': data.height });



        if (this.ResizeBox) this.ResizeBox.cancel(); 

        this.ResizeBox = new Fx.Morph(this.Contenedor, {

          duration   : this.options.resizeDuration,

          transition : this.options.resizeEffect

        }).start({ 'width': data.width });

      }

      

	},

	

  getInfo: function (image, id) {

      return new Element('a', {

        id    : this.options.name+'-'+id,

        title : image.title,

        href  : image.href,

        rel   : image.getProperty('rel'),

        html  : "&nbsp;",

        styles: {

          'background-image' : 'url('+this.options.dir+'/'+this.options.color+'/'+this.options.buttons+')'

        }

      });



  },

  

	/*

	Function: display

	@description  Preparar y mostrar el lightbox.

	*/

  display: function(url, title, force) {

    return this.show(title, url, '', force);

  },



  show: function(caption, url, rel, force) {

      this.showLoading();

      

      var baseURL     = url.match(/(.+)?/)[1] || url;

      var imageURL    = /\.(jpe?g|png|gif|bmp)/gi;

      var queryString = url.match(/\?(.+)/);

      if (queryString) queryString = queryString[1];

      var params      = this.parseQuery( queryString );

      

      params = $merge({

        'width'     : 0,

        'height'    : 0,

        'modal'     : 0,

        'background': '',

        'title'     : caption

      }, params || {});



      params['width']   = params['width'].toInt();

      params['height']  = params['height'].toInt();

      params['modal']   = params['modal'].toInt();



      this.overlay.options.hideOnClick = !params['modal'];



      this.lightbox  = $merge(params, { 'width' : params['width'] + 14 });

      this.navigator = this.lightbox.title ? true : false;



      if ( force=='image' || baseURL.match(imageURL) )

      {

          this.img = new Image();

          this.img.onload = function() {

              this.img.onload=function(){};

              if (!params['width'])

              {

                var objsize = this.calculate(this.img.width, this.img.height);

                params['width']   = objsize.x;

                params['height']  = objsize.y;

                this.lightbox.width = params['width'] + 14;

              }

              this.lightbox.height = params['height'] - (this.navigator ? 21 : 35);

              

              this.replaceBox({ 'resize' : 1 });

              

              // Mostrar la imagen, solo cuando la animacion de resizado se ha completado

              this.ResizeBox.addEvent('complete', function() {

                this.showImage(this.img.src, params);

              }.bind(this));

          }.bind(this);

          

          this.img.onerror = function() {

            this.show('', this.options.dir+'/'+this.options.color+'/404.png', this.options.find);

          }.bind(this);

          

          this.img.src = url;



      } else { //code to show html pages



        this.lightbox.height = params['height']+(Browser.Engine.presto?2:0);

        this.replaceBox({'resize' : 1});



        if (url.indexOf('TB_inline') != -1) //INLINE ID

        {

          this.ResizeBox.addEvent('complete', function() {

            this.showContent($(params['inlineId']).get('html'), this.lightbox);

          }.bind(this));

        }

        else if(url.indexOf('TB_iframe') != -1) //IFRAME

        {

          var urlNoQuery = url.split('TB_');

          this.ResizeBox.addEvent('complete', function() {

            this.showIframe(urlNoQuery[0], this.lightbox);

          }.bind(this));

        }

        else //AJAX

        {

          this.ResizeBox.addEvent('complete', function() {

            var myRequest = new Request.HTML({

              url         : url,

              method      : 'get',

              evalScripts : false,

              onFailure   : function (xhr) {if(xhr.status==404){this.show('', this.options.dir+'/'+this.options.color+'/404html.png', this.options.find)}}.bind(this),

              onSuccess   : this.handlerFunc.bind(this)

            }).send();

          }.bind(this));

        }

      }

      

      this.next = false;

      this.prev = false;

      // Si la imagen pertenece a un grupo

      if (rel.length > this.options.find.length)

      {

          this.navigator = true;

          var foundSelf  = false;

          var exit       = false;



          this.anchors.each( function(image, index) {

            if (image.getProperty('rel') == rel && !exit) {

                if (image.href == url) {

                    foundSelf = true;

                } else {

                    if (foundSelf) {

                        this.next = this.getInfo(image, "Right");

                        // stop searching

                        exit = true;

                    } else {

                        this.prev = this.getInfo(image, "Left");

                    }

                }

            }

          }.bind(this));

      }



      this.addButtons();

      this.showNavBar(caption);

      this.animate(1);

  },

  

  calculate: function(x, y) {

    // Resizing large images

    var maxx = window.getWidth() - 100;

    var maxy = window.getHeight() - 100;



    if (x > maxx)

    {

      y = y * (maxx / x);

      x = maxx;

      if (y > maxy)

      {

        x = x * (maxy / y);

        y = maxy;

      }

    }

    else if (y > maxy)

    {

      x = x * (maxy / y);

      y = maxy;

      if (x > maxx)

      {

        y = y * (maxx / x);

        x = maxx;

      }

    }

    // End Resizing

    return {x: x.toInt(), y: y.toInt()};

  },

  

  handlerFunc: function(tree, elements, html, script) {

    this.showContent(html, this.lightbox);

    $exec(script);

  },



  addButtons: function(){

      if(this.prev) this.prev.addEvent('click', function(event) {event.stop();this.hook(this.prev);}.bind(this));

      if(this.next) this.next.addEvent('click', function(event) {event.stop();this.hook(this.next);}.bind(this));

  },

  

  showNavBar: function() {

      if (this.navigator)

      {

        this.bb.addClass("SLB-bbnav");

        this.Nav.empty();

        this.Nav.injectInside(this.innerbb);

        this.Descripcion.set('html', this.lightbox.title);

        this.Nav.adopt(this.prev);

        this.Nav.adopt(this.next);

        this.Descripcion.injectInside(this.Nav);

      }

      else

      {

        this.bb.removeClass("SLB-bbnav");

        this.innerbb.empty();

      }

  },

  

  showImage: function(image, size) {

    this.Image = new Element('img', { 'src' : image, 'styles': size}).injectInside(

      this.Background.empty().erase('style').css({width:'auto', height:'auto'})

    );



    this.Contenedor.css({

      'background' : 'none'

    });



    this.Contenido.empty().css({

        'background-color': 'transparent',

        'padding'         : '0px',

        'width'           : 'auto'

    });

  },



  showContent: function(html, size) {

    this.Background.css({

      'width'            : size['width']-14,

      'height'           : size['height']+35,

      'background-color' : size['background'] || '#e8e8e8'

    });

    this.Image = new Element('div', { 'styles': {

      'width'       : size['width']-14,

      'height'      : size['height'],

      'overflow'    : 'auto',

      'background'  : size['background'] || '#e8e8e8'

    }}).set('html', html).injectInside(this.Contenido.empty().css({

      'width'             : size['width']-14,

      'background-color'  : size['background'] || '#e8e8e8'

    }));

    this.Contenedor.css({

      'background': 'none'

    });

  },



  showIframe: function(src, size) {

    this.Background.css({

      'width'           : size['width']-14,

      'height'          : size['height']+35,

      'background-color': size['background'] || '#e8e8e8'

    });

  

    this.Image = new Element('iframe', {

      'frameborder' : 0,

      'id'          : "IF_"+new Date().getTime(),

      'styles'      : {

        'width'       : size['width']-14,

        'height'      : size['height'],

        'background'  : size['background'] || '#e8e8e8'

      }

    }).set('src',src).injectInside(this.Contenido.empty().css({

      'width'             : size['width']-14,

      'background-color'  : size['background'] || '#e8e8e8',

      'padding'           : '0px'

    }));

    this.Contenedor.css({

      'background' : 'none'

    });

  },



  showLoading: function() {

    this.Background.empty().erase('style').css({width:'auto', height:'auto'});



    this.Contenido.empty().css({

      'background-color'  : 'transparent',

      'padding'           : '0px',

      'width'             : 'auto'

    });



    this.Contenedor.css({

      'background' : 'url('+this.options.dir+'/'+this.options.color+'/loading.gif) no-repeat 50% 50%'

    });



    this.replaceBox($merge(this.options.BoxStyles, {'resize' : 1}));

  },



  parseQuery: function (query) {

    if( !query )

      return {};

    var params = {};



    var pairs = query.split(/[;&]/);

    for ( var i = 0; i < pairs.length; i++ ) {

      var pair = pairs[i].split('=');

      if ( !pair || pair.length != 2 )

        continue;

      params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' ');

     }

     return params;

  },

  

  shake: function() {

		var d = this.options.shake.distance;

		var l = this.Wrapper.getCoordinates();

		l = l.left;

		if (!this.tween)

		{

      this.tween = new Fx.Tween(this.Wrapper, { 

        link       : 'chain', 

        duration   : this.options.shake.duration,

        transition : this.options.shake.transition

      });

		}

		for(x=0;x<this.options.shake.loops;x++)

		{

      this.tween.start('left',l+d).start('left',l-d);

		}

		this.tween.start('left',l+d).start('left',l);

  }

  

});