<style>
.nav-page, .single_column_view, .double_column_view, .toc, .resource, .zoom, .toggle_highlight, .bookmark, .add-note, .list, .navbar-left, .zoomcontrol, .mydata-panel, .search-panel, .toc-panel, .thumbnail-panel, .pagenavigation-bar, .pen-container,.print, .jump-select, .jump-back, .jump-next, .settings, .smilContainer { display: none; } 

.navbar { 

}

body {
      background: #DAE5E8;
      min-height:100%; 
}
</style>
<div ng-controller="HomeCtrl">
  <div class="page_header" ng-style="setBackground()">
    <div class="logocontainer" ng-style="setLogo()">
      <div class="downloadable_books_button" downloadable-books="" ng-class="{'active': showDownloadbooks}">
        <span class="books_button_tag">Downloadable Books</span>
      </div>
      <div class="login_name" ng-style="setRight()">
        <div class="btn-group" ng-show="email||!isAnaya">
          <a class="btn_username dropdown-toggle" data-toggle="dropdown">
           <span ng-hide="isAnaya"></span> {{username}}
            <span class="caret" ng-hide="isAnaya"></span>
          </a>
          <ul class="dropdown-menu pull-right" ng-hide="isAnaya">
            <li class="login_details_username">{{username}}</li>
            <li class="login_details_email"><span bo-text="'emailId' | translate : 'labels'"></span> : {{email}}</li>
            <li class="login_details_name"><span bo-text="'username' | translate : 'labels'"></span> : {{username}}</li>
            <li class="login_details_password"><span bo-text="'password' | translate : 'labels'"></span> : ***********</li>
            <li class="login_details_lastchild"><a class="signout_button" ng-click="logout()" bo-text="'signOut' | translate : 'buttons'"></a></li>
          </ul>
        </div>
        <div scormlogin-feature="" ng-if="isAnaya"></div>
      </div>
      <div class="licensekey" ng-show="isAnaya">
        <div>
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          </a>
          <div class="dropdown-menu pull-right licensekey-submit">
            <input type="text" epubby-stopimmediatepropagation="" placeholder="{{ 'enterLicensekey' | translate : 'labels' }}">
            <button class="submit"></button>
          </div>
        </div>
      </div>
      <div class="langSettings" ng-show="isAnaya">
        <div class="btn-group">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          </a>
          <div class="dropdown-menu pull-right settingsWrapper">
            <span class="header"></span>
            <span class="middle">
              <div class="wrapper headerText" bo-text="'selectLanguage' | translate : 'labels'"></div>
              <div class="wrapper" ng-repeat="lang in languages track by $index" epubby-stopimmediatepropagation="" ng-click="langChange(lang.lang_code)">
                <span class="radioButton" ng-class="{'selected':lang.lang_name==selectedLanguage.lang_name}"></span> 
                <span class="languageText">{{lang.lang_name}}</span>
              </div>
              <div class="wrapper signout" ng-show="email">
                <button class="signout_button ng-cloak" ng-click="logout()" bo-text="'signOut' | translate : 'buttons'"></button>
              </div>
              <span class="footer"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="wrapper_downloadable_books" ng-show="showDownloadbooks" >
    <div class="downloadable_content_parent" hcustom-scrollbar >
      <div  >
        <div class="downloadable_books_container">
          <div class="downloadable_books" ng-style="{width: 222 * (downloadableBooks.length || 0)}">
            <div class="individual_book" ng-repeat="book in downloadableBooks track by $index">
              <img epubby-thumbnail-check ng-src="{{book.thumbnail}}"  class="individual_book_image">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <div class="category_header" ng-hide="showEditbar">
    <div class="wrapper_dropdown_category">
      <div class="category_dropdown">
        <div ng-click="toggleCategories()" ng-class="{'active': showCategories}">
          <a class="btn">
            <span bo-text="'allCategories' | translate : 'labels'"></span>
            <span class="caret"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="search_edit_container">
      <div class="search_box_contanier">
        <input type="text" class="search_input_bookShelf" onblur="this.value=''">
      </div>
      <div id="search_button_bookShelf"></div>
      <div class="edit_logo" ng-click="toggleEdit()" ng-class="{'active': showEditbar}"></div>
    </div>
  </div>
  <div class="category_header_edit_screen" ng-show="showEditbar">
   <div class="parent_container_buttons_edit">
    <div class="add_button" ng-click="toggleAddBookshelf()"></div>
    <div class="done_button" ng-click="toggleEdit()" bo-text="'done' | translate : 'buttons'"></div>
    </div>
  </div>
  <div id="homePage" class="home-page">      
    <div class="parent_book_shelf content" vcustom-scrollbar="" allow-scroll="">
      <div class="parent_book_shelf_child">
        <div ng-show="arrRecentlyViewedBooks">
          <div class="frequently_accessed" bo-text="'frequentlyAccessed' | translate : 'labels'">
          </div>
          <ul class="thumbnails">
            <li class="span3" ng-repeat="book in arrRecentlyViewedBooks" ng-click="preventBookView()">
              <a class="thumbnail">
                <div style="height:190px;overflow:hidden;text-align:center">
                  <img ng-src="{{book.thumbnail}}" ng-click="getPath(book)" style="height: 100%" epubby-thumbnail-check="">
                </div>
                <div class="caption" style="height: 0px;overflow: hidden;visibility: hidden">
                  <p>{{book.title}} </p>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <div class="all_category">
        <div class="divider_books" ng-show="arrRecentlyViewedBooks" ng-style="{'width' : bookshelfWidth + 120}"></div> 
          All
        </div>
        
        <ul class="thumbnails">
          <li class="span3" ng-repeat="book in books" ng-click="preventBookView()">
            <a class="thumbnail" ng-model="books" data-drag="showEditbar" jqyoui-draggable="{index: {{$index}}}" data-jqyoui-options="{revert: 'invalid', containment: 'document'}">
              <div style="height:190px;overflow:visible;text-align:center;float:left;width:147px">
                <div class="remove_button_for_book" ng-show="showEditbar"></div>
                <img ng-src="{{book.thumbnail}}" ng-click="getPath(book)" style="height: 100%" epubby-thumbnail-check="">
              </div>
              <div class="caption" style="height: 0px;overflow: hidden;visibility: hidden">
                <p>{{book.title}} </p>
              </div>
            </a>
          </li>
        </ul>
        
        <div class="category_container animate-repeat" ng-repeat="(key,bookShelf) in arrBookShelf track by $index" data-drop="true" ng-model="arrBookShelf[key].books" jqyoui-droppable="{multiple:true}">
          <div class="category_name_edit">
            <div class="divider_books" ng-style="{'width' : bookshelfWidth + 120}"></div> 
            <input type="text" selected-field="" ng-show="showEditbar" class="category_name_input" ng-model="bookShelf.name" ng-style="{'width' : bookshelfWidth}" ng-change="updateBookShelfName(bookShelf.name, bookShelf.id)">
            <div class="category_name" ng-hide="showEditbar">{{bookShelf.name}}</div>
            <button class="shift_arrow_up" ng-show="showEditbar" ng-disabled="$first" move-up=""></button>
            <button class="shift_arrow_down" ng-show="showEditbar" ng-disabled="$last" move-down=""></button>
            <div class="delete_shelf_button" ng-show="showEditbar" remove-shelf="$index"></div>
          </div>

          <div ng-show="bookShelf.books.length == 0" class="newShelfMessage" bo-text="'noBooksFound' | translate : 'messages'"></div>
          <ul class="thumbnails" ng-show="bookShelf.books.length != 0">
              <li class="span3" ng-repeat="book in bookShelf.books" ng-click="preventBookView()">
                
                <a class="thumbnail" data-drag="showEditbar" jqyoui-draggable="{index: {{$index}}}" data-jqyoui-options="{revert: 'invalid', containment: 'document'}" ng-model="arrBookShelf[key].books">

                  <div style="height:190px;text-align:center;float:left;width:147px">
                    <div class="remove_button_for_book" ng-show="showEditbar" ng-click="bookShelf.books.splice($index,1)"></div>
                    <img ng-src="{{book.thumbnail}}" ng-click="getPath(book)" style="height: 100%" epubby-thumbnail-check="">
                  </div>
                  <div class="caption" style="height: 0px;overflow: hidden;visibility: hidden">
                    <p>{{book.title}} </p>
                  </div>
                </a>
              </li>
            </ul>
        </div>

        <div class="category_container_dummy animate-repeat">
          <div class="category_name_edit">
            <div class="divider_books" ng-style="{'width' : bookshelfWidth + 120}"></div> 
            <input type="text" class="category_name_input" ng-model="bookShelf.name" ng-style="{'width' : bookshelfWidth}">
            <button class="shift_arrow_up"></button>
            <button class="shift_arrow_down"></button>
            <div class="delete_shelf_button"></div>
          </div>

          <div class="newShelfMessage" bo-text="'noBooksFound' | translate : 'messages'"></div>
          
        </div>
      </div>  
    </div>
  </div>
    <div class="category_dropdown_list" ng-show="showCategories">
       <ul class="dropdown_menu">
        <li ng-repeat="bookShelf in arrBookShelf">{{bookShelf.name}}</li>
      </ul>
    </div>
    <div class="new_shelf_add" ng-show="showAddbookshelf">
     <div class="parent_add_new_shelf">
        <span class="title_add_new_book_shelf" bo-text="'addNewShelf' | translate : 'labels'"></span>
        <input type="text" class="shelf_name_input" ng-model="shelfName" placeholder="{{'enterShelfTitle' | translate : 'labels'}}">
        <a class="add_book_shelf_button" bo-text="'add' | translate : 'buttons'" add-shelf="shelfName"></a>
        <a class="cancel_book_shelf_button" bo-text="'cancel' | translate : 'buttons'" ng-click="toggleAddBookshelf()"></a>
      </div>
    </div>
    <div class="navbar navbar-fixed-bottom ng-cloak" style="height:41px"><div class="navbar-inner" ng-style="setBottomLogo()"><div class="copyright" style="margin-top: -3px"></div></div></div>
</div>