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

<style type="text/css">
    #checkboxList {
        margin-left: 60px;
    }

    #leftDiv, #rightDiv, #rightRightDiv {
        width: 300px;
        float: left;
    }
    #save,#cancel{
        border: none;
        background: url("images/button/button.png") no-repeat scroll left top transparent;
        height: 27px;
        width: 60px;
        cursor: pointer;
        }
    #save{
        margin-left: 350px;
    }
    #cancel{
        margin-left: 10px;
    }
</style>
<script type="text/javascript">



    function statusAllChecking(status) {
        $("input[name='parameters']").each( function() {
        $(this).attr("checked",status);

        })
     }

    $(document).ready(function() {
        var checkedCount = 0;
        var checkboxCount = 0;
        var user = $("#usertype option:selected").val();
        $(".checkboxLabel").each(function(index) {
            checkboxCount++;
            var id = index + 1;
            var gg ;
            if ((id) % 3 == 0) {
                 gg= $("#parameters-" + id);
                if ($("#" + user + index).val() == 1) {
                    checkedCount++;
                    gg.attr("checked", true);
                }
                gg.css("marginLeft", "18px");
                $("#leftDiv").append(gg);
                $("#leftDiv").append("<div id='" + index + "'></div>");
                $("#leftDiv").append($(this));
                $("#" + index).css("float", "left");
                $("#leftDiv").append($("#def" + (index)));
                $("#leftDiv").append("<br/>");
            }
            else if ((id) % 3 == 1) {
                gg = $("#parameters-" + id);
                if ($("#" + user + index).val() == 1) {
                    gg.attr("checked", true);
                    checkedCount++;
                }
                gg.css("marginLeft", "18px");
                $("#rightDiv").append(gg);
                $("#rightDiv").append("<div id='" + index + "'></div>");
                $("#rightDiv").append($(this));
                $("#" + index).css("float", "left");
                $("#rightDiv").append($("#def" + (index)));
                $("#rightDiv").append("<br/>");
            } else {
                gg = $("#parameters-" + id);
                if ($("#" + user + index).val() == 1) {
                    gg.attr("checked", true);
                    checkedCount++;
                }
                gg.css("marginLeft", "18px");
                $("#rightRightDiv").append(gg);
                $("#rightRightDiv").append("<div id='" + index + "'></div>");
                $("#rightRightDiv").append($(this));
                $("#" + index).css("float", "left");
                $("#rightRightDiv").append($("#def" + (index)));
                $("#rightRightDiv").append("<br/>");
            }
        });

        if (checkedCount == checkboxCount) {
            $("#selectAll").attr("checked", true);
        }
        var checksCount = $('.checkboxLabel').length;
        for (var i = 0; i < checksCount; i++) {
            if ($("#def" + i).val() == 1) {
                var ggg = i + 1;
                var fff = "<img src='<%=request.getContextPath()%>/images/settings/default.png' title='default' width='13'/>";
                $("#" + i).html(fff);
                $("#parameters-" + ggg).css("marginLeft", "3px");
            }
        }
      $(".checkboxLabel").append("</br>");
    });
</script>
<div style="margin-left: 100px;">
</div>
<br/>
<s:if test="%{!isParamsEmpty()}">
    <label style="color:green;"> select all</label>
    <input type="checkbox" id="selectAll" onclick="statusAllChecking(this.checked)"/>

    <div id="checkboxList">
        <s:checkboxlist list="parameters" listKey="id" listValue="visualName" id="parameters" name="parameters"/>
    </div>

    <s:iterator var="param" value="parameters" status="s_param">
        <input type="hidden" value="<s:property value="#param.visibleForAdmin" />"
               id="Admin<s:property value="#s_param.index" />"/>
        <input type="hidden" value="<s:property value="#param.visibleForOperator" />"
               id="Operator<s:property value="#s_param.index" />"/>
        <input type="hidden" value="<s:property value="#param.defparam" />"
               id="def<s:property value="#s_param.index" />"/>
    </s:iterator>

    <div style="margin-top:10px;margin-left:50px;width:900px;display:block;min-height:100px;float:left;">
        <div id="leftDiv"></div>
        <div id="rightDiv"></div>
        <div id="rightRightDiv"></div>
    </div>

    <div style="float:left;margin-top:20px;width: 900px;">
        <button id="save" type="submit">Save</button>
        <button id="cancel" type="reset">Cancel</button>
    </div>

</s:if>
<s:else>
    <s:text name="label.modelParams"/>
</s:else>
