/**
 * OVERLAY v2!
 **/
(function($) {
    $.fn.exists = function(){if(jQuery(this).length == 0){return false;}else{return true;}};
    $.overlay = function(content,settings) {
        var config = $.overlay.defaults;
        if (settings) config = $.extend(config, settings);
        var self = this;
        var $self = $('<div id="'+config.overlay_id+'" class="'+config.overlay_class+'"/>');
        var mask = $('<div id="overlayMask"/>');
        var overlay = $('#empty');
        var start_grow_value = config.start_grow_value;
        var loaded = false;
        var images_loaded = false;
        var number_of_images_preloaded = 0;
        var total_img_to_load, left_offset, top_offset, left_offset_loader, top_offset_loader;

        var size = viewport();
        $self.bind('overlay.close',function(){
            self.close();
            return $self;
        });
        // public methods
        $.extend(self, {
            load: function() {
                if (loaded) {return self;}
                config.onBeforeLoad();
                self.set_variables();
                self.set_events();
                self.begin_overlay();
                return self;
            },
            close: function() {
                config.onBeforeClose();
                $(".closeBtn a",overlay).hide();
                $(".contentOverlay",overlay).hide();
                left_offset = $(window).width()/2;
                left_offset -= 10/2;
                left_offset += $(window).scrollLeft();

                top_offset = $(window).height()/2;
                top_offset -= 10/2;
                top_offset += $(window).scrollTop();

                overlay.animate({'width':'10px','height':'10px','left':left_offset,top:top_offset},300,function(){overlay.remove();});
                mask.delay(300).fadeOut(300, function() {
                    mask.remove();
                    config.afterClose();
                    loaded = false;
                });
                return self;
            },
            bind: function(name, fn) {
                $self.bind(name, fn);
                return self;
            },
            unbind: function(name) {
                $self.unbind(name);
                return self;
            },
            set_variables: function(){
                overlay = $self;
                // SET MASK
                mask.css({position:'absolute', top:0, left:0, width:size[0], height:size[1], display: 'block', zIndex:9998});
                if(config.mask_enabled == true)
                    mask.css({opacity:0, backgroundColor:config.mask_color});
                else
                    mask.css({opacity:1, 'visibility':'hidden',display:'none'});
                $("body").prepend(mask);

                // SET OVERLAY
                overlay.css({position:'absolute', zIndex:9999, visibility:'hidden'});
                $("body").prepend(overlay);

                // SET CLOSE BTN
                overlay.append('<div class="closeBtn"><a href="#" style="">close</a></div>');
                if(config.close_btn_content != "") {$(".closeBtn a",overlay).html(config.close_btn_content);}
                $(".closeBtn a",overlay).css({display:'none'});

                // SET CONTENT
                overlay.append('<div class="contentOverlay"/>');
                $(".contentOverlay",overlay).css({position:'absolute',left:0,top:0,visibility:'hidden'});
                $(".contentOverlay",overlay).append(content);
                total_img_to_load = $(".contentOverlay img",overlay).size();

                // SET LOADER
                overlay.append('<div class="loader"></div>');
                left_offset_loader = start_grow_value/2;
                left_offset_loader -= $(".loader",overlay).width()/2;
                top_offset_loader = start_grow_value/2;
                top_offset_loader -=  $(".loader",overlay).height()/2;
                $(".loader",overlay).css({position:'absolute',top: top_offset_loader, left: left_offset_loader,display:'none'});

                return self;
            },
            set_events: function(){
                //SET ESC.KEYDOWN BTN HANDLER
                $(document).bind("keydown.closeOverlay", function(evt){if(evt.keyCode == 27){self.close();}});

                //SET MASK.CLICK HANDLER
                if(config.mask_enabled == true){mask.bind("click.closeOverlay", function(){self.close();});}

                //SET CLOSE BTN.CLICK HANDLER
                $(".closeBtn a",overlay).bind('click',function(e){e.preventDefault(); self.close();});

                return self;
            },
            begin_overlay: function() {
                //SHOW MASK
                if(config.mask_enabled == true){mask.fadeTo('normal', config.mask_opacity);}

                //POSITION OVERLAY AND SHOW LOADER
                left_offset = size[0]/2;
                left_offset -= start_grow_value/2;
                left_offset += $(window).scrollLeft();

                top_offset = $(window).height()/2;
                top_offset -= start_grow_value/2;
                top_offset += $(window).scrollTop();
                overlay.css({width:0,height:0,visibility:'visible'});
                //CENTER OVERLAY
                self.center();
                overlay.animate({width:start_grow_value,height:start_grow_value,left:left_offset,top:top_offset},300,function(){
                    if($self.find('img').exists()){
                        $(" > .loader",overlay).fadeIn(200,function(){

                            if($.browser.msie && $.browser.version < 9) {
                                $self.find('img').each(function() {
                                    var image = new Image();
                                    image.onload = function() {
                                        self.image_load(number_of_images_preloaded,total_img_to_load,images_loaded);
                                    };
                                    image.src = $(this).attr('src');
                                    /*setTimeout(function(){
                                     *//*if(image.complete){
                                     self.image_load(number_of_images_preloaded,total_img_to_load,images_loaded);
                                     }
                                     else {
                                     $(this).load(function() {
                                     self.image_load(number_of_images_preloaded,total_img_to_load,images_loaded);
                                     });
                                     }*//*
                                     self.image_load(number_of_images_preloaded,total_img_to_load,images_loaded);
                                     },100);*/
                                });
                            }
                            else {
                                $self.find('img').each(function(){
                                    var img = new Image();
                                    $(img).load(function () {
                                        if (--total_img_to_load <= 0){
                                            self.image_load(number_of_images_preloaded,total_img_to_load,images_loaded);
                                        }
                                    }).error(function () {
                                    }).attr('src', this.src);
                                });

                            }
                        });
                    }
                    else{
                        $(".loader",overlay).css({display:'none'});
                        self.set_size();
                    }
                });
            },
            image_load: function(img_int,total_images,images_loaded) {
                img_int++;
                number_of_images_preloaded = img_int;
                if(number_of_images_preloaded >= total_images && images_loaded != true){
                    images_loaded = true;
                    self.set_size();
                    return true;
                }
                return self;
            },
            set_size: function(){
                config.onBeforeAppear();
                config.overlay_width = $(".contentOverlay",overlay).outerWidth();
                config.overlay_height = $(".contentOverlay",overlay).outerHeight();
                $(".contentOverlay",overlay).css({position:'static',left:'auto',top:'auto',display:"none",visibility:'visible'});
                self.open_overlay();
                return self;
            },
            open_overlay: function(){
                $(".loader",overlay).fadeOut(200,function(){
                    $(".loader",overlay).css({display:'block',visibility:'hidden'});
                    left_offset_loader = config.overlay_width/2;
                    left_offset_loader -= $(".loader",overlay).width()/2;
                    top_offset_loader = config.overlay_height/2;
                    top_offset_loader -=  $(".loader",overlay).height()/2;
                    $(".loader",overlay).css({position:'absolute',top: top_offset_loader, left: left_offset_loader,display:'none',visibility:'visible'});

                    left_offset = $(window).width()/2;
                    left_offset -= (config.overlay_width+0)/2;
                    left_offset += $(window).scrollLeft();

                    top_offset = $(window).height()/2;
                    top_offset -= (config.overlay_height+0)/2;
                    top_offset += $(window).scrollTop();

                    overlay.animate({'width':config.overlay_width,'height':config.overlay_height,'left':left_offset,'top':top_offset},100,function(){
                        $(".closeBtn a",overlay).show();
                        $(".contentOverlay",overlay).show();
                        loaded = true;
                        config.onAfterAppear();
                        self.on_after_load();
                    });
                });
                return self;
            },
            on_after_load: function() {
                $("> .loader",overlay).remove();
                $(window).resize(function(){self.center();self.fit();});
                $(window).scroll(function(){self.center();});
            },
            center: function() {
                if (overlay) {
                    var left_offset = $(window).width()/2;
                    left_offset -= overlay.outerWidth()/2;
                    left_offset += $(window).scrollLeft();

                    var top_offset = $(window).height()/2;
                    top_offset -= overlay.outerHeight()/2;
                    top_offset += $(window).scrollTop();

                    overlay.css({ top: top_offset, left: left_offset});
                    return self;
                }
            },
            fit: function() {
                if(mask){var size = viewport();mask.css({width:size[0], height:size[1]});}
                return self;
            }
        });

        if(!$('#overlay').exists()){self.load();}
        return $self;
    };
    $.overlay.defaults = {
        overlay_id: 'overlay',
        overlay_class: 'overlay',
        mask_enabled: true,
        mask_color: '#fff',
        mask_opacity: 0.7,
        closeOnMaskClick: true,
        closeOnEsc: true,
        close_btn_content:"",
        fix_ratio:false,
        fix_ratio_width:700,
        fix_ratio_height:700,
        start_grow_value:300,
        onBeforeLoad: function(){
        },
        onBeforeAppear: function(){
            $("#overlay .imageWrap .img").css({
                position:"absolute",
                top:($("#overlay .imageWrap").height()/2)-($("#overlay .imageWrap .img").height()/2)
            });
            $("#overlay .imageWrap .img").css({left:($("#overlay .imageWrap").width()/2)-($("#overlay .imageWrap .img").width()/2)});
            var numberOfThumbs = $("#overlay .contentOverlay .scrollable .items img").size();

            if(numberOfThumbs <= 4) {
                $("#overlay .contentOverlay a.browse").remove();
                $("#overlay .contentOverlay .scrollable").css({width:(numberOfThumbs*71)-19});
                $("#overlay .contentOverlay .containerScrollable").css({width:$("#overlay .contentOverlay .scrollable").outerWidth()});
            }

            if(numberOfThumbs == 1) {
                $("#overlay .contentOverlay .containerScrollable").remove();
            }
            $("#overlay .scrollable").scrollable({size:4, api:true});

            var scrollableInstance = $("#overlay .scrollable");
            if(scrollableInstance.exists()) {
                var index = $("#overlay .contentOverlay .containerScrollable .items img.active.on").index();
                scrollableInstance = scrollableInstance.data('scrollable');
                scrollableInstance.seekTo(index,0);
            }

            if($('#overlay .legend').html()==""){
                $('#overlay .legend').css({display:'none'});
            }
            else {
                $('#overlay .legend').css({display:'block'});
            }
        },
        onAfterAppear: function(){
        },
        onBeforeClose: function(){
        },
        afterClose: function(){
        }
    };

    /* one of the greatest headaches in the tool. finally made it */
    function viewport() {
        // the horror case
        if ($.browser.msie) {
            // if there are no scrollbars then use window.height
            var d = $(document).height(), w = $(window).height();
            return [
                window.innerWidth || 						// ie7+
                        document.documentElement.clientWidth || 	// ie6
                        document.body.clientWidth, 					// ie6 quirks mode
                d - w < 20 ? w : d
            ];
        }
        // other well behaving browsers
        return [$(window).width(), $(document).height()];
    }
})(jQuery);