<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>In App Message</title>
    <link href="../../InAppWalkthrough/styles/iam.css" rel="stylesheet" type="text/css">

	<script src="../../InAppWalkthrough/scripts/jquery.min.js"></script>
	<script src="../../InAppWalkthrough/scripts/jquery.i18n.properties-1.0.9.js"></script>
	<script src="../../InAppWalkthrough/scripts/handlebars-v3.0.0.js"></script>

	<script id="handlebars-template" type="text/x-handlebars-template">

        <div class="container">
            <div class="content"> 
				<!-- Title -->
				<h4 class="featureTitle"> {{I18n UPDATES_TITLE}} 
					<span class="featureTag error_tag"> {{I18n UPDATES_TAG}} </span>
				</h4>

				<!-- Description -->
				<p class="description"> {{{I18n UPDATES_DESC}}} </p>

				<!-- Banner -->
				<div class="banner">
					<p class="description banner_text error_banner error_text">{{{I18n UPDATES_BANNER}}}</p>
				</div>

				<!-- Troubleshoot -->
				<div id="hintTroubleshootButton" class="button_large">
					<a href="#" button_large-hover="{{I18n UPDATES_CTA}}"> <span>{{I18n UPDATES_CTA}}</span></a>
				</div>
            </div>
        </div>

	</script>

	<script>
		$(function() {

			function getQueryVariables() {
				var result = {};
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i=0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair.length === 2){
						result[pair[0]] = pair[1];
					}
				}
				return result;
			}

			// Get query variables
			var vars = getQueryVariables();
			vars.state = vars.state || "InstallFailure"; // InstallFailure, InstallFault, RevertFailure, RevertFault

			function isKeyDefined (key) {

				// If key is returned as [key], its not defined
				if ($.i18n.prop(key) === "[" + key + "]") {
					return false;
				}
				return true;
			}

			// Generate HTML from template
			function renderHTML() {

				// Register for localized strings
				Handlebars.registerHelper('I18n', function(str){

					// If I18n is available, return localized string
					return ($.i18n ? $.i18n.prop(str) : str);
				});

				// Build context
				var context = {
					UPDATES_TITLE: "UPDATES_TITLE",
					UPDATES_TAG: "UPDATES_TAG_ERROR",
					UPDATES_DESC: "UPDATES_INSTALL_ERROR2_DESC",
					UPDATES_BANNER: "UPDATES_UN_INSTALL_ERROR_BANNER",
					UPDATES_CTA: "UPDATES_UN_INSTALL_ERROR_CTA"
				};

				
				if (vars.state === "InstallFault") {
					context.UPDATES_DESC = "UPDATES_INSTALL_ERROR_DESC";
				} else if (vars.state === "RevertFailure") {
					context.UPDATES_DESC = "UPDATES_UNINSTALL_ERROR2_DESC";
				} else if (vars.state === "RevertFault") {
					context.UPDATES_DESC = "UPDATES_UNINSTALL_ERROR_DESC";
				}

				// Handlebar template
				var source = $("#handlebars-template").html();
				var template = Handlebars.compile(source);
				var html = template(context);

				// Append HTML to body tag
				$( "body" ).append(html);
			}

			$.i18n.properties({
				name: ['updates'],
				language: ' ',
				path: 'Strings/',
				mode: 'both',
				callback: function () {
					renderHTML();
				}
			});

			// Actions
			// Troubleshoot button click
			$("#hintTroubleshootButton").click( function() {

				if (window.evalJS) {
					if (isKeyDefined("UPDATES_UN_INSTALL_ERROR_CTA_URL")) {
						var url = $.i18n.prop("UPDATES_UN_INSTALL_ERROR_CTA_URL");
						if (url) {
							var script = "dw.browseDocument('" + url + "', \"HelloSysDefault\");";
							window.evalJS(script);
						}
					}
				}

				if (window.notify) {
					window.notify("close");
				}
			});

		});
	</script>

	</head>

	<body>

	</body>

</html>
