<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
       $.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 ajaxLoading=false;
                    var clicking=0;
            $(".eachNetworkName").click(function(e){
               var item=$(this);
              // alert("before checking "+item.attr("disabled"));
              //alert(item.attr("disabled"));
             if (!ajaxLoading) {
               ajaxLoading = true;
               if(item.attr("disabled")!="disabled"){
                      item.attr({disabled:true});
             //      alert("after disabling "+item.attr("disabled"));
               clicking=1;


                var allLi=$(this).parent().parent().parent().find(".eachNetworkName").removeClass("selecting");
                $(this).addClass("selecting") ;
                var networkId=$(this).parent().parent().find("input[name='networkId']").val();
                $("#deviceInfo").html("");
                       $.ajax({
                                url: "viewDevices.action",
                                data:"networkId="+networkId,
                                type:"post",
                                success:function(data) {

//                                  $("#deviceInfo").remove();
//                                    var div="<div id='deviceInfo'></div>";
//                                  $("#adminContext").append(div);
                                   $("#deviceInfo").html("");
                                   $("#deviceInfo").html(data);
                                   $(".dataTables_empty").text("There is not any device");

                                   $("input[name='selectedDevice']").val("");

                                   //added for explorer 7
                                        $("#items").show();
                                        $("#allNetworks").attr("src",'images/content/network_storage.png');
                                        var li=$(".subNetwork").find("li");
                                          li.each(function(){
                                          li.attr("disable","false");
                                        }) ;
                                       $(".subNetwork").find("input[name='isHidden']").val(0);
                                       //added for explorer 7
                                            item.attr({disabled:false});
                                       //   alert(item.attr("disabled"));
                                    return false;
                                }
                       });
                      ajaxLoading=false;
                }
             }
            });

        $("#networks").css("margin-top", "50px");
        var valueNetName;

        $('.netName').focus(function() {
            valueNetName = $(this).val();
            if (valueNetName == "Network name") {
                $(this).val("");
            }
        });

        $('.netName').blur(function() {
            if ($(this).val() == "") {
                $(this).val("Network name");
            }
        });

        var firstNetwork = $("#items").find(".item").first();
        firstNetwork.find(".eachNetworkName").addClass("selecting");
        var networkId = firstNetwork.find("input[name='networkId']").val();
        $.ajax({
            url: "viewDevices.action",
            data:"networkId=" + networkId,
            type:"post",
            success:function(data) {
               $("#deviceInfo").html("");
                $("#deviceInfo").html(data);
//                $(".dataTables_empty").text("There is not any device");
                firstNetwork.attr({disabled:false});
                $("input[name='selectedDevice']").val("");
            }
        });

        $(".removeNetwork").hide();

        $(".item").hover(function() {

            $(this).find(".removeNetwork").show();
        },
                function() {

                    $(this).find(".removeNetwork").hide();
                }
                );

        $("#saveNetwork").click(function() {

            var networkName = $("input[name='networkName']").val();

            if (networkName == "Network name" || networkName == "") {
                alert("Please ,input the network name");
            } else {
                if (networkName.length >= 15) {
                    alert("Network name is long.Please input another name !");
                } else {
                    $.ajax({
                        url: "addNewNetwork.action",
                        data:"networkName=" + networkName,
                        type:"post",
                        success:function(result) {
                            if(result=="success"){
                                 $("input[name='networkName']").val("Network name");
                                 $("#addNetwork").hide("slow");
                                 location.reload();
                            }else if(result=="error"){
                                alert("Error ! Please try again!");
                            }


                        }
                    });
                }

            }
        });

        $(".add").click(function () {
            var hh = $("#header").height()+ $("#content").height()+ $("#footer").height()+$("#menuLay").height()+2*25+80+2*10;
            $('#grayBox').css({ opacity: 0.7, 'width':"100%",'height':hh});
            $("#addNetwork").show("slow");
//            $("#items").show();
        });

        $(".closeWindow").click(function (e) {

            var networkName = $("input[name='networkName']").val();
            if (networkName == "Network name" || networkName == "") {
                $("#addNetwork").hide("slow");
                $('#grayBox').css("width", "0px");
                $('#grayBox').css("height", "0px");
            } else {
                if (confirm("Do you want to cancel your data?")) {
                    $("#addNetwork").hide("slow");
                    $('#grayBox').css("width", "0px");
                    $('#grayBox').css("height", "0px");
                    $("input[name='networkName']").val("Network name");
                    return false;
                }

                return false;
            }
        });

        $(".removeNetwork").click(function() {
            if (confirm("Do you really want to remove this network")) {
                var networkId = $(this).parent().find("input[name='networkId']").val();
                $.ajax({
                    url: "removeNetwork.action",
                    data:"networkId=" + networkId,
                    type:"post",
                    dataType:"json" ,
                    success:function(data) {

                        if (data.result != "") {
                            alert(data.result);
                        }
                        else {
                            location.reload();
                        }
                    },
                    error:function(data) {
                        alert(data);
                    }
                });
            }
        });
    });
