<!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="../../Shared/Common/Scripts/UsageTracking.js"></script>
	<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 TITLE}} 
					<span class="featureTag"> {{I18n TAG}} </span>
				</h4>

				<!-- Image -->
				<img id="hintImage" class="featureImage" src="../../InAppWalkthrough/images/iam/patch.png" alt=""/> 

				<!-- Description -->
				<p id="hintDescription" class="description cc_copy"> {{{I18n DESC}}} </p>

				<!-- Update -->
				<div id="hintUpdateButton" class="button_cc">
					<a href="#" button_cc-hover={{I18n CALL_TO_ACTION}}> <span>{{I18n CALL_TO_ACTION}}</span></a>
				</div>

				<!-- Later -->
				<p id="hintLaterButton" class="later">{{I18n REMINDER}}</p>
            </div>
        </div>

	</script>

	<script>
		$(function() {

			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);
				});

				var context = {
					TITLE: "PATCH_TITLE",
					TAG: "PATCH_TAG",
					DESC: "PATCH_DESC",
					CALL_TO_ACTION: "PATCH_CALL_TO_ACTION",
					REMINDER: "PATCH_REMINDER"
				};

				// 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', 'patchInfo'],
				language: ' ',
				path: 'Strings/',
				mode: 'both',
				callback: function () {
					renderHTML();
				}
			});

			// Actions
			// Update button click
			$("#hintUpdateButton").click( function() {
				if (window.evalJS) {
					// 1. Launch Thor
				    var script = "dw.launchAAM();";
					// 2. Do not show this hint again.
					script = script + "dw.setPreferenceString(\"Updates\", \"Reminder Time For Patch\", \"Never\");";
					// 3. Log Highbeam
					script = script + "dw.logEvent(\"" + UT_UPDATES_SUBCATEGORY + "\",\"" + UT_UPDATES_DWPATCH_UPDATE_CLICKED + "\");";
                    window.evalJS(script);
				}

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

			// Later button click
			$("#hintLaterButton").click( function() {

				if (window.evalJS) {

					// Remind after 1 day
					var laterDays = 1;
					var laterDate = new Date();
					laterDate.setDate(laterDate.getDate() + laterDays);
					var seconds = Math.floor(laterDate.getTime() / 1000);

					var script = "dw.setPreferenceString(\"Updates\", \"Reminder Time For Patch\", \"" + seconds.toString() + "\");";
					script = script + "dw.logEvent(\"" + UT_UPDATES_SUBCATEGORY + "\",\"" + UT_UPDATES_DWPATCH_REMIND_LATER_CLICKED + "\");";
					window.evalJS(script);
				}

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

			// Special function: 'onCloseButtonClicked' function on window object gets called on Close button click
			window.onCloseButtonClicked = function() {
				if (window.evalJS) {
					// Do not show this hint again.
					var script = "dw.setPreferenceString(\"Updates\", \"Reminder Time For Patch\", \"Never\");";
                    window.evalJS(script);
				}
			}
		});
	</script>

	</head>

	<body>

	</body>

</html>
