<!-- <div class='divider'></div> -->
<div ng-controller="mainCtrl">
  <div class="loader" ng-show="showLoader()"></div>
  <div ng-show="invalidEPUBMessage" class="alert alert-info" style="width:70%;margin: 62px auto 0 auto" ng-bind-html="invalidEPUBMessage"></div>
  <iframe id="epub_{{card.pageIndex}}" data-loaded="{{card.loaded}}" data-src="{{card.src}}" data-relative-src="{{card.relativeSrc}}" width="{{BookOpts.pageWidth[card.pageIndex]}}px" height="{{BookOpts.pageHeight[card.pageIndex]}}px" scrolling="no" frameborder="0" class="epub-page" style="visibility:hidden" ng-repeat="card in cards" repeat-hack="" ng-style="style(card.pageIndex)" epubby-page-view="" data-left-page="{{BookOpts.leftPage}}" data-right-page="{{BookOpts.rightPage}}" data-swipe-left="{{BookOpts.swipeLeft}}" data-swipe-right="{{BookOpts.swipeRight}}" note-to-open="{{BookOpts.noteToOpen}}" resource-to-open="{{BookOpts.resourceToOpen}}" bookmark-to-open="{{BookOpts.bookmarkToOpen}}" marker-id="{{BookOpts.markerId}}" search-term="{{BookOpts.searchTerm}}" pen-activated="{{StateService.panelOpen == 'penPanel'}}" column-width="{{BookOpts.columnWidth}}" settings-saved="{{BookOpts.settingsSaved}}" slider-column="{{BookOpts.sliderColumn}}" is-bookmarked="{{card.bookmarked}}" highlighter-activated="{{BookOpts.enableHighlight}}" is-columnbookmarked="{{BookOpts.columnBookmark}}" page-margin-left="{{BookOpts.pageMarginLeft[card.pageIndex]}}" page-margin-top="{{BookOpts.pageMarginTop[card.pageIndex]}}"></iframe>
  <div id="zoomValue" ng-show="toggleZoomValue()"><h4 ng-bind="showZoomValue()"></h4> </div>
</div>

<!-- pageNavigation-bar -->
<!-- <div navigation-feature ng-if="CONFIG.bookShelfFeatures['navigation-feature']"></div> -->

<!-- zoombar -->
<div zoombar-feature="" ng-if="CONFIG.bookShelfFeatures['zoombar-feature']"></div>

<!-- Left Panel -->
<div class="navbar-left" ng-style="toggleLeftBar()" ng-controller="ToolbarCtrl">
  <div class="top-logo" ng-hide="hideLogo()"></div>
  <div id="top-icons" ng-style="{true: {'top': '-1px'}}[hideLogo()]">
    <a ng-href="{{toggleHref()}}" bo-title="'backToBookshelf' | translate : 'tooltips'" class="home" ng-show="toggleBTB()"></a>
    <div bo-title="'backToBookshelf' | translate : 'tooltips'" class="home" ng-show="toggleBTBA()" onclick="if (CONFIG.device === 'windows8') { window.external.notify('goHome'); } else if (CONFIG.device === 'flash') { window.open('', '_self', '');window.close(); }">
    </div>
  </div>
  <div id="middle-icons" ng-class="fixAlignment()">
    <div toc-feature="" bo-if="CONFIG.bookShelfFeatures['toc-feature']"></div>
    <div mydata-feature="" bo-if="CONFIG.bookShelfFeatures['mydata-feature']"></div>    
    <div search-feature="" bo-if="CONFIG.bookShelfFeatures['search-feature']"></div>
    <div highlight-feature="" bo-if="CONFIG.bookShelfFeatures['highlight-feature']"></div>
    <div pen-feature="" ng-if="CONFIG.bookShelfFeatures['pen-feature'] && BookOpts.bookType == 'fixed'"></div>
    <div analytics-feature="" bo-if="CONFIG.bookShelfFeatures['analytics-feature'] && CONFIG.clientName == 'Hurix' && $cookies.username"></div>
    <div popout-feature="" bo-if="CONFIG.bookShelfFeatures['popout-feature']"></div>
  </div>
  <div id="bottom-icons">
    <div thumbnail-feature="" ng-if="CONFIG.bookShelfFeatures['thumbnail-feature'] && BookOpts.bookType == 'fixed'"></div>
    <div settings-feature="" ng-if="CONFIG.bookShelfFeatures['settings-feature'] && BookOpts.bookType == 'reflowable'"></div>
    <div print-feature="" bo-if="CONFIG.bookShelfFeatures['print-feature']"></div>
  </div> 
