<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="KohoList.aspx.vb" Inherits="eTella.Web.KohoList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>【投票画面】</title>
    <link rel="stylesheet" href="./assets/css/screen.css"/>
    <link rel="stylesheet" href="./assets/css/responsive.css"/>
    <script type="text/javascript" src="./assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="./assets/js/script.js"></script>
    <script type="text/javascript" src="./assets/js/jquery-ui.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.ui.touch-punch.js"></script>
    <script type="text/javascript" src="./assets/js/TweenMax.min.js"></script>
    <link rel="stylesheet" href="./assets/css/loupe.css"/>
    <script type="text/javascript">
        var enableCss3 = true;
        var userAgent = window.navigator.userAgent.toLowerCase();
        if (userAgent.indexOf('msie') != -1) {
            var appVersion = window.navigator.appVersion.toLowerCase();
            if ((appVersion.indexOf("msie 6.") != -1) ||
                (appVersion.indexOf("msie 7.") != -1) ||
                (appVersion.indexOf("msie 8.") != -1)) {
                enableCss3 = false;
            }
        }
        if (enableCss3) {
            $(document).ready(function () {
                //$('a').on('click', function (e) {
                //    e.preventDefault();

                //    var $this = $(this);
                //    TweenLite.to([$('#dialog')], 1, {
                //        scale: 1.0,
                //        opacity: 0,
                //        onComplete: function () {
                //            window.location.href = $this.attr('href');
                //        }
                //    });
                //});
                document.addEventListener('click', 'a', function (e) {
                    e.preventDefault();

                    var $this = $(this);
                    TweenLite.to([$('#dialog')], 1, {
                        scale: 1.0,
                        opacity: 0,
                        onComplete: function () {
                            window.location.href = $this.attr('href');
                        }
                    });
                }, { passive: false });
            });
        }
    </script>
    <script type="text/javascript">
        function zoom(x, y) {
            $('#zoom').scrollLeft(x * 6.3);
            $('#zoom').scrollTop(y * 6.25);
        }
    </script>
    <script type="text/javascript">
         $(function ($) {
             var mask = $('#mask');
             mask.draggable({
                 grid: [1, 60],
                 scroll: true,
                 containment: '#zoom-list ul',

                 drag: function (evt, ui) {

                     zoom(ui.position.left, ui.position.top);
                 },
                 stop: function (evt, ui) {
                 }
             });
         });
    </script>
</head>
<body id="body1" runat="server" onselectstart="return false;" onmousedown="return false;" oncontextmenu="return false;">
    <form id="form1" runat="server">
 
    <div id="numofvotes">
      <asp:Label ID="lblNumOfVotes" runat="server"></asp:Label>
    </div>
        

    <div id="process">
      <ul>
        <li class="end"></li>
        <li class="end"></li>
        <li class="current"></li>
        <li></li>
      </ul>
    </div>

    <div id="dialog">
      <div class="box">
        <div class="box-header">
            <label class="senkyo-mei"><asp:Literal runat="server" ID="LtlSenkyoMei"></asp:Literal></label><br />
            <label class="caption">候補者を選択してください。</label>
        </div>

        <div id="vote" runat="server">
          <div id="vote_container" runat="server">
            
               <div id="zoom">
                    <div id="zoom-inner">
                        <ul>
                            <asp:Literal runat="server" ID="LtlKohoList"></asp:Literal>
                        </ul>
                    </div>
                </div>

             <div id="loupe">       
                    <div id="zoom-list" class="clearfix">
                        <ul>
                            <asp:Literal runat="server" ID="LtlZoomList"></asp:Literal>
                        </ul>
                    </div>
                    <div id="mask"></div>
             </div>

               
          </div>
        </div>
        <div id="btnField" runat="server">
            <asp:Button ID="btn01" runat="server" Text="1～20" CssClass="btn bnbtn" Width="150px" />
            <asp:Button ID="btn02" runat="server" Text="21～40" CssClass="btn bnbtn" Width="150px" />
            <asp:Button ID="btn03" runat="server" Text="41～60" CssClass="btn bnbtn" Width="150px" />
            <asp:Button ID="btn04" runat="server" Text="61～80" CssClass="btn bnbtn" Width="150px" />
            <asp:Button ID="btn05" runat="server" Text="81～100" CssClass="btn bnbtn" Width="150px" />
        </div>
        <div style="float: left;">
          <a id="btnBlank" class="btn" href="KohoDetail.aspx?kohoId=blank">白紙で投票する</a>
        </div>
      </div>
    </div>
    
    <asp:Literal runat="server" ID="LtlClientLog"></asp:Literal>
    </form>
</body>
</html>