<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/general/devices.css">
<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/devices.js"></script>
<script type="text/javascript" charset="utf-8">

     $.fn.liveAndLetDie = function(event, callback) {
    var sel = this.selector;
    function unbind() { $(sel).die(event, callback).die(event, unbind); }
    return this.live(event, callback).live(event, unbind);
};
    $(document).ready(function() {
        var contentTopInt = parseFloat($("#content").css("margin-top").split("p")[0]);
        var footerTop = parseFloat($("#footer").css("margin-top").split("p")[0]);
        $("#infoForUse").css("color", "#cd0a0a");
      //  $("#deviceInfo").css("padding-right", "50px");

        var minHeight=$(window).height()-312;
        var networkHeightInt = $("#networks").height() + footerTop + 23 + contentTopInt;
        var deviceInfoHeightInt = $("#deviceInfo").height() == minHeight ? $("#deviceInfo").height() : ($("#deviceInfo").height() + footerTop + contentTopInt );
        $("#content").css("height", deviceInfoHeightInt > networkHeightInt ? deviceInfoHeightInt : networkHeightInt);

        $(".gradeX").hover(function() {
            $(this).css("cursor", "pointer");
        }, function() {

        });

        $(".gradeXDevices").each(function(index) {
            var status = $(this).find("input[name='status']").val();
            if (status == 1) {
                $(this).css("opacity", "0.5");
            }
        });

        setInterval(function() {
            $(".gradeXDevices").each(function(index) {
                var thisRow = $(this);
                var status = $(this).find("input[name='status']");
                var statusField = $(this).find(".status");
                var serial = $(this).find("input[name='serial']").val();
                var img = "<img src='images/content/wait.png'   width='16' height='16'/>";
                $.ajax({
                    url: "checkDeviceStatus.action",
                    data:{
                        serialNumber:serial
                    },
                    type:"post",
                    success:function(result) {
                        if (result == "input") {
                            status.val(1);
                            statusField.html(img);
                            thisRow.css("opacity", "0.5");
                        } else if (result == "success") {
                            status.val(0);
                            statusField.html("");
                            thisRow.css("opacity", "1");
                        }
                    }
                });
            });
        }, 180000);

        $(".gradeXDevices").live("dblclick", function(e) {
         var devI=$(this);
        if(devI.attr("disabled")!="disabled"){
                      devI.attr({disabled:true});



          //  alert($(e.target).data('oneclicked'));
           // if($(e.target).data('oneclicked')!='yes')
           // {
                    var status = $(this).find("input[name='status']").val();
                    if (status != 1) {
                        var serial = $(this).find("input[name='serial']").val();
                        var serialForView = $(this).find(".serialForView").text();
                        $.ajax({
                            url: "viewDeviceInfo.action",
                            data:{
                                serial:serial,
                                serialForView:serialForView
                            },
                            type:"post",
                            success:function(data) {
//                                   $("#deviceInfo").remove();
//                                    var div="<div id='deviceInfo'></div>";
//                                   $("#adminContext").append(div);
                                $("#deviceInfo").html("");
                                $("#deviceInfo").html(data);
                                $("input[name='selectedDevice']").val(serial);
                                 devI.attr({disabled:false});
                            }
                        });
                    }
          }
            //$(e.target).data('oneclicked','yes');
         //  $(".gradeXDevices").unbind("dblclick" );
        });



        var searchDevice;
        $("input[name='searchDevice']").focus(function() {
            searchDevice = $(this).val();
            if (searchDevice == "Serial Number") {
                $(this).val("");
            }
        });
        $("input[name='searchDevice']").blur(function() {
            if ($(this).val() == "") {
                $(this).val("Serial Number");
            }
        });
    });

</script>
<style type="text/css">

    .navigator-control{
        display: inline !important;
}

    #deviceInfo {
        margin-bottom: 0;
        padding-top: 70px;
        /*padding-right: 20px !important;*/
        /*padding-left:20px;*/
        max-height: 950px !important;
    }

    #example {
        z-index: -1;
    }

    .gradeX {
        cursor: pointer;
    }

    #infoForUse {
        float: left;
        font-size: 12px;
        color: teal !important;
        font-family: Verdana;
        font-style: italic;
        margin-top: 20px;
        width: 650px;
        margin-left:30px;
    }

    .info1 {
        margin-left: 30px !important;
        margin-top: 0;
        border: #212121 dashed 0px;
        width: 650px;
        float:left;

    }

    .gradeX {
        background: #add8e6;

    }

    thead tr {
        background: #ddd;
    }

    th {
        border: #ddd solid 2px;
        font-style: italic;
        font-weight: normal;
        max-width: 130px;
        min-width: 130px;

    }

    td {
        border: #87ceeb solid 2px;
        max-width: 130px;
        min-width: 130px;

    }

    .serialForView {
        min-width: 230px !important;
        max-width: 230px !important;

    }

    #searchDevice img {
        width: 22px !important;
        height: 22px !important;
        border: none;
    }

    .status {
        min-width: 16px !important;
        max-width: 16px !important;
        background: #ffffff;
        border: black solid 0px ;
        /*border: none;*/
    }
    .forHide{
        display: none;
    }

