<!doctype html>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div id="dialog-form" title="Add/Remove Slivers" style="display: none;">
	<form>
		<fieldset>
			<label for="numberOfSlivers">Number of Slivers</label>
			<input type="text" name="numberOfSlivers" id="numOfSlivers" class="text ui-widget-content ui-corner-all">
			<div id=basic-tooltip>Please enter number of slivers</div>
		</fieldset>
	</form>
</div>
<div id="adv-dialog-form" title="Add/Remove Slivers" style="display: none;">
	<form>
		<fieldset>
			<label for="numberOfSlivers">Number of Slivers</label>
			<input type="text" name="numberOfSlivers" id="advNumOfSlivers" class="text ui-widget-content ui-corner-all">
			<div id=adv-tooltip>Please enter number of slivers</div>
		</fieldset>
	</form>
</div>
<div id="create-slice-form" title="Create New Slice" style="display: none;">
	<form>
		<fieldset>
			<div class="create-slice-row">
				<label for="new-slice-name">Name</label>
				<input type="text" name="new-slice-name" id="new-slice-name">
			</div>
			<div class="create-slice-row">
				<label for="new-service-class">Service Class</label>
				<select id="new-service-class" class="tenant-create-slice"></select>
			</div>
			<div class="create-slice-row">
				<label for="new-image">Image</label>
				<select id="new-image" class="tenant-create-slice"></select>
			</div>
			<div class="create-slice-row">
                                <label for="new-network">Network</label>
                                <select id="new-network" class="tenant-create-slice"></select>
                        </div>
			<div class="create-slice-row">
                                <label for="mount-data-sets">Data Sets</label>
                                <select id="mount-data-sets" class="tenant-create-slice"></select>
                        </div>
			<div class="create-slice-row">
                                <label for="number-of-slivers">Number Of Slivers</label>
                                <input type="text" name="number-of-slivers" id="number-of-slivers">
                        </div>
			<div id=tooltip>Slice Name cannot be empty</div>
		</fieldset>
	</form>
</div>
<div id="delete-slice-form" title="Delete a  Slice" style="display: none;">
	<form>
		<fieldset>
			<div class="create-slice-row">
				<label for="delete-slice">Choose a Slice</label>
				<select id="delete-slice"></select>
			</div>
		</fieldset>
	</form>