</div>

<!-- NoteCtrl -->
<div ng-controller="NoteCtrl">
  <script type="text/ng-template" id="noteModalContent.html">
    <div class="modal noteModal">
      <div class="modal-header">
        <button type="button" class="close delete" ng-click='deleteNote(noteId)'></button>
        <h3 bo-text="'notes' | translate : 'labels'"><!-- <small ng-bind-template="({{formatDate()}})"></small> --></h3>     
        <div class="note_imp_wrapper" ng-click="toggleType()">
          <button type="button" class="note_imp" ng-class="{'active':type=='note_important'}"></button>   
          <button type="button" class="note_imp_arrow_text"></button>
          <div class='important-label' bo-text="'highlightImportant' | translate : 'messages'"></div>          
        </div>
      </div>           
      <div class="modal-body" >
        <form name="frmNote" class="form-horizontal">
          <fieldset>              
            <div class="wrapper">
              <div id='iscroll-alert' class="alert"><div ng-bind-html="to_trusted(objNote.noteTarget)" iscroll-watcher></div></div>
              <textarea class='nowrap' ng-model="note" rows='1' maxlength="255" block-enter placeholder="{{ 'title' | translate : 'labels' }}" ng-show="CONFIG.clientName == 'Anaya'"></textarea>
              <textarea id='note' ng-model="comment" rows='8' maxlength="1000" placeholder="{{ 'enterNote' | translate : 'messages' }}" allow-scroll></textarea>            
              <div class="form-inline">
                <div class='share' bo-text="'share' | translate : 'buttons'"  ng-show="CONFIG.clientName == 'Hurix' && CONFIG.showSharing == true" ng-click="share = true"></div>
                <textarea class='urlWrap' ng-model="url" ng-pattern="checkURL" rows='1' placeholder="{{ 'addUrl' | translate : 'labels' }}" block-enter="openURL(url)" ng-show="CONFIG.clientName != 'Hurix'"></textarea>
                <button type="button" class="goButton" ng-disabled="!url || frmNote.$error.url" ng-show="CONFIG.clientName != 'Hurix'"></button>   
                <button type="button" class="goButton" ng-show="CONFIG.clientName == 'Hurix' && CONFIG.showSharing == true" ng-click="share = true"></button>        
              </div>
            </div> 
          </fieldset>
        </form>
      </div>
      <div class="modal-footer" ng-hide="CONFIG.clientName == 'Anaya'">
        <div class="buttonWrap">
          <button type="submit" class="btn btn-primary" ng-click='toggleNote(note, comment, url, noteId, !frmNote.$error.url)' ng-disabled="!comment" bo-text="'post' | translate : 'buttons'"></button>            
        </div>
        <button type="submit" class="btn btn-primary" ng-click='close()' bo-text="'cancel' | translate : 'buttons'"></button>
      </div>
      <div class="modal-footer" ng-show="CONFIG.clientName == 'Anaya'">
        <div class="buttonWrap">
          <button type="submit" class="btn btn-primary" ng-click='toggleNote(note, comment, url, noteId, !frmNote.$error.url)' ng-disabled="!note || !comment" bo-if="!noteId" bo-text="'submit' | translate : 'buttons'"></button>  
          <button type="submit" class="btn btn-primary" ng-click='toggleNote(note, comment, url, noteId, !frmNote.$error.url)' ng-disabled="!note || !comment" bo-if="noteId" bo-text="'update' | translate : 'buttons'"></button> 
        </div>
        <button type="submit" class="btn btn-primary" ng-click='close()' bo-text="'close' | translate : 'buttons'"></button>
      </div>
      <div class='sharePanel' style="left: 100%;" animate-share>
        <div class='header'>
          <div class ='backArrow' ng-click="share = false"></div> 
          <div class= 'name' bo-text="'shareInNotePopup' | translate : 'messages'"></div>
        </div>
        <div class="teacherStudentNames" vcustom-scrollbar update-scroll="{{updateScroll}}">
          <div>
            <div class='teacher' bo-text="'teacher' | translate : 'labels'"></div>
            <div class="teacherName"></div><label class='tName'>Tina Arora</label><br> 
            <div class='student' style="top: 10px;" bo-text="'student' | translate : 'labels'"></div>
            <div class="studentName" ></div><label class='sName'>All</label><br>
            <div class="studentName" ></div><label class='sName'>Jessica</label><br>
            <div class="studentName" ></div><label class='sName'>Rebecca</label><br>
            <div class="studentName" ></div><label class='sName'>Stuart</label><br>
            <div class="studentName" ></div><label class='sName'>Philip</label><br>
            <div class="studentName" ></div><label class='sName'>John</label><br>
            <div class="studentName" ></div><label class='sName'>Diana</label><br>      
            <div class="studentName" ></div><label class='sName'>Jones</label><br>      
          </div>
        </div> 
        <section class ='footer'>
          <div class="buttonWrapper">
            <button class="cancel" bo-text="'cancel' | translate : 'buttons'" ng-click="share = false"></button>
            <button  class="share" bo-text="'share' | translate : 'buttons'" ng-click='close()'></button>  
          </div>
        </section>
      </div>
    </div>
  </script>
