<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<style type="text/css">
    #modelDiv {
        display: none;
    }

</style>
<script type="text/javascript">
    $(document).ready(function() {
        var ajaxLoading = false;
        $("#usertype").change(function() {
            $("#modelsParams").html("");
            if ($("#usertype option:selected").val() == ""){
                $("#modelDiv").css("display", "none");

            } else {
                $("#modelDiv").css("display", "block");
                //checking if model is selected
                var selectedModel = $("#model option:selected").val();
                if (selectedModel == "") {
                    $("#modelsParams").html(null);
                } else {
                    $.ajax({
                        url: "viewParams.action",
                        data:{
                            selectedModel:selectedModel
                        },
                        type:"post",
                        success:function(data) {
                            $("#modelsParams").html(data);
                        }
                    });
                }
            }
        });

        $("#model").change(function() {
            var selectedModel = $("#model option:selected").val();
            if (selectedModel == "") {
                $("#modelsParams").html(null);
            } else {
                $.ajax({
                    url: "viewParams.action",
                    data:{
                        selectedModel:selectedModel
                    },
                    type:"post",
                    success:function(data) {
                        $("#modelsParams").html(data);
                    }
                });
            }
        });

        $("#save").live("submit", function() {

            if (!ajaxLoading) {
                ajaxLoading = true;
                $("#selectParamsForAdmin").submit();
                ajaxLoading = false;
            }
        });
    });

</script>

<div style="width:980px;text-align:center;margin-top: 55px;margin-bottom: 50px;font-size: 22px;font-style: italic;font-weight: normal;">
    <s:text name="label.settingCustomParam"/>
</div>
<form action="selectParamsForUser.action" id="selectParamsForAdmin">
    <div style="float:left; min-width:200px;">

          <s:text name="label.UserType"/>

              <table><s:select headerValue="--Select user --" id="usertype" headerKey="" list="users" name="users" value=""/>

          </table>
    </div>
    <div style="float:left; min-width:200px;" id="modelDiv">

          Models :
           <table>         <s:select list="models" listKey="modelId" listValue="name" headerKey="" headerValue="--Select Models--"
                            id="model" name="models" cssClass="hidden"/>

       </table>
    </div>
    <div id="modelsParams" style="float:left; width:900px; display:block;">

    </div>
</form>