<div class="mindink-reader-container" ng-class="{open: drawerOpen}">
    <a class="mindink-logo" ng-href="/"><img src="/img/logo-monochrome.png" alt="mindink"/></a>
    <div id="mindink-reader"></div>
    <div class="previous-page" ng-click="prevPage()"><i class="fa fa-angle-left"></i></div>
    <div class="next-page" ng-click="nextPage()"><i class="fa fa-angle-right"></i></div>
    <div class="progress-bar-mi">
        <div ng-class="{filled: chapterPos > 0}" class="chapter-control previous-chapter" ng-click="prevChapter()">Previous Chapter</div>
        <div ng-class="{filled: chapterPos == chapterLength}" class="chapter-control next-chapter" ng-click="nextChapter()">Next Chapter</div>
        <div class="bar" ng-style="progressBarWidth"></div>
    </div>
    <div class="loading" ng-show="chapterLoading">LOADING</div>
</div>
<div class="chapter-drawer" ng-click="drawerOpen = false" ng-class="{open: drawerOpen}">
    <div class="drawer">
        <img ng-src="{{coverUrl}}" alt="{{meta.bookTitle}}"/>
        <h2 ng-class="{current: chap.label == chapter.label}" ng-repeat="chap in toc" ng-click="loadChapter(chap)">{{chap.label}}</h2>
    </div>
</div>
<div class="notes-drawer" ng-class="{open: noteDrawerOpen}">
    <div class="drawer-hide-overlay" ng-click="noteDrawerOpen = false"></div>
    <div class="drawer">
    <div ng-repeat="(chapter,notes) in groupedNotes | orderBy:'id'">
        <h2 ng-click="showChapter = !showChapter">
        {{toChapterName(chapter).label}}
        <i class="fa" ng-class="{'fa-angle-double-up': showChapter, 'fa-angle-double-down': !showChapter}"></i>
        </h2>
        <div ng-show="showChapter">
            <div class="note"  ng-repeat="note in notes" ng-click="goToNoteLocation(note)">
                <img class="note-avatar" ng-src="{{mi.getAvatarPath(note.user.id, 'large')}}"/>
                <span class="note-creator">{{note.user.firstName}} {{note.user.lastName}}</span>
                <span class="note-subject">{{note.subject}}</span>
                <span class="note-content">{{note.noteText}}</span>
                <time>{{note.createdAt | timeago}}</time>
    <span class="note-action" ng-click="setCurrentNote(note)" stop-event ng-show="note.user.id == currentUser.id">Edit Note</span>
    <span class="note-action" ng-click="setCurrentNote(note)" stop-event ng-hide="note.user.id == currentUser.id">View Note</span>
            </div>
        </div>

    </div>

    </div>
</div>
<div class="ereaderControls" ng-click="cleanView()">
    <div class="search-button" ng-show="featuresEnabled"></div>
    <div class="index-button" ng-click="drawerOpen = !drawerOpen"></div>
    <div class="note-button" ng-click="noteDrawerOpen = !noteDrawerOpen"></div>
    <div class="show-others-notes-button" ng-show="featuresEnabled"></div>
    <div class="close-button" ng-click="closeReader()"></div>
</div>

<%--
NOTE: for the any buttons that will be clicked while highlighting, for IE9+ we
need an unselectable="on" so that the selected text isn't lost.
This is becasue IE treats selections as global (not per document)
  --%>
<div class="contextMenu" ng-style="popupStyle" ng-hide="popupState" ng-show="!showTabletMenu" unselectable="on">
    <i class="pencil" ng-click="setCurrentNote()" unselectable="on"></i>
    <i class="highlight" ng-click="popupState = 'highlight'" unselectable="on"></i>
    <%--<i class="fa fa-twitter" unselectable="on"></i>--%>
    <%--<i class="fa fa-envelope-o" unselectable="on"></i>--%>
</div>
<div class="contextMenu" ng-style="popupStyle" ng-show="popupState=='highlight'" unselectable="on">
    <span ng-click="highlightSelection('blue')" class="highlight-square __mi__blue" unselectable="on"></span>
    <span ng-click="highlightSelection('green')" class="highlight-square __mi__green" unselectable="on"></span>
    <span ng-click="highlightSelection('orange')" class="highlight-square __mi__orange" unselectable="on"></span>
    <span ng-click="highlightSelection('red')" class="highlight-square __mi__red" unselectable="on"></span>
    <span ng-click="highlightSelection('yellow')" class="highlight-square __mi__yellow"  unselectable="on"></span>
    <span ng-click="removeHighlightSelection()" class="highlight-square __mi__remove" unselectable="on">&times;</span>
</div>
<div class="tabletMenu" ng-show="showTabletMenu">
    <i class="pencil" ng-click="setCurrentNote()" unselectable="on"></i>
    <span ng-click="highlightSelection('blue')" class="highlight-square __mi__blue" unselectable="on"></span>
    <span ng-click="highlightSelection('green')" class="highlight-square __mi__green" unselectable="on"></span>
    <span ng-click="highlightSelection('orange')" class="highlight-square __mi__orange" unselectable="on"></span>
    <span ng-click="highlightSelection('red')" class="highlight-square __mi__red" unselectable="on"></span>
    <span ng-click="highlightSelection('yellow')" class="highlight-square __mi__yellow"  unselectable="on"></span>
    <span ng-click="removeHighlightSelection()" class="highlight-square __mi__remove" unselectable="on">&times;</span>
</div>
<mi-note-popup note="currentNote" ng-show="currentNote" save="saveNote()" delete="deleteNote()"></mi-note-popup>