</div>

<!-- BookmarkCtrl -->
<div ng-controller="BookmarkCtrl">
  <script type="text/ng-template" id="bookmarkModalContent.html"> 
    <div class="arrowTop" ng-style="{left: position.arrowLeft, top: position.arrowTop, margin: 0}"></div>
    <div class="modal bookmarkModal" ng-style="{left: position.left, top: position.top, margin: 0}" >
      <div class="modal-body">
          <form class="form-horizontal">
            <fieldset>
              <textarea class='img-circle nowrap' placeholder="{{ 'addBookmarkTitle' | translate : 'labels' }}" ng-model="bookmarker_title" rows='1' maxlength="255" block-enter="toggleBookmark(bookmarker_title, bookmarker_page)"></textarea><br/><br/>
            </fieldset>
          </form>
      </div>
      <div class="modal-footer">
        <div class="buttonWrap">
          <button type="submit" class="btn btn-primary" ng-click='toggleBookmark(bookmarker_title, bookmarker_page)' ng-disabled="!bookmarker_title" ng-bind='setTitle(bookmarker_page)'></button>
        </div>
        <button type="submit" class="btn btn-primary" ng-click="deleteBookmark(bookmarker_page)" ng-hide="!isBookmarked(bookmarker_page)" bo-text="'delete' | translate : 'buttons'"></button>             
      </div>        
    </div>
  </script>
</div>


