3 files changed, 67 insertions, 4 deletions

diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss
index cf49797ce..7c5677f0d 100644
--- a/src/client/views/PresentationView.scss
+++ b/src/client/views/PresentationView.scss
@@ -50,4 +50,19 @@
     padding-bottom: 1px; 
     font-size: 15px;
     float:left;
- }
\ No newline at end of file
+ }
+
+ .presentation-next{
+     float: right;
+ }
+ .presentation-back{
+     float: left;
+ }
+ .presentation-next:hover{
+    transition: all .1s;
+    background: #AAAAAA
+}
+.presentation-back:hover{
+    transition: all .1s;
+    background: #AAAAAA
+}
\ No newline at end of file
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index e2a83e701..ca7111155 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -59,15 +59,30 @@ class PresentationViewItem extends React.Component<PresViewProps> {
     renderChild(document: Document) {
         let title = document.GetT<TextField>(KeyStore.Title, TextField);
 
+        //to get currently selected presentation doc
+        let selected = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+
         // if the title hasn't loaded, immediately return the div
         if (!title || title === "<Waiting>") {
             return <div className="presentationView-item" key={document.Id}></div>;
         }
         // finally, if it's a normal document, then render it as such.
         else {
-            return <li className="presentationView-item" key={document.Id} >
-                <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title.Data}</div>
-                <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div></li>;
+            const children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+            if (children && children !== "<Waiting>" && children.Data[selected] == document) {
+                //this doc is selected
+                const styles = {
+                    background: "gray"
+                }
+                return <li className="presentationView-item" style={styles} key={document.Id}>
+                    <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title.Data}</div>
+                    <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div></li>;
+            } else {
+                return <li className="presentationView-item" key={document.Id} >
+                    <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title.Data}</div>
+                    <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div></li>;
+            }
+
         }
     }
 
@@ -93,6 +108,34 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable
     collapsed: boolean = false;
     closePresentation = action(() => this.props.Document.SetNumber(KeyStore.Width, 0));
+    next = () => {
+        const current = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+        const allDocs = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (allDocs && allDocs !== "<Waiting>" && current < allDocs.Data.length + 1) {
+            //can move forwards
+            this.props.Document.SetNumber(KeyStore.SelectedDoc, current + 1);
+            const doc = allDocs.Data[current + 1];
+            let docView = DocumentManager.Instance.getDocumentView(doc);
+            if (docView) {
+                docView.focus();
+            }
+        }
+
+    };
+    back = () => {
+        const current = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+        const allDocs = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (allDocs && allDocs !== "<Waiting>" && current - 1 >= 0) {
+            //can move forwards
+            this.props.Document.SetNumber(KeyStore.SelectedDoc, current - 1);
+            const doc = allDocs.Data[current - 1];
+            let docView = DocumentManager.Instance.getDocumentView(doc);
+            if (docView) {
+                docView.focus();
+            }
+        }
+
+    };
 
     private ref: React.RefObject<HTMLDivElement>;
 
@@ -126,12 +169,16 @@ export class PresentationView extends React.Component<PresViewProps>  {
             titleStr = title.Data;
         }
         let width = this.props.Document.GetNumber(KeyStore.Width, 0);
+
+        //TODO: next and back should be icons
         return (
             <div className="presentationView-cont" style={{ width: width }}>
                 <div className="presentationView-heading">
                     <div className="presentationView-title">{titleStr}</div>
                     <div className='presentation-icon' onClick={this.closePresentation}>X</div></div>
                 <div>
+                    <div className="presentation-back" onClick={this.back}>back</div>
+                    <div className="presentation-next" onClick={this.next}>next</div>
 
                 </div>
                 <ul>
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index d9ba251ae..2f9eb7715 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -36,4 +36,5 @@ export namespace KeyStore {
     export const CurPage = new Key("CurPage");
     export const NumPages = new Key("NumPages");
     export const Ink = new Key("Ink");
+    export const SelectedDoc = new Key("SelectedDoc");
 }