<%@ include file="/includes.jsp"%>
<%@ taglib prefix="smvc" uri="http://www.springframework.org/tags/form"%>
<%-- Populate the namedListMap with lists relevant to this form.  TODO There must be a more elegant way to achieve this --%>
<c:set var="type" value="${formObject.type}"/>
<input type="hidden" name="method" value="save" id="dispatchMethod" />
<input type="hidden" name="moveId" value="" id="moveId" />
<input type="hidden" name="moveAmount" value="" id="moveAmount" />
<smvc:hidden path="type" />
<smvc:hidden path="id" />
<smvc:hidden path="formObject.domainName"/>
<smvc:hidden path="formObject.id"/>
<smvc:hidden path="formObject.type"/>
<style>
	.toggler	{
		cursor: pointer;
	}
	.toggled	{
		display: none;
	}
</style>

<script>
	function addEvent(a, b) {
		//do nothing
		//added so date preview doesn't throw js error
	}
	function setStyle(attribute){
		if(attribute=='bold'){
		if(document.getElementById('boldId').value=='0'){
			document.getElementById('boldId').value='1'
			}else {
			document.getElementById('boldId').value='0'
			}
		if(document.getElementById('boldId').value=='1'){
			document.getElementById('labelId').style.fontWeight = 700;
		 }else{
			 document.getElementById('labelId').style.fontWeight = 400;
			 }
			}
		if(attribute=='italic'){
		if(document.getElementById('italicId').value=='0'){
			document.getElementById('italicId').value='1'
			}else {
			document.getElementById('italicId').value='0'
			}
		if(document.getElementById('italicId').value=='1'){
			document.getElementById('labelId').style.fontStyle="italic";
			}else{
			 document.getElementById('labelId').style.fontStyle = "";
			}
		}
		if(attribute=='underline'){
		if(document.getElementById('underlineId').value=='0'){
			document.getElementById('underlineId').value='1';
			}else {
			document.getElementById('underlineId').value='0';
			}
		if(document.getElementById('underlineId').value=='1'){
			document.getElementById('labelId').style.textDecoration = "underline";
			 }else{
			 document.getElementById('labelId').style.textDecoration = "";
			 }
		}
		if(attribute=='textSize'){
			document.getElementById('labelId').style.fontSize=document.getElementById('textSizeId').value+'pt';
		}
		if(attribute=='textColor'){
			document.getElementById('labelId').style.color=document.getElementById('textColorId').value;
		}
	    document.getElementById('styleId').value=document.getElementById('boldId').value+""+document.getElementById('italicId').value+""+document.getElementById('underlineId').value+""+document.getElementById('textSizeId').value+""+document.getElementById('textColorId').value;
		}
	
	function setFieldStyleOnLoad(){
		var formType = document.getElementById('formTypeForStyle').value; 
		if(formType=="FormField"){
		var styleValue= document.getElementById('styleId').value;
		if(styleValue!='000000000000'){
		if(styleValue.charAt(0)=='1'){
			document.getElementById('labelId').style.fontWeight = 700;
			document.getElementById('boldId').value=='1';
		 }else{
			 document.getElementById('labelId').style.fontWeight = 400;
			 document.getElementById('boldId').value=='0';
			 }
		if(styleValue.charAt(1)=='1'){
			document.getElementById('labelId').style.fontStyle="italic";
	    	document.getElementById('italicId').value=='1';
		 }else{
			 document.getElementById('labelId').style.fontStyle = "";
			 document.getElementById('italicId').value=='0';
			 }
		if(styleValue.charAt(2)=='1'){
			document.getElementById('labelId').style.textDecoration = "underline";
			document.getElementById('underlineId').value=='1';
		 }else{
			 document.getElementById('labelId').style.textDecoration = "";
			 document.getElementById('underlineId').value=='0';
			 }
		document.getElementById('labelId').style.fontSize=styleValue.substring(3,5)+'pt'; 
		document.getElementById('textSizeId').value=styleValue.substring(3,5);
		document.getElementById('labelId').style.color=styleValue.substring(5,12); 
		document.getElementById('textColorId').value=styleValue.substring(5,12); 
		}
		}
		}
	function setStyleOnLoad(){
		var tables = document.getElementsByTagName("TABLE");
		for ( var k = tables.length - 1; k >= 0; k -= 1) {
			var table = tables[k];
			if (table != null && table.id.indexOf('dynamicTableId') != -1) {
				var rows = table.getElementsByTagName('tr'), i, j, cells, field;
				for (i = 2, j = rows.length; i < j; ++i) {
					cells = rows[i].getElementsByTagName('td');
					if (!cells.length) {
						continue;
					}
					field = $.trim(cells[0].innerHTML)+"_styles";
					if (document.getElementById(field)) {
						var styleValue = document.getElementById(field).value;
						if (styleValue != null && styleValue != '' && styleValue != 'null' && styleValue != 'undefined' && styleValue != '000000000000') {
							if (styleValue.charAt(0) == '1') {
								cells[0].style.fontWeight = 700;
							} else {
								cells[0].style.fontWeight = 400;
							}
							if (styleValue.charAt(1) == '1') {
								cells[0].style.fontStyle = "italic";
							} else {
								cells[0].style.fontStyle = "";
							}
							if (styleValue.charAt(2) == '1') {
								cells[0].style.textDecoration = "underline";
							} else {
								cells[0].style.textDecoration = "";
							}
							cells[0].style.fontSize = styleValue.substring(3, 5)
									+ 'pt';
							cells[0].style.color = styleValue.substring(5, 12);
						}
					}
				}
			}
		}
	}


	// Set form editor styles when page has loaded
	$(document).ready(function(){
		   setStyleOnLoad();
		   setFieldStyleOnLoad();
		   setCheckBoxes();
	});

	function saveFormObject ()	{
        return dispatch('save');
	}