<!-- Footer Starts -->
<div class="navbar navbar-fixed-bottom ng-cloak" ng-controller="FooterCtrl">
  <div class="navbar-inner">
    <div class="logo" ng-style="setDynamicLogo()"></div>
    <div class="container">
      <div class="btn-group pull-left smilContainer"> 
        <div id="playSmil" class="play" ng-show="togglePlayBtn()" ng-click="playSmil()" bo-title="'play' | translate : 'tooltips'"></div>
        <div id="stopSmil" class="stop" ng-show="togglePauseBtn()" ng-click="stopSmil()" bo-title="'stop' | translate : 'tooltips'"></div>
      </div>    
      <div class="bottom-bar-icons" ng-style="alignCenter()">
        <div single-feature="" bo-if="CONFIG.bookShelfFeatures['single-feature']"></div>
        <div double-feature="" bo-if="CONFIG.bookShelfFeatures['double-feature']"></div>     
        <div leftpage-feature=""></div>
        <div rightpage-feature=""></div>             
      </div>
      <!-- <div class="jump-back" title="{{ 'jumpBackward' | translate : 'tooltips' }}" ng-click="jumpWhere(pagelist.pageIndex, 'prev', $event)" ng-disabled="togglePrevJump(pagelist.pageIndex)" ng-show="jumps.length > 0"></div>
      <div class="jump-select" ng-show="jumps.length > 0">
        <select ng-model="pagelist" class='jump-selectbox' title="{{ 'jumpTo' | translate : 'tooltips' }}" ng-options="jump.displayIndex for jump in jumps" ng-change="jumpTo(pagelist.pageIndex)">
          <option value="">{{ 'jumpTo' | translate : 'tooltips' }}</option>
        </select>
      </div>
      <div class="jump-next" title="{{ 'jumpForward' | translate : 'tooltips' }}" ng-click="jumpWhere(pagelist.pageIndex, 'next', $event)" ng-disabled="toggleNextJump(pagelist.pageIndex)" ng-show="jumps.length > 0"></div>           --> 

      <!-- <div print-feature ng-if="CONFIG.bookShelfFeatures['print-feature']"></div> -->

      <!-- <div class='settings' ng-click="openSettings()" title="{{ 'settings' | translate : 'labels' }}" ng-show="toggleSettingsBtn()"></div> -->
      <!-- <div class="btn-group pull-right"> -->
        <!-- <div class="hotspot settings" ng-click='hotspot()' style='display:none;'></div> -->
     
      <!-- DO NOT REMOVE IT  -->
      <!-- <div class='help' ng-click="openHelp()" title='Help'></div> -->
      <!-- <div class='glossary' ng-click="openGlossary()" title='Glossary' style='display:none;'></div> -->
      <!-- </div> -->
    </div>
    <div class="copyright"></div>
  </div>  
</div>    
<!-- Footer Ends -->

<div pretty-resource-feature=""></div>
    
<!-- BlockCtrl Starts -->
<div ng-controller="BlockCtrl">
  <script type="text/ng-template" id="blockModalContent.html">
    <div class="modal blockModal">
      <div class="modal-body">
        <h5 class="alert alert-info" bo-text=" message "></h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click='close()' bo-text="'close' | translate : 'buttons'"></button>
      </div>
    </div>
  </script>
</div>
<!-- BlockCtrl Ends -->

<!-- BuyCtrl Starts -->
<div ng-controller="BuyCtrl">
  <div class="buyPopup" ng-show="toggle()">
    <div class="buyClosebtn" ng-click="close()"></div>
    <div class="buyText" bo-text="'buyMessage' | translate : 'messages'"></div>
    <a ng-href="{{buyUrl()}}" target="_blank">
      <div class="buySubmitbtn">
        <div class="buySubmitbtnText" bo-text="'buy' | translate : 'buttons'"></div>
      </div>
    </a>
  </div>
</div>
<!-- BuyCtrl Ends -->

<!-- ActivityCtrl Starts -->
<div ng-controller="ActivityCtrl">
  <script type="text/ng-template" id="activityModalContent.html">
    <div class="btn_close" ng-click="close()"></div>    
    <div class="modal activityModal" ng-class="{true: 'fullscreen'}[CONFIG.device != 'windows8']">
      <div class="modal-body">
        <div class='alert alert-error ng-cloak' ng-bind-template="{{ 'noActivitySupport' | translate: 'messages' }}" ng-show="CONFIG.device == 'windows8'"></div>
        <iframe ng-src={{activityUrl}} width="1px" height="1px" frameborder="0" ng-hide="CONFIG.device == 'windows8'" activity-load></iframe>
      </div>      
    </div>
  </script>
</div>
<!-- ActivityCtrl Ends -->