/*
//引用部分
$(document).ready(
    function($){
        // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
        $("img").lazyload({placeholder: "images/loading.gif",effect: "fadeIn"});
    }
);

 */

(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,       // 提前开始加载
            failurelimit : 0,
            event        : "scroll",    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).
            effect       : "show",
            container    : window       // 对某容器中的图片实现效果 container: $("#container"),
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
    



/* 
 * DarkTooltip v0.1.5  提示框
 * Simple customizable tooltip with confirm option and 3d effects
 * (c)2014 Rubén Torres - rubentdlh@gmail.com
 * Released under the MIT license
 
    opacity 透明度     0-1
    content 提示消息    空 
    size    大小      small, medium, large 小型、 中型、 大型 
    gravity 方向      south, west, north, east 上 右 下 左 
    theme   主题      dark, light 暗，光 
    trigger 触发器     hover, click 悬停，单击 
    animation 动画    none，flipIn，fadeIn 
    confirm 确认      true，false 
    yes     确认是     Yes  
    no      确认否     No 
    finalMessage 在确认的操作结束时显示的消息 '' 
    
 */

    function DarkTooltip(element, options){
        this.bearer = element;
        this.options = options;
        this.delay;
    }

    DarkTooltip.prototype = {
        show: function(){
            //Close all other tooltips
            $('ins.dark-tooltip').hide();
            window.clearTimeout(this.delay);
            this.tooltip.css('display', 'block');
        },

        hide: function(){
            this.tooltip.hide();
        },

        toggle: function(){
            if(this.tooltip.is(":visible")){
                this.hide();
            }else{
                this.show();
            }
        },

        addAnimation: function(){
            switch(this.options.animation){
                case 'none':
                    break;
                case 'fadeIn':
                    this.tooltip.addClass('animated');
                    this.tooltip.addClass('fadeIn');
                    break;
                case 'flipIn':
                    this.tooltip.addClass('animated');
                    this.tooltip.addClass('flipIn');
                    break;
            }
        },

        setContent: function(){
            $(this.bearer).css('cursor', 'pointer');
            //Get tooltip content
            if(this.options.content){
                this.content = this.options.content;
            }else if(this.bearer.attr("data-tooltip")){
                this.content = this.bearer.attr("data-tooltip");
            }else{
                console.log("No content for tooltip: " + this.bearer.selector);
                return;
            }
            if(this.content.charAt(0) == '#'){
                $(this.content).hide();
                this.content = $(this.content).html();
                this.contentType='html';
            }else{
                this.contentType='text';
            }
            //Create tooltip container
            this.tooltip = $("<ins class = 'dark-tooltip " + this.options.theme + " " + this.options.size + " " 
                + this.options.gravity + "'><div>" + this.content + "</div><div class = 'tip'></div></ins>");
            this.tip = this.tooltip.find(".tip");
            
            $(this.bearer).append(this.tooltip);
            //Adjust size for html tooltip
            if(this.contentType == 'html'){
                this.tooltip.css('max-width','none');
            }
            this.tooltip.css('opacity', this.options.opacity);
            this.addAnimation();
            if(this.options.confirm){
                this.addConfirm();
            }
        },

        setPositions: function(){
            var leftPos = 0;
            var topPos = 0;
            var bearerTop = this.bearer.offset().top;
            var bearerLeft = this.bearer.offset().left;
            if(this.bearer.css('position')=='fixed' || this.bearer.css('position')=='absolute'){
                bearerTop=0;
                bearerLeft=0;
            }
            switch(this.options.gravity){
                case 'south':
                    leftPos = bearerLeft + this.bearer.outerWidth()/2 - this.tooltip.outerWidth()/2;
                    topPos = bearerTop - this.tooltip.outerHeight() - this.tip.outerHeight()/2;
                    break;
                case 'west':
                    leftPos = bearerLeft + this.bearer.outerWidth() + this.tip.outerWidth()/2;
                    topPos = bearerTop + this.bearer.outerHeight()/2 - (this.tooltip.outerHeight()/2);
                    break;
                case 'north':
                    leftPos = bearerLeft + this.bearer.outerWidth()/2 - (this.tooltip.outerWidth()/2);
                    topPos = bearerTop + this.bearer.outerHeight() + this.tip.outerHeight()/2;
                    break;
                case 'east':
                    leftPos = bearerLeft - this.tooltip.outerWidth() - this.tip.outerWidth()/2;
                    topPos = bearerTop + this.bearer.outerHeight()/2 - this.tooltip.outerHeight()/2;
                    break;
            }
            this.tooltip.css('left', leftPos);
            this.tooltip.css('top', topPos);
        },

        setEvents: function(){
            var dt = this;
            if(this.options.trigger == "hover" || this.options.trigger == "mouseover" || this.options.trigger == "onmouseover"){
                this.bearer.mouseover( function(){
                    dt.setPositions();
                    dt.show();
                }).mouseout( function(){
                    dt.hide();
                });
            }else if(this.options.trigger == "click" || this.options.trigger == "onclik"){
                this.tooltip.click( function(e){
                    e.stopPropagation();
                });
                this.bearer.click( function(e){
                    e.preventDefault();
                    dt.setPositions();
                    dt.toggle();
                    e.stopPropagation();
                });
                $('html').click(function(){
                    dt.hide();
                })
            }
        },

        activate: function(){
            this.setContent();
            if(this.content){
                this.setEvents();
            }
        },

        addConfirm: function(){
            this.tooltip.append("<ul class = 'confirm'><li class = 'darktooltip-yes'>" 
                + this.options.yes +"</li><li class = 'darktooltip-no'>"+ this.options.no +"</li></ul>");
            this.setConfirmEvents();
        },

        setConfirmEvents: function(){
            var t = this;
            this.tooltip.find('li.darktooltip-yes').click( function(e){
                t.onYes();
                e.stopPropagation();
            });
            this.tooltip.find('li.darktooltip-no').click( function(e){
                t.onNo();
                e.stopPropagation();
            });
        },

        finalMessage: function(){
            if(this.options.finalMessage){
                var t = this;
                t.tooltip.find('div:first').html(this.options.finalMessage);
                t.tooltip.find('ul').remove();
                t.setPositions();
                setTimeout( function(){
                    t.hide();
                    t.setContent();
                }, t.options.finalMessageDuration);
            }else{
                this.hide();
            }
        },

        onYes: function(){
            this.options.onYes(this.bearer); 
            this.finalMessage();
        },

        onNo: function(){
            this.options.onNo(this.bearer);
            this.hide();
        }
    }

    $.fn.darkTooltip = function(options) {
        this.each(function(){
            options = $.extend({}, $.fn.darkTooltip.defaults, options);
            var tooltip = new DarkTooltip($(this), options);
            tooltip.activate();
        }); 
    }

    $.fn.darkTooltip.defaults = {
        opacity: 0.9,
        content:'',
        size: 'medium',
        gravity: 'south',
        theme: 'dark',
        trigger: 'hover',
        animation: 'none',
        confirm: false,
        yes: 'Yes',
        no: 'No',
        finalMessage: '',
        finalMessageDuration: 1000,
        onYes: function(){},
        onNo: function(){}
    };







})(jQuery);