wishlist add/remove now working on work page

frontend/templates/work.html

@@ -1,22 +1,23 @@
 {% extends "base.html" %}
-{% block title %}
-{{ work.title }}
-{% endblock %}
-{% block extra_head %}
-<link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
+{% block title %}&#151; {{ work.title }}{% endblock %}
 
+{% block extra_css %}
+<link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
+{% endblock %}
+
+{% block base_js %}
 <script type="text/javascript" src="/static/js/jquery-1.6.3.min.js"></script>
 <script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
+<script type="text/javascript" src="/static/js/wishlist.js"></script>
 <script type="text/javascript" src="/static/js/tabs4.js"></script>
 
 <script>
-$(document).ready(function(){
-	$('#embed').click(function(){
-		$('div#widgetcode').toggle();
+jQuery(document).ready(function(){
+	jQuery('#embed').click(function(){
+		jQuery('div#widgetcode').toggle();
 	});
 });
 </script>
-
 {% endblock %}
 
 {% block content %}    
@@ -85,7 +86,21 @@ $(document).ready(function(){
                             {% else %}
                                 {{ wishers }} Ungluers have
                             {% endif %}wished for this Work</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
-                        <div class="btn_support">Add/drop from wishlist</div>
+                        <div class="btn_support">
+                        	{% if request.user.is_anonymous %}
+    							<div class="create-account">
+        							<span title="{% url work work.id %}">Login to Add</span>
+    							</div>
+                            {% else %}{% if work in request.user.wishlist.works.all %}
+    							<div class="remove-wishlist">
+        							<span id="{{ work.id }}">Remove This</span>
+    							</div>
+    						{% else %}
+    							<div class="add-wishlist">
+        							<span id="{{ work.googlebooks_id }}">Add to Wishlist</span>
+    							</div>
+    						{% endif %}{% endif %}
+                        </div>
                         {% endif %}
                     </div>
                 </div>

static/css/campaign.css

@@ -255,3 +255,23 @@ a {
   color: #3d4e53;
   font-size: 12px;
 }
+.add-wishlist,
+.remove-wishlist,
+.on-wishlist,
+.create-account {
+  margin-right: 10px;
+  padding-right: 10px;
+  width: 136px;
+  float: left;
+  cursor: pointer;
+}
+.add-wishlist span,
+.remove-wishlist span,
+.on-wishlist span,
+.create-account span {
+  font-weight: normal;
+  color: #3d4e53;
+  text-transform: none;
+  background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
+  padding-left: 20px;
+}

static/css/search.css

@@ -5,6 +5,7 @@
    display choices accordingly
    or we could just suppress display of those elements and not worry about it for now
    so we are, with this stylesheet
+   (it must go AFTER book_panel.css so these rules will override those)
    hackish solution ftw!
 */
 div.book-list div.booklist-status, .booklist-status, .icons {

static/less/campaign.less

@@ -104,7 +104,7 @@
 	}
 	
 	.btn_support a {
-		background:url("@{image-base}btn_bg.png") 0 0  no-repeat;
+		background:url("@{image-base}btn_bg.png") 0 0 no-repeat;
 		width:104px;
 		height:41px;
 		line-height:41px;
@@ -274,4 +274,20 @@ ul.support li {
 }
 
 /* differs from sitewide.css. should it? */
-a{ color:#3d4e53; font-size:12px;}
+a{ color:#3d4e53; font-size:12px;}
+
+.add-wishlist, &.remove-wishlist, &.on-wishlist, &.create-account {
+	margin-right: 10px;
+	padding-right: 10px;
+	width: 136px;
+	float: left;
+	cursor: pointer;
+            
+	span {
+    	font-weight:normal;
+        color:@text-blue;
+        text-transform: none;
+        background:url("@{image-base}booklist/add-wishlist.png") left center no-repeat;
+        padding-left:20px;
+	}
+}

static/less/search.less

@@ -5,6 +5,7 @@
    display choices accordingly
    or we could just suppress display of those elements and not worry about it for now
    so we are, with this stylesheet
+   (it must go AFTER book_panel.css so these rules will override those)
    hackish solution ftw!
 */