Beginnings of comment handling.

css/style.css

@@ -54,6 +54,16 @@ form#form{
 	background-image: url(../images/buttons/ui/danger-press.png);
 	background-color: #890707;
 }
+.cancel-force{
+	background-image: url(../images/buttons/ui/danger.png) !important;
+	background-color: #b70404 !important;
+	color: #fff !important;
+	border: none !important;
+}
+.cancel-force:active{
+	background-image: url(../images/buttons/ui/danger-press.png) !important;
+	background-color: #890707 !important;
+}
 #cacheStatus{
 	height: 100% !important;
 	top: 0 !important;

data/pages/project.template

@@ -5,7 +5,7 @@
 	{{description}}
 </div>
 <span style="font-size:small;">
-	Comments
+	Comments <button class="comment">{"text":"comment","id":{{id}},"type":"project","title":"Comment"}</button>
 </span>
 <ul>
 	{{#each comments}}

index.php

@@ -123,5 +123,12 @@
 		<div id="content" class="container"></div>
 		<div id="loading"></div>
 		<div id="dialog"></div>
+		<div id="comment">
+			<form>
+				<input type="hidden" name="type"/>
+				<input type="hidden" name="id"/>
+				<textarea name="message"></textarea>
+			</form>
+		</div>
 	</body>
 </html>

js/index.js

@@ -336,6 +336,52 @@
 				$(selector).find('input[type=submit]').button();
 				$(selector).find('input[type=button]').button();
 				$(selector).find('button').button();
+				render.comment.buttons(selector);
+			},
+			comment: {
+				buttons: function(selector){
+					$(selector).find('button.comment').each(function(){
+						var context = JSON.parse($(this).text());
+						$(this).text(context.text);
+						$(this).click(function(){
+							render.comment.dialog(context.id,context.type,context.title);
+						});
+					});
+				},
+				dialog: function(id,type,title){
+					$('#comment').find('form').find('input[name=type]').val(type);
+					$('#comment').find('form').find('input[name=id]').val(id);
+					$('#comment').dialog({
+						close: function(){
+							$('#comment').find('form').find('input[name=type]').val('');
+							$('#comment').find('form').find('input[name=id]').val('');
+						},
+						resizable: false,
+						draggable: false,
+						title: title,
+						buttons: [
+							{
+								text: 'Ok',
+								class: 'recommend-force',
+								click: function(){
+									var context = $(this).find('form').serializeObject();
+									if(context.message!=''){
+										console.log(context);
+										// TODO - Handle sending to server and then refresh page
+										$(this).dialog('close');
+									}
+								}
+							},
+							{
+								text: 'Cancel',
+								class: 'cancel-force',
+								click: function(){
+									$(this).dialog('close');
+								}
+							}
+						]
+					});
+				},
 			},
 			menus: function(selector){
 				$(selector).find('.menu').css({