Now shows read in website, and can be toggled by clicking, two extra options in sidebar (read/unread books)

cps/templates/detail.html

@@ -100,6 +100,18 @@
         </div>
         </p>
       {% endif %}  
+      <p>
+        <div class="custom_columns" id="have_read">
+          Read
+          {% if have_read %}
+            <span class="glyphicon glyphicon-ok"></span>
+          {% else %}
+            <span class="glyphicon glyphicon-remove"></span>
+          {% endif %}
+          <form id="have_read_form" action="{{ url_for('toggle_read', id=entry.id)}}" method="POST") >
+          </form>
+        </div>
+      </p>
         
 
       {% if entry.comments|length > 0 and entry.comments[0].text|length > 0%}
@@ -201,3 +213,34 @@
 </div>
 {% endblock %}
 
+{% block js %}
+<script src="http://malsup.github.com/jquery.form.js"></script>
+<script>
+  $( document ).ready(function() {
+    var haveReadForm = $('#have_read_form');
+    haveReadForm.ajaxForm();
+  });
+  $("#have_read").attr('unselectable','on')
+     .css({'-moz-user-select':'-moz-none',
+           '-moz-user-select':'none',
+           '-o-user-select':'none',
+           '-khtml-user-select':'none', /* you could also put this in a class */
+           '-webkit-user-select':'none',/* and add the CSS class here instead */
+           '-ms-user-select':'none',
+           'user-select':'none'
+     }).bind('selectstart', function(){ return false; });
+  $("#have_read").click(function() {
+    var haveReadForm = $('#have_read_form');
+    if ($("#have_read").find('span').hasClass('glyphicon-ok')) {
+      $("#have_read").find('span').removeClass('glyphicon-ok');
+      $("#have_read").find('span').addClass('glyphicon-remove');
+    } else {
+      $("#have_read").find('span').removeClass('glyphicon-remove');
+      $("#have_read").find('span').addClass('glyphicon-ok');
+    }
+    haveReadForm.submit()
+  });
+</script>
+{% endblock %}
+
+