<%@ 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">
    $(document).ready(function() {


//         $(".configFile").click(function(){
//             var path=$(this).find("input[name='path']").val();
//              //view textArea for file
//                  $.ajax({
//                    url: "readFile.action",
//                    data:{
//                        fileName:path
//                    },
//                    type:"post",
//                    success:function(data) {
//                        $("#fileContent").find("textarea").val(null);
//                        $("#fileContent").height(500);
//                        $("#fileContent").find("textarea").val(data);
//                        $("#fileContent").show();
//                        //set new height to content
//                          //  $("#content").css("height", $("#models").height() + $("#modelsParams").height()+150);
//
//                    }
//                });
//         });
        $(".file").click(function(){
             var serial=$("input[name='serial']").val();
             var folderName=$(this).find("input[name='fileName']").val();
             var page=$("input[name='page']").val();

                 $.ajax({
                    url: "viewConfigFoldersContent.action",
                    data:{
                        serialNumber:serial,
                        folderName:folderName,
                        page:page
                    },
                    type:"post",
                    success:function(data) {
                        $("#configFolders").html(null);
                        var dateTime=folderName.split(" ");
                        var dateParts=dateTime[0].split("_");
                        var timeParts=dateTime[1].split("_");

                        var replacedDateTime=dateParts[0]+"/"+dateParts[1]+"/"+dateParts[2]+" "+timeParts[0]+":" +timeParts[1]+":"+timeParts[2];
                        $("#folderName").html(replacedDateTime);
                        $("#configFolders").html(data);
                        return false;
                    }
                });

        });

//            $(".viewNextConfigFolders").live("click",function(){
//                 var devI=$(this);
//        if(devI.attr("disabled")!="disabled"){
//                      devI.attr({disabled:true});
//      if (!ajaxLoading) {
//          ajaxLoading = true;
//          var networkId=$("input[name='networkId']").val();
//          var page=$(this).find("input[name='page']").val();
//              $.ajax({
//                                                    url: "viewDevices.action",
//                                                    data:{
//                                                        networkId:networkId,
//                                                        page:page
//                                                    },
//                                                    cache:false,
//                                                    type:"post",
//                                                    success:function(data) {
//
//                                                        $("#deviceInfo").html(data);
//                                                            devI.attr({disabled:false});
//                                                          return false;
//                                                      }
//                                              });
//                   ajaxLoading=false;
//      }
//        }
//    });
    });
</script>
<style type="text/css">

    .page-info{
        font-size: 15px;
    }

   .navigator-control{
        display: inline !important;
        margin-left: 200px;
   }

   .navigator{
       float: left;
       margin-left: 20px;

   }

  #fileContent{
      margin-left:150px;
  }
  #configsTitle {
        font-size: 22px;
        font-style: italic;
        width: 980px;
        height: 50px;
        line-height: 50px;
        text-align:center;
        margin-top: 40px;
        margin-bottom: 10px;
        float: left;
  }
    .file{
        color:black;
        cursor: pointer;
        font-style: italic;
        float: left;
        width: 180px;
        height: 30px;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    #configFolders{
        width: 800px;
        display: block;
        margin-left: 50px;
        margin-top: 30px;
        float:left;
    }
    #folderName{
        float: right;
        margin-right:125px;
        font-size: 13px;
        font-style: italic;

    }
</style>
<div style="display: block;">

  <div id="configsTitle"> <s:property value="serialNumber"/>  configs</div>
    <div id="folderName"></div>

    <div id="configFolders">
        <s:if test="%{isFilesNull()}">
            There is no config  file
        </s:if>
        <s:else>


            <s:iterator value="files"   var="file">
                <div class="file">
                <%--<a href="#" class="file">--%>
                    <s:property value="#file" />
                    <input type="hidden" value="<s:property value='#file'/>" name="fileName"/>
                <%--</a>--%>
                </div>
                <%--<br/>--%>
            </s:iterator>



            <s:if test="%{countAllFoldersList>12}">

                    <%--<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="viewConfigs.action?serialNumber=<s:property value='serialNumber'/>&page=1" class="viewNextConfigFolders">
                                            <img src="<%=request.getContextPath()%>/images/paging/first.gif" alt="first"/>
                                            <%--<input type="hidden" name="page" value="1"/>--%>
                                        </a>
                                        <%--&nbsp;--%>
                                        <a href="viewConfigs.action?serialNumber=<s:property value='serialNumber'/>&page=<s:property value='%{page - 1}'/>" class="viewNextConfigFolders">
                                            <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="viewConfigs.action?serialNumber=<s:property value='serialNumber'/>&page=<s:property value='#i'/>" class="viewNextConfigFolders 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="viewConfigs.action?serialNumber=<s:property value='serialNumber'/>&page=<s:property value='%{page + 1}'/>" class="viewNextConfigFolders">
                                            <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="viewConfigs.action?serialNumber=<s:property value='serialNumber'/>&page=<s:property value='maxPage'/>" class="viewNextConfigFolders">
                                            <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>




        </s:else>


    </div>
    <input type="hidden" value="<s:property value="serialNumber"/>" name="serial" />
    <input type="hidden" name="page" value="<s:property value="page"/>"/>
    <%--<s:if test="%{isConfigsNull()}">--%>
        <%--no config file--%>
    <%--</s:if>--%>
    <%--<s:else>--%>
        <%--<s:iterator value="configs"   var="config">--%>
            <%--<a href="#" class="configFile">--%>
                <%--<s:property value="#config.configName" />--%>
                <%--<input type="hidden" value="<s:property value='#config.configPath'/>" name="path"/>--%>
            <%--</a>--%>
        <%--</s:iterator>--%>
    <%--</s:else>--%>
    <%--<div id="fileContent">--%>
        <%--<s:textarea name="fileContent" rows="20" cols="50"/>--%>
    <%--</div>--%>



</div>