Add image background

css/main.css

@@ -1,6 +1,6 @@
 body {
-	background-color: White;
+	background-image: url(../img/honeycomb.png);
-	font-family: sans-serif;
+    background-repeat: repeat;
 }
 
 #navbar {
@@ -40,16 +40,6 @@ body {
 	display: inline-block;
 }
 
-.wmd-button>span {
-	background-image: url(../img/wmd-buttons.png);
-	background-repeat: no-repeat;
-	background-position: 0px 0px;
-	width: 20px;
-	height: 20px;
-	display: inline-block;
-	border: 1px solid #f2f2f2;
-}
-
 .wmd-prompt-background {
 	background-color: Black;
 }
@@ -97,6 +87,15 @@ body {
 	height: 18px !important;
 }
 
+.ui-layout-toggler-south {
+	margin-top: 3px !important;
+	height: 18px !important;
+}
+
+.ui-layout-toggler-south .caret {
+  margin-top: 6px;
+}
+
 .ui-layout-toggler-north-open .caret,
 .ui-layout-toggler-south-closed .caret {
   border-bottom: 5px solid #525252;
@@ -119,13 +118,17 @@ body {
     width: 18px !important;
 }
 
+.ui-layout-toggler-east .caret,
+.ui-layout-toggler-west .caret {
+  margin-top: 40px;
+}
+
 .ui-layout-toggler-east-open .caret,
 .ui-layout-toggler-west-closed .caret {
   border-bottom: 5px solid transparent;
   border-top: 5px solid transparent;
   border-left: 5px solid #525252;
   border-right: 0;
-  margin-top: 40px;
 }
 
 .ui-layout-toggler-east-closed .caret,
@@ -134,5 +137,4 @@ body {
   border-top: 5px solid transparent;
   border-right: 5px solid #525252;
   border-left: 0;
-  margin-top: 40px;
 }

index.html

@@ -82,7 +82,7 @@
 		</div>
 	</div>
 	<textarea id="wmd-input" class="ui-layout-center"></textarea>
-	<div id="wmd-preview" class="well ui-layout-east"></div>
+	<div class="ui-layout-east"></div>
 	<div class="ui-layout-south"></div>
 	<div id="remove-file-confirm" class="modal hide">
 		<div class="modal-header">

js/main.js

@@ -99,7 +99,8 @@ var fileManager = (function($) {
 			var title = localStorage[fileIndex + ".title"];
 			if (title) {
 				lastIndex = i;
-				this.fileDescList.push({"index": fileIndex, "title": title});
+				this.fileDescList
+					.push({ "index" : fileIndex, "title" : title });
 			}
 		}
 		localStorage["file.count"] = lastIndex + 1;
@@ -127,10 +128,9 @@ var fileManager = (function($) {
 			var li = $("<li>").append(a);
 			if (fileDesc.index == fileIndex) {
 				li.addClass("disabled");
-			}
+			} else {
-			else {
+				a.attr("href", "javascript:void(0);").click(
-				a.attr("href", "javascript:void(0);")
+					(function(fileIndex) {
-                .click((function(fileIndex) {
 						return function() {
 							localStorage["file.current"] = fileIndex;
 							fileManager.selectFile();
@@ -168,7 +168,8 @@ var gdrive = (function($) {
 				var state = JSON.parse(decodeURI((/state=(.+?)(&|$)/
 					.exec(location.search) || [ , null ])[1]));
 				if (state.action == 'create') {
-					gdrive.createFile(state.folderId, fileManager.currentFile, fileManager.content);
+					gdrive.createFile(state.folderId, fileManager.currentFile,
+						fileManager.content);
 				}
 
 			} catch (e) {
@@ -197,7 +198,8 @@ var gdrive = (function($) {
 		var close_delim = "\r\n--" + boundary + "--";
 
 		var contentType = 'text/x-markdown';
-		var metadata = { 'title' : title, 'mimeType' : contentType, 'parents' : [ { 'kind' : 'drive#fileLink', 'id' : folderId } ] };
+		var metadata = { 'title' : title, 'mimeType' : contentType,
+			'parents' : [ { 'kind' : 'drive#fileLink', 'id' : folderId } ] };
 
 		var base64Data = btoa(content);
 		var multipartRequestBody = delimiter
@@ -226,7 +228,8 @@ function createEditor() {
 	var editor = new Markdown.Editor(converter);
 	editor.run();
 
-    $(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn").css("left", 0).find("span").hide();
+	$(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)")
+		.addClass("btn").css("left", 0).find("span").hide();
 	$("#wmd-bold-button").append($("<i>").addClass("icon-bold"));
 	$("#wmd-italic-button").append($("<i>").addClass("icon-italic"));
 	$("#wmd-link-button").append($("<i>").addClass("icon-globe"));
@@ -247,16 +250,27 @@ function createLayout() {
 	var layoutGlobalConfig = { closable : true, resizable : false,
 		slidable : false, livePaneResizing : true, spacing_open : 20,
 		spacing_closed : 20, togglerLength_open : 90,
-		togglerLength_closed : 90, center__minWidth : 200,
+		togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
 		stateManagement__enabled : false, };
 	if (layoutOrientation === 0) {
+		$(".ui-layout-east").addClass("well").attr("id", "wmd-preview");
 		layout = $('body').layout(
 			$.extend(layoutGlobalConfig,
 				{ east__resizable : true, east__size : .5, east__minSize : 200,
 					south__closable : false, }));
+	} else if (layoutOrientation === 1) {
+		$(".ui-layout-east").remove();
+		$(".ui-layout-south").addClass("well").attr("id", "wmd-preview");
+		layout = $('body').layout(
+			$.extend(layoutGlobalConfig, { south__resizable : true,
+				south__size : .5, south__minSize : 200, }));
 	}
-	$(".ui-layout-toggler-north").addClass("btn").append($("<b>").addClass("caret"));
+	$(".ui-layout-toggler-north").addClass("btn").append(
-	$(".ui-layout-toggler-east").addClass("btn").append($("<b>").addClass("caret"));
+		$("<b>").addClass("caret"));
+	$(".ui-layout-toggler-south").addClass("btn").append(
+		$("<b>").addClass("caret"));
+	$(".ui-layout-toggler-east").addClass("btn").append(
+		$("<b>").addClass("caret"));
 }
 
 (function($) {