<div class='thumbnail-panel ng-cloak' ng-show="togglePanelDisplay()">
  <section id='thumbnail-panel-content' ng-style="{left: thumbnailContentLeft + 'px',width: widthContentCalc + 'px'}">
    <div>
      <div ng-repeat="thumbnail in thumbnails track by $index" id="{{'thumb_' + thumbnail.no}}" ng-class="{'true': thumbnail.type=='Chapter','even':thumbnail.num%2==0,'odd':thumbnail.num%2!=0}">
        <p class='fadeIn animated' ng-show="thumbnail.type=='Page'">{{displayNum(thumbnail.no)}}</p>
        <img class='fadeIn animated' ng-src="{{thumbnail.path}}" epubby-thumbnail-check='Page' ng-show="thumbnail.type=='Page'" ng-class="{'currentPage': thumbnail.no == uiValue}" ng-click="jumpToThumb(thumbnail.no - 1)">
        <span ng-show="thumbnail.type=='Chapter'"><label>{{thumbnail.num}}</label><span>{{thumbnail.name}}</span></span>
      </div>
    </div>
  </section>
  <footer><!--  ng-hide="StateService.isLoading" -->
    <div class="percentage">{{setProgress()}}</div>
    <div class="thumbnail-footer">
      <div id="slider" epubby-slider style="-ms-touch-action: none">
        <div class="progress">
          <div class="progress-bar" ng-style="{width: progresswidth}"></div>
        </div>
        <div  ng-repeat='sliderpoint in sliderPoints track by $index' class="sliderpoint" ng-style="{left: sliderpoint + '%'}"><div></div></div>
      </div>
    </div>
  </footer>
</div>