/*
 * 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': '#000',
				'opacity': 0.6
			},
			find        :'sexylightbox',
			color       :'black',
			hexcolor    :'#000000',
			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);