/*

 * SexyLightBox v1.0 by Eduardo D. Sada (http://www.coders.me)

 * To be used with mootools 1.2

 *

 * Licensed under the MIT License:

 *   http://www.opensource.org/licenses/mit-license.php

 */



var SexyLightBox = new Class({

	getOptions: function(){

		return {

			name: 'TB',

			zIndex: 65555,

			onReturn: false,

			onReturnFunction : $empty,

			BoxStyles: {

				'width': 500,

				'height': 300

			},

			OverlayStyles: {

				'background-color': '#AA2629',

				'opacity': 0.6

			},

			find        :'sexylightbox',

			color       :'black',

			hexcolor    :'#AA2629',

			captionColor:'#FFFFFF',

			imagesdir   :'sexyimages',

			background  :'bgSexy.png',

			backgroundIE:'bgSexy.gif',

			closeButton : 'SexyClose.png',

			showDuration: 200,

			showEffect  : Fx.Transitions.linear,

      closeDuration: 200,

			closeEffect : Fx.Transitions.linear,

			moveDuration: 800,

			moveEffect  : Fx.Transitions.Back.easeInOut,

			resizeDuration:800,

			resizeEffect: Fx.Transitions.Back.easeInOut

		};

	},



	initialize: function(options){

      this.setOptions(this.getOptions(), options);



      if(Browser.Engine.trident4)

        this.strBG = this.options.imagesdir+'/'+this.options.color+'/'+this.options.backgroundIE;

      else

        this.strBG = this.options.imagesdir+'/'+this.options.color+'/'+this.options.background;



      this.options.display == 0;



      /**

       * Creamos los elementos

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

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

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

        'styles': {

          'display': 'none',

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

          'position': 'absolute',

          'top': '0',

          'left': '0',

          'background-color': this.options.OverlayStyles['background-color'],

          'opacity': 0,

          'height': window.getScrollHeight() + 'px',

          'width': window.getScrollWidth() + 'px'

        }

      });

      

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

        'class': 'SexyLightBox_cb',

        'styles': {

          'display': 'none',

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

          'position': 'absolute',

          'top': -this.options.BoxStyles['height']+'px',

          'left': (window.getScroll().x + (window.getSize().x - this.options.BoxStyles['width']) / 2).toInt()+'px',

          'width': this.options.BoxStyles['width'] + 'px'

        }

      });

      

      

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

      

      this.CloseButton = new Element('a', {'href':'#'}).injectInside(this.bt);

      new Element('img', {'src': this.options.imagesdir+'/'+this.options.color+'/'+this.options.closeButton}).injectInside(this.CloseButton);



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

      

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

        'class':'i1',

        'styles':{

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

          'border-left-color': this.options.hexcolor,

          'border-right-color': this.options.hexcolor

        }

      }).injectInside(this.Contenedor);



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

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

      this.Nav         = new Element('div', {'class':'nav','styles':{'color':this.options.captionColor}});

      this.Descripcion = new Element('strong',{'styles':{'color':this.options.captionColor}});



      this.Overlay.injectInside(document.body);

      this.Contenedor.injectInside(document.body);

    

      /**

       * AGREGAMOS LOS EVENTOS

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



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

        event.stop();

        this.display(0);

      }.bind(this));



      window.addEvent('resize', function() {

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

          this.Overlay.setStyles({

            'height': window.getScrollHeight() + 'px',

            'width': window.getScrollWidth() + 'px'

          });

          this.replaceBox();

        }

      }.bind(this));



      window.addEvent('scroll', function() {

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

          this.replaceBox();

        }

      }.bind(this));

      

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

        this.display(0);

      }.bind(this));



      

      $$("a."+this.options.find).each(function(el) {

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

            event.stop();

            this.hook(el);

          }.bind(this));

          

      }.bind(this));

	

      this.MoveBox = $empty();

	

  },



	/*

	Function: hook

		Recuperar los parametros del enlace, y enviarselos a la funcion show

		

	Argument:

		enlace - object, la referencia a un elemento link.

	*/	

  hook: function(enlace) {

    enlace.blur();

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

  },









	/*

	Property: display

		Show or close box

		

	Argument:

		option - integer, 1 to Show box and 0 to close box (with a transition).

	*/	

  display: function(option) {

		// Detener la transicion por las dudas

		if(this.Transition)

			this.Transition.cancel();				



    // Mostrar lo sexy que es LightBox

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

			this.Overlay.setStyle('display', 'block');

			this.options.display = 1;

			this.fireEvent('onShowStart', [this.Overlay]);



			this.Transition = new Fx.Tween(this.Overlay,

				{

          property: 'opacity',

					duration: this.options.showDuration,

					transition: this.options.showEffect,

					onComplete: function() {



						sizes = window.getSize();

						scrollito = window.getScroll();

						this.Contenedor.setStyles({

							'display': 'block',

							'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt()

						});



						this.fireEvent('onShowComplete', [this.Overlay]);



					}.bind(this)

				}

			).start(this.options.OverlayStyles['opacity']);



		}

		// Cerrar el Lightbox

		else

		{



			this.Contenedor.setStyles({

				'display': 'none',

				'top': 0

			});

			this.options.display = 0;



			this.fireEvent('onCloseStart', [this.Overlay]);



      this.Transition = new Fx.Tween(this.Overlay,

        {

          property: 'opacity',

          duration: this.options.closeDuration,

          transition: this.options.closeEffect,

          onComplete: function() {

              this.fireEvent('onCloseComplete', [this.Overlay]);

          }.bind(this)

        }

      ).start(0);



		}			

  

  },

  

  

	/*

	Property: replaceBox

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

	*/

	replaceBox: function(data) {

//		if(this.options.display == 1)

		{

        sizes = window.getSize();

        scrollito = window.getScroll();

        

        data = $extend({

          'width'  : this.ajustarWidth,

          'height' : this.ajustarHeight,

          'resize' : 0

        }, data || {});



        if(this.MoveBox)

          this.MoveBox.cancel();



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

          duration: this.options.moveDuration,

          transition: this.options.moveEffect

        }).start({

          'left': (scrollito.x + (sizes.x - data.width) / 2).toInt(),

          'top': (scrollito.y + (sizes.y - data.height) / 2).toInt()-40

        });





        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+ 'px'

          });



          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 + 'px'

          });

        }



		}



		this.Overlay.set('styles', {

				'height': '0px',

				'width': '0px'

    });



		this.Overlay.set('styles', {

				'height': window.getScrollHeight() + 'px',

				'width': window.getScrollWidth() + 'px'

    });

	},



	/*

	Function: getInfo

		Devolver los botones de navegacion

	*/	

  getInfo: function (image, id) {

    return new Element('a', {

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

      'title' : image.title,

      'href'  : image.href,

      'rel'   : image.rel

      }).adopt(new Element('img', {

        'src'   : this.options.imagesdir+'/'+this.options.color+'/SexyBt'+id+'.png',

        'class' : 'bt'+id

      }));

  },



	/*

	Function: show

		Verificar que el enlace apunte hacia una imagen, y preparar el lightbox.

	*/	



  show: function(caption, url, rel) {



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

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

    

    /**

     * Verificar si es una imagen:

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

    if (baseURL.match(imageURL)) {

      var imageCount = "";

      this.MostrarNav = false;

      

      // Mostrar LOADING....

      this.Contenedor.setStyles({

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

      });

      this.replaceBox({

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

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

        'resize' : 1

      });





      // Si la imagen pertenece a un grupo

      if (rel) {

          this.MostrarNav = true;

          this.imageGroup = [];

          $$("a."+this.options.find).each(function(el){

              if (el.rel == rel) {

                  this.imageGroup[this.imageGroup.length] = el;

              }

          }.bind(this));

          

          var foundSelf = false;

          

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

              var image = this.imageGroup[i];

              var urlTypeTemp = image.href.match(imageURL);

              if (image.href == url) {

                  foundSelf = true;

                  imageCount = "Image " + (i + 1) + " of " + (this.imageGroup.length);

              } else {

                  if (foundSelf) {

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

                      this.next.addEvent('click', function(event) {

                        event.stop();

                      }.bind(this));

                      // stop searching

                      break;

                  }

                  else {

                      // didn't find ourself yet, so this may be the one before ourself

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

                      this.prev.addEvent('click', function(event) {

                        event.stop();

                      }.bind(this));

                  }

              }

          }

      }

      

      /**

       * Cargar Imagen.

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

      this.imgPreloader = new Image();

      this.imgPreloader.onload = function() {

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



          var imageWidth = this.imgPreloader.width;

          var imageHeight = this.imgPreloader.height;

          

          // Ajustar el tamaņo del lightbox

          if (this.MostrarNav || caption){

            this.ajustarHeight = (imageHeight-20);

          }else{

            this.ajustarHeight = (imageHeight-33);

          };



          this.ajustarWidth = (imageWidth+14);

          

          this.replaceBox({

            'width'  :this.ajustarWidth,

            'height' :this.ajustarHeight,

            'resize' : 1

          });

          

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

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

            this.Contenedor.setStyles({

              'background' : 'url('+url+') no-repeat 7px 7px'

            });

          }.bind(this));

          this.addButtons();

      }.bind(this);

      

      this.imgPreloader.onerror = function() {

        this.Contenedor.setStyles({

          'background' : 'url('+this.options.imagesdir+'/'+this.options.color+'/404.png) no-repeat 7px 7px'

        });

        this.replaceBox({

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

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

          'resize' : 1

        });

        this.addButtons();

      }.bind(this);



      this.imgPreloader.src = url;



      this.showNav(caption);



    }

    

    this.display(1);

  

  },

  

  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));

  },

  

 /**

  * Mostrar navegacion.

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

  showNav: function(caption) {

    if (this.MostrarNav || caption) {

      this.bb.addClass("bbnav");

      this.Nav.empty();

      this.Nav.injectInside(this.innerbb);

      this.Descripcion.set('text', caption);

      this.Nav.adopt(this.prev);

      this.Nav.adopt(this.next);

      this.Descripcion.injectInside(this.Nav);

    }

    else

    {

      this.bb.removeClass("bbnav");

      this.innerbb.empty();

    }

  }



  

});



SexyLightBox.implement(new Events, new Options);