</style>
<s:if test="%{deviceList!=null}">
    <div>
        <a href="#" id="searchDevice" style="float: right;margin-right: 34px;">
            <img src="<%=request.getContextPath()%>/images/find/search.png"/>
        </a>
        <input type="text" name="searchDevice" value="Serial Number"
               style="margin-top: 0;margin-bottom:0;height: 16px;width: 150px;float: right;"/>
    </div>
    <table class="info1">
        <thead>
            <tr>
                <th class="serialForView">
                    <s:text name="label.serialNumber"/>
                </th>
                <th>
                    <s:text name="label.manufacturer"/>
                </th>
                <th>
                    <s:text name="label.oui"/>
                </th>
                <th>
                    <s:text name="label.productClass"/>
                </th>
                <th class="status"></th>
            </tr>
        </thead>
        <tbody>
            <s:iterator value="deviceList" var="device" status="s_device">
                <tr class="gradeX gradeXDevices">
                    <td class="serialForView">
                        <s:property value="#device.serialNumberForView"/>
                    </td>
                    <td>
                        <s:property value="#device.device.manufacturer"/>
                    </td>
                    <td>
                        <s:property value="#device.device.oui"/>
                    </td>
                    <td>
                        <s:property value="#device.device.productClass"/>
                    </td>
                    <td class="status">
                        <s:if test="%{#device.upgradeStatus==1}">
                            <img src='images/content/wait.png' width='16' height='16'/>
                        </s:if>
                    </td>
                    <td class="forHide">
                        <input type="hidden" name="serial" value="<s:property value="#device.device.serialNumber"/>"/>
                        <input type="hidden" name="status" value="<s:property value="#device.upgradeStatus"/>" />
                    </td>
                </tr>
            </s:iterator>
        </tbody>
    </table>

    <s:if test="%{countAllDevices>16}">

        <input type="hidden" name="networkId" value="<s:property value='networkId'/>"/>

        <div class="navigator">
                <span class="page-info">
                    page &nbsp;
                    <s:property value="page"/>
                    &nbsp;/&nbsp;
                    <s:property value="maxPage"/>
                </span>

            <div class="navigator-control">
                <div style="float:right; display: inline;">
                    <div class="left-arrows">
                        <s:if test="%{hasPrevious()}">
                            <a href="#" class="viewNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/first.gif" alt="first"/>
                                <input type="hidden" name="page" value="1"/>
                            </a>
                            <%--&nbsp;--%>
                            <a href="#" class="viewNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/prev.gif" alt="first"/>
                                <input type="hidden" name="page" value="<s:property value="%{page - 1}"/>"/>
                            </a>
                        </s:if>
                        <s:else>
                            <img src="<%=request.getContextPath()%>/images/paging/first_off.gif" alt="first"/>
                            <%--&nbsp;--%>
                            <img src="<%=request.getContextPath()%>/images/paging/prev_off.gif" alt="first"/>
                        </s:else>
                    </div>
                    <div style="float:left;">
                        <s:iterator var="i" begin="%{linkFirstNumber}" end="%{linkLastNumber}">
                            <s:if test="#i == page">
                                    <span class="pager_active">
                                        <s:property value="#i"/>
                                    </span>
                            </s:if>
                            <s:else>
                                <a href="#" class="viewNextDevices pager">
                                    <s:property value="#i"/>
                                    <input type="hidden" name="page" value="<s:property value="#i"/>"/>
                                </a>
                            </s:else>
                            <s:if test="!#st.last">,&nbsp;</s:if>
                        </s:iterator>
                    </div>
                    <div class="right-arrows">
                        <s:if test="%{hasNext()}">
                            <a href="#" class="viewNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/next.gif" alt="first"/>
                                <input type="hidden" name="page" value="<s:property value="%{page + 1}"/>"/>
                            </a>
                            <%--&nbsp;--%>
                            <a href="#" class="viewNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/last.gif" alt="first"/>
                                <input type="hidden" name="page" value="<s:property value="maxPage"/>"/>
                            </a>
                        </s:if>
                        <s:else>
                            <img src="<%=request.getContextPath()%>/images/paging/next_off.gif" alt="first"/>
                            <%--&nbsp;--%>
                            <img src="<%=request.getContextPath()%>/images/paging/last_off.gif" alt="first"/>
                        </s:else>
                    </div>
                </div>
            </div>
        </div>
    </s:if>

    <div id="infoForUse">
        **For more information about each device ,you should double click on the appropriate row
    </div>
    <input type="hidden" name="usersType" value="<s:property value="#session.user.userType.value"/>"/>
</s:if>
<s:else>
    <s:text name="msg.notchoosing.network"/>
</s:else>


