<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>砸金蛋</title>
	<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link href="<?php echo __ADDONS__;?>/wechat/zjd/view/css/style.css" rel="stylesheet">
</head>
<body>
	<div class="grid">
		<div id="hammer"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/img-6.png" height="87" width="74" alt=""></div>
		<div id="f"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/img-4.png" /></div>
		<div id="banner">
			  <dl>
			    <dt>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			      <a href="javascript:;"><img src="<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png" ></a>
			    </dt>
			    <dd></dd>
			  </dl>
		</div>
		<div class="block">
			<div class="title">剩余次数</div>
			<p >你还可抽奖的次数：<span class="num"><?php echo $config['prize_num'];?></span></p>
		</div>
		<div class="block">
			<div class="title">活动规则</div>
				<p><?php echo $config['description'];?></p>
		</div>
		<div class="block">
			<div class="title">奖项设置</div>
                <?php
                    if(!empty($config['prize'])){
                        foreach($config['prize'] as $key=>$val){
                ?>
                    <p><?php echo $val['prize_level'];?>:<?php echo $val['prize_name'];?>(奖品数量：<?php echo $val['prize_count'];?>)</p>
                <?php
                        }
                    }
                ?>
		</div>
		<div class="block">
			<div class="title">中奖记录</div>
				<?php
                if(!empty($list)){
                    foreach($list as $key=>$val){
                ?>
                    <p><?php echo $val['nickname'];?> 获得奖品 ：<?php echo $val['prize_name'];?></p>
                <?php
                    }
                }
                else{
                ?>
                <p>暂无获奖记录</p>
                <?php
                }
                ?>
		</div>
	</div>
	<div id="mask"></div>
	<div id="dialog" class="yes">
		<div id="content"></div>
		<a href="javascript:;" id="link">去看看</a>
		<button id="close">关闭</button>
	</div>
	<?php echo $wechat_js_sdk; ?>
</body>
</html>
<script src="<?php echo __PUBLIC__;?>/js/jquery.min.js"></script>
<script>
    $(function() {
        var ISWeixin = !!navigator.userAgent.match(/MicroMessenger/i); //wp手机无法判断
        if(!ISWeixin){
            var rd_url = location.href.split('#')[0];  // remove hash
            var oauth_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri='+encodeURIComponent(rd_url) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
            location.href = oauth_url;
            return false;
        }
        var timer,forceStop;
        var wxch_Marquee = function(id){
            try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
            var container = document.getElementById(id),
                original = container.getElementsByTagName("dt")[0],
                clone = container.getElementsByTagName("dd")[0],
                speed = arguments[1] || 10;
            clone.innerHTML=original.innerHTML;
            var rolling = function(){
                if(container.scrollLeft == clone.offsetLeft){
                    container.scrollLeft = 0;
                }else{
                    container.scrollLeft++;
                }
            }
            this.stop = function() {
                clearInterval(timer);
            }
            timer = setInterval(rolling,speed);//设置定时器
            container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
            container.onmouseout=function() {
                if (forceStop) return;
                timer=setInterval(rolling,speed);
            }//鼠标移开时重设定时器
        };

        var wxch_stop = function() {
            clearInterval(timer);
            forceStop = true;
        };
        var wxch_start = function() {
            forceStop = false;
            wxch_Marquee("banner",20);
        };

        wxch_Marquee("banner",20);

        var $egg;

        $("#banner a").on('click',function() {
            wxch_stop();
            $egg = $(this);
            var offset = $(this).position();
            $hammer = $("#hammer");
            $hammer.animate({left:(offset.left+30)}, 1000,function(){
                $(this).addClass('hit');
                $("#f").css('left',offset.left).show();
                $egg.find('img').attr('src','<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_2.png');
                setTimeout(function() {
                    wxch_result.call(window);
                }, 500);
            });
        });

        $("#mask").on('click',function() {
            $(this).hide();
            $("#dialog").hide();
            $egg.find('img').attr('src','<?php echo __ADDONS__;?>/wechat/zjd/view/images/egg_1.png');
            $("#f").hide();
            $("#hammer").css('left','-74px').removeClass('hit');
            wxch_start();
        });

        $("#close").click(function() {
            $("#mask").trigger('click');
        });

        function wxch_result () {
            var url = '<?php echo url('wechat/plugin_action', array('name'=>'zjd'))?>';
            $.get(url,{}, function(data){
            	$("#mask").show();
                if(data.status == 1){
                	$("#content").html(data.msg);
                    $(".num").html(data.num);
                    $("#link").attr("href", data.link);
                	$("#dialog").attr("class",'yes').show();
                }
                else if(data.status == 0){
                	$("#content").html(data.msg);
                    $(".num").html(data.num);
                	$("#dialog").attr("class",'no').show();
                }
                else if(data.status == 2){
                	$("#content").html(data.msg);
                    $(".num").html(data.num);
                	$("#dialog").attr("class",'no').show();
                }
            }, 'json');
        }
    });

</script>