redBag

var redBag = (function () {
    var initialed = false,
        raining = true,
        createInterval,
        walkInterval,
        createIntervalTime = 500,//生成红包间隔时间
        walkIntervalTime = 30,//红包动画的间隔时间
        imgPath = 'img/',
        images = ['monkey1.png', 'monkey2.png', 'monkey3.png', 'monkey4.png', 'monkey5.png', 'monkey6.png','monkey7.png','monkey8.png','monkey9.png','monkey10.png'],
        windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        callback = null;
    /**
     * 设置定时器
     */
    function redBagSetInterval() {
        if (raining && !createInterval) {
            createInterval = setInterval(createRedBag, createIntervalTime);
        }
        if (raining && !walkInterval) {
            walkInterval = setInterval(walk, walkIntervalTime);
        }

    }
    /**
     * 清除定时器
     */
    function redBagClearInterval() {
        if (createInterval) {
            clearInterval(createInterval);
            createInterval = null;
        }
        if (walkInterval) {
            clearInterval(walkInterval);
            walkInterval = null;
        }
    }

    /**
     * minValue 最小值
     * maxValue 最大值
     */
    function generateRandom(minValue, maxValue) {
        /**
         * 取值范围总数
         */

        var choices = maxValue - minValue + 1;
        return Math.floor(Math.random() * choices + minValue);
    }

    function createRedBag() {
        var leftValue = generateRandom(0, windowWidth);
        /**
         * 图片随机出现
         */

        var imgSrc = imgPath + images[generateRandom(0, images.length - 1)];
        //
        $('<img src="' + imgSrc + '"/>').addClass('red-bag').css({left: leftValue + 'px'})
            //30
            .data('step', 3)
            .appendTo('.red-bag-wrap');
    }

    /**
     * 红包运动
     */

    function walk() {
        $('.red-bag').each(function () {
            $(this).css({top: parseInt($(this).css('top')) + $(this).data('step') + 'px'});
            //
            if (windowHeight <= parseInt($(this).css('top'))) {
                $(this).remove();
            }
        });
    }

    function redBagWrapDelegate() {
        /**
         * 红包选中事件
         */
        $('.red-bag-wrap').delegate('.red-bag', 'click', function () {
            raining = false;
            redBagClearInterval();
            loadingUtil.show();

            //这边需要后台交互，后台判断是否已经参与活动，是否中奖（后台随机生成）
            try {
                var redBagAjax = $.ajax({
                    url: 'http://www.wood365.com/Ashx/MarAct.ashx?' + Math.random(),  //请求的URL
                    type: 'POST',
                    timeout: 1000, //超时时间设置，单位毫秒
                    dataType: 'json',//返回的数据格式
                    success: function (data) { //请求成功的回调函数
                        var status = data.status;
                        var message = '';
                        switch (status) {
                            case 0:
                                message = '恭喜您获得' + data.prize + '，我们会在\
                                    3个工作日内将奖品寄送到您注册时所\
                                    填的地址，如有其他疑问请联系客服！';
                                break;
                            case 1:
                                message = '抱歉，该红包中没有奖品哦，继续加油吧！';
                                break;
                            case 2:
                                message = '抱歉！您已无抽奖机会.';
                                break;
                            default :
                                break;
                        }
                        requestDone(message);
                    },
                    error: function (data) { //请求失败的回调函数
                        requestDone('网络有问题，请重试');
                    },
                    complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                        if (status == 'timeout') {//超时,status还有success,error等值的情况
                            redBagAjax.abort();
                            requestDone('请求超时，请重试');
                        }
                    }
                });
            }
            catch(e) {
                requestDone('出错了，请重试');
            }
            function requestDone(message) {
                loadingUtil.hide();
                $('.red-bag-result p').text(message);
                $('.red-bag-result-mask').show();
                $('.red-bag-wrap').undelegate('.red-bag', 'click');
                $('.red-bag').addClass('no-click');
                //2016-3-3新添加
                $('.close-wrap').unbind('click');
            }

            //test start
            //setTimeout(function () {
            //    var status = generateRandom(0,2);
            //    var message = '';
            //    switch (status) {
            //        case 0:
            //            message = '恭喜您获得 iPhone 6S 一台，我们会在\
            //            3个工作日内将奖品寄送到您注册时所\
            //            填的地址，如有其他疑问请联系客服！';
            //            break;
            //        case 1:
            //            message = '抱歉，该红包中没有奖品哦，继续加油吧！';
            //            break;
            //        case 2:
            //            message = '抱歉！您已无抽奖机会.';
            //            break;
            //        default :
            //            break;
            //    }
            //
            //    loadingUtil.hide();
            //    $('.red-bag-result p').text(message);
            //    $('.red-bag-result-mask').show();
            //    $('.red-bag-wrap').undelegate('.red-bag', 'click');
            //$('.red-bag').addClass('no-click');
            //}, 2000);
            // test end

        });
    }
    var init = function () {
        initialed = true;
        /**
         * body添加class名为red-bag-wrap
         */
        $('<div></div>').addClass('red-bag' +
            '-wrap')
            .width(windowWidth)
            .height(windowHeight)
            .appendTo('body');
        /**
         * 添加关闭
         */
        $('<div></div>').addClass('close-relative').appendTo('.red-bag-wrap');
        $('<div></div>').addClass('close-wrap').appendTo('.close-relative');
        $('<img src="img/close.png" />').appendTo('.close-wrap');

        //2016-3-3关闭按钮回到初始页面
        $('.close-wrap').on('click',function() {
            stop();
        });

        $('<div></div>').addClass('red-bag-result-mask').hide().appendTo('.red-bag-wrap');
        $('<div></div>').addClass('red-bag-result').appendTo('.red-bag-result-mask');

        $('<p></p>').appendTo('.red-bag-result');
        $('<div></div>').addClass('red-bag-close').appendTo('.red-bag-result');
        /**
         * 钱包确定点击事件
         */
        $('.red-bag-close').on('click', function () {

            raining = true;
            redBagWrapDelegate();//这是猴子的点击事件
            $('.red-bag').removeClass('no-click');
            $('.red-bag-result-mask').hide();

            redBagSetInterval();
            $('.red-bag-mask').remove();
            //2016-3-3福袋的时候关闭
            $('.close-wrap').on('click',function() {
                stop();
            });
        });

        //
        redBagSetInterval();
        /**
         * 生成红包
         */

        redBagWrapDelegate();

        $(window).resize(function () {
            windowWidth = $(window).width();
            windowHeight = $(window).height();
            $('.red-bag-wrap').width(windowWidth).height(windowHeight);
        });
        window.onfocus = function () {
            redBagSetInterval();
        };

        window.onblur = function () {
            redBagClearInterval();
        };

        $(document).unload(function () {
            redBagClearInterval();
        });
    };
    //开始
    var start = function (fn) {
        if(typeof fn === 'function') {
            callback = fn;
        }
        if(!initialed) {
            init();
        }
        else {
            resume();
        }
    };
    //停止
    var stop = function () {
        $('.red-bag-wrap').hide();
        redBagClearInterval();
        $('.red-bag').remove();
        callback();
    };
    //继续
    var resume = function () {
        $('.red-bag-wrap').show();
        redBagSetInterval();
    };
    return {
        start: start,
        stop: stop
    }
}());

$(function () {
    function redBagBtnBindClick() {
        $('.red-bag-btn').on('click', function () {
            $('.red-bag-btn').unbind('click');
            redBag.start(redBagBtnBindClick);
        });
    }
    redBagBtnBindClick();
});