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

	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.i18n.properties-1.0.9.js"></script>
	<script src="scripts/handlebars-v3.0.0.js"></script>
	<script id="handlebars-template" type="text/x-handlebars-template">

		<div class="container"> 

			<!-- Content Holder -->
			<div class="content"> 

				<!-- 1. Image Component --> 
				<img id="hintImage" class="featureImage hintComponent" src="images/iam/{{I18n IMAGE}}" alt=""/> 

				<!-- 2. Image Slideshow Component --> 
				<div id="hintSlideshow" class="image-slideshow hintComponent">
				  <figure> <img src="images/iam/{{I18n IMAGE_1}}"> </figure>
				  <figure> <img src="images/iam/{{I18n IMAGE_2}}"> </figure>
				  <figure> <img src="images/iam/{{I18n IMAGE_3}}"> </figure>
				</div>

				<!-- 3. Feature Title Component -->
				<h4 id="hintTitle" class="featureTitle hintComponent"> {{I18n TITLE}} 

					<!-- 4. Feature Tag Component --> 
					<span id="hintTag" class="featureTag hintComponent"> {{I18n TAG}} </span>

					<!-- 5. Down Arrow Component --> 
					<img id="hintDownArrow" class="open hintComponent" src="images/iam/arrow_down.png" alt=""/>
				</h4>

				<!-- 6. Feature Description Component -->
				<p id="hintDescription" class="description hintComponent"> {{{I18n DESC}}} </p>

				<!-- 7. Emmet Code Component -->
				<div id= "hintCode" class="code hintComponent">
				  <textarea readonly name="box-content" id="box-content" cols="36" rows="5" class="copy" onclick="this.focus();this.select()">
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
</ul>
				  </textarea>
				</div>

				<!-- 8. Internal Action Button Component -->
				<div id="hintInternalButton" class="button_internal hintComponent"> <a button_internal-hover="{{I18n CALL_TO_ACTION}}"><span>{{I18n CALL_TO_ACTION}}</span></a></div>

				<!-- 9. External Link Button Component -->
				<div id="hintExternalButton" class="button_external hintComponent"> <a button_external-hover="{{I18n CALL_TO_ACTION}}"><span>{{I18n CALL_TO_ACTION}}</span></a></div>

			</div>

		</div>

	</script>
	<script>
		$(function() {

			// Determine prefix and mode
			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.prefix = vars.prefix || "";
			vars.mode = vars.mode || "";

			// Build context
			var context = {
				IMAGE: vars.prefix + "_IMAGE",
				IMAGE_1: vars.prefix + "_IMAGE_1",
				IMAGE_2: vars.prefix + "_IMAGE_2",
				IMAGE_3: vars.prefix + "_IMAGE_3",
				TITLE: vars.prefix + "_TITLE",
				TAG: vars.prefix + "_TAG",
				DESC: vars.prefix + "_DESC",
				SHOW_CODE: vars.prefix + "_SHOW_CODE",
				CALL_TO_ACTION: vars.prefix + "_CALL_TO_ACTION",
				CALL_TO_ACTION_SCRIPT: vars.prefix + "_CALL_TO_ACTION_SCRIPT",
				CALL_TO_ACTION_URL: vars.prefix + "_CALL_TO_ACTION_URL"
			};

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

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

				var html = template(context);

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

			function isKeyDefined (key) {

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

			function updateVisibility (preview) {

				// First hide all hintComponents
				$(".hintComponent").hide();

				// Show defined components only
				if (isKeyDefined(context.TITLE)) {
					var hintTitle = $("#hintTitle");
					hintTitle.show();

					if (preview === true) {
						hintTitle.addClass("preview");

						// Expand content from preview mode
						hintTitle.one( "click", function() {

							updateVisibility(false);

							if (window.notify) {
								window.notify("expand");
							}
						});
					}
					else {
						hintTitle.removeClass("preview");
					}
				}

				if (isKeyDefined(context.TAG)) {
					$("#hintTag").show();
				}

				if (preview === true) {
					$("#hintDownArrow").show();
				}
				else {
					if (isKeyDefined(context.IMAGE)) {
						$("#hintImage").show();
					}

					if (isKeyDefined(context.IMAGE_1) && isKeyDefined(context.IMAGE_2) && isKeyDefined(context.IMAGE_3)) {
						$("#hintSlideshow").show();
					}

					if (isKeyDefined(context.DESC)) {
						$("#hintDescription").show();
					}

					if (isKeyDefined(context.SHOW_CODE)) {
						$("#hintCode").show();
					}

					if (isKeyDefined(context.CALL_TO_ACTION_SCRIPT)) {
						$("#hintInternalButton").show();
					}

					if (isKeyDefined(context.CALL_TO_ACTION_URL)) {
						$("#hintExternalButton").show();
					}
				}
			}

			$.i18n.properties({
				name: ['iam', 'iamNoLoc'],
				language: ' ',
				path: 'strings/',
				mode: 'both',
				callback: function () {
					renderHTML();
					updateVisibility(vars.mode === "preview");
				}
			});

			// Actions
			// Internal button click
			$("#hintInternalButton").click( function() {

				if (window.evalJS) {
					if (isKeyDefined(context.CALL_TO_ACTION_SCRIPT)) {
						var script = $.i18n.prop(context.CALL_TO_ACTION_SCRIPT);
						if (script) {
							window.evalJS(script);
						}
					}
				}

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

			// External button click
			$("#hintExternalButton").click( function() {

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

				if (window.notify) {
					window.notify("cta");
					window.notify("close");
				}
			});
		});
	</script>

	</head>

	<body>

	</body>

</html>