</script>

<table cellpadding="0" cellspacing="0">
	<tr>
		<td valign="top">
		<table class="dialogBox">
			<tr>
				<td class="dialogTitle">Edit <c:out value="${formObject.typeString}"/></td>
					<!--  pinch styles from dialogTitle so help icon looks ok -->
				<td align="right" style="background-color: darkblue; padding: 3px 6px 3px 6px; border: 1px solid #B4B4B4;"><a
					href='../help/form-admin.html# <c:out value="${formObject.typeString}"/>'	title="Help - Form Editor" target="_help"><img	src="../images/16x16/help.png" alt="Help icon" border="0" /></a></td>
			</tr>
			
			<tr>
				<td valign="top">
				<table cellpadding="0" cellspacing="0">
					<c:set var="formType" value="${formObject.getClass().simpleName}" />
					<tr>
						<td class="label"><b>Name</b></td>
						<td class="input">
							<c:if test="${type != 0 }"> <%-- not editing form domain --%>
								<smvc:input  path="formObject.name" title="Enter a unique name to refer to this object.  This is not displayed on the form. (Required)" id="formObjectName"/>
							</c:if>
							<c:if test="${type == 0 }">  <%-- editing form domain --%>
								<input type="hidden"   title="The 'domain' root object name cannot be changed" value="<c:out value="${formObject.name}"/>" disabled="disabled">
								<smvc:hidden path="formObject.name" />
							</c:if>
						</td>
					</tr>
				
				
					<tr>
						<td class="label"><b>Label</b></td>
						<td class="input"><smvc:input path="formObject.label" size="50"
							title="Enter a descriptive label for this object. This will be displayed to the user on screen and in reports etc." />

							<input type="hidden" id="formTypeForStyle" value="<c:out value="${formType}"/>" >

								
							</td>
					</tr>
					<tr>
						<td class="label">Notes<br /></td>
						<td class="input">
							<smvc:textarea rows="3" cols="20" path="formObject.description"
							title="Enter a description for this object. This will appear as a tooltip as a reminder to the user." />
						</td>
					</tr>
							
					<tiles:insertTemplate template ="edit${formType}Fields.jsp"/>
					<tr>
						<td colspan="2">
						<hr />
						</td>
					</tr>
					<tr>
						<td class="label"><div class="toggler">Roles <img src="../images/next-sm.png"/> </div></td>
						<td class="input">
							<div class="toggled" id="rolesdiv">							
								<c:forEach var="role" items="${webapp.roles }">
									<smvc:checkbox path="roles" value="${role.value }"/> <c:out value="${role.value }"/> - <c:out value="${role.description }"/><br />
								</c:forEach>
							</div>
						</td>
					</tr>
				</table>
				</td>
				<td valign="top">
				</td>
			</tr>
			<tr>
				<td align="right" colspan='2' style="padding: 5 3 5 0">&nbsp;<input type="reset" />
				&nbsp;<input type="submit" value="Save" onclick="return saveFormObject();" />
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

<script>
$(".toggler").click(function() {
	  $("#rolesdiv").toggle(100);
	});
</script>