<!doctype html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			html, body {
				height: 100%;
				overflow: auto;
			}
			body {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 12px;
				color: #333333;
				top: 0px;
				margin: 0px;
				padding: 0px;
			}
			.header {
				border-bottom: 1px solid #CCC;
				background-color: #efefef;
				vertical-align: bottom;
			}
			.body {
				padding: 20px;
			}
			h1 {
				font-weight: normal;
				font-size: 2.2em;
				margin: 0;
				padding: 30px 20px;
			}
			h2 {
				font-weight: normal;
				font-size: 1.6em;
			}
			input[type=button] {
				font-size: 1.4em;
				padding: 5px 10px;	
			}
			.icon {
				display: inline-block;
				vertical-align: middle;
				background-image: url(Configuration.png);
				background-repeat: no-repeat;
			}
			.size32 {
				height: 32px; width: 32px;
				margin-right: 10px;
			}
			.config {background-position: 0px 0px;}
			.mapKey {background-position: 0px -32px;}
		</style>
		<script src="../ClientGlobalContext.js.aspx"></script>
		<script type="text/javascript" src="Context.js"></script>
		<script type="text/javascript" src="RestRequest.js"></script>
		<script type="text/javascript">
			function onLoadConfiguration() {
				if(window.Resco && window.Resco.Context && window.Resco.Context.googleMapsApiKey) {
					var googleMapsApiKey = document.getElementById('googleMapsApiKey');
					googleMapsApiKey.value = window.Resco.Context.googleMapsApiKey;
				}
			}

			function onSaveConfiguration() {
				var saveButton = document.getElementById('save');
				saveButton.disabled = true;
				
				setStatus('Saving...', false);
			
				var googleMapsApiKey = document.getElementById('googleMapsApiKey');
				
				var onError = function(error) {
					setStatus('Failed to save the configuration.', true);
					saveButton.disabled = false;
				};

				window.Resco.DataProvider.query("webresourceset", "?$select=webresourceid&$filter=name eq 'resco_MobileCRM/Context.js'",
					function(jsonData) {
						var data = JSON.parse(jsonData);
						var webResourceId = data.value[0].webresourceid;
						
						// Do not parse and modify the current web resource. It is too errorprone.
						// Rather recreate the web resource with the new Google maps API key.
						var webResource = new Object();
						
						webResource.content = '(function () {\r\n';
						webResource.content += '\r\n';
						webResource.content += 'window.Resco = window.Resco || {};\r\n';
						webResource.content += 'window.Resco.Context = window.Resco.Context || {\r\n';
						webResource.content += '    // Following properties are used to enable the mapping functionality (scripts GoogleMapsLoader.js/BingMapsLoader.js).\r\n';
						webResource.content += '    // Visit http://code.google.com/apis/maps/documentation/javascript/tutorial.html for more information\r\n';
						webResource.content += '    googleMapsApiKey: \'' + googleMapsApiKey.value + '\',   // Please specify your Google maps API key (or client ID) here, e.g. googleMapsApiKey: "my_google_key",\r\n';
						webResource.content += '    bingMapsApiKey: null      // Please specify your Bing maps API key here, e.g. bingMapsApiKey: "my_bing_key"\r\n';
						webResource.content += '};\r\n';
						webResource.content += '\r\n';
						webResource.content += '})();';
						webResource.content = window.btoa(webResource.content);
						window.Resco.DataProvider.update('webresourceset', webResourceId, webResource,
							function(jsonData) {
								window.Resco.DataProvider.publishXml('<importexportxml><webresources><webresource>{' + webResourceId + '}</webresource></webresources></importexportxml>',
									function() {
										setStatus('', false);
										saveButton.disabled = false;
									},
									onError);
							},
							onError
						);
					},
					onError
				);
			}
			
			function setStatus(status, isError) {
				var element = document.getElementById('status');

				while(element.firstChild)
					element.removeChild(element.firstChild);

				if(typeof(status) === 'string')
					element.appendChild(document.createTextNode(status));

				element.style.color = isError ? 'red' : '';
				element.style.fontWeight = isError ? 'bold' : '';
			}
		</script>
	</head>
	<body onload="onLoadConfiguration();">
		<div class="header">
			<h1><span class="icon size32 config"></span>Configurations</h1>
		</div>
		<div class="body">
			<h2><span class="icon size32 mapKey"></span>Enter Google maps API key</h2>
			<p><textarea id="googleMapsApiKey" style="width: 400px; height: 80px;"></textarea></p>
			<p><input id="save" type="button" value="Save" onclick="onSaveConfiguration();" /><span id="status" style='padding-left:10px'></span></p>
		</div>
	</body>
</html>
