<!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>
                
                <div id="hintOverview">
                <img id="hintImageBottom" class="featureImageBottom hintComponent" src="images/iam/{{I18n IMAGE_BOTTOM}}" alt=""/> 

				<!-- 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>
                
                </div>
                <!-- Card Deck for CCLibrary's Feature Floater (Accordion) -->
                <section class="card-stack hintComponent"> 
                    <!-- stack 1 -->
                    <div id="accordion1" class="accordion">
                      <input id="card1" name="accordion-1" type="radio" />
                      <label class="stack-header" for="card1"> <span class="step_tag">{{I18n STACK_INDEX_1}}</span> {{I18n STACK_SUBTITLE_1}} </label>
                      <article class="large-card"> <img id="stack1Image" src="images/iam/{{I18n STACK_SUBIMAGE_1}}" alt="" class="tutorial-video"/>
                          <div id="stack1Slideshow" class="image-slideshow">
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE1_IMAGE_1}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE1_IMAGE_2}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE1_IMAGE_3}}" alt="" class="tutorial-video"/> </figure>
                          </div>
                        <p class="step_exp">{{{I18n STACK_SUBDESC_1}}}</p>
                      </article>
                    </div>
                    <!-- stack 2 -->
                    <div id="accordion2" class="accordion">
                      <input id="card2" name="accordion-2" type="radio" />
                      <label class="stack-header" for="card2"><span class="step_tag">{{I18n STACK_INDEX_2}}</span> {{I18n STACK_SUBTITLE_2}} </label>
                      <article class="large-card"> <img id="stack2Image" src="images/iam/{{I18n STACK_SUBIMAGE_2}}" alt="" class="tutorial-video"/>
                          <div id="stack2Slideshow" class="image-slideshow">
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE2_IMAGE_1}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE2_IMAGE_2}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE2_IMAGE_3}}" alt="" class="tutorial-video"/> </figure>
                          </div>
                        <p class="step_exp">{{{I18n STACK_SUBDESC_2}}}</p>
                      </article>
                    </div>
                    <!-- stack 3 -->
                    <div id="accordion3" class="accordion">
                      <input id="card3" name="accordion-3" type="radio" />
                      <label class="stack-header" for="card3"> <span class="step_tag">{{I18n STACK_INDEX_3}}</span> {{I18n STACK_SUBTITLE_3}} </label>
                      <article class="large-card"> <img id="stack3Image" src="images/iam/{{I18n STACK_SUBIMAGE_3}}" alt="" class="tutorial-video"/>
                          <div id="stack3Slideshow" class="image-slideshow">
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE3_IMAGE_1}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE3_IMAGE_2}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE3_IMAGE_3}}" alt="" class="tutorial-video"/> </figure>
                          </div>
                        <p class="step_exp">{{{I18n STACK_SUBDESC_3}}}</p>
                      </article>
                    </div>
                    <!-- stack 4 -->
                    <div id="accordion4" class="accordion">
                      <input id="card4" name="accordion-4" type="radio" />
                      <label class="stack-header" for="card4"> <span class="step_tag">{{I18n STACK_INDEX_4}}</span> {{I18n STACK_SUBTITLE_4}} </label>
                      <article class="large-card"> <img id="stack4Image" src="images/iam/{{I18n STACK_SUBIMAGE_4}}" alt="" class="tutorial-video"/>
                          <div id="stack4Slideshow" class="image-slideshow">
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE4_IMAGE_1}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE4_IMAGE_2}}" alt="" class="tutorial-video"/> </figure>
                              <figure> <img src="images/iam/{{I18n STACK_SUBIMAGE4_IMAGE_3}}" alt="" class="tutorial-video"/> </figure>
                          </div>
                        <p class="step_exp">{{{I18n STACK_SUBDESC_4}}}</p>
                      </article>
                    </div>
                </section>

                <!-- 8. Buttons-->
				<!-- Now both the buttons can either execute script or open some external URL using CALL_TO_ACTION_URL_1 and CALL_TO_ACTION_SCRIPT_1 / CALL_TO_ACTION_URL_2 /CALL_TO_ACTION_SCRIPT_2 -->
				<!-- Please make sure either url or script is defined for each button-->
                <div id="hintButton1" class="button hintComponent"> <a><span>{{I18n CALL_TO_ACTION_1}}</span></a></div>
                <div id="hintButton2" class="button hintComponent"> <a><span>{{I18n CALL_TO_ACTION_2}}</span></a></div>
			</div>
            <!-- end of content 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_BOTTOM: vars.prefix + "_IMAGE_BOTTOM",
                IMAGE_CALL_TO_ACTION_URL: vars.prefix + "_IMAGE_CALL_TO_ACTION_URL",
                IMAGE_BOTTOM_CALL_TO_ACTION_URL: vars.prefix + "_IMAGE_BOTTOM_CALL_TO_ACTION_URL",
				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_1: vars.prefix + "_CALL_TO_ACTION_1",
                CALL_TO_ACTION_2: vars.prefix + "_CALL_TO_ACTION_2",
				CALL_TO_ACTION_SCRIPT_1: vars.prefix + "_CALL_TO_ACTION_SCRIPT_1",
                CALL_TO_ACTION_SCRIPT_2: vars.prefix + "_CALL_TO_ACTION_SCRIPT_2",
                CALL_TO_ACTION_URL_1: vars.prefix + "_CALL_TO_ACTION_URL_1",
                CALL_TO_ACTION_URL_2: vars.prefix + "_CALL_TO_ACTION_URL_2",
                STACK_INDEX_1: vars.prefix + "_STACK_INDEX_1",
                STACK_SUBTITLE_1: vars.prefix + "_STACK_SUBTITLE_1",
                STACK_SUBIMAGE_1: vars.prefix + "_STACK_SUBIMAGE_1",
                STACK_SUBIMAGE1_IMAGE_1: vars.prefix + "_STACK_SUBIMAGE1_IMAGE_1",
                STACK_SUBIMAGE1_IMAGE_2: vars.prefix + "_STACK_SUBIMAGE1_IMAGE_2",
                STACK_SUBIMAGE1_IMAGE_3: vars.prefix + "_STACK_SUBIMAGE1_IMAGE_3",
                STACK_SUBDESC_1: vars.prefix + "_STACK_SUBDESC_1",
                STACK_INDEX_2: vars.prefix + "_STACK_INDEX_2",
                STACK_SUBTITLE_2: vars.prefix + "_STACK_SUBTITLE_2",
                STACK_SUBIMAGE_2: vars.prefix + "_STACK_SUBIMAGE_2",
                STACK_SUBIMAGE2_IMAGE_1: vars.prefix + "_STACK_SUBIMAGE2_IMAGE_1",
                STACK_SUBIMAGE2_IMAGE_2: vars.prefix + "_STACK_SUBIMAGE2_IMAGE_2",
                STACK_SUBIMAGE2_IMAGE_3: vars.prefix + "_STACK_SUBIMAGE2_IMAGE_3",
                STACK_SUBDESC_2: vars.prefix + "_STACK_SUBDESC_2",
                STACK_INDEX_3: vars.prefix + "_STACK_INDEX_3",
                STACK_SUBTITLE_3: vars.prefix + "_STACK_SUBTITLE_3",
                STACK_SUBIMAGE_3: vars.prefix + "_STACK_SUBIMAGE_3",
                STACK_SUBIMAGE3_IMAGE_1: vars.prefix + "_STACK_SUBIMAGE3_IMAGE_1",
                STACK_SUBIMAGE3_IMAGE_2: vars.prefix + "_STACK_SUBIMAGE3_IMAGE_2",
                STACK_SUBIMAGE3_IMAGE_3: vars.prefix + "_STACK_SUBIMAGE3_IMAGE_3",
                STACK_SUBDESC_3: vars.prefix + "_STACK_SUBDESC_3",
                STACK_INDEX_4: vars.prefix + "_STACK_INDEX_4",
                STACK_SUBTITLE_4: vars.prefix + "_STACK_SUBTITLE_4",
                STACK_SUBIMAGE_4: vars.prefix + "_STACK_SUBIMAGE_4",
                STACK_SUBIMAGE4_IMAGE_1: vars.prefix + "_STACK_SUBIMAGE4_IMAGE_1",
                STACK_SUBIMAGE4_IMAGE_2: vars.prefix + "_STACK_SUBIMAGE4_IMAGE_2",
                STACK_SUBIMAGE4_IMAGE_3: vars.prefix + "_STACK_SUBIMAGE4_IMAGE_3",
                STACK_SUBDESC_4: vars.prefix + "_STACK_SUBDESC_4"
                
			};

			// 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_BOTTOM)) {
						$("#hintImageBottom").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_1) || isKeyDefined(context.CALL_TO_ACTION_URL_1)) {
                        if (isKeyDefined(context.CALL_TO_ACTION_SCRIPT_2) || isKeyDefined(context.CALL_TO_ACTION_URL_2)) {
                            $("#hintButton1").addClass("floatLeft");
                            $("#hintButton1").addClass("smallButton");
							$("#hintButton2").addClass("floatRight");
                            $("#hintButton2").addClass("smallButton");
							$("#hintButton2").show();
                        } else {
                            $("#hintButton1").addClass("largeButton");
                        }
                        $("#hintButton1").show();
                    }
                    else if (isKeyDefined(context.CALL_TO_ACTION_SCRIPT_2) || isKeyDefined(context.CALL_TO_ACTION_URL_2) ) {
                        $("#hintButton2").addClass("largeButton");
                        $("#hintButton2").show();
                    }
                    
                    if (isKeyDefined(context.STACK_SUBTITLE_1) && isKeyDefined(context.STACK_SUBDESC_1)) {
                        $(".card-stack").show();
                        $(".ccLibSeparator").show();
                        $("#accordion1").show();
                        $("#stack1Slideshow").hide();
                        $("#stack1Image").hide();
                    }

                    if (isKeyDefined(context.STACK_SUBIMAGE_1)) {
						$("#stack1Image").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE1_IMAGE_1) && isKeyDefined(context.STACK_SUBIMAGE1_IMAGE_2) && isKeyDefined(context.STACK_SUBIMAGE1_IMAGE_3)) {
						$("#stack1Slideshow").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBTITLE_2) && isKeyDefined(context.STACK_SUBDESC_2)) {
                        $("#accordion2").show();
                        $("#stack2Slideshow").hide();
                        $("#stack2Image").hide();
                    }
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE_2)) {
						$("#stack2Image").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE2_IMAGE_1) && isKeyDefined(context.STACK_SUBIMAGE2_IMAGE_2) && isKeyDefined(context.STACK_SUBIMAGE2_IMAGE_3)) {
						$("#stack2Slideshow").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBTITLE_3) && isKeyDefined(context.STACK_SUBDESC_3)) {
                        $("#accordion3").show();
                        $("#stack3Slideshow").hide();
                        $("#stack3Image").hide();
                    }

                    if (isKeyDefined(context.STACK_SUBIMAGE_3)) {
						$("#stack3Image").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE3_IMAGE_1) && isKeyDefined(context.STACK_SUBIMAGE3_IMAGE_2) && isKeyDefined(context.STACK_SUBIMAGE3_IMAGE_3)) {
						$("#stack3Slideshow").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBTITLE_4) && isKeyDefined(context.STACK_SUBDESC_4)) {
                        $("#accordion4").show();
                        $("#stack4Slideshow").hide();
                        $("#stack4Image").hide();
                    }
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE_4)) {
						$("#stack4Image").show();
					}
                    
                    if (isKeyDefined(context.STACK_SUBIMAGE4_IMAGE_1) && isKeyDefined(context.STACK_SUBIMAGE4_IMAGE_2) && isKeyDefined(context.STACK_SUBIMAGE4_IMAGE_3)) {
						$("#stack4Slideshow").show();
					}
				}
			}

			$.i18n.properties({
				name: ['iam', 'iamNoLoc'],
				language: ' ',
				path: 'strings/',
				mode: 'both',
				callback: function () {
					renderHTML();
					updateVisibility(vars.mode === "preview");
				}
			});
            
            $("#hintImage, #hintImageBottom").hover( function() {
                
                var urlKey = ($(this).attr("id") === "hintImage") ? context.IMAGE_CALL_TO_ACTION_URL : context.IMAGE_BOTTOM_CALL_TO_ACTION_URL;
                
                if (isKeyDefined(urlKey)) {
                    $(this).addClass("videoLinkImageHover");
                }
                
            }, function () {
                var urlKey = ($(this).attr("id") === "hintImage") ? context.IMAGE_CALL_TO_ACTION_URL : context.IMAGE_BOTTOM_CALL_TO_ACTION_URL;
                if (isKeyDefined(urlKey)) {
                    $(this).removeClass("videoLinkImageHover");
                }
            });
            
            $("#hintImage, #hintImageBottom").click( function() {
                
                var currentActionUrl = ($(this).attr("id") === "hintImage") ? context.IMAGE_CALL_TO_ACTION_URL : context.IMAGE_BOTTOM_CALL_TO_ACTION_URL;

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

			// button click
			$("#hintButton1, #hintButton2").click( function() {
                var currentDivId = event.currentTarget.id,
                        currentActionUrl, currentActionScript;
				if (window.evalJS) {
                    switch (currentDivId) {
                        case "hintButton1":
                            currentActionUrl = context.CALL_TO_ACTION_URL_1;
                            currentActionScript = context.CALL_TO_ACTION_SCRIPT_1;
                            break;
                        case "hintButton2":
                            currentActionUrl = context.CALL_TO_ACTION_URL_2;
                            currentActionScript = context.CALL_TO_ACTION_SCRIPT_2;
                            break;
                    }
					if (isKeyDefined(currentActionUrl)) {
						var url = $.i18n.prop(currentActionUrl);
						if (url) {
							var script = "dw.browseDocument('" + url + "', \"HelloSysDefault\");";
							window.evalJS(script);
						}
					} else if(isKeyDefined(currentActionScript)) {
                        var script = $.i18n.prop(currentActionScript);
						if (script) {
							window.evalJS(script);
						}
                    }
				}
                
                var subcategory="NFW Contextual Hints";
                var featureStr = vars.prefix,
                    featureHeadLight = "";
                switch(featureStr) {
                    case "EMMET_IAM":
                        if (currentDivId === "hintButton1") {
                            featureHeadLight = "Emmet_IAM_CS_CTA_Clicked";
                        } else if (currentDivId === "hintButton2") {
                            featureHeadLight = "Emmet_IAM_LM_CTA_Clicked";
                        }
                        break;
                    case "GIT_SUPPORT_IAM":
                        if (currentDivId === "hintButton1") {
                            featureHeadLight = "DWSite_IAM_SS_CTA_Clicked";
                        } else if (currentDivId === "hintButton2") {
                            featureHeadLight = "DWSite_IAM_LM_CTA_Clicked";
                        }
                        break;
                    case "GIT_INIT_IAM":
                        if (currentDivId === "hintButton1") {
                            featureHeadLight = "GitSupport_IAM_SG_CTA_Clicked";
                        } else if (currentDivId === "hintButton2") {
                            featureHeadLight = "GitSupport_IAM_LM_CTA_Clicked";
                        }
                        break;
                    case "GIT_PANEL_IAM":
                        if (currentDivId === "hintButton1") {
                            featureHeadLight = "GitPanel_IAM_OGP_CTA_Clicked";
                        } else if (currentDivId === "hintButton2") {
                            featureHeadLight = "GitPanel_IAM_LM_CTA_Clicked";
                        }
                        break;
                    default: break;
                }
                
				if (window.notify) {
                    if (featureHeadLight.length > 0 && window.evalJS)
                    {
                        var script = "dw.logEvent('" + subcategory + "', '" + featureHeadLight + "');";
                        window.evalJS(script);
                    } else {
					   window.notify("cta");
                    }
					window.notify("close");
				}
			});
            
            // CCLib Feature Floaters Accordion click
			$(".stack-header").click( function() {
                if (window.notify) {
                    // Notify NFWHint that the size is changed.
                    window.notify("sizeChanged");
                }
            });
            
            $("#card1, #card2, #card3, #card4").click( function() {
                var currCardId = $(this).attr("id");
                var cardsToHideArray;
                switch (currCardId) {
                        case "card1":
                            cardsToHideArray = ["#card2", "#card3", "#card4"];
                            break;
                        case "card2":
                            cardsToHideArray = ["#card1" , "#card3", "#card4"];
                            break;
                        case "card3":
                             cardsToHideArray = ["#card2" , "#card1" , "#card4"];
                            break;
                        case "card4":
                             cardsToHideArray = ["#card2" , "#card3" , "#card1"];
                            break;
                    }
                
                if ($(this).attr("panel-state") === "open") {
	            	$(this).attr("panel-state", "close");
                    $("#hintOverview").show();
	            } else {
	            	$(this).attr("panel-state", "open");
                    $("#hintOverview").hide();
	            }
                
				for (var i=0; i < cardsToHideArray.length; i++) {
					if ($(cardsToHideArray[i]).is(":checked")) {
                        $(cardsToHideArray[i]).attr("panel-state", "close");
                    }                
				}  
                
            });
        
        });
	</script>

	</head>

	<body>

	</body>

</html>