/**
 * Sexy LightBox - for jQuery 1.3
 * @name sexylightbox.v2.2.js
 * @author Eduardo D. Sada - http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2
 * @version 2.2
 * @date 1-Jun-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/
*/

jQuery.bind = function(object, method){
    var args = Array.prototype.slice.call(arguments, 2);
    return function() {
        var args2 = [this].concat(args, $.makeArray( arguments ));
        return method.apply(object, args2);
    };
};  

(function($) {

    SexyLightbox = {
        getOptions: function() {
            return {
                name          : 'SLB',
                zIndex        : 65555,
                color         : 'black',
                find          : 'sexylightbox',
                imagesdir     : '/includes/km_utils/popup/sexylightbox/sexyimages',
                background    : 'bgSexy.png',
                backgroundIE  : 'bgSexy.gif',
                closeButton   : 'SexyClose.png',
                displayed     : 0,
                modal         : 0,
                showDuration  : 200,
                showEffect    : 'linear',
                closeDuration : 400,
                closeEffect   : 'linear',
                moveDuration  : 800,
                moveEffect    : 'easeOutBack',
                resizeDuration: 800,
                resizeEffect  : 'easeOutBack',
                shake         : {
                    distance: 10,
                    duration: 100,
                    transition: 'easeInOutBack',
                    loops: 2
                },
                BoxStyles     : {
                    'width' : 486,
                    'height': 320
                },
                Skin          : {
                    'white' : {
                        'hexcolor': '#FFFFFF',
                        'captionColor': '#000000',
                        'background-color': '#000',
                        'opacity': 0.6
                    },
                    'black' : {
                        'hexcolor': '#000000',
                        'captionColor': '#FFFFFF',
                        'background-color': '#333333',
                        'opacity': 0.7
                    },
                    'red' : {
                        'hexcolor'    :'#cf0019',
                        'captionColor':'#FFFFFF', 
                        'background-color': '#333', 
                        'opacity': 0.6 

                    },
                    'orange' : {
                        'hexcolor'    :'#ed6e00',
                        'captionColor':'#FFFFFF', 
                        'background-color': '#fff', 
                        'opacity': 0.6 
                    }
                }
            };
        },

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

            var strBG = this.options.imagesdir+'/'+this.options.color+'/'+((((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)))?this.options.backgroundIE:this.options.background);
            var name  = this.options.name;

            $('body').append('<div id="'+name+'-Overlay"></div><div id="'+name+'-Wrapper"><div id="'+name+'-Background"></div><div id="'+name+'-Contenedor"><div id="'+name+'-Top" style="background-image: url('+strBG+')"><a id="'+name+'-CloseButton" href="#"><img src="'+this.options.imagesdir+'/'+this.options.color+'/'+this.options.closeButton+'" alt="Close"></a><div id="'+name+'-TopLeft" style="background-image: url('+strBG+')"></div></div><div id="'+name+'-Contenido"></div><div id="'+name+'-Bottom" style="background-image: url('+strBG+')"><div id="'+name+'-BottomRight" style="background-image: url('+strBG+')"><div id="'+name+'-Navegador"><strong id="'+name+'-Caption"></strong></div></div></div></div></div>');
      
            this.Overlay      = $('#'+name+'-Overlay');
            this.Wrapper      = $('#'+name+'-Wrapper');
            this.Background   = $('#'+name+'-Background');
            this.Contenedor   = $('#'+name+'-Contenedor');
            this.Top          = $('#'+name+'-Top');
            this.CloseButton  = $('#'+name+'-CloseButton');
            this.Contenido    = $('#'+name+'-Contenido');
            this.bb           = $('#'+name+'-Bottom');
            this.innerbb      = $('#'+name+'-BottomRight');
            this.Nav          = $('#'+name+'-Navegador');
            this.Descripcion  = $('#'+name+'-Caption');

            this.Overlay.css({
                'position'  : 'absolute',
                'top'       : 0,
                'left'      : 0,
                'opacity'   : this.options.OverlayStyles['opacity'],
                'height'    : $(document).height(),
                'width'     : $(document).width(),
                'z-index'   : this.options.zIndex,
                'background-color': this.options.OverlayStyles['background-color']
            }).hide();
      
            this.Wrapper.css({
                'z-index'   : this.options.zIndex,
                'top'       : (-this.options.BoxStyles['height']-280)+'px',
                'left'      : ( ($(document).width() - this.options.BoxStyles['width']) / 2)
            }).hide();
      
            this.Background.css({
                'z-index'   : this.options.zIndex + 1
            });
      
            this.Contenedor.css({
                'position'  : 'absolute',
                'width'     : this.options.BoxStyles['width'] + 'px',
                'z-index'   : this.options.zIndex + 2
            });
      
            this.Contenido.css({
                'height'            : this.options.BoxStyles['height'] + 'px',
                'border-left-color' : this.options.Skin[this.options.color].hexcolor,
                'border-right-color': this.options.Skin[this.options.color].hexcolor
            });
      
            this.Nav.css({
                'color'     : this.options.Skin[this.options.color].captionColor
            });

            this.Descripcion.css({
                'color'     : this.options.Skin[this.options.color].captionColor
            });


          
            /**
       * AGREGAMOS LOS EVENTOS
       ************************/

            this.CloseButton.bind('click', $.bind(this, function(){
                this.close();
                return false;
            }));
      
            this.Overlay.bind('click', $.bind(this, function(){
                if (!this.options.modal) {
                    this.close();
                }
            }));


            $(document).bind('keydown', $.bind(this, function(obj, event){
                if (this.options.displayed == 1) {
                    if (event.keyCode == 27){
                        this.close();
                    }

                    if (event.keyCode == 37){
                        if (this.prev) {
                            this.prev.trigger('click', event);
                        }
                    }

                    if (event.keyCode == 39){
                        if (this.next) {
                            this.next.trigger('click', event);
                        }
                    }
                }
            }));

            $(window).bind('resize', $.bind(this, function(){
                if(this.options.displayed == 1) {
                    this.replaceBox();
                } else {
                    this.Overlay.css({
                        'height': '0px',
                        'width': '0px'
                    });
                }
            }));

            $(window).bind('scroll', $.bind(this, function(){
                if(this.options.displayed == 1) {
                    this.replaceBox();
                }
            }));

            this.refresh();

        },
    
        hook: function(enlace) {
            enlace = $(enlace);
            enlace.blur();
            this.show((enlace.attr("title") || enlace.attr("name") || ""), enlace.attr("href"), (enlace.attr('rel') || false));
        },
    
        close: function() {
            this.display(0);
            this.modal = 0;
        },
    
        refresh: function() {
            var self = this;
            this.anchors = [];

            $("a, area").each(function() {
                if ($(this).attr('rel') && new RegExp("^"+self.options.find).test($(this).attr('rel'))){
                    $(this).click(function(event) {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                        self.hook(this);
                    });

                    if (!($(this).attr('id')==self.options.name+"Left" || $(this).attr('id')==self.options.name+"Right")) {
                        self.anchors.push(this);
                    }
                }
            });
        },
    
        display: function(option) {
            if(this.options.displayed == 0 && option != 0 || option == 1) {

                $('embed, object, select').css({
                    'visibility' : 'hidden'
                });

                if (this.options.displayed == 0) {
                    this.Wrapper.css({
                        'top'     : (-this.options.BoxStyles['height']-280)+'px',
                        'height'  : (this.options.BoxStyles['height']-80)+'px',
                        'width'   : this.options.BoxStyles['width']+'px'
                    }).hide();
                }

                this.options.displayed = 1;
                this.Overlay.stop();
                this.Overlay.fadeIn(this.options.showDuration, $.bind(this, function(){
                    this.Wrapper.show();
                    this.Overlay.css({
                        'opacity'   : this.options.OverlayStyles['opacity']
                    });
                }));

            }
            //Cerrar el Lightbox
            else
            {

                $('embed, object, select').css({
                    'visibility' : 'visible'
                });

                this.Wrapper.css({
                    'top'     : (-this.options.BoxStyles['height']-280)+'px',
                    'height'  : (this.options.BoxStyles['height']-80)+'px',
                    'width'   : this.options.BoxStyles['width']+'px'
                }).hide();

                this.options.displayed = 0;

                this.Overlay.stop();
                this.Overlay.fadeOut(this.options.closeDuration, $.bind(this, function(){
                    if (this.Image)
                        this.Image.remove();
                    this.Overlay.css({
                        'height': 0,
                        'width': 0
                    });
                }));
            }
        },
    
        replaceBox: function(data) {

            data = $.extend({
                'width'  : this.ajustarWidth,
                'height' : this.ajustarHeight,
                'resize' : 0
            }, data || {});

            if (this.MoveBox)
                this.MoveBox.stop();

            this.MoveBox = this.Wrapper.animate({
                left  : ( $(window).scrollLeft()  + (($(window).width()  - data.width) / 2)),
                top   : ( $(window).scrollTop()   + ($(window).height() - (data.height + ((this.MostrarNav)?80:48))) / 2 )
            }, {
                duration  : this.options.moveDuration,
                easing    : this.options.moveEffect
            });

            if (data.resize) {
        
                if (this.ResizeBox2)
                    this.ResizeBox2.stop();
                this.ResizeBox2 = this.Contenido.animate({
                    height   : data.height
                }, {
                    duration  : this.options.resizeDuration,
                    easing    : this.options.resizeEffect
                });

                if (this.ResizeBox)
                    this.ResizeBox.stop();

                this.ResizeBox = this.Contenedor.animate({
                    width     : data.width
                }, {
                    duration  : this.options.resizeDuration,
                    easing    : this.options.resizeEffect,
                    complete  : $.bind(this, function(){
                        this.Wrapper.css({
                            'width' : data.width
                        });
                        this.ResizeBox.trigger('onComplete');
                    })
                });
            }

            if (window.opera) { //Opera Bug :(
                this.Overlay.css({
                    'height': 0,
                    'width': 0
                });
            }

            this.Overlay.css({
                'height'    : $(document).height(),
                'width'     : $(window).width()
            });
        },
    
        getInfo: function (image, id) {
            image=$(image);
            IEuta = $('<a id="'+this.options.name+id+'" title="'+image.attr('title')+'" rel="'+image.attr('rel')+'"><img class="bt'+id+'" src="'+this.options.imagesdir+'/'+this.options.color+'/SexyBt'+id+'.png'+'" /></a>');
            IEuta.attr('href', image.attr('href')); //IE fix
            return IEuta;
        },
    
        show: function(caption, url, rel) {
            this.MostrarNav = false;
            this.showLoading();
      
            var baseURL = url.match(/(.+)?/)[1] || url;

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

            if (this.ResizeBox) {
                this.ResizeBox.unbind('onComplete'); //fix for jQuery
            }

            if (caption) {
                this.MostrarNav = true;
            }
            // check for images
            if ( baseURL.match(imageURL) ) {
                /**
           * Cargar Imagen.
           *****************/
                this.imgPreloader = new Image();
                this.imgPreloader.onload = $.bind(this, function(){
                    this.imgPreloader.onload=function(){};

                    //Resizing large images
                    var x = $(window).width() - 100;
                    var y = $(window).height() - 100;

                    var imageWidth = this.imgPreloader.width;
                    var imageHeight = this.imgPreloader.height;

                    if (imageWidth > x)
                    {
                        imageHeight = imageHeight * (x / imageWidth);
                        imageWidth = x;
                        if (imageHeight > y)
                        {
                            imageWidth = imageWidth * (y / imageHeight);
                            imageHeight = y;
                        }
                    }
                    else if (imageHeight > y)
                    {
                        imageWidth = imageWidth * (y / imageHeight);
                        imageHeight = y;
                        if (imageWidth > x)
                        {
                            imageHeight = imageHeight * (x / imageWidth);
                            imageWidth = x;
                        }
                    }
                    //End Resizing
              
                    //Ajustar el tamaño del lightbox
                    if (this.MostrarNav || caption){
                        this.ajustarHeight = (imageHeight-21);
                    }else{
                        this.ajustarHeight = (imageHeight-35);
                    };

                    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.bind('onComplete', $.bind(this, function(){
                        this.showImage(this.imgPreloader.src, {
                            'width':imageWidth,
                            'height': imageHeight
                        });
                    }));
                });

                this.imgPreloader.onerror = $.bind(this, function(){
                    this.show('', this.options.imagesdir+'/'+this.options.color+'/404.png', this.options.find);
                });

                this.imgPreloader.src = url;
          
            } else { //code to show html pages
                var queryString = url.match(/\?(.+)/)[1];
                var params = this.parseQuery( queryString );
                params['width']   = parseInt(params['width']);
                params['height']  = parseInt(params['height']);
                params['modal']   = params['modal'];
          
                this.options.modal = params['modal'];
          
                this.ajustarHeight = parseInt(params['height'])+(window.opera?2:0);
                this.ajustarWidth  = parseInt(params['width'])+14;

                this.replaceBox({
                    'width'  : this.ajustarWidth,
                    'height' : this.ajustarHeight,
                    'resize' : 1
                });
        
        
                if (url.indexOf('TB_inline') != -1) //INLINE ID
                {
                    this.ResizeBox.bind('onComplete', $.bind(this, function(){
                        this.showContent($('#'+params['inlineId']).html(), {
                            'width': params['width']+14,
                            'height': this.ajustarHeight
                        }, params['background']);
                    }));
                }
                else if(url.indexOf('TB_iframe') != -1) //IFRAME
                {
                    var urlNoQuery = url.split('TB_');
                    this.ResizeBox.bind('onComplete', $.bind(this, function(){
                        this.showIframe(urlNoQuery[0], {
                            'width': params['width']+14,
                            'height': params['height']
                        }, params['background']);
                    }));
                }
                else //AJAX
                {
                    this.ResizeBox.bind('onComplete', $.bind(this, function(){
                        $.ajax({
                            url: url,
                            type: "GET",
                            cache: false,
                            error: $.bind(this, function(){
                                this.show('', this.options.imagesdir+'/'+this.options.color+'/404html.png', this.options.find)
                            }),
                            success: $.bind(this, this.handlerFunc)
                        });
                    }));
                }

            }
      

            this.next       = false;
            this.prev       = false;
            //Si la imagen pertenece a un grupo
            if (rel.length > this.options.find.length)
            {
                this.MostrarNav = true;
                var foundSelf   = false;
                var exit        = false;
                var self        = this;

                $.each(this.anchors, function(index){
                    if ($(this).attr('rel') == rel && !exit) {
                        if ($(this).attr('href') == url) {
                            foundSelf = true;
                        } else {
                            if (foundSelf) {
                                self.next = self.getInfo(this, "Right");
                                //stop searching
                                exit = true;
                            } else {
                                self.prev = self.getInfo(this, "Left");
                            }
                        }
                    }
                });
            }

            this.addButtons();
            this.showNav(caption);
            this.display(1);
        },// end function

        handlerFunc: function(obj, html) {
            this.showContent(html, {
                'width':this.ajustarWidth,
                'height': this.ajustarHeight
            });
        },

        showLoading: function() {
            this.Background.empty().removeAttr('style').css({
                'width':'auto',
                'height':'auto'
            });
            this.Contenido.empty().css({
                'background-color'  : 'transparent',
                'padding'           : '0px',
                'width'             : 'auto'
            });

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

            this.Contenido.empty().css({
                'background-color': 'transparent',
                'padding'         : '0px',
                'width'           : 'auto'
            });

            this.replaceBox({
                'width'  : this.options.BoxStyles.width,
                'height' : this.options.BoxStyles.height,
                'resize' : 1
            });

        },

        addButtons: function(){
            if(this.prev) this.prev.bind('click', $.bind(this, function(obj, event) {
                event.preventDefault();this.hook(this.prev);
            }));
            if(this.next) this.next.bind('click', $.bind(this, function(obj, event) {
                event.preventDefault();this.hook(this.next);
            }));
        },
  
        /**
    * Mostrar navegacion.
    *****************/
        showNav: function(caption) {
            if (this.MostrarNav || caption) {
                this.bb.addClass("SLB-bbnav");
                this.Nav.empty();
                this.innerbb.empty();
                this.innerbb.append(this.Nav);
                this.Descripcion.html(caption);
                this.Nav.append(this.prev);
                this.Nav.append(this.next);
                this.Nav.append(this.Descripcion);
            }
            else
            {
                this.bb.removeClass("SLB-bbnav");
                this.innerbb.empty();
            }
        },
  
        showImage: function(image, size) {
            this.Background.empty().removeAttr('style').css({
                'width':'auto',
                'height':'auto'
            }).append('<img id="'+this.options.name+'-Image"/>');
            this.Image = $('#'+this.options.name+'-Image');
            this.Image.attr('src', image).css({
                'width'  : size['width'],
                'height' : size['height']
            });
    
            this.Contenedor.css({
                'background' : 'none'
            });

            this.Contenido.empty().css({
                'background-color': 'transparent',
                'padding'         : '0px',
                'width'           : 'auto'
            });
        },

        showContent: function(html, size, bg) {
            this.Background.empty().css({
                'width'            : size['width']-14,
                'height'           : size['height']+35,
                'background-color' : bg || '#ffffff'
            });
      
            this.Contenido.empty().css({
                'width'             : size['width']-14,
                'background-color'  : bg || '#ffffff'
            }).append('<div id="'+this.options.name+'-Image"/>');

            this.Image = $('#'+this.options.name+'-Image');
            this.Image.css({
                'width'       : size['width']-14,
                'height'      : size['height'],
                'overflow'    : 'auto',
                'background'  : bg || '#ffffff'
            }).append(html);

            this.Contenedor.css({
                'background': 'none'
            });
            var wId = $(this.Wrapper).attr('id');
            $('#'+wId+' select, #'+wId+' object, #'+wId+' embed').css({
                'visibility' : 'visible'
            });
        },

        showIframe: function(src, size, bg) {
            this.Background.empty().css({
                'width'           : size['width']-14,
                'height'          : size['height']+35,
                'background-color': bg || '#ffffff'
            });

            var id = "if_"+new Date().getTime()+"-Image";

            this.Contenido.empty().css({
                'width'             : size['width']-14,
                'background-color'  : bg || '#ffffff',
                'padding'           : '0px'
            }).append('<iframe id="'+id+'" frameborder="0"></iframe>');
      
            this.Image = $('#'+id);
            this.Image.css({
                'width'       : size['width']-14,
                'height'      : size['height'],
                'background'  : bg || '#ffffff'
            }).attr('src', src);

            this.Contenedor.css({
                'background' : 'none'
            });
        },
          
        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.position();
            l=l.left;
            for(x=0;x<this.options.shake.loops;x++) {
                this.Wrapper.animate({
                    left: l+d
                }, this.options.shake.duration, this.options.shake.transition)
                .animate({
                    left: l-d
                }, this.options.shake.duration, this.options.shake.transition);
            }
            this.Wrapper.animate({
                "left": l+d
            }, this.options.shake.duration, this.options.shake.transition)
            .animate({
                "left": l
            }, this.options.shake.duration, this.options.shake.transition);
        }
    
    }
})(jQuery);