<!DOCTYPE HTML>
<html style="background-color: #f0f0f0;">
    <head>
        <title>{%page_title%}</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- jQuery -->
        <script type="text/javascript" src="{%URL_PATH%}js/jquery-2.1.1.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="{%template_base%}js/bootstrap.min.js"></script>
        
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="{%template_base%}CSS/bootstrap-custom.css">
        
        <!-- Font Awesome - A font of icons -->
        <link href="{%template_base%}CSS/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
        <style>
            .navbar-inverse .navbar-nav > li > a {color: whitesmoke;}
            .navbar-inverse .navbar-nav > li > a.inactive, .navbar-inverse .navbar-nav > li > a.inactive:hover, .navbar-inverse .navbar-nav > li > a.inactive:focus {color: #9d9d9d; cursor: default;}
            .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #9BCCF7; }
            .navbar-inverse ul li{padding: 1px 7px;}
            .navbar-inverse ul li:last-child{border-left: 1px solid #999; margin-left: 3px; padding-left: 10px; font-family: sans-serif;}
            .navbar-inverse ul li a {color: whitesmoke;}
            .navbar-inverse ul li a:hover {text-decoration: none;}
            .navbar-inverse ul li a {vertical-align: middle;}
        </style>
        {%ebook_head%}
        <script type='text/javascript'>
            
            function change_section() {
                top.location = '{%ebook_url_base%}' + document.getElementsByName('section')[0].value + '/{%unit_parameter%}';
            }
            $(function() {
                $("body").keydown(function(e) {
                    if(e.keyCode == 37) { // left
                        top.location = '{%back_chapter_link%}';
                     }
                    if(e.keyCode == 39) { // left
                        top.location = '{%next_chapter_link%}';
                     }
                     if (e.keyCode == 27) { // esc
                         top.location = '{%exit_fullscreen_link%}'; 
                     }                      
                });
            });
            
            $(window).load(function(){
                var bookHeight = $("#book-container").height();
                var windowHeight = $(window).height();
                var offsetHeight = $("nav").height() + 150;
                var newBookHeight = windowHeight - offsetHeight;
                
                //alert(navHeight);

                if ( bookHeight < newBookHeight ){
                    $("#book-container").height(newBookHeight);
                }
            });


        </script>
    </head>

    <body style="background:whitesmoke;">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin: 0px;">
            <div class="container" style="margin-bottom: 0px;">
                  <a class="navbar-brand pull-left" href="#" style="padding-top:3px;"><img class="img-responsive" style='height:30px;' src="{%logo_img_small%}" alt='{%ds_logo%}' title='{%ds_logo%}'></a>
                
                  <!-- BEGIN chapter_select -->
                  <div class=" pull-left">
                    <div class='form-group'>
                            <select class='form-control' name='section' onChange="change_section();" style='width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
                                <!-- BEGIN chapter_select_options -->
                                <option value='{%chapter_id%}'{%chapter_selected%}>{%chapter_title%}</option>
                                <!-- END chapter_select_options -->
                            </select>
                    </div>
                  </div>
                  <!-- END chapter_select -->
                  <ul class="list-inline  pull-right" >
                    <!-- BEGIN back_link_active -->
                    <li><a href='{%back_chapter_link%}' title='{%back_chapter_title%}'><i class='fa fa-arrow-circle-left fa-lg'></i></a></li>
                    <!-- END back_link_active -->
                    <!-- BEGIN back_link_inactive -->
                    <li><a class='inactive' href='#'><i class='fa fa-arrow-circle-left'></i></a></li>
                    <!-- END back_link_inactive -->              
                    <!-- BEGIN next_link_active -->
                    <li><a href='{%next_chapter_link%}' title='{%next_chapter_title%}'><i class='fa fa-arrow-circle-right fa-lg'></i></a></li>
                    <!-- END next_link_active -->
                    <!-- BEGIN next_link_inactive -->
                    <li><a class='inactive' href='#'><i class='fa fa-arrow-circle-right' ></i></a></li>
                    <!-- END next_link_inactive -->
                    <li><a href='{%exit_fullscreen_link%}' title='{%$langBackCourse%}'><i class='fa fa-times fa-lg nofullscreen'></i> {%langBack%}</a></li>
                  </ul>
                <!--/.nav-collapse -->
            </div>
        </nav>        
        <div class="container" style="padding:15px; background-color: #f0f0f0; margin: 0px;">
            <div class='row'>
                <div class='col-xs-12 col-md-8 col-md-offset-2'>
                <ol class="breadcrumb">
                  <li><a href="{%course_home_link%}">{%course_title_short%}</a></li>
                  <li><a href="{%course_ebook_link%}">{%course_ebook%}</a></li>
                  <li class="active">{%ebook_title_short%}</li>
                </ol>
                    <div id="book-container" style="border: 1px solid #ccc; border-radius: 2px; padding: 20px; background-color: white;">
                    {%ebook_body%}
                    </div>
                </div>
            </div>
        </div>
    {%HTML_FOOTER%}
    </body>
</html>
