<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>mycard rooms</title>
    <meta name="description" content="mycard在线大厅">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="/vendor/stylesheets/normalize.css">
    <link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/rooms.less" media="all"/>
    <script type="text/javascript" src="/vendor/javascripts/less-1.3.1.min.js"></script>
    <script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>

    <link rel="stylesheet" href="/vendor/stylesheets/smoothness/jquery-ui-1.10.0.custom.min.css"/>

    <link rel="canonical" href="http://my-card.in/rooms">

    <!-- Google Analytics -->
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-29582484-1']);
        _gaq.push(['_trackPageview']);
        var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
        _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>


    <script id="room_template" type="text/x-jquery-tmpl">
        <div class="room" id="room_${id}">
            <span class="room_name">${name}</span>
            <span class="room_id">${id}</span>
            {{if private}}
            [私密房]
            {{/if}}
            <div class="room_users">
                {{each users}}
                <div class="user">
                    <span class="user_name">${name}</span>
                </div>
                {{/each}}
            </div>
        </div>
    </script>

    <script id="login_form_template" type="text/x-mustache-template">
        <form method="post" id="login-form" class="login-form" onsubmit="{{#displayUsername}}username.value = node.value + '@' + domain.value;{{/displayUsername}}Candy.Util.setCookie('jid', username.value, 365);Candy.Util.setCookie('username', node.value, 365);Candy.Util.setCookie('password', password.value, 365)">
            {{#displayUsername}}
                <label for="node">{{_labelUsername}}</label>
                <input type="text" id="node" name="node"/>
                <label for="domain">@</label>
                <select id="domain" name="domain" tabindex="-1">
                    <option label="my-card.in" value="my-card.in" selected="selected" />
                    <option label="gmail.com" value="gmail.com" />
                </select>

            {{/displayUsername}}
            <input type="hidden" id="username" name="username" value="{{presetJid}}"/>
            {{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password" />{{/displayPassword}}
            <input type="submit" class="button" value="{{_loginSubmit}}" />
        </form>
    </script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to
    improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="card_top">
    <div class="card_logo">
        <img src="/assets/images/logo.png" alt=""/>
    </div>
    <div class="card_form">
        <select name="" id="">
            <option value="">选择分区</option>
            <option value=""></option>
            <option value=""></option>
        </select>
        <input id="new_room_button" type="button" value="建立房间"/>
    </div>
    <div class="log_reg">
        <a href="">注册</a>
        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a id="login_button" class="login">登录</a>
    </div>
</div>
<div class="card_center">
    <div id="rooms" ></div>
    <div class="online_list" >
        <div class="online_title">在线用户</div>
        <ul>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <li>
                <img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
            </li>
            <!-- <li class="online_botttom"></li> -->
        </ul>
    </div>
    <div style="clear:left;"></div>
</div>
<div id="candy" style="top:auto;height:260px;display:none"></div>

<div id="new_room_dialog" style="display: none">
    <form id="new_room">
        <label for="new_room_name">房间名</label>
        <input type="text" id="new_room_name" name="name"/><br/>
        <label for="new_room_password">房间密码</label>
        <input type="password" name="password" id="new_room_password" value=""/><br/>
        <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp">竞技场</label>

        <hr/>
        <label for="new_room_rule">卡片允许</label>
        <select id="new_room_rule" name="rule">
            <option value="0" selected="selected">ＯＣＧ</option>
            <option value="1">ＴＣＧ</option>
            <option value="2">ＯＣＧ＆ＴＣＧ</option>
            <option value="3">专有卡禁止</option>
        </select><br/>
        <label for="new_room_mode">决斗模式</label>
        <select id="new_room_mode" name="mode">
            <option value="0">单局模式</option>
            <option value="1" selected="selected">比赛模式</option>
            <option value="2">ＴＡＧ</option>
        </select>
        <hr/>
        <h3>额外选项</h3>

        <label for="new_room_start_lp">初始LP</label>
        <input type="number" name="start_lp" id="new_room_start_lp" min="0" max="99999" value="8000"/><br/>
        <input type="submit" value="确定"/>
    </form>
</div>
<div id="join_private_room_dialog" style="display: none">
    <form id="join_private_room">
        <label for="joinroom_password">房间密码</label>
        <input name="password" type="password" id="joinroom_password" value=""/>
        <input type="submit" value="确定"/>
    </form>
</div>

<!--<div id="login_dialog" style="display: none;">
    <form id="login">
        <label for="login_node">用户</label><input name="node" type="text" id="login_node" tabindex="1" />@<select name="domain" id="login_domain" style="width:50px">
            <option value="my-card.in">my-card.in</option>
            <option value="gmail.com">gmail.com</option>
        </select><br />
        <label for="login_password">密码</label><input name="password" type="password" id="login_password" tabindex="2"/>
        <input type="submit" value="确定" tabindex="3"/>
    </form>
</div>-->

<script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
<script src="/vendor/javascripts/jquery.tmpl.min.js"></script>
<script src="/vendor/javascripts/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/vendor/javascripts/jquery.cookie.js"></script>
<script src="/vendor/javascripts/jquery.select.js"></script>
<script src="/assets/javascripts/jquery-ui.cambobox.js"></script>

<script src="/vendor/javascripts/spine/spine.js"></script>
<script src="/vendor/javascripts/spine/ajax.js"></script>
<script src="/vendor/javascripts/spine/relation.js"></script>
<script src="/vendor/javascripts/underscore-min.js"></script>
<script src="/vendor/javascripts/stroll.min.js"></script>

<script src="/vendor/javascripts/mycard.js"></script>

<link rel="stylesheet" type="text/css" href="/vendor/candy/res/default.css"/>
<script type="text/javascript" src="/vendor/candy/libs/libs.min.js"></script>
<script type="text/javascript" src="/vendor/candy/candy.min.js"></script>

<script type="text/javascript" src="/assets/javascripts/candy.fix.js"></script>

<script type="text/javascript" src="/vendor/candy/plugins/inline-images/candy.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/candy/plugins/inline-images/candy.css" />

<script src="/assets/javascripts/rooms.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
</script>-->
</body>
</html>