</div>
<script type="text/javascript">
	google.load('visualization', '1', {
		'packages': ['controls', 'table', 'corechart', 'geochart']
	});
	</script>
	<script>
	$(document).ready(function () {
		function showSliceData(data,value) {
			var imageData = data['image']['rows'];
			var networkData = data['network']['rows'];
			$("#service-level-value").empty();
			$("#slice-image-value").empty();
			$("#tenantSiteTable").empty();
			$('#tenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tenantSiteTableData"></table>');
			$("#tenantSliceDropDown").val(value);
			var rows = data['userSliceInfo']['rows'];
			var siteNames = [];
			var sliverCount;
			for (row in rows) {
				if (rows[row]['sliceName'] == value) {
					sliceImageData = rows[row]['preferredImage'];
					$("#slice-image-value").html(sliceImageData);
					serviceLevelData = rows[row]['sliceServiceClass'];
					$("#service-level-value").html(serviceLevelData);
					var innerRows = rows[row]['sliceSite'];
					for (innerRow in innerRows) {
						sliverCount = innerRows[innerRow];
						siteNames.push([innerRow, sliverCount]);
					}
				}
			}
			oTable = $('#tenantSiteTableData').dataTable({
				"bJQueryUI": true,
				"bFilter": false,
				"bInfo": false,
				"bLengthChange": false,
				"aaData": siteNames,
				"bStateSave": true,
				"aoColumns": [{
						"sTitle": "Site Name"
					}, {
						"sTitle": "Allocated",
						sClass: "alignCenter"
					}
					//{ "sTitle": "Allocated" , sClass: "alignCenter"},
					//{ "sTitle": "Desired" , sClass: "alignCenter"},
				]
			});
				$('#tenantSliceDropDown').on('change', function () {
					var value = $("#tenantSliceDropDown").val();
	//alert(value);
					checkForBasicAdvView(value, data);
				});
		}

		function downloadSliceInfo(data,value){
			 $("#download-details").unbind().click(function(){
                                                function download(filename, text) {
    						var sliceDetails = document.createElement('a');
    						sliceDetails.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    						sliceDetails.setAttribute('download', filename);
    						sliceDetails.click();
					}
					var rows = data['userSliceInfo']['rows'];
					var sliceInfo;
					for (row in rows){
						if(rows[row]['sliceName']==value){
							sliceInfo = "Slice Name: "+rows[row]['sliceName']+"\nNumber of Slivers: "+rows[row]['numOfSlivers']+"\nService Level: "+rows[row]['sliceServiceClass']+"\nImage: "+rows[row]['preferredImage']+"\n";	
						for (instanceNodePairs in rows[row]['instanceNodePair']){
							sliceInfo += instanceNodePairs+"@"+rows[row]['instanceNodePair'][instanceNodePairs]+"\n";
						}
						}
					}
					download('slice.txt', sliceInfo);
                          });
		}
		function editSliverAdv() {
			$(".edit-view").click(function () {
				var allocatedSlivers = parseInt($(this).parent().siblings(".allocated").html());
				var td = $(this).parent().siblings(".allocated");
				var pos = oTable.fnGetPosition(td[0]);
				$("#adv-tooltip").css("display", "none");
				$("#numOfSlivers").empty();
				$("#adv-dialog-form").dialog({
					autoOpen: false,
					height: 200,
					width: 350,
					modal: true,
					dialogClass: "tenantDialog",
					buttons: {
						"Add": function () {
							allocatedSlivers += parseInt($("#advNumOfSlivers").val());
							//if (!(parseInt($("#numOfSlivers").val()))) {
								$("#adv-tooltip").css("display", "block");
							//} else {
								$(this).dialog("close");
								td.html(allocatedSlivers);
							//}
						},
						"Remove": function () {
							allocatedSlivers -= parseInt($("#advNumOfSlivers").val());
						//	if (!(parseInt($("#numOfSlivers").val()))) {
								$("#adv-tooltip").css("display", "block");
						//	} else {
								$(this).dialog("close");
								td.html(allocatedSlivers);
						//	}
						}
					}
				});
				$("#adv-dialog-form").dialog("open");
			});
		}

		function advShowSliceData(data,value) {
			var serviceLevelData = data['sliceServiceClass']['rows'];
			var imageData = data['image']['rows'];
			var networkData = data['network']['rows'];
			var siteRows = data['sites']['rows'];
			var dataSet = data['mountDataSets']['rows'];
			$("#adv-service-level-value").empty();
			$("#adv-slice-image-value").empty();
			$("#adv-slice-data-set-value").empty();
			$("#adv-slice-network-value").empty();
			$("#advTenantSliceDropDown").val(value);
			$("<select></select>").attr('id', 'adv-service-level-dropdown').appendTo('#adv-service-level-value');
			$("<select></select>").attr('id', 'adv-image-dropdown').appendTo('#adv-slice-image-value');
			$("<select></select>").attr('id', 'adv-network-dropdown').appendTo('#adv-slice-network-value');
			$("<select></select>").attr('id', 'adv-dataset-dropdown').appendTo('#adv-slice-data-set-value');
			$('#advTenantSiteTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="advTenantSiteTableData"></table>');
			var rows = data['userSliceInfo']['rows'];
			var siteNames = [];
			var sliverCount;
			var tableData = {};
			for (row in serviceLevelData) {
                                $("#adv-service-level-dropdown").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
                        }
                        for (row in imageData) {
                                $("#adv-image-dropdown").append("<option>" + imageData[row]['Image'] + "</option>");
                        }
                        for (row in networkData) {
                                $("#adv-network-dropdown").append("<option>" + networkData[row]['Network'] + "</option>");
                        }
                        for (row in dataSet) {
                                $("#adv-dataset-dropdown").append("<option>" + dataSet[row]['DataSet'] + "</option>");
                        }

			for (row in rows) {
				if (rows[row]['sliceName'] == value) {
					var innerRows = rows[row]['sliceSite'];
					$("#adv-service-level-dropdown").val(rows[row]['sliceServiceClass']);
					$("#adv-image-dropdown").val(rows[row]['preferredImage']);
					$("#adv-dataset-dropdown").val(rows[row]['sliceDataSet']);
					$("#adv-network-dropdown").val(rows[row]['sliceNetwork']);
					for (innerRow in innerRows) {
						tableData[innerRow] = innerRows[innerRow];
					}
				}
			}
			for (row in siteRows) {
				var entry = siteRows[row]['siteName'];
				if (!(entry in tableData)) {
					tableData[siteRows[row]['siteName']] = 0;
				}
			}
			for (row in tableData) {
				siteNames.push([row, tableData[row], '<a href="#" class="edit-view">Edit</a>']);
			}
			$("#save-btn").unbind().click(function () {
				var newTableData = {};
				var newSite = $(".siteName");
				var newAllocated = $(".allocated");
				for (i = 1; i < newSite.length; i++) {
					newTableData[$($(".siteName")[i]).text()] = parseInt($($(".allocated")[i]).text());
				}
				for (newRow in newTableData) {
					if (newTableData[newRow] > tableData[newRow]) {
						$.ajax({
							url: '/tenantaddorremsliver/',
							dataType: 'json',
							data: {
								siteName: newRow,
								count: newTableData[newRow] - tableData[newRow],
								slice: $("#advTenantSliceDropDown").val(),
								actionToDo: "add",
								csrfmiddlewaretoken: "{{ csrf_token }}", // < here 
								state: "inactive"
							},
							type: 'POST',
							complete: function () {
                                                                //oTable.fnReloadAjax();
								location.reload();
                                                        }
						});
					} else if (newTableData[newRow] < tableData[newRow]) {
						$.ajax({
							url: '/tenantaddorremsliver/',
							dataType: 'json',
							data: {
								siteName: newRow,
								count: tableData[newRow] - newTableData[newRow],
								slice: $("#advTenantSliceDropDown").val(),
								actionToDo: "rem",
								csrfmiddlewaretoken: "{{ csrf_token }}", // < here
								state: "inactive"
							},
							type: 'POST',
							complete: function () {
                                                               // oTable.fnReloadAjax();
								location.reload();
                                                        }
						});
					}
				}
				 $.ajax({
                                                        url: '/updateslice/',
                                                        dataType: 'json',
                                                        data: {
                                                                sliceName: $("#advTenantSliceDropDown").val(),
								serviceClass: $("#adv-service-level-dropdown").val(),
								imageName: $("#adv-image-dropdown").val(),
								network: $("#adv-network-dropdown").val(),
								dataSet: $("#adv-dataset-dropdown").val(),
                                                                actionToDo: "update",
                                                                csrfmiddlewaretoken: "{{ csrf_token }}", // < here
                                                                state: "inactive"
                                                        },
                                                        type: 'POST',
                                                        complete: function () {
                                                                //oTable.fnReloadAjax();
                                                                location.reload();
                                                        }
                                                });

			});
			oTable = $('#advTenantSiteTableData').dataTable({
				"bJQueryUI": true,
				"bFilter": false,
				"bInfo": false,
				"bLengthChange": false,
				"bPaginate": false,
				"aaData": siteNames,
				"bStateSave": true,
				"aoColumns": [{
					"sTitle": "Site Name",
					sClass: "siteName"
				}, {
					"sTitle": "Allocated",
					sClass: "alignCenter allocated"
				}, {
					"sTitle": "Edit",
					sClass: "alignCenter"
				}]
			});
			editSliverAdv();
				$('#advTenantSliceDropDown').on('change', function () {
	var selectedValue = $("#advTenantSliceDropDown").val();
	//alert(selectedValue);
					checkForBasicAdvView(selectedValue, data);
					//editSliverAdv();
				});
		}

		function checkForBasicAdvView(value, data) {
			var rows = data['userSliceInfo']['rows'];
			for (row in rows) {
				if (rows[row]['sliceName'] == value) {
					if (rows[row]['numOfSites'] > 1) {
						advShowSliceData(data,value);
						downloadSliceInfo(data,value);
						$("#tenantSliceDataWrapper").css("display","none");
						$("#advancedTenantSliceDataWrapper").css("display","block");
						$("#advTenantSiteTable").css("display","block");
						$("#tenantSiteTable").css("display","none");
						$("#sliver-btn").css("display","none");
						$("#save-btn").css("display","block");
						break;
					} else if(rows[row]['numOfSites'] <= 1){
						showSliceData(data,value);
						downloadSliceInfo(data,value);
						//editSliverAdv();
						$("#tenantSliceDataWrapper").css("display","block");
						$("#advancedTenantSliceDataWrapper").css("display","none");
						$("#advTenantSiteTable").css("display","none");
						$("#tenantSiteTable").css("display","block");
						$("#sliver-btn").css("display","block");
                                                $("#save-btn").css("display","none");
						break;
					}break;
				}
			}
		}

		function UserSliceTable(data) {
				//Add check for #dynamicusersliceinfo_filter label-> input having focus here
				var rows = data['userSliceInfo']['rows'];
				$("<div></div>").attr('id', 'tenantSliceDataWrapper').appendTo('#tabs-5');
				$("<div></div>").attr('id', 'advancedTenantSliceDataWrapper').appendTo('#tabs-5');
				var sliceData = '';
				sliceData += '<div class="tenant-row"><span class="summary-attr"><b>Slice Name:</b> <span id="slice-name-value"> </span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Service Level:</b> <span id="service-level-value"> </span>  </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="slice-image-value"> </span>  </span><br></div><div class="btn btn-high btn-info" id="advanced-tenant">Go to Advanced View</div>';
				var advSliceData = '';
				advSliceData += '<div class="adv-tenant-row"><span class="summary-attr"><b>Slice Name:</b> <span id="adv-slice-name-value"> </span> </span><br><br></div><div class="tenant-row"><span class="summary-attr"><b>Service Level:</b> <span id="adv-service-level-value"> </span> <span class="help-inline">Changes are potentially disruptive to existing slivers</span> </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Image:</b> <span id="adv-slice-image-value"> </span><span class="help-inline">Changes are potentially disruptive to existing slivers</span>  </span><br></div><div class="tenant-row"><span class="summary-attr"><b>Network:</b> <span id="adv-slice-network-value"> </span>  <span class="help-inline">Changes are potentially disruptive to existing slivers</span></span></div><div class="tenant-row"><span class="summary-attr"><b>Data Sets:</b> <span id="adv-slice-data-set-value"> </span>  </span></div>';
				$('#tenantSliceDataWrapper').append(sliceData).css("display", "none");
				$('#advancedTenantSliceDataWrapper').append(advSliceData);
				$("#advancedTenantSliceDataWrapper").css("display", "none");
				$("<select></select>").attr('id', 'tenantSliceDropDown').appendTo('#slice-name-value');
				for (row in rows) {
					$("#tenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
				}
				$("<select></select>").attr('id', 'advTenantSliceDropDown').appendTo('#adv-slice-name-value');
					for (row in rows) {
						$("#advTenantSliceDropDown").append("<option>" + rows[row]['sliceName'] + "</option>");
					}
				$("<div></div>").attr('id', 'tenantSiteTable').appendTo('#tabs-5').css("display","none");
				$("<div></div>").attr('id', 'advTenantSiteTable').appendTo('#tabs-5').css("display", "none");
				$('<div class="btn btn-success" id="create-slice-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Create New Slice</div>').appendTo("#tabs-5");
				$('<div class="btn btn-success" id="delete-slice-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Delete a Slice</div>').appendTo("#tabs-5");
				$('<div class="btn btn-high btn-info" id="download-details">Download Slice Details</div>').appendTo("#tabs-5");
				$('<div class="btn btn-success" id="sliver-btn"><i class="icon-plus-sign icon-white"></i>&nbsp;Add/Remove Slivers</div>').appendTo("#tabs-5");
				$('<div class="btn btn-high btn-info" id="save-btn">Save</div>').appendTo("#tabs-5").css("display", "none");
				$("#advanced-tenant").unbind().click(function () {
					var value = $("#tenantSliceDropDown").val();
					advShowSliceData(data,value);
                                                $("#tenantSliceDataWrapper").css("display","none");
                                                $("#advancedTenantSliceDataWrapper").css("display","block");
                                                $("#advTenantSiteTable").css("display","block");
                                                $("#tenantSiteTable").css("display","none");
                                                $("#sliver-btn").toggle();
                                                $("#save-btn").toggle();

			});
			$("#sliver-btn").click(function () {
				$("#numOfSlivers").empty();
				$("#basic-tooltip").css("display", "none");
				$("#dialog-form").dialog({
					autoOpen: false,
					height: 200,
					width: 400,
					modal: true,
					dialogClass: "tenantDialog",
					buttons: {
						"Add": function () {
							$.ajax({
								url: '/tenantaddorremsliver/',
								dataType: 'json',
								data: {
									count: parseInt($("#numOfSlivers").val()),
									slice: $("#tenantSliceDropDown").val(),
									actionToDo: "add",
									csrfmiddlewaretoken: "{{ csrf_token }}", // < here 
									state: "inactive"
								},
								type: 'POST',
								beforeSend: function () {
									if (!$("#numOfSlivers").val()) {
										$("#basic-tooltip").css("display", "block");
										return false;
									} else {
										return true;
									}
								},
								complete: function () {
									location.reload();
								}
							});
						},
						Remove: function () {
							$.ajax({
								url: '/tenantaddorremsliver/',
								dataType: 'json',
								data: {
									count: parseInt($("#numOfSlivers").val()),
									slice: $("#tenantSliceDropDown").val(),
									actionToDo: "rem",
									csrfmiddlewaretoken: "{{ csrf_token }}", // < here
									state: "inactive"
								},
								type: 'POST',
								beforeSend: function () {
									if (!$("#numOfSlivers").val()) {
										$("#basic-tooltip").css("display", "block");
										return false;
									} else {
										return true;
									}
								},
								complete: function () {
									location.reload();
								}
							});
						}
					}
				});
				$("#dialog-form").dialog("open");
			});
			$("#create-slice-btn").unbind().click(function () {
				var serviceLevelData = data['sliceServiceClass']['rows'];
				var imageData = data['image']['rows'];
				var dataSet = data['mountDataSets']['rows'];
				var networkData = data['network']['rows'];
				$("#new-service-class").empty();
				$("#new-image").empty();
				$("#mount-data-sets").empty();
				$("#new-network").empty();
				for (row in serviceLevelData) {
					$("#new-service-class").append("<option>" + serviceLevelData[row]['serviceClass'] + "</option>");
				}
				for (row in imageData) {
					$("#new-image").append("<option>" + imageData[row]['Image'] + "</option>");
				}
				for (row in dataSet) {
                                        $("#mount-data-sets").append("<option>" + dataSet[row]['DataSet'] + "</option>");
                                }
				for (row in networkData) {
                                        $("#new-network").append("<option>" + networkData[row]['Network'] + "</option>");
                                }
				var nameOfSlice = $("#new-slice-name").val();
				var nameOfServiceClass = $("#new-service-class").val();
				var nameOfImage = $("#new-image").val();
				$("#create-slice-form").dialog({
					autoOpen: false,
					height: 400,
					width: 400,
					modal: true,
					dialogClass: "tenantDialog",
					buttons: {
						"Submit": function () {
							$.ajax({
								url: '/createnewslice/',
								dataType: 'json',
								data: {
									sliceName: $("#new-slice-name").val(),
									serviceClass: nameOfServiceClass,
									imageName: $("#new-image").val(),
									network: $("#new-network").val(),
									mountDataSets: $("#mount-data-sets").val(),
									actionToDo: "add",
									csrfmiddlewaretoken: "{{ csrf_token }}", // < here 
									state: "inactive"
								},
								async: false,
								type: 'POST',
								beforeSend: function () {
									if (!$("#new-slice-name").val()) {
										$("#tooltip").css("display", "block");
										return false;
									} else {
										return true;
									}
								},
								success: function (response) {},
								complete: function () {
									location.reload();
								}
							});
						   $.ajax({
                                                                url: '/tenantaddorremsliver/',
                                                                dataType: 'json',
                                                                data: {
                                                                        count: parseInt($("#number-of-slivers").val()),
                                                                        slice: $("#new-slice-name").val(),
                                                                        actionToDo: "add",
                                                                        csrfmiddlewaretoken: "{{ csrf_token }}", // < here
                                                                        state: "inactive"
                                                                },
								async: false,
                                                                type: 'POST',
                                                                complete: function () {
                                                                        location.reload();
                                                                }
                                                        });

						},
						Cancel: function () {
							$(this).dialog("close");
						}
					}
				});
				$("#create-slice-form").dialog("open");
			});
			$("#delete-slice-btn").unbind().click(function () {
				var rows = data['userSliceInfo']['rows'];
				$("#delete-slice").empty();
				for (row in rows) {
					$("#delete-slice").append("<option>" + rows[row]['sliceName'] + "</option>");
				}
				$("#delete-slice-form").dialog({
					autoOpen: false,
					height: 200,
					width: 350,
					modal: true,
					dialogClass: "tenantDialog",
					buttons: {
						"Delete": function () {
							$.ajax({
								url: '/tenantdeleteslice/',
								dataType: 'json',
								data: {
									sliceName: $("#delete-slice").val(),
									csrfmiddlewaretoken: "{{ csrf_token }}", // < here 
									state: "inactive"
								},
								type: 'POST',
								success: function (response) {},
								complete: function () {
									location.reload();
								}
							});
						},
						Cancel: function () {
							$(this).dialog("close");
						}
					}
				});
				$("#delete-slice-form").dialog("open");
			});
		}


	function initTenant() {
		jQuery.ajax({
			url: '/tenantview',
			dataType: 'json',
			success: function (data) {
				UserSliceTable(data);
				var value = $("#tenantSliceDropDown").val();
				checkForBasicAdvView(value, data);
				$("#tooltip").css("display", "none");
				$("#basic-tooltip").css("display", "none");
				$("#adv-tooltip").css("display", "none");
			},
			complete: function () {}
		});
	}
		
	initTenant();
});
</script>

</html>