<!-- <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}}" 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 -->


<!-- zoombar -->


<!-- Left Panel --> 
<div style="" class="navbar-top" ng-style="toggleTopBar()" ng-controller="ToolbarCtrl" ng-class="{true:'rightborder', false: 'rightshadow'}[applyBorder()]"> <!--rightborder:StateService.panelOpen != 'thumbnailPanel'-->
  <!-- <div  class="top-logo" ng-hide="hideLogo()" ng-style="setDynamicLogo()"></div> -->
  <div class="iconWrap">
    <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 toc-feature="" bo-if="CONFIG.bookShelfFeatures['toc-feature']"></div>
      <div res-feature="" bo-if="CONFIG.bookShelfFeatures['res-feature']"></div>
      <!-- <div mydata-feature bo-if="CONFIG.bookShelfFeatures['mydata-feature']"></div>      -->
    </div>    
    <div id="bottom-icons">     
      <div zoombar-feature="" ng-if="CONFIG.bookShelfFeatures['zoombar-feature']"></div> 
      <div search-feature="" bo-if="CONFIG.bookShelfFeatures['search-feature']"></div>
      <div note-feature="" bo-if="CONFIG.bookShelfFeatures['note-feature']"></div>  
      <div highlight-feature="" bo-if="CONFIG.bookShelfFeatures['highlight-feature']"></div>   
      <div pen-feature="" bo-if="CONFIG.bookShelfFeatures['pen-feature']"></div> 
      <div single-feature="" bo-if="CONFIG.bookShelfFeatures['single-feature']"></div>  
      <div double-feature="" bo-if="CONFIG.bookShelfFeatures['double-feature']"></div>     
    </div>  
  </div>
</div>

<div class="bottomBar navbar-fixed-bottom" ng-style="toggleBottomBar()" ng-controller="FooterCtrl">
  <div class="iconWrap">
    <div thumbnail-feature="" bo-if="CONFIG.bookShelfFeatures['thumbnail-feature']"></div>
    <div navigation-feature="" ng-if="CONFIG.bookShelfFeatures['navigation-feature']"></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="wrapper">
      <div class="modal-header">        
        <span class="icon"></span><span class="title" bo-text="'addUpdateNote' | translate : 'labels'"></span><!-- <span ng-bind-template="({{formatDate()}})" class="date"></span> -->
        <div class="delete" ng-click='close()'></div>
      </div>
      <div class="modal-body">
        <form name="frmNote" class="form-horizontal">
          <fieldset>
            <div class="textwrap">
              <textarea class='text' ng-model="note" rows='5' maxlength="1000" placeholder="{{ 'addNote' | translate : 'tooltips' }}"></textarea>
            </div>
            <div class="wrapper">              
              <textarea ng-model="comment" rows='5' maxlength="1000" placeholder="{{ 'description' | translate : 'labels' }}" allow-scroll style="display: none"></textarea>              
              <div class="form-inline">
                <textarea class='urlWrap' ng-model="url" ng-pattern="checkURL" rows='1' maxlength="60" placeholder="{{ 'addUrl' | translate : 'labels' }}" block-enter="openURL(url)"></textarea>
                <button type="button" class="btn btn-primary" ng-disabled="!url || frmNote.$error.url" ng-click="openURL(url)" bo-text="'go' | translate : 'buttons'" style="display: none"></button>
              </div>
              <div class="weblink" ng-class="{'active' : url || frmNote.$error.url }" ng-click="openURL(url)"></div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="close delete" ng-click='deleteNote(noteId)'></button>
        <button type="submit" class="btn btn-primary" ng-click='toggleNote(note, comment, url, noteId, !frmNote.$error.url)' ng-disabled="!note" 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" bo-if="noteId" bo-text="'update' | translate : 'buttons'"></button>
        <button type="button" class="btn btn-primary" ng-click='close()' bo-text="'close' | translate : 'buttons'" style="display: none"></button>
      </div>
      </div>
    </div>      
  </script>
</div>

<!-- BookmarkCtrl -->
<div ng-controller="BookmarkCtrl"></div>

