<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Import Namespace="WebSite.Controllers" %>
<%
    List<Light> lightList = ViewData["LightList"] as List<Light>;
    List<Light> LightDimmerList = ViewData["LightDimmerList"] as List<Light>;
%>
<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" />
<link type="text/css" rel="stylesheet" href="/Styles/app/control.css" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/avalon.mobile.min.js"></script>
<script type="text/javascript">

    function setBrightness(groupAddress, status, callback) {
        showLoading();
        $.ajax({
            url: RoomConfig.LightControlUrl,
            type: 'POST',
            async: false,
            dataType: 'JSON',
            data: { GroupAddress: groupAddress, Status: status },
            success: callback || function (r) {
                hideLoading();
            }
        });
    }

    var vm = avalon.define({
        $id: 'Dimmer',
        setStatus: '0',
        status: 0,
        groupAddress: '',
        lightDimmer: [],
        currentIndex: 0,
        BrightnessClick: function (index) {
            vm.currentIndex = index;
            vm.setStatus = vm.lightDimmer[index].Status + '%';
            vm.status = vm.lightDimmer[index].Status;
            vm.groupAddress = vm.lightDimmer[index].GroupAddress;
            $("#trackBar").val(vm.status);
            var status = $(this).hasClass("active") ? 1 : 0;
            $("#divYS dd a").removeClass("active");
            if (status == 0) {
                $("#divYS dt").removeClass("no-active");
                $(this).toggleClass("active");
                //var groupAddress = $(this).attr("group-address");
            } else {
                $("#divYS dt").toggleClass("no-active");
            }
        },
        LightDimmerClick: function (val) {
            if (val == 'minus') {
                if (vm.status == 0) {
                    return;
                }
                if ((vm.status - 1) < 0) {
                    return;
                }
                vm.status = parseInt(vm.status) - 1;

            } else if (val == 'add') {
                if (vm.status == 100) {
                    return;
                }
                if ((vm.status + 1) > 100) {
                    return;
                }
                vm.status = parseInt(vm.status) + 1;
            }

            $("#trackBar").val(vm.status);
            vm.setStatus = vm.status + '%';
            vm.lightDimmer[vm.currentIndex].Status = vm.status;
            setBrightness(vm.groupAddress, vm.status, function (r) {
                hideLoading();
                if (!r.IsSuccess) {
                    showTip(r.Message);
                }
            });
        }
    });

    trackBar.addEventListener("change", function () {
        vm.status = this.value;
        vm.setStatus = vm.status + '%';
        vm.lightDimmer[vm.currentIndex].Status = vm.status;
        setBrightness(vm.groupAddress, vm.status, function (r) {
            hideLoading();
            if (!r.IsSuccess) {
                showTip(r.Message);
            }
        });
    });


    function setLightStatus(groupAddress, status) {
        showLoading();
        $.ajax({
            url: RoomConfig.LightControlUrl,
            data: { GroupAddress: groupAddress, Status: status },
            type: "POST",
            dataType: "JSON",
            success: function (r) {
                hideLoading();
                if (!r.IsSuccess) {
                    showTip(r.Message);
                }
            }
        });
    }

    $(function () {
        $("#divWS dd a").click(function () {
            $(this).toggleClass("active");
            var groupAddress = $(this).attr("group-address");
            var status = $(this).hasClass("active") ? 1 : 0;
            setLightStatus(groupAddress, status);
        });

        showLoading();
        $.ajax({
            url: "/App/LoadLightDimmer/",
            data: { roomNumber: RoomConfig.RoomNumber },
            type: "POST",
            dataType: "JSON",
            success: function (r) {
                vm.lightDimmer = r;
                hideLoading();
            }
        });
    });
</script>
<div id="cmain">
    <dl id="divWS" class="cmain-list light-list clearfix">
        <% foreach (var item in lightList)
           { %>
        <dd>
            <a href="javascript:void(0)" group-address='<%=item.ModalAddress %>' class='light-deng  <%=item.Status != 0 ? "active":"" %>'>
               </a> <span class="light-deng-ptspan">
                    <%=item.Name %></span></dd>
        <% } %>
    </dl>
    <dl id="divYS" class="cmain-list light-list clearfix" ms-controller="Dimmer">
        <div class="fd">
            <dt class="light-tiaoguan-bj  no-active">
                <div>
                    <a class="tiaoguang-minus" href="javascript:void(0)" ms-click="LightDimmerClick('minus')"><span>-</span></a>
                    <div class="Bar">                     
                        <input type="range" id="trackBar" min="0" max="100" step="1" />
                        <span>{{ setStatus }} </span>
                    </div>
                    <a class="tiaoguang-add" href="javascript:void(0)"  ms-click="LightDimmerClick('add')"><span>+</span></a>
                </div>
            </dt>
        </div>
        <dd ms-repeat="lightDimmer">
            <a href="javascript:void(0)" ms-click='BrightnessClick($index)' class='light-tiaoguang'>
                <span class="light-deng-count">{{el.Status}}</span></a> <span class="light-deng-span">{{el.Name}}</span></dd>
    </dl>
</div>
