Starting pageflip for #13.

Author: octalmage

app.js

@@ -274,35 +274,25 @@ $(document).on("ready",function()
 
 		if (displayShowing())
 		{
-			//Unselect text from doubleclick. 
-			window.getSelection().removeAllRanges()
-			editor.setValue(note);
-			switchDisplay("edit");
-			//Put cursor at end of textarea.  
-			setTimeout(function()
-			{
-				editor.clearSelection();
-			},1)
-
+			edit();
 		}
 		else
 		{	
-			//unselect text from doubleclick. 
-			window.getSelection().removeAllRanges()
-			note=editor.getValue();
-			notes[current]=note;
-			buildCache(current);
-			$("#display").html(noteCache[current]);
-			switchDisplay("display");
-			//Move note (and cache) to the top!
-			notes.splice(0, 0, notes.splice(current, 1)[0]);
-			noteCache.splice(0, 0, noteCache.splice(current, 1)[0]);
-			current=0;
-			saveNotes();
-			updateList();
-
+			display();
 		}
 	})
+
+	$("#pageflip").on("mousedown", function()
+	{
+		if (displayShowing())
+		{
+			edit();
+		}
+		else
+		{	
+			display();
+		}
+	});
 });
 
 //Very cusom Renderer.
@@ -312,6 +302,37 @@ function render(markdown)
 	return html;
 }
 
+function edit()
+{
+	//Unselect text from doubleclick. 
+	window.getSelection().removeAllRanges()
+	editor.setValue(note);
+	switchDisplay("edit");
+	//Put cursor at end of textarea.  
+	setTimeout(function()
+	{
+		editor.clearSelection();
+		editor.focus();
+	},1)
+}
+
+function display()
+{
+	//unselect text from doubleclick. 
+	window.getSelection().removeAllRanges()
+	note=editor.getValue();
+	notes[current]=note;
+	buildCache(current);
+	$("#display").html(noteCache[current]);
+	switchDisplay("display");
+	//Move note (and cache) to the top!
+	notes.splice(0, 0, notes.splice(current, 1)[0]);
+	noteCache.splice(0, 0, noteCache.splice(current, 1)[0]);
+	current=0;
+	saveNotes();
+	updateList();
+}
+
 function switchDisplay(mode)
 {
 	if (mode=="edit")

index.html

@@ -70,9 +70,9 @@
 <paper-icon-button icon="content-copy"></paper-icon-button><paper-icon-button icon="close"></paper-icon-button>
 </div>
 
-<!--<div id="pageflip">
+<div id="pageflip">
 
-</div>-->
+</div>
 
 <div id="find">
 <input class="mousetrap" type="text" id="findtext">

style.css

@@ -82,9 +82,10 @@
     position: fixed;
     bottom:0px;
     right:0px;
-    width:50px;
-    height:50px;
+    width:25px;
+    height:25px;
     background-color: #c0c0c0;
+    z-index: 10;
   }