<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="WebSite.Controllers" %>
<%
    List<WXMenu> WXMenuList = Session["WXMenuList"] as List<WXMenu>;
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title><%: Html.Language("WXControlRoom")%></title>
    <link rel="stylesheet" href="/Styles/WeiXin2/normalize.css" />
    <link rel="stylesheet" href="/Styles/WeiXin2/style.css" />
    <script type="text/javascript" src='/Scripts/jquery.min.js'></script>
    <script type="text/javascript" src="/Scripts/WeiXin/tip.js"></script>
    <script type="text/javascript" src="/Scripts/WeiXin/iro.min.js"></script>
    <!-- <script src="js/zepto.min.js"></script> -->
    <!-- <script src="js/touch.js"></script> -->
</head>
<body>
	<input id="hidRoomNumber" type="hidden" value='<%=ViewData["RoomNumber"] %>' />
    <article id="mensuo">
        <div class="mensuo">
            <div id="kaisuo" class="toggle">
                <div class='slide'>
                  <span class='fa fa-circle-o'></span>
               </div>
             </div>
             <div class="shuoming">
                 <p><%: Html.Language("WXUnlockFlag")%><%--<br/><%: Html.Language("WXUnlockFlag1")%>--%></p>
             </div>
             <%--<div class="tiaoguo">
                <a href="javascript:;"><%: Html.Language("WXSkipUnlock")%></a>
             </div>--%>
        </div>
    </article>
    <article id="fuwu">
        <div class="fuwu">
            <%--<button class="liuyan"><%: Html.Language("WXMsgFlag")%><br/><%: Html.Language("WXMsgFlag1")%></button>--%>
            <div id="service" class="hujiao">
            </div>
        </div>
    </article>
    <article id="changjing">
        <div class="changjing">
            <div id="scene" class="list">
            </div>
        </div>
    </article>
    <article id="fangkong">
        <div class="changjing">
            <div id="relay" class="list">
            </div>
        </div>
    </article>
    <article id="tiaoguang">
        <div id="dimmer" class="tabgroup">
        </div>
        <div class="kongtiao">
            <div class="sewen">
                <div class="zhuzhuangtu">
                    <p><span id="brightness1"></span></p>
                </div>
                <div class="tiaozheng">
                    <div class="xianshi">
                        <p><span id="brightness">26</span><b>%</b></p>
                    </div>
                    <div class="anniu">
                        <button id="dimmerDown" class="large"><img src="/Images/weixin2/arrow.svg" class="arrow up" alt=""/></button>
                        <button id="dimmerUp"class="large"><img src="/Images/weixin2/arrow.svg" class="arrow down" alt=""/></button>
                    </div>
                </div>
            </div>
            <div>&nbsp;</div>
            <div class="tiaoguang">
                <input id="brightness2" type="range" min="0" max="100" step="1" value="60" />
            </div>
        </div>
    </article>
    <article id="tiaose">
        <div id="color" class="tabgroup">
        </div>
        <div style="position:relative;top:6vh;left:12%;">
            <div class="colorPicker"></div>
            <div id="colorValue"></div>
        </div>
        <%--<template id="color-picker-template">
        <div class="color-picker">
            <div class="color-picker__overlay" v-if="isVisible" v-on:click="hide"></div>
            <transition name="pop">
            <div class="color-picker__flyout" v-if="isVisible">
                <div class="color-chip" v-bind:style="{'background': color}">
                    <div class="color-chip__inner">
                        <h1 class="color-chip__title">RGB</h1>
                        <%--<h3 class="color-chip__subtitle">{{ colorString }}</h3>
                        <h3 id="tiaoseRGB" class="color-chip__subtitle"></h3>
                    </div>
                </div>
                <div class="color-picker__inner">
                    <div class="control" v-bind:style="gradientH">
                        <input id="color001" type="range" min="0" max="360" v-model="h" step="1" />
                    </div>
                    <div class="control" style="visibility:hidden;" v-bind:style="gradientS">
                        <input id="color002" type="range" min="0" max="100" v-model="s" step="1" />
                    </div>
                    <div class="control" style="visibility:hidden;background-color:Gray;">
                        <input id="color004" type="range" min="0" max="100" step="1" value="100" />
                    </div>
                    <div class="control" style="visibility:hidden;" v-bind:style="gradientL">
                        <input id="color003" type="range" min="0" max="100" v-model="l" step="1" />
                    </div>
                </div>
            </div>
            </transition>
            <div id="tiaoseSwatch" class="swatch" v-bind:style="{'background': color}" v-on:click="toggle"></div>
        </div>
        </template>
        <div id="app">
            <color-picker :change="updateColor"></color-picker>
        </div>--%>
    </article>
    <article id="jiaozao">
        <div class="jiaozao">
            <div class="dial">
                <div class="dot"></div>
                <div class="sec-hand"></div>
                <div class="sec-hand shadow"></div>
                <div class="min-hand"></div>
                <div class="min-hand shadow"></div>
                <div class="hour-hand"></div>
                <div class="hour-hand shadow"></div>
                <span class="twelve">12</span>
                <span class="three">3</span>
                <span class="six">6</span>
                <span class="nine">9</span>
                <span class="diallines"></span>
                <div class="date"></div>
             </div>
            <div class="naozhong">
                <p><%: Html.Language("WXAlarmEnabled")%></p>
                <p><b>06:30</b></p>
            </div>
            <div class="caozuo">
                <button class="middle"> &nbsp;&nbsp;<%: Html.Language("WXAlarmDisable")%>&nbsp;&nbsp; </button>
                <button class="middle"> &nbsp;&nbsp;<%: Html.Language("WXAlarmModify")%>&nbsp;&nbsp; </button>
            </div>
        </div>
    </article>
    <article id="kongtiao">
        <div id="air" class="tabgroup">
        </div>
        <div class="kongtiao">
            <div class="wendu">
                <div class="zhuzhuangtu">
                    <p><span id="settingTemp1"></span></p>
                </div>
                <div class="tiaozheng">
                    <div class="xianshi">
                        <p><span id="settingTemp">23</span><b>℃</b><button id="power" class="middle" style="min-width:50px;min-height:34px;"><%: Html.Language("Off")%></button></p>
                    </div>
                    <div class="anniu">
                        <button id="airDown" class="large"><img src="/Images/weixin2/arrow.svg" class="arrow up" alt="" /></button>
                        <button id="airUp" class="large"><img src="/Images/weixin2/arrow.svg" class="arrow down" alt="" /></button>
                    </div>
                </div>
            </div>
            <div id="mode" class="moshi">
                <button class="middle" value="1"><%: Html.Language("Refrigeration")%></button>
                <button class="middle" value="2"><%: Html.Language("Heating")%></button>
                <button class="middle" value="3"><%: Html.Language("AirSupply")%></button>
            </div>
            <div id="fanSpeed" class="moshi">
                <button class="middle" value="1"><%: Html.Language("LowSpeed")%></button>
                <button class="middle" value="2"><%: Html.Language("MediumSpeed")%></button>
                <button class="middle" value="3"><%: Html.Language("HighSpeed")%></button>
            </div>
        </div>
    </article>
    <article id="chuanglian">
        <div id="curtain" class="tabgroup">
        </div>
        <div class="chuanglian">
            <div id="curtainStatus" class="chuangsha">
                <p><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p>
                <p><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p>
            </div>
            <div class="kongzhi">
                <button id="curtainOpen" class="large"><img src="/Images/weixin2/open.svg" class="arrow" alt=""/></button>
                <button id="curtainPause" class="large"><img src="/Images/weixin2/pause.svg" class="pause" alt=""/></button>
                <button id="curtainClose" class="large"><img src="/Images/weixin2/close.svg" class="arrow" alt=""/></button>
            </div>
        </div>
    </article>
    <article id="dianshi">
        <div id="tv" class="tabgroup">
        </div>
        <div class="dianshi">
            <div class="zhukong">
                <button class="middle img mute" mode="1"><img src="/Images/weixin2/mute.svg" alt=""/></button>
                <%--<div><button class="dropdown"><span>电视</span><img src="/Images/weixin2/triangle.svg" alt=""/></button></div>--%>
                <button class="middle img power" mode="2"><img src="/Images/weixin2/power.svg" alt=""/></button>
            </div>
            <div class="guangbiao">
                <button class="up" mode="8"><img src="/Images/weixin2/arrow.svg" class="arrow up" alt=""/></button>
                <button class="right" mode="10"><img src="/Images/weixin2/arrow.svg" class="arrow right" alt=""/></button>
                <button class="down" mode="7"><img src="/Images/weixin2/arrow.svg" class="arrow down" alt=""/></button>
                <button class="left" mode="9"><img src="/Images/weixin2/arrow.svg" class="arrow left" alt=""/></button>
                <button class="ok" mode="11"><span class="txt ok">ok</span></button>
            </div>
            <div class="gongneng">
                <button class="middle" mode="3"><%: Html.Language("Volume")%>+</button>
                <button class="middle" mode="13"><%: Html.Language("Menu")%></button>
                <%--<button class="middle" mode="5"><%: Html.Language("Channel")%>+</button>--%>
                <button class="middle" mode="12"><%: Html.Language("Home")%></button>
                <button class="middle" mode="4"><%: Html.Language("Volume")%>-</button>
                <button class="middle" mode="14"><%: Html.Language("Source")%></button>
                <%--<button class="middle" mode="6"><%: Html.Language("Channel")%>-</button>--%>
                <button class="middle" mode="15"><%: Html.Language("Return")%></button>
            </div>
            <%--<div class="yinliang">
                <div class="speaker" >
                    <svg viewBox="0 0 100 77" xmlns="http://www.w3.org/2000/svg">
                        <path id="speakB" class="volElem" stroke="#eee" d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13" opacity="0.4"/>
                        <path id="speakF" class="volElem" stroke="#fff" d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13"/>
                        <path id="arcBigB" class="volElem" stroke="#eee" d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6" opacity="0.4"/>
                        <path id="arcBigF" class="volElem" stroke="#fff" d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6"/>
                        <path id="arcSmB" class="volElem" stroke="#eee" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8" opacity="0.4" />
                        <path id="arcSmF" class="volElem" stroke="#fff" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8"/>
                        <line id="crossLtRb" class="volElem" opacity="0.6" stroke="#fff" x1="43.8" y1="29.2" x2="62.6" y2="47.8" transform="scale(0)" />
                        <line id="crossLbRt" class="volElem" opacity="0.6" stroke="#fff" x1="62.6" y1="29.2" x2="43.8" y2="47.8" transform="scale(0)" />
                    </svg>
                </div>
                <div class=""></div>
                <div class="vlCtrl">
                    <svg viewBox="0 0 280 37" xmlns="http://www.w3.org/2000/svg">
                        <line id="ctrlLineB" class="volElem" stroke="#eee" x1="17" y1="17.5" x2="261.2" y2="17.5" opacity="0.3"/>
                        <line id="ctrlLineF" class="volElem" stroke="#fff" x1="17" y1="17.5" x2="261.2" y2="17.5"/>
                        <circle id="ctrlCirce" cx="261.2" cy="18" r="18" fill="#fff"/>
                    </svg>
                </div>
            </div>--%>
        </div>
    </article>
    <article id="yinyue">
        <div id="music" class="tabgroup">
        </div>
        <div class="yinyue">
            <div class="shengbo">
                <div id="musicEqua" class="equalizer"></div>
                <%--<div class="name">Background Music 夜店迪斯科</div>--%>
            </div>
            <div class="kongzhi">
                <button class="large" mode="3"><img src="/Images/weixin2/arrow.svg" class="arrow left" alt=""/></button>
                <button id="musicStatus" class="large"><img src="/Images/weixin2/pause.svg" class="pause" alt=""/></button>
                <button class="large" mode="4"><img src="/Images/weixin2/arrow.svg" class="arrow right" alt=""/></button>
            </div>
            <div class="gongneng">
                <button class="middle" mode="6"><%: Html.Language("Volume")%>-</button>
                <span id="musicVolume">6</span>
                <button class="middle" mode="5"><%: Html.Language("Volume")%>+</button>
            </div>
            <%--<div class="yinliang">
                <div class="speaker" >
                    <svg viewBox="0 0 100 77" xmlns="http://www.w3.org/2000/svg">
                        <path id="speakB" class="volElem" stroke="#eee" d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13" opacity="0.4"/>
                        <path id="speakF" class="volElem" stroke="#fff" d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13"/>
                        <path id="arcBigB" class="volElem" stroke="#eee" d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6" opacity="0.4"/>
                        <path id="arcBigF" class="volElem" stroke="#fff" d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6"/>
                        <path id="arcSmB" class="volElem" stroke="#eee" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8" opacity="0.4" />
                        <path id="arcSmF" class="volElem" stroke="#fff" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8"/>
                        <line id="crossLtRb" class="volElem" opacity="0.6" stroke="#fff" x1="43.8" y1="29.2" x2="62.6" y2="47.8" transform="scale(0)" />
                        <line id="crossLbRt" class="volElem" opacity="0.6" stroke="#fff" x1="62.6" y1="29.2" x2="43.8" y2="47.8" transform="scale(0)" />
                    </svg>
                </div>
                <div class=""></div>
                <div class="vlCtrl">
                    <svg viewBox="0 0 280 37" xmlns="http://www.w3.org/2000/svg">
                        <line id="ctrlLineB" class="volElem" stroke="#eee" x1="17" y1="17.5" x2="261.2" y2="17.5" opacity="0.3"/>
                        <line id="ctrlLineF" class="volElem" stroke="#fff" x1="17" y1="17.5" x2="261.2" y2="17.5"/>
                        <circle id="ctrlCirce" cx="261.2" cy="18" r="18" fill="#fff"/>
                    </svg>
                </div>
            </div>--%>
        </div>
    </article>
    <section class="tabbarwrap">
        <div class="tabbar">
            <p class="line"><span class="current"></span></p>
            <ul>
            <% for (int i = 0; i < WXMenuList.Count;i++ )
               { 
                   if(i==5){ %><li>→</li></ul><ul><li>←</li><% } %>
                    <li class='<%=i == 0 ? "active":"" %>' id='<%=WXMenuList[i].Code%>' takePower='<%=WXMenuList[i].TakePower%>'><%=WXMenuList[i].Name%></li>
            <% } %>
            </ul>
        </div>
    </section>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script>
    <script type="text/javascript" src="/Scripts/WeiXin/index.js"></script>
    <script type="text/javascript" src="/Scripts/WeiXin/wx.js"></script>
    <% switch ((int)Session["isCN"]){case 1: %>
    <script type="text/javascript" src="/Scripts/en-US.js"></script>
    <% break; case 2: %>
    <script type="text/javascript" src="/Scripts/zh-TW.js"></script>
    <% break;default: %>
    <script type="text/javascript" src="/Scripts/zh-CN.js"></script>
    <% break; } %>
</body>
</html>
