<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="WebSite.Controllers" %>
<%
    List<Light> LightList = ViewData["LightList"] as List<Light>;
    List<Light> DimmerList = ViewData["DimmerList"] as List<Light>;
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>房间号：<%=ViewData["RoomNumber"] %></title>
    <link type="text/css" rel="stylesheet" href="/Styles/WeiXin/common.css" />
    <link type="text/css" rel="stylesheet" href="/Styles/WeiXin/light.css" />
    <link type="text/css" rel="stylesheet" href="/Styles/WeiXin/tip.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/avalon.mobile.min.js"></script>
    <script type="text/javascript">

        var currentGroupAddress = "";
        var currentLight = null;

        function setLight(modalId, status) {
            $.ajax({
                url: '/WeiXin/LightControl/',
                type: "POST",
                dataType: "JSON",
                data: { roomNumber: document.getElementById("hidRoomNumber").value, groupAddress: modalId, status: status == 1 ? 1 : 2 },
                success: function (r) {
                    showTip(r.Message);
                }
            });
        }

        function setBrightness(groupAddress, status) {
            $.ajax({
                url: '/WeiXin/LightControl/',
                type: 'POST',
                async: false,
                dataType: 'JSON',
                data: { roomNumber: document.getElementById("hidRoomNumber").value, groupAddress: groupAddress, status: status },
                success: function (r) {
                    showTip(r.Message);
                }
            });
        }

        function lightDimmerClick(type) {
            var rangeValue = parseInt($("#rgStatus").val());
            switch (type) {
                case "range":
                    $("#sStatus").text(rangeValue);
                    setBrightness(currentGroupAddress, rangeValue);

                    $($(currentLight).children("em")[0]).text($("#rgStatus").val());
                    if (parseInt($("#rgStatus").val()) > 0) {
                        $(currentLight).addClass("selected");
                    } else {
                        $(currentLight).removeClass("selected");
                    }
                    $("#divDimmerBar").hide();
                    $("#rgStatus").val(0);
                    $("#sStatus").text("0");
                    $("#sName").text("");
                    currentGroupAddress = "";
                    currentLight = null;
                    break;
                case "minus":
                    if (rangeValue == 0) {
                        return;
                    }
                    if ((rangeValue - 1) < 0) {
                        return;
                    }
                    $("#sStatus").text(rangeValue - 1);
                    $("#rgStatus").val(rangeValue - 1);
                    setBrightness(currentGroupAddress, rangeValue);
                    break;
                case "add":
                    if (rangeValue == 100) {
                        return;
                    }
                    if ((rangeValue + 1) > 100) {
                        return;
                    }
                    $("#sStatus").text(rangeValue + 1);
                    $("#rgStatus").val(rangeValue + 1);
                    setBrightness(currentGroupAddress, rangeValue);
                    break;
                case "close":
                    $($(currentLight).children("em")[0]).text($("#rgStatus").val());
                    if (rangeValue > 0) {
                        $(currentLight).addClass("selected");
                    } else {
                        $(currentLight).removeClass("selected");
                    }
                    $("#divDimmerBar").hide();
                    $("#rgStatus").val(0);
                    $("#sStatus").text("0");
                    $("#sName").text("");
                    currentGroupAddress = "";
                    currentLight = null;
                    break;
            }
        }

        $(function () {
            $('#light-list li a').click(function () {
                if (null != currentLight) {
                    $($(currentLight).children("em")[0]).text($("#rgStatus").val());
                    if (parseInt($("#rgStatus").val()) > 0) {
                        $(currentLight).addClass("selected");
                    } else {
                        $(currentLight).removeClass("selected");
                    }
                }
                if ($(this).attr("type") == "0") {
                    $("#divDimmerBar").hide();
                    $("#rgStatus").val(0);
                    $("#sStatus").text("0");
                    $("#sName").text("");
                    currentGroupAddress = "";
                    currentLight = null;

                    $(this).toggleClass('selected');
                    setLight($(this).attr("modal"), $(this).hasClass("selected"));
                } else {
                    currentLight = this;
                    $("#rgStatus").val(parseInt($($(this).children("em")[0]).text()));
                    $("#sStatus").text($("#rgStatus").val());
                    $("#sName").text($($(this).children("em")[1]).text());
                    currentGroupAddress = $(this).attr("modal");
                    $("#divDimmerBar").css({ "top": $(this).offset().top + "px" });

                    if ($("#divDimmerBar").is(":hidden")) {
                        $("#divDimmerBar").show();
                    }
                }
            });
        });
    </script>
</head>
<body>
    <input id="hidRoomNumber" type="hidden" value='<%=ViewData["RoomNumber"] %>' />
    <div id="cmain">
        <ul id="light-list" class="clearfix">
            <% foreach (var item in LightList)
               { %>
            <li><a href="javascript:void(0)" type="0" class=' <%=item.Status == 1 ? "selected":"" %>'
                modal='<%=item.ModalAddress %>'><i class="icon icon-lightcontrol"></i><em class="text">
                    <%=item.Name %></em> </a></li>
            <% } %>
            <% foreach (var item in DimmerList)
               { %>
            <li><a href="javascript:void(0)" type="1" class=' <%=item.Status != 0 ? "selected":"" %>'
                modal='<%=item.ModalAddress %>'><i class="icon icon-lightcontrol"></i><em class="dimmer">
                    <%=item.Status%></em><em class="text">
                        <%=item.Name %></em></a></li>
            <% } %>
        </ul>
        <%-- http://cssass.com/blog/2010/702.html 
        http://www.zhangxinxu.com/study/201008/html5-range-input.html--%>
    </div>
    <div id="divDimmerBar" style="position: absolute; display: none; width: 100%; left: -15px;
        top: 150px;">
        <%--<a class="tiaoguang-minus" href="javascript:void(0)" onclick="lightDimmerClick('minus')">
            <span>-</span></a>--%>
        <div class="Bar">
            <span id="sName" style="position: absolute; width: 100%; text-align: center; font-weight: bold;
                color: #D1B66F; font-size: 16pt; margin-top: -40px;"></span>
            <input type="range" id="rgStatus" min="0" max="100" step="1" onchange="lightDimmerClick('range')" />
            <span id="sStatus">0</span>
        </div>
        <%--<a class="tiaoguang-add" href="javascript:void(0)" onclick="lightDimmerClick('add')">
            <span>+</span></a>--%>
        <a class="tiaoguang-close" href="javascript:void(0)" onclick="lightDimmerClick('close')">
                <span>x</span></a>
    </div>
    <% Html.RenderPartial("Footer"); %>
</body>
</html>
