<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8"/>
    <title>Space form</title>
  </head>
<body>
<div id="spaceForm" th:fragment="spaceFormFragment" >
  <script type="text/javascript" th:inline="javascript">
    //<![CDATA[
               
        function showformErrors(errors) {
        	$(".form-error").remove();
        	
        	$.each(errors,function(k,v){
        		$("#"+k).after('<div class="form-error">'+v+'</div>');
        	});
        	$(".form-error").effect("highlight", {}, 1500);
        }
              
        function spaceFormSubmit() {

        	var errors = {};
        	var valid = true;
        	
        	if(!$('#title').val()) {
        		errors['title'] = /*[[#{renkan.error.title.empty}]]*/"renkan.error.title.empty";
        		valid = false;
        	}
            
        	if($('#binConfig').val()) {
        		
        		var editor = ace.edit("binConfigDiv");
        		var annotations = editor.getSession().getAnnotations();
        		if(annotations.length>0) {
                    var error_message = /*[[#{renkan.error.bin_config.json}]]*/"renkan.error.bin_config.json";
                    errors['binConfigDiv'] = error_message + ". "+ annotations[0].type + ": (" +(annotations[0].row+1)+","+annotations[0].column+") " + annotations[0].text; 
        			valid = false;        			
        		}
        	}
            
            showformErrors(errors);
                        
            return valid;
        }
        
        function formatJson(jsonText, tabSize) {
        	var obj = JSON.parse(jsonText);
        	return JSON.stringify(obj, undefined, tabSize);
        }
        function compactJson(jsonText) {
        	var obj = JSON.parse(jsonText);
        	return JSON.stringify(obj);
        }
        
        function _setBinConfigStatus(editor) {
            var annotations = editor.getSession().getAnnotations();
            if(annotations.length>0) {
                $('.binConfigButton').attr("disabled", "disabled");                 
            }
            else {
                $('.binConfigButton').removeAttr("disabled");
            }        	
        }
        
        $(function(){
        	var tabSize = 2;
            var editor = ace.edit("binConfigDiv");
            editor.setTheme("ace/theme/xcode");
            editor.getSession().setMode("ace/mode/json");
            editor.getSession().setTabSize(tabSize);
            editor.getSession().setUseSoftTabs(true);
            _setBinConfigStatus(editor);
            editor.getSession().on('change', function(e) {
            	$('#binConfig').val(editor.getValue());
            });
            editor.getSession().on('changeAnnotation', function() {
                _setBinConfigStatus(editor);
            });
            
            $('#binConfigFormatButton').click(function(){
            	var jsonText = editor.getValue();
            	try {
					editor.setValue(formatJson(jsonText, tabSize),0);
					editor.moveCursorTo(0,0);
					editor.clearSelection();
				} catch (e) {
					//do nothing
				}
            });
            
            $('#binConfigCompactButton').click(function(){
                var jsonText = editor.getValue();
                try {
                    editor.setValue(compactJson(jsonText),0);
                    editor.moveCursorTo(0,0);
                    editor.clearSelection();
                } catch (e) {
                    //do nothing
                }
            });
            
            $('#color').spectrum({
            	showInput: true,
            	showAlpha: true,
            	showPalette: true,
            	showInitial: true
            });
        });
    //]]>
  </script>
  <form action="#" th:object="${space}" th:action="@{/admin/spaces/save}" method="post" onsubmit="return spaceFormSubmit()">
     <fieldset class="form-fields">
       <input type="hidden" th:field="*{id}" th:if="*{id}" />
       <input type="hidden" th:field="*{binConfig}"/>
       <div>
         <label for="title" th:text="#{renkanAdmin.form.title}">Title: </label> 
         <input type="text" th:field="*{title}" />
         <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="form-error"></div>
       </div> 
       <div>
         <label for="uri" th:text="#{renkanAdmin.form.uri}">Uri: </label> 
         <input type="text" th:field="*{uri}" /> 
       </div> 
       <div>
         <label for="description" th:text="#{renkanAdmin.form.description}">Description: </label> 
         <textarea th:field="*{description}"></textarea> 
       </div> 
       <div>
         <label for="color" th:text="#{renkanAdmin.form.color}">Color: </label> 
         <input type="text" th:field="*{color}" /> 
       </div>
       <div>
         <label for="binConfigContainer" th:text="#{renkanAdmin.form.space.bin_config}">Bin config: </label>
         <div id="binConfigContainer">
           <div id="binConfigButtonsDiv"><button type="button" id="binConfigFormatButton" th:text="#{renkanAdmin.form.space.format}" class="binConfigButton">Format</button><button type="button" id="binConfigCompactButton" th:text="#{renkanAdmin.form.space.compact}" class="binConfigButton">Compact</button></div>
           <div id="binConfigDiv" th:text="*{binConfig}"></div>
         </div>
         <div th:if="${#fields.hasErrors('binConfig')}" th:errors="*{binConfig}" class="form-error"></div>
       </div> 

       <div class="submit"> 
         <button type="submit" name="save" th:text="#{renkanAdmin.form.space.submit}">Save</button>
         <!--button type="button" name="cancel" th:text="#{renkanAdmin.form.space.cancel}" th:onclick="location">Cancel</button-->
       </div> 
      
     </fieldset>  
  </form>
</div>
</body>
</html>