<?php defined('InShopNC') or exit('Access Invalid!'); ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摇一摇</title>
    <script src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/js/flexible.js"></script>
    <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/css/main.css"/>
</head>
<body>
<div class="maincontent">
    <div class="r_bag_bottom"></div>
    <div class="shake_top">
        <div class="shake_top_box">
            <div class="top_border"></div>
        </div>
        <div class="shake_bottom_box">
            <div class="bottom_border"></div>
        </div>
    </div>
    <audio src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/mp3/wx_shake.wav" id="shake_start"></audio>
    <audio src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/mp3/shake_nomatch.wav" id="shake_null"></audio>
    <audio src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/mp3/success.mp3" id="shake_success"></audio>
    <div class="loading_icon"></div>
    <div class="results_box"></div>
</div>

<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/js/zepto.min.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/bridge.js"></script>

<script type="text/javascript">
    var shake_start   = document.getElementById('shake_start');
    var shake_null    = document.getElementById('shake_null');
    var shake_success = document.getElementById('shake_success');

    var Shaker = function()
    {
        this.mFStop = true;
        this.mThreshHold = 100;

        this.init = function(thresh_hold)
        {
            this.mThreshHold = thresh_hold;
            if (window.DeviceMotionEvent) {
                window.removeEventListener('devicemotion', deviceMotionHandler, false);
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            }
        };
        this.run = function (eventData)
        {
            if(this.mFStop == true) return;

            var speed = this.speed(eventData);
            speed = parseInt(speed);

            if(speed > this.mThreshHold)
            {
                this.mFStop = true;
                shake_start.play();
                call_native_handler('on_native_callback','shake_start');

                this.play_door();
                setTimeout(function ()
                {
                    $('.shake_top_box').removeClass('slider-top');
                    $('.shake_bottom_box').removeClass('slider-bottom');
                    $('.top_border').removeClass('border_opacity');
                    $('.bottom_border').removeClass('border_opacity');

                    call_native_handler('onSendRequestor',speed,null);
                    call_native_handler('on_native_click','{"action":"send_req","params":{"speed":' + speed +'}}',null);

                    $('.loading_icon').css('display','block');
                },1500);
            }
        };
        this.start = function () {
            this.mFStop = false;
            shaker.init(30);
        };
        this.stop = function () {
            window.removeEventListener('devicemotion', deviceMotionHandler, false);
            this.mFStop = true;
        };
        this.speed = function (eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var x = acceleration.x;
            var y = acceleration.y;
            var z = acceleration.z;
            var value = Math.sqrt(x * x + y * y + z * z);
            return value;
        };
        this.play_door = function () {
            $('.results_box').removeClass('fadeIn');

            $('.shake_top_box').addClass('slider-top');
            $('.shake_bottom_box').addClass('slider-bottom');
            $('.top_border').addClass('border_opacity');
            $('.bottom_border').addClass('border_opacity');
        };

        this.onRecvResponse = function (data,callback)
        {
            if(data == null)
            {
                var html='<div class="name_box res_box">';
                html += '<div class="name">没有摇到红包！</div>';
                html += '<div class="results_msg">';
                html += '可以通过向好友<span class="price">发红包</span>提高摇到红包几率。';
                html += '</div>';
                html += '</div>';
                html += '<div class="arrow_icon"></div>';

                $('.results_box').empty();
                shake_null.play();
                $('.results_box').append(html).addClass('fadeIn');
            }
            else
            {
                var bonus = $.parseJSON(data);
                if(bonus.bonuses.length == 0)
                {
                    var html='<div class="name_box res_box">';
                    html += '<div class="name">没有摇到红包！</div>';
                    html += '<div class="results_msg">';
                    html += '可以通过向好友<span class="price">发红包</span>提高摇到红包几率。';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="arrow_icon"></div>';

                    $('.results_box').empty();
                    shake_null.play();
                    $('.results_box').append(html).addClass('fadeIn');
                }
                else
                {
                    var html='';
                    for(var i=0;i<bonus.bonuses.length;i++)
                    {
                        var avatar = '<img src="' + bonus.bonuses[i].avatar + '" alt=""/>';
                        var msg = '';
                        if (bonus.info.money > 0) {
                            msg = '你摇到了他<span class="price">' + bonus.info.money + '</span>元红包';
                        }
                        else {
                            var money = -parseFloat(bonus.info.money);
                            msg = '你送给了他<span class="price">' + money + '</span>元红包';
                        }

                        html += '<div class="head_icon">' + avatar + '</div>' +
                            '<div class="name_box">' + '<div class="name">' + bonus.bonuses[i].name + '</div>' +
                            '<div class="results_msg">' + msg + '</div>' + '</div>';
                        html += '<div class="arrow_icon"></div>';
                        html += '<input type="hidden" value="'+ bonus.bonuses[i].url + '" id="url">';
                    }
                }

                $('.results_box').empty();
                shake_success.play();
                $('.results_box').append(html).addClass('fadeIn');
            }
            $('.loading_icon').css('display','none');
            callback("success");
        }
    };

    var shaker = new Shaker();
    function deviceMotionHandler(eventData) {
        shaker.run(eventData)
    }

    if(isMobile.iOS()) {
        init_ios_bridge(function(bridge) { });
        shaker.init(30);
    } else if (isMobile.Android) {
        init_android_bridge();
        shaker.init(20);
    } else {
        alert("本设备不支持摇一摇功能");
    }

    register_js_hander('start_shake',function(data,callback) {
        shaker.start();
    });
    register_js_hander('stop_shake',function(data,callback) {
        shaker.stop();
    });
    register_js_hander('onRecvResponse',function(data,callback)
    {
        shaker.onRecvResponse(data,callback);
    });
    register_js_hander('onJSCallback',function(data,callback)
    {
        if(data == 'shake_start') {
            shake_start.play();
        }
    });

    $('.results_box').on('click',function()
    {
        if($(this).find($('#url')).length>0)
        {
            var url=$(this).find($('#url')).val();
            var jsonobject = {
                action:"bonusdetail",
                params: {
                    url:url
                }
            };
            call_native_handler('on_native_click',JSON.stringify(jsonobject));
        } else {
            call_native_handler('on_native_click','{"action":"sendbonus","params":null}');
        }
    })
</script>

</body>
</html>