<%@ include file="/portal/include/include_java.jsp" %>
<c:set var="label"><c:out value="${param.label}" default="Field"/></c:set>
<fieldset id="idSnippet">
  <div class="legend"><c:out value="${label}"/> ID<span class="required">*</span></div>
  <div class="fields">
      <input name="id" type="text" data="id" id="idSnippet_id"/><label for="idSnippet_id">Field ID</label>
      <p class="errorMessage"></p>
   </div>
</fieldset>
<script type="text/javascript">
  var field = $('#idSnippet_id');
  field.read(window.FormData[window.FormDesigner.currentNamespace][componentKey]);

  var idSnippet = {
    validate : function(){
      var problem = window.FormDesigner.DefaultConfValidation.id(componentKey);
      var errorContainer = $("#idSnippet .errorMessage");
      if (problem) {
        errorContainer.html(problem.message).show();
        return false;
      } else {
        errorContainer.hide();
        return true;
      }
    }
  };
  
  idSnippet.validate(componentKey);

  field.change(function(e){
    Snippets.writeAndBuild(this);
    if(idSnippet.validate(componentKey)) {
      <%-- K uses name to return error messages, hence synching the component Id with the name here. --%>
      window.FormData[window.FormDesigner.currentNamespace][componentKey].name = $('#idSnippet_id').val();
    }
  });
</script>