<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Getting Started with Adobe Edge Animate</title>
    
	<link href="getting_started.css" rel="stylesheet" type="text/css"/>
    
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="getting_started.js"></script>
    
    <script>
        
        var currentLesson = "table_of_contents.html";
        
        window.loadLesson = function(sLesson, sLessonTitle) {
            
            currentLesson = sLesson;
            if(sLesson != "table_of_contents.html") {
                $("#closeButton").css("display", "block");
                $("#lessonHint").css("display", "none");
                $("#lessonTitle").css("display", "block");
                $("#lessonTitle").html(sLessonTitle);
            }
            else {
                $("#closeButton").css("display", "none");
                $("#lessonHint").css("display", "block");
                $("#lessonTitle").css("display", "none");
            }
            
            helium.callbackTunnelAsync("Lessons.setActiveLesson:" + sLesson);
            
            $("#lessonFrame").attr("src", sLesson);
        };
        
        function doResize() {
            var off = $(".body").offset();
			var iHeight = $(window).height() - ($(".header").height() + 12);
			$(".bodyFrame").css("height", iHeight + "px");
        }
        
		$(window).ready(function() {
			
            $("#lessonHint,#lessonTitle").click(function(e) {
                //document.location.href='getting_started.html?t=' + Math.random();
                return false;
            });
            
            $('#closeButton').click(function(e) {
                window.loadLesson("table_of_contents.html");
                return false;
            });
            
			$(window).resize(function() {
                doResize();
            });
            doResize();
			setTimeout(function() {
                helium.callbackTunnelAsync("Lessons.restoreActiveLesson:");
            }, 250);
        });
    </script>
    
    <style>

        .header {
            height:22px;
            padding:4px 8px 0px 10px;
            border-bottom:1px solid #000;
            background-color:#494949;
        }
        
        #closeButton {
           position:absolute;
           height:15px;
           cursor:pointer;
           left:8px;
           top:4px;
           font-size:10px;
           padding:3px 10px 0px 16px;
	       background: url(images/backButtonBG.png) no-repeat;
           border-right:1px solid #1B1B1B;
           overflow: hidden;
        }
        
        #closeButton:hover {
            background: url(images/backButtonBGOver.png) no-repeat;
        }
        
        #lessonHint {
           font-size:10px;
           position:absolute;
           margin:0px;
           padding:4px 0px 0px 8px;
           white-space:nowrap;
        }
        
		.appLocale-de_DE #lessonHint, 
		.appLocale-fr_FR #lessonHint,
		.appLocale-es_ES #lessonHint,
		.appLocale-it_IT #lessonHint,
		.appLocale-ja_JP #lessonHint
		{
		   font-size:9px;
           padding:4px 0px 0px 0px;
        }
		
        #lessonTitle {
            position:absolute;
            font-size:11px;
            font-weight:bold;
            margin:0px;
            padding:2px 0px 0px 8px;
            color:#fff;
            left:75px;
            right:0px;
            text-align:center;
            min-width:140px;
        }
        
        #lessonTitle, #closeButton {
            display:none;
        }
        
        #outer {
            min-width:252px;
        }
    </style>
    
</head>

<body>
<div id="outer">
  <div class="wrapper">
	  <div class="header">
      	  <div id="closeButton" class="loc">($$$/Lessons/TOC/BackButton=Lessons)</div>
          <div id="lessonTitle">&nbsp;</div>
          <div id="lessonHint" class="loc">($$$/Lessons/TOC/ClickToGetStarted=Select a lesson below to get started)</div>
      </div>
      <div class="body">
      	  <iframe id="lessonFrame" class="bodyFrame" src="table_of_contents.html" />
      </div>
        
  </div>
</div>
</body>
</html>