<div epubby-resizer class='thumbnail-panel ng-cloak' ng-show="togglePanelDisplay()" ng-style="{width:thumbnailPanelWidth + 'px', height: thumbnailPanelHeight + 'px'}">  <div class="search-within">
    <div class="search-type">
      <div class="wrapp">
        <ul class="nav nav-tabs left top">
          <li class="all" ng-class="{true: 'selected'}['all'==searchType]"  ng-click="toggleSearchType('all')">All</li>
          <li class="document" ng-class="{true: 'selected'}[1==searchType]"  ng-click="toggleSearchType('1')"></li>
          <li class="video" ng-class="{true: 'selected'}[2==searchType]"  ng-click="toggleSearchType('2')"></li>
          <li class="audio" ng-class="{true: 'selected'}[3==searchType]"  ng-click="toggleSearchType('3')"></li>
          <li class="image" ng-class="{true: 'selected'}[4==searchType]"  ng-click="toggleSearchType('4')"></li>
        </ul>
      </div>     
    </div> 
  </div>  
  <section id='thumbnail-panel-content' >    
    <div class="section-wrapp" ng-style="{top: thumbnailContentTop + 'px'}">
      <div ng-repeat="thumbnail in thumbnails track by $index" ng-show="isContainsResource(thumbnail.resources)" id="{{'thumb_' + thumbnail.no}}" ng-class="{'Chapter': 'true'}[thumbnail.type]">       
        <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)">        
        <p class='fadeIn animated' ng-show="thumbnail.type=='Page'">{{thumbnail.no}}</p>
        <span ng-show="thumbnail.type=='Chapter'"><label>{{thumbnail.num}}.</label><span>{{thumbnail.name}}</span></span>         
      </div>     
    </div>     
    <div class="scrollbar">
     <div id="slider" class="slider" epubby-slider style="-ms-touch-action: none">
      <div class="progress">
        <div class="progress-bar" ng-style="{height: progressheight}"></div>
      </div>        
     </div>
    </div>
  </section> 
  <footer>
   <div class="thumbnail-footer">    
    <div class="history"> 
      <div class="name"></div>
      <div class="backward" ng-click="historyPrevious()" ng-class="{'active': previousThumbs.length > 0}"></div>
      <div class="forward" ng-click="historyNext()" ng-class="{'active': nextThumbs.length > 0}"></div>        
    </div>
      <div class="navigate" >    
        <div class="findimage" ng-click="jumpToThumbKitaboo()"></div>
          <div class="displaynumbs" ><form novalidate ng-submit="jumpToThumbKitaboo()" ><input type="text"  ng-model="$parent.currentPage" placeholder="{{ 'goto' | translate : 'labels' }}" ng-blur="restoreScrollTopLeft()"></form></div>
        </div>
       <!--  <div class="thumbnail-pagenavigation" style=""> //orignal code
          <div class="prev" ng-click="prevThumb($event)" ng-class="togglePrev()"></div>
          <div class="pagerange" ng-bind="range()">?/?</div>
          <div class="next" ng-click="nextThumb($event)" ng-class="toggleNext()"></div>
        </div> -->
   </div>
   </footer>
   <div class="ui-resizable-handle ui-resizable-e" id="egrip" style="-ms-touch-action: none"></div>
   <div class="resizerHandleSupporter" ng-click="StateService.removeMenuParams()"></div>
</div>