Add markdown support (marked lib)

Conflicts:
	client/css/style.css

client/css/framemo.css

@@ -14,6 +14,13 @@ h1 a.banner {
     font-size: 48px;
     font-weight: bold;
 }
+.content h1, .content h2, .content h3 {
+    font-family: 'Rock Salt', "Arial Rounded MT Bold", arial, serif !important;
+    margin-bottom: 5px;
+}
+.content h3 {
+    font-size: 14px;
+}
 #go {
     cursor: pointer;
     text-decoration: none;

client/css/style.css

@@ -612,3 +612,14 @@ img {
 .export button, .import * {
     margin-right: 15px;
 }
+.content h1 {
+	font-family: 'Rock Salt', "Arial Rounded MT Bold", arial, serif;
+	color: #5c9db4;
+	font-size: 22px;
+}
+.content * {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+}

client/script.js

@@ -108,7 +108,8 @@ function getMessage(m) {
             break;
 
         case 'editCard':
-            $("#" + data.id).children('.content:first').text(data.value);
+            $("#" + data.id).children('.content:first').attr('data-text', data.value);
+            $("#" + data.id).children('.content:first').html(marked(data.value));
             break;
 
         case 'initColumns':
@@ -175,12 +176,13 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
 	<img class="card-image" src="images/' +
         colour + '-card.png">\
 	<div id="content:' + id +
-        '" class="content stickertarget droppable">' +
-        text + '</div><span class="filler"></span>\
+        '" class="content stickertarget droppable" data-text="">' +
+        marked(text) + '</div><span class="filler"></span>\
 	</div>';
 
     var card = $(h);
     card.appendTo('#board');
+    $("#" + id).children('.content:first').attr('data-text', text);
 
     //@TODO
     //Draggable has a bug which prevents blur event
@@ -291,10 +293,14 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
     );
 
     card.children('.content').editable(function(value, settings) {
+        $("#" + id).children('.content:first').attr('data-text', value);
         onCardChange(id, value);
-        return (value);
+        return (marked(value));
     }, {
         type: 'textarea',
+        data: function() {
+            return $("#" + id).children('.content:first').attr('data-text');
+        },
         submit: 'OK',
         style: 'inherit',
         cssclass: 'card-edit-form',

views/layout.jade

@@ -24,6 +24,7 @@ html(lang="en")
 		<script src="lib/jquery.ui.touch-punch.min.js"></script>
 		<script src="lib/jquery.jeditable.js"></script>
 		<script src="lib/jquery.blockUI.js"></script>
+		<script src="lib/marked.min.js"></script>
 
 		<!-- Socket.IO -->
 		<script src="socket.io/socket.io.js"></script>