<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css"/>
		<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css"/>	
		
		<script src="jquery-1.7.1.js"></script>
		<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="Util.js"></script>
		<script src="ProductDataObject.js"></script>
		<script src="ProductElementObject.js"></script>
		<script src="GroupDataObject.js"></script>
		<script src="GroupElementObject.js"></script>
		<script src="TagElementObject.js"></script>
		<script src="TopLevelElementObject.js"></script>
		<script src="StyleFcuker.js"></script>
		<script src="control.js"></script>
		
		<script>
			$(function() {
				$("#add-product-dialog").dialog(
					{
						autoOpen: false,
						height: 400,
						width: 400,
						modal: true,
						buttons: {
							Add: function() {
								//$(this).find("input").removeClass("ui-state-error");
								//$(this).find(".tips-header").text("").removeClass("ui-state-highlight");
								$(this).find(".tips-header").text("").removeClass("ui-state-error");
								var Form = $(this).find("#add-product-form");
								Form.submit();
								/*if (ValidateItemForm($(this))) {
									$(this).find("input").val("");
									SubmitItem(Form);
								}*/
							},
							Cancel: function() {
								$(this).dialog("close");
							}
						},
						close: function() {
							$(this).find(".tips-header").text("").removeClass("ui-state-error");
							$(this).find("input[type!='hidden']").val("");
						}
					}		
				);
				
				$("#add-group-dialog").dialog(
					{
						autoOpen: false,
						height: 250,
						width: 400,
						modal: true,
						buttons: {
							Add: function() {
								$(this).find(".tips-header").text("").removeClass("ui-state-error");
								var Form = $(this).find("#add-group-form");
								Form.submit();
							},
							Cancel: function() {
								$(this).dialog("close");
							}
						},
						close: function() {
							$(this).find(".tips-header").text("").removeClass("ui-state-error");
							$(this).find("input[type!='hidden']").val("");
						}
					}
				);
				$("#add-product-form").validate(
					{
						rules: {
							name: {
								required: true,
							},
							date: {
								required: true,
								date: true
							},
							expires: {
								date: true
							},
							barcode: {
								number: true
							}
						},
						submitHandler: function(Form) {
							SubmitItem($("#add-product-dialog"));
						}
					}		
				);
				$("#add-group-form").validate(
					{
						rules: {
							name: {
								required: true
							}
						},
						submitHandler: function(Form) {
							SubmitGroup($("#add-group-dialog"));
						}
					}
				);
				$("#add-product-form-input-date").datepicker({dateFormat: "yy-mm-dd"});
				$("#add-product-form-input-expires").datepicker({dateFormat: "yy-mm-dd"});
				//$(".tags-control-tagentry").autocomplete({source: GetTagSuggestions});
				PopulatePage();
			});
		</script>
	</head>
	<body>
		<div id="filters-container">
		</div>
		<div id="forms" style="display: none">
			<div id="add-product-dialog" title="Add product">
				<span class="tips-header"></span>
				<form id="add-product-form">
					<fieldset>
						<label for="name">Product name</label><br/>
						<input type="text" name="name" id="add-product-form-input-name"/><br/>
						<label for="date">Date</label><br/>
						<input type="date" name="date" id="add-product-form-input-date"/><br/>
						<label for="expires">Expires</label><br/>
						<input type="date" name="expires" id="add-product-form-input-expires"/><br/>
						<label for="barcode">Barcode</label><br/>
						<input type="number" name="barcode" id="add-product-form-input-barcode"/>
						<input type="hidden" name="Action" value="additem"/>
					</fieldset>
				</form>
			</div>
			<div id="add-group-dialog" title="Add group">
				<span class="tips-header"></span>
				<form id="add-group-form">
					<fieldset>
						<label for="name">Group name</label><br/>
						<input type="text" name="name" id="add-group-form-input-name"/>
						<input type="hidden" name="Action" value="addgroup"/>
					</fieldset>
				</form>
			</div>
		</div>
		<div id="templates" style="display: none">
			<span class="ui-widget error-message">
				<span class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
					<strong>Alert:</strong> <span class="error-message-text"></span>
				</span>
			</span>
			<div class="TopLevelView">
				<div class="bookend">
					<span class="button TLV-control-addproduct" onclick="$('#add-product-dialog').dialog('open');">Add Product</span>
					<span class="button TLV-control-addgroup" onclick="$('#add-group-dialog').dialog('open');">Add Group</span>
					<span class="button TLV-control-showfilters" onmouseover="ShowFilters($(this));" style="display: none">Filters</span>
				</div>
				<div class="list-container">
					<div class="list"></div>
				</div>
				<div class="bookend">
				</div>
			</div>
			<div class="product">
				<div class="bookend">
					<span class="product-data">
						<span class="product-name"></span>
						<span class="product-barcode"></span>
						<span class="product-bought"></span>
						<span class="product-expires"></span>
						<span class="product-stocked ui-state-error" style="display: none">Out of stock</span>
						<span class="product-low ui-state-highlight" style="display: none">Low</span>
					</span>
					<span class="product-controls">
						<span class="button product-control-stock" onclick="ToggleStock($(this));">Out of stock</span>
						<span class="button product-control-low" onclick="ToggleLow($(this));">Low</span>
						<span class="button product-control-remove" onclick="Delete($(this));">Remove</span>
					</span>
				</div>
				<div class="bookend">
					<span class="tags-line"></span>
					<span class="tags-controls">
						<input type="text" name="tag" class="tags-control-tagentry"/>
						<span class="button tags-control-tag" onclick="AddTag($(this));">Tag</span>
					</span>
				</div>
			</div>
			<div class="group">
				<div class="bookend">
					<span class="group-data">
						<span class="group-name"></span>
					</span>
					<span class="group-controls">
						<span class="button group-control-toggle" onclick="ToggleExpand($(this));">Toggle expansion</span>
						<span class="button group-control-remove" onclick="Delete($(this));">Remove</span>
						<span class="button group-control-showfilters" onmouseover="ShowFilters($(this)); " style="display: none">Filters</span>
					</span>
				</div>
				<div class="list-container">
					<div class="list">
					</div>
				</div>
				<div class="bookend">
					<span class="tags-line"></span>
					<span class="tags-controls">
						<input type="text" name="tag" class="tags-control-tagentry"/>
						<span class="button tags-control-tag" onclick="AddTag($(this));">Tag</span>
					</span>
				</div>
			</div>
			<span class="tags-tag">
				<span class="tags-tag-name"></span>
				<span class="button tags-tag-control-remove" onclick="RemoveTag($(this));">X</span>
			</span>	
		</div>
		<form name="new-item" onSubmit="Submit($(this)); return false;" style="display: none">
			<input type="text" required="required" name="name" value="Product"/>
			<input type="date" required="required" name="date" value="0000-00-00"/>
			<input type="date" name="expires" value="0000-00-00"/>
			<input type="number" name="barcode" value="0"/>
			<input type="hidden" name="Action" value="additem" />
			<input type="submit" value="Submit"/>
		</form>
		<form name="new-group" onSubmit="Submit($(this)); return false;" style="display: none">
			<input type="text" required="required" name="name" value="Group"/>
			<input type="hidden" name = "Action" value="addgroup"/>
			<input type="submit" value="Submit"/>
		</form>
		<div id="TLVTarget">
		</div>
	</body>
</html>