<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<style type="text/css">
    #first {
        font-size: 22px;
        font-style: italic;
        width: 500px;
        height: 50px;
        line-height: 50px;
        padding-left: 380px;
        margin-top: 40px;
        float: left;
    }

    #left {
        width: 250px;
        display: block;
        margin-left: 150px;
        float: left;
    }

    #right {
        width: 240px;
        display: block;
        margin-left: 250px;
        float: left;
    }

    #checkboxes {
        margin-top: 10px;
        width: 300px;
        border: #aaaaaa solid 0px;
        height: 50px;
        float: right;
    }

    #submit {
        width: 150px;
        float: left;
        margin-left: 280px;
        margin-right: 10px;
    }

    #footer1 {
        margin-top: 30px;
        display: inline;
        border: #ffffff solid 1px;
        padding-left: 50px;
        float: left;
    }

    #cancel {
        float: left;

    }

    .type {
        width: 300px;
    }

    #middle {
        margin-top: 30px;
        width: 900px;
        height: 50px;
        float: left;
    }

    .check {
        float: left;
        width: 300px;
    }

    .box {
        width: 20px;
        height: 20px;
    }

    #devices {
        width: 900px;
        padding-top: 10px;
        float: left;
        margin-bottom: 10px;
        display: block;
        min-height: 80px;
    }

</style>
<script type="text/javascript ">
    $(document).ready(function() {

        $("input[name='allDevices']").live("click", function() {

            var isChecked = $(this).attr("checked");
            if (isChecked == 'checked') {
                var count = 0;
                var checkCount = $("#allDeviceList").find(":checkbox").length;

                $("#allDeviceList").find(":checkbox").each(function(index) {

                    var checkbox = $(this);
                    var serial = checkbox.parent().find("input[name='eachDevice']").val();
                    $.ajax({
                        url: "checkDeviceStatus.action",
                        data:{
                            serialNumber:serial
                        },
                        type:"post",
                        success:function(result) {
                            if (result != 'input') {
                                checkbox.attr({checked:true});
                                count = 1;
                            }
                            if (checkCount == (index + 1)) {

                                if (count == 0) {
                                    $("input[name='allDevices']").attr({checked:false});
                                    alert("All devices in this page are started to be upgraded.");

                                }
                            }
                        }
                    });

                });

            } else {
                $("#allDeviceList").find(":checkbox").each(function() {
                    $(this).attr({checked:false});
                });
            }
        });

        $(".model").change(function() {
            var modelID = $(".model option:selected").val();

            if (modelID == 0) {
                $("#devices").html("");
            } else {
                $.ajax({
                    url: "getDevicesByModel.action",
                    data:{
                        modelId:modelID
                    },
                    type:"post",
                    success:function(data) {
                        $("#devices").html("");
                        $("#devices").html(data);

                    }
                });
            }

        });
        $("#submit").click(function() {
            var type = $(".upgradeType option:selected").val();
            var modelId = $(".model option:selected").val();
            if (modelId == 0) {
                alert("Please , select the model");
            } else {
                var version = $(".version option:selected").val();
                if (version == 0) {
                    alert("Please, select the version.");
                } else {
                    var checkedCount = $("#allDeviceList").find("input:checked").length;
                    if (checkedCount == 0) {
                        alert("You can't upgrade without selecting any device !");
                    } else {
                        var devices;
                        $("#allDeviceList").find("input:checked").each(function() {
                            if (devices != "") {
                                devices += "," + $(this).parent().find("input[name='eachDevice']").val();
                            } else {
                                devices = $(this).parent().find("input[name='eachDevice']").val();
                            }
                        });
                        $.ajax({
                            url: "fwUpgrade.action",
                            data:{
                                modelId:modelId,
                                version:version,
                                devices:devices
                            },
                            type:"post",
                            success:function(result) {
                                if (result == 'success') {
                                    alert("Process has been completed successfully!");
                                    $("#devices").html("");
                                }


                            }
                        });

                    }
                }
            }
        });
        $("#allDeviceList").find(":checkbox").live("click", function() {

            var isChecked = $(this).attr("checked");

            if (isChecked == 'checked') {
                var checkbox = $(this);
                var serial = checkbox.parent().find("input[name='eachDevice']").val();

                $.ajax({
                    url: "checkDeviceStatus.action",
                    data:{
                        serialNumber:serial
                    },
                    type:"post",
                    success:function(result) {
                        if (result == 'input') {
                            alert(serial + " device waiting to be upgraded.");
                            checkbox.attr({checked:false});
                        }
                    }
                });
            }

        });

        $(".viewNextModelDevices").live("click", function() {
            var modelId = $(".model option:selected").val();

            var page = $(this).find("input[name='page']").val();

            $.ajax({
                url: "getDevicesByModel.action",
                data:{
                    modelId:modelId,
                    page:page
                },
                type:"post",
                success:function(data) {

                    $("#devices").html(data);

                }
            });

        });

    })
</script>
<div style="color: red;">
    <s:property value="#request.message"/>
</div>

<div style="width: 900px;margin-left: 10px">
    <div id="first">Upgrade device</div>
    <div id="middle">
        <div id="left"></div>
        <div id="right">
            <div class="type">Model :</div>
            <select name="model" class="model">
                <option value=0>--Select Model--</option>
                <s:iterator value="models" var="model">
                    <option value="<s:property value="#model.modelId" />"><s:property value="#model.name"/></option>
                </s:iterator>
            </select>

        </div>
    </div>
    <div id="devices">
    </div>
    <div id="footer1">
        <input type="button" value="Upgrade" id="submit"/>
        <input type="reset" value="Cancel" id="cancel"/>
    </div>
</div>