</script>
<style type="text/css">

    #addNetwork {
        background-color: #aaaaaa;
        margin-top: -50px;
        margin-left: 250px;
        border: #555555 solid 3px;
        display: none;
        position: fixed;
        width: 400px;
        height: 200px;
        z-index: 100;
    }

    .removeNetwork img {
        border: none;
    }

    #close {
        height: 24px;
        width: 400px;
        margin-top: 0px;

    }

    #newNetwork {
        margin-top: 0px;
        margin-left: 80px;
        font-style: italic;
        font-size: 18px;
        margin-bottom: 40px;
        font-weight:bold;
    }

    #close a {
        float: right;
        margin-right: 0px;
        width: 24px;
    }

    #close a img {
        border: none;
    }

    .netName {
        height: 31px;
        margin-left: 50px;
        text-align: center;
        float: left;

    }

    .add a {
        text-decoration: none;
        color: #212121;
    }

    #grayBox {
        position: absolute;
        left: 0;
        top: 0;
        background: #000;
        z-index: 90;
    }

    #ulUsers {
        margin-left: 0;
    }

    #allUsers {
        margin-left: 0;
    }

    .subUser {
        margin-left: 0;
    }

    img {
        border:none;
    }

</style>
<div id="grayBox"></div>
<input type="hidden" value="<s:property value ='items' />" name="items"/>

<div id="addNetwork">
    <div id="close">
        <a href="#" class="closeWindow">
            <img src="<%=request.getContextPath()%>/images/close/close.png" width="24" height="24"/>
        </a>
    </div>
    <div id="newNetwork">
       Creating new network
    </div>
    <div>
        <input type="text" class="netName" name="networkName" value="Network name"/>
        <input type="submit" value="Save" id="saveNetwork"
               style="margin-left: 10px;width: 80px;height: 33px;margin-top:3px; float: left;"/>
    </div>
</div>
<div id="items">
    <s:if test="%{items!=null}">
        <s:iterator value="items" var="item" status="s_item">
            <div class="item">

                <div >
                    <a class="eachNetworkName" href="#" >
                    <img src="<%=request.getContextPath()%>/images/content/package_network.png" width="16" height="16"/>
                    <s:property value="#item.name"/>
                    </a>
                </div>


                <input type="hidden" value="<s:property value="#item.networkId" />" name="networkId"/>
                <s:if test="%{#session.user.userType.value==1}">
                    <a href="#" class="removeNetwork">
                        <img src="<%=request.getContextPath()%>/images/admin/remNetwork.png" width="12" height="12"
                             title="Remove network"/>
                    </a>
                </s:if>
            </div>
        </s:iterator>
        <s:if test="%{#session.user.userType.value==1}">
            <div class="add">
                <img src="<%=request.getContextPath()%>/images/admin/addNetwork.png" width="16" height="16"
                     title="Add network"/>
                <a href="#">Add new</a>
            </div>
        </s:if>
        <input type="hidden" name="isHidden" value="0"/>
    </s:if>
    <s:else>
        <s:text name="msg.nothaving.network"/>
    </s:else>

</div>