<!-- Footer Starts -->
<!-- <div class="navbar navbar-inverse navbar-fixed-bottom ng-cloak" ng-style="toggleBottomBar()" ng-controller="FooterCtrl">
  <div class="navbar-inner">
    <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="btn-group pull-left jump-wrapper ng-hide" style='position:absolute;' ng-show="jumps.length > 0">
        <div class="jump-back" title="{{ 'jumpBackward' | translate : 'tooltips' }}" ng-click="jumpWhere(pagelist.pageIndex, 'prev', $event)" ng-disabled="togglePrevJump(pagelist.pageIndex)"></div>
        <div class="jump-select">
          <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)"></div>
      </div> -->
      <!-- <div class="btn-group pull-right"> -->
        <!-- <div class="hotspot settings" ng-click='hotspot()' style='display:none;'></div> -->
        <!-- <div print-feature bo-if="CONFIG.bookShelfFeatures['print-feature']"></div> -->

        <!-- <div class='settings ng-cloak' ng-click="openSettings()" bo-title="'settings' | translate : 'labels'" ng-show="toggleSettingsBtn()"></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>        
</div> -->

<!-- Footer Ends -->

<!-- Settings Starts -->
<div ng-controller="SettingsCtrl">
  <script type="text/ng-template" id="settingModalContent.html">
    <div class="modal settingsModal">
      <div class="modal-header">           
        <h3 bo-text="'settings' | translate : 'labels'"></h3>
      </div>
      <div class="modal-body">
          <form class="form-horizontal">
        <div class="control-group">
          <label class="control-label" bo-text="colonize('backgroundColor', 'labels')"></label>
          <div class="controls">
            <label class="radio">
              <input type="radio" name='radioBg' value='default' ng-checked="chkBgColor == 'default'" ng-click="toggleBackgroundState('default')" /><span bo-text="'defaultOption' | translate : 'labels'"></span>
            </label>
            <label class="radio">
              <input type="radio" name='radioBg' value='user' ng-checked="chkBgColor == 'user'" ng-click="toggleBackgroundState('user')" /> <span bo-text="'customOption' | translate : 'labels'"></span>
              <div class='color-palette-wrapper'>
                <button class="color-palette" ng-repeat="color in CONFIG.settings.background_color track by $index" ng-click="pickBColor($event, 'bgColor', color)" ng-style="loadColor('bgColor', color)"></button>
              </div>
            </label>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" bo-text="colonize('fontColor', 'labels')"></label>
          <div class="controls">
            <label class="radio">
              <input type="radio" name='radioFontColor' value='default' ng-checked="chkFontColor == 'default'" ng-click="toggleFontColorState('default')" /><span bo-text="'defaultOption' | translate : 'labels'"></span>
            </label>
            <label class="radio">
              <input type="radio" name='radioFontColor' value='user' ng-checked="chkFontColor == 'user'" ng-click="toggleFontColorState('user')" /><span bo-text="'customOption' | translate : 'labels'"></span>
              <div class='color-palette-wrapper'>
                <button class="color-palette" ng-repeat="color in CONFIG.settings.font_color track by $index" ng-click="pickFColor($event, 'fontColor', color)" ng-style="loadColor('fontColor', color)"></button>
              </div>
            </label>
          </div>
        </div>                       
      </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" ng-click="save()" bo-text="'apply' | translate : 'buttons'"></button>
        <button type="submit" class="btn btn-primary" ng-click="close()" bo-text="'close' | translate : 'buttons'"></button>
      </div>
    </div>
  </script>
</div>
<!-- Settings 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">
        <div class="closeButton" ng-click="close()" ></div>
        <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="'ok' | 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" ng-bind="submitText()"></div>   
    <a ng-href="{{buyUrl()}}" target="_blank">
      <div class="buySubmitbtn">
        <div class="buySubmitbtnText" ng-bind="submitTextBtn()"></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" style="margin-top: -5px;" ng-hide="CONFIG.device == 'windows8'" activity-load></iframe>
      </div>             
    </div>
  </script>
</div>
<!-- ActivityCtrl Ends -->

<!-- DictionaryCtrl Starts -->
<div class="dictionary" ng-show="dictionary" ng-style="{true: {height: '180px'}, false: {height: '5px'}}[dictionary]" ng-controller="DictionaryCtrl">
  <div class="dictionaryHeader">
    <div class="invertedsign"><h5 class="heading">Dictionary text by Porto Editora</h5></div>
    <button type="button" class="close delete" ng-click="close()"></button>  
  </div>       
  <div class="dictionaryBody">
    <ul class="selectWord">
      <li>faluas:feminino plural de falua</li>
    </ul>
    <hr style="margin-top:10px">
    <p class="wordMeaning">Faluas <span>nome feminino Nautica emembraceo, somelhante frageta com dua velas latinos triangle</span></p>
   </div>
</div>
<!-- DictionaryCtrl Ends -->