<!--TOC Panel Starts -->
<div class='toc-panel ng-cloak' ng-show="StateService.panelOpen == 'tocPanel'" ng-style="style()">
  <header>
    <ul class="nav nav-tabs center top" >
      <li ng-repeat=" tab in tabs track by $index" ng-class="toggleTOCTabClass(tab)" ng-style="{width: 100/tabs.length + '%'}"
      ng-click="openTab(tab)"><a href="" ng-bind="translateIt(tab,'labels')" ng-class="toggleTOCTabClass(tab)"></a></li>
    </ul>   
  </header>
  <section id='toc-panel-index-content' ng-show="tabOpen == 'content'">
    <div class='chapter' ng-show="$parent.$parent.CONFIG.clientName == 'Anaya'">          
      <div class='pull-right' >
        <form class="form-search" ng-keyup="searchInToc(toc_search)">
          <button type="button" class="btn btn-primary" ng-hide="local_chapters.length == 0 || currentChapter" ng-click="backInTime()">Back</button>     
          <!-- <p class="wrapper" style="display: inline-block;"> -->
            <input type="text" class="search-query" ng-model="$parent.toc_search" placeholder="{{ 'search' | translate : 'labels' }}" set-width-to-index-search custom-ng-focus>
          </p>
        </form>
      </div>
       <div class='search-icon-div'></div> 
    </div>
    <table class='noIndexTable'>
      <tr ng-show="local_chapters.length == 0">
        <td><div class='noIndexMessage' bo-text="'noSearchesFound' | translate : 'messages'"></div></td>
      </tr>
    </table> 
    <div class='backToChapter' ng-show="$parent.$parent.CONFIG.clientName == 'Hurix' && !currentChapter" ng-click="backInTime()"></div>
    <div id="index-iscroll-watcher" ng-hide="local_chapters.length == 0" vcustom-scrollbar allow-scroll ng-style="contentTop()">
      <div >
        <div>
          <table class="table outer-grid" occupy-height="{exclude: {{exclude}}}" style="margin:0px !important;"> <!-- 149 => 63px HEADER and 43px searchBar 45px footer-->
            <tbody>
              <tr>               
                <td class="ng-cloak" >
                  <table class="table unit-table" ng-show="currentChapter">
                    <tr class="fadeIn animated" ng-repeat="chapter in local_chapters track by $index">
                      <td ng-class="{true: 'selected'}[chapter.id == currentChapter]" ng-style="setHeightForIE()"><div ng-bind="displayUnit(chapter, $index)"></div></td>
                    </tr>
                  </table>
                  <div class="backArrowPlaceHolder" ng-show="!currentChapter && $parent.$parent.CONFIG.clientName == 'Hurix'"></div>  
                </td>                
                <td class="ng-cloak" style="width: 50%" ng-show="currentChapter" ng-style="{true: {width: '50%'}, false: {width: '100%'}}[local_sections.length > 0]">
                  <table class="table chapter-table">
                    <tr class="fadeIn animated needsclick" ng-repeat="chapter in local_chapters track by $index" ng-click="openSections(chapter)">
                      <td ng-class="{true: 'selected'}[chapter.id == currentChapter]">
                        <div class='chapter-name' ng-bind="chapter.name"></div>
                        <div class='next-section' ng-show="checkSectionsLength(chapter)"></div>
                        <div class="section-count"><span bo-text="'page' | translate : 'labels'"></span> {{chapter.pageIndex + 1}}</div>                        
                      </td>
                    </tr>
                  </table>  
                </td>                
                <td class="ng-cloak" style="width: 50%;">
                  <table class="table section-table">
                    <tr class="fadeIn animated needsclick" ng-repeat="section in local_sections track by $index" ng-show="showThisSection(section.id)" ng-click="openSubSections(section)">
                      <td>
                        <div class='section-name' ng-bind="section.name"></div>                            
                        <div class='next-section' ng-style="toggleArrow((local_subsections | filterSubSectionBySection : section.id).length)"></div>
                        <div class="subsection-count"><span bo-text="'page' | translate : 'labels'"></span> {{section.pageIndex + 1}}</div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%;" ng-show="currentSubSection">
                 <table class="table section-table">
                    <tr class="fadeIn animated needsclick" ng-repeat="subsection in local_subsections track by $index" ng-show="showThisSubSection(subsection.id)" ng-click="subsectionJump(subsection)">
                      <td><div class='section-name sub' ng-bind="subsection.name"></div></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </tbody>
          </table> 
        </div>                   
      </div>
    </div>
  </section>

  <section id="toc-panel-resources-content" ng-show="tabOpen == 'resources'">
    <div class='chapter' ng-show="$parent.$parent.CONFIG.clientName == 'Anaya'">           
        <div class='pull-right' style="padding-right: 5px;margin-top: -4px;">
          <form class="form-search" ng-keyup="searchInResources(resources_search)">
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" ng-bind="filterName"></a>
              <span class="caret"></span>
              <ul class="dropdown-menu">
               <li ng-click="toggleResourceType('All')"><span bo-text="'all' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['All' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Document')"><span bo-text="'document' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Document' == resourceType]"></span><div id="document"></div></li>
                <li ng-click="toggleResourceType('Video')"><span bo-text="'video' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Video' == resourceType]"></span><div id="video"></li>
                <li ng-click="toggleResourceType('Audio')"><span bo-text="'audio' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Audio' == resourceType]"></span><div id="audio"></li>
                <li ng-click="toggleResourceType('Image')"><span bo-text="'image' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Image' == resourceType]"></span><div id="image"></li>
                <li ng-click="toggleResourceType('Weblink')"><span bo-text="'weblink' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Weblink' == resourceType]"></span><div id="weblink"></li>
                <li ng-click="toggleResourceType('HtmlWrap')"><span bo-text="'htmlwrap' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['HtmlWrap' == resourceType]"></span><div id="activity"></li>
                <li ng-click="toggleResourceType('Activity')"><span bo-text="'activity' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Activity' == resourceType]"></span><div id="activity"></li>
              </ul>
            </div>
            <p class="wrapper" style=" display: inline-block;">
              <input type="text" class="search-query" ng-model="$parent.resources_search" placeholder="{{ 'search' | translate : 'labels' }}" set-width-to-resource-search custom-ng-focus>
            </p>
          </form>
        </div>
    </div>
    <div id="resource-iscroll-watcher"  ng-style="contentTop()" vcustom-scrollbar allow-scroll>
      <div >
        <div>
          <table class="table outer-grid" occupy-height="{exclude: 120}"> <!-- 148 => 40px HEADER and 43px searchBar 45px footer-->
            <tr>
              <td>
                <table class="table unit-table">
                  <tr>
                    <td ng-class="{true: 'selected'}['All' == currentChapterResource]" ng-style="setHeightForIE()"><div></div></td>
                  </tr>
                  <tr class="fadeIn animated" ng-repeat="chapter in local_resources_chapters track by $index">
                    <td ng-class="{true: 'selected'}[chapter.xmlId == currentChapterResource]" ng-style="setHeightForIE()"><div ng-bind="displayUnit(chapter, $index)"></div></td>
                  </tr>
                </table>
              </td>
              <td style="width:50%">
                <table class="table chapter-table">
                  <tr class="fadeIn animated needsclick" ng-click="openChapterResources('All')">
                    <td ng-class="{true: 'selected'}['All' == currentChapterResource]">
                      <div class='chapter-name' bo-text="'all' | translate : 'labels'"></div>
                    </td>
                  </tr>
                  <tr class="fadeIn animated needsclick" ng-repeat="chapter in local_resources_chapters track by $index" ng-click="openChapterResources(chapter.xmlId)">
                    <td ng-class="{true: 'selected'}[chapter.xmlId == currentChapterResource]" ><div class='chapter-name' ng-bind="chapter.name"></div><div class="section-count"><span bo-text="'page' | translate : 'labels'"></span> {{chapter.pageIndex + 1}}</div></td>
                  </tr>
                </table>
              </td>
              <td style="width:50%">
                <table class="table chapter-table">
                  <tr class='fadeIn animated' ng-show="local_resources.length == 0">
                    <td><div class='chapter-name' bo-text="'noResourcesFound' | translate : 'messages'"></div></td>
                  </tr>
                  <tr class='fadeIn animated needsclick' ng-repeat="resource in local_resources track by $index" ng-click="jumpAndPlayResource(resource.pageIndex, resource.resourceId)">
                    <td class="resourceSection" style="background: #053a43;"><div class='chapter-name' style="margin-left: 50px;">{{resource.title}}</div><span class='resource-icon' ng-class="{'1':'document','2':'video','3':'audio','4':'image','5':'weblink','6':'htmlwrap','7':'activity'}[resource.typeId]"></span><div class="section-count_res"><span bo-text="'page' | translate : 'labels'"></span> {{resource.pageIndex + 1}}</div></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </section>
  <section id="toc-panel-glossary-content" ng-show="tabOpen == 'index'">
    <div class='chapter'  ng-show="$parent.$parent.CONFIG.clientName == 'Anaya'">         
        <div class='pull-right' style="padding-right: 5px;margin-top: -4px;">
          <form class="form-search" ng-keyup="searchInGlossary(glossary_search)">
            <p class="wrapper" style=" display: inline-block;">
              <input type="text" class="search-query" ng-model="$parent.glossary_search" placeholder="{{ 'search' | translate : 'labels' }}" set-Width-To-Glossary-Search custom-ng-focus>
            </p>
          </form>
        </div>
    </div>
    <div >
      <div>
        <div>
          <table class='noGloassaryTable'>
            <tr ng-show="!local_glossaryItems || local_glossaryItems.length == 0">
              <td><div class='noGloassaryMessage' bo-text="'noGlossaryFound' | translate : 'messages'"></div></td>
            </tr>
          </table>            
          <table class="table outer-grid" style="margin-top: -1px;"  ng-show="local_glossaryItems" occupy-height="{exclude:150}"> <!-- 150 => 61px HEADER and 43px searchBar 46px footer-->
            <tr>
              <td>
                <div id="glossary-alphabets" vcustom-scrollbar allow-scroll ng-style="contentTop()" style="width:50px;">
                  <div >
                    <div>
                      <table class="table unit-table">
                        <tr class="needsclick" ng-repeat="glossaryitem in local_glossaryItems track by $index" ng-click="openGlossaryKeyWord(glossaryitem)" style="cursor:pointer">
                          <td ng-class="{true: 'selected'}[currentWord == glossaryitem.word]" style="padding: 0px;"><div ng-bind="glossaryitem.word" style="border-right: 2px solid #134a51;height: 77px;text-align:center;padding-right:12px; width:49px;"></div></td>
                        </tr>
                      </table>
                     </div>
                  </div>
                </div>
              </td>
              <td style="width:50%">
                <div id="glossary-chapter" ng-style="keywordStyle()" vcustom-scrollbar allow-scroll>
                  <div >
                    <div>
                      <table class="table chapter-table">
                        <tr class="needsclick" ng-repeat="glossarykeyword in local_glossaryKeywords track by $index" ng-click="openKeywordDescription(glossarykeyword)">
                          <td ng-class="{true: 'selected'}[currentKeyword  == glossarykeyword.keyword]"><div class='chapter-name' ng-bind="glossarykeyword.keyword"></div></td>
                        </tr>
                      </table>
                    </div>
                  </div>  
                </div>
              </td>
              <td style="width:50%">
                <div id="glossary-content" ng-style="descriptionStyle()" vcustom-scrollbar allow-scroll data-delay="1000"> 
                  <div >
                    <div>
                      <table class="table chapter-table">
                        <tr class="fadeIn animated needsclick" ng-repeat="keyworddescription in local_keywordDescriptions track by $index" ng-click="redirectToGlossaryPage(keyworddescription.split('!$!')[1])">
                          <td style="background: #053a43;"><div class='chapter-name'>{{keyworddescription.split('!$!')[0]}}</div><div class="section-count"><span bo-text="'page' | translate : 'labels'"></span> {{keyworddescription.split('!$!')[1]}}</div></td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </section>
  <section id='toc-panel-bookmark-content' ng-show="tabOpen == 'bookmarks'"> 
    <div class='chapter'  ng-show="$parent.$parent.CONFIG.clientName == 'Anaya'"> 
      <div class='pull-right'>
        <form class="form-search" ng-keyup="searchInBookmarks(bookmark_search)">
          <input type="text" class="search-query" ng-model="$parent.bookmark_search" placeholder="{{ 'search' | translate : 'labels' }}" set-width-to-index-search custom-ng-focus>
        </form>
      </div>
      <div class='search-icon-div' style="margin-top: -35px;"></div> 
    </div>
    <table class='noTOCBookmarkTable'>
      <tr ng-show="local_bookmarks_chapters.length == 0">
        <td><div class='noTOCBookmarkMessage' bo-text="'noBookmarksFound' | translate : 'messages'"></div></td>
      </tr>
    </table>
    <div id="toc-bookmark-iscroll-watcher" ng-hide= "local_bookmarks_chapters.length == 0" vcustom-scrollbar allow-scroll ng-style="contentTop()">
      <div>
        <div>
          <table class="table outer-grid" occupy-height="{exclude:  {{exclude}}}" style="margin:0px !important;"> <!-- 138 => 50px HEADER, 46px searchBar, 42px filterBar -->
            <tbody>
              <tr>
                <td class="ng-cloak">
                  <table class="table unit-table">
                    <tr><td ng-class="{true: 'selected'}[bookmarkChapter == 'All']" ng-style="setHeightForIE()"><div></div></td></tr>
                    <tr ng-repeat="chapter in local_bookmarks_chapters track by $index">
                      <td ng-class="{true: 'selected'}[chapter.id == bookmarkChapter]" ng-style="setHeightForIE()"><div ng-bind="displayUnit(chapter, $index)"></div></td>
                    </tr>
                  </table>                   
                </td>
                <td class="ng-cloak" style="width: 50%">
                  <table class="table chapter-table">
                    <tr class="needsclick" ng-click="chooseChapter('All')">
                      <td ng-class="{true: 'selected'}[bookmarkChapter == 'All']" ng-style="setHeightForIE()"><div class='chapter-name'>All</div></td>
                    </tr>
                    <tr class="needsclick" ng-repeat="chapter in local_bookmarks_chapters track by $index" ng-click="chooseChapter(chapter.id)">
                      <td ng-class="{true: 'selected'}[chapter.id == bookmarkChapter]"><!--<div class="section-count">{{chapter.pageIndex + 1}}</div>--><div class='chapter-name' ng-bind="chapter.name"></div><div class="section-count"><span bo-text="'page' | translate : 'labels'"></span> {{chapter.pageIndex + 1}}</div></td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%;">
                  <table class="table section-table">
                    <tr class="needsclick" ng-repeat="bookmark in arrBookmarks | filterBookmarksByChapter: bookmarkChapter track by $index" ng-click="redirectToBookmarkPage(bookmark)">
                      <td>
                        <div class="toc-book-mark"></div>
                        <!--<div class="bookmark-page">{{bookmark.page + 1}}</div>-->
                        <div class='toc-bookmark-title'>{{bookmark.title}}</div>
                        <!--<div class='toc-bookmark-chapter muted' ng-bind-html="placeChapterName(bookmark.page)"></div>--><!--<div class='toc-bookmark-date muted' ng-bind="placeDate(bookmark.created)"></div>--><div class="toc-subsection-count"><span bo-text="'page' | translate : 'labels'"></span> {{bookmark.page + 1}}</div>
                      </td>
                    </tr>
                    <tr class='ng-cloak' ng-show="(arrBookmarks | filterBookmarksByChapter: bookmarkChapter).length == 0">
                      <td class='bookmark-error' bo-text="'noBookmarksFound' | translate: 'messages'"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>   
<!-- TOC Panel Ends >>