put unlockedMessage in content.coffee, some prep for purchase button

src/app/content.coffee

@@ -115,6 +115,9 @@ module.exports = {
     ]
     
   items: {
+    unlockedMessage:
+      title: "Item Store Unlocked"
+      content: "Congradulations, you have unlocked the Item Store! You can now buy weapons, armor, potions, etc. Read each item's comment for more information."
     weapon: [
       {text: "Sword 1", icon: "item-sword1", notes:'', value:0}
       {text: "Sword 2", icon:'item-sword2', notes:'', value:100}

src/app/index.coffee

@@ -104,13 +104,13 @@ ready (model) ->
       if !user.get('items.itemsEnabled') and stats.exp >=50
         user.set 'items.itemsEnabled', true
         $('ul.items').popover
-          title: "Item Store Unlocked"
+          title: content.items.unlockedMessage.title
           placement: 'left'
           html: true
           content: "<div class='item-store-popover'>\
             <img src='/img/BrowserQuest/chest.png' />\
-            Congradulations, you have unlocked the Item Store! You can now buy weapons, armor, potions, etc. Read each item's comment for more information. \
-            <a href='#' onClick=\"$('ul.items').popover('hide');return false;\">[Close]</a></div>"
+            #{content.items.unlockedMessage.content} <a href='#' onClick=\"$('ul.items').popover('hide');return false;\">[Close]</a>\
+            </div>"
         $('ul.items').popover 'show'
 
       user.set 'stats.exp', stats.exp
@@ -288,6 +288,9 @@ ready (model) ->
     chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
     chart.draw(data, options)
     
+  exports.buyItem = (e, el) ->
+    
+    
   exports.vote = (e, el, next) ->
     direction = $(el).attr('data-direction')
     direction = 'up' if direction == 'true/'

styles/app/index.styl

@@ -75,7 +75,7 @@ li:hover .task-meta-controls .hover-show
   .vote-up, .vote-down
     text-decoration:none;
 
-  .buy-link, .static-buy-link
+  .buy-link, .item-buy-link
     background-color: #ccffcc
     padding: 2px
     margin-right: 10px
@@ -83,10 +83,10 @@ li:hover .task-meta-controls .hover-show
   
     img
       height:20px  
+      
+   .item-buy-link
+     background-color: #DEE5F2
   
-  .static-buy-link
-    background-color: #DEE5F2
-
 #character 
   img
     width: 60px
@@ -118,6 +118,8 @@ footer.footer
 .item-store-popover img
   float:left
   padding-right:7px;
+  
+
 
 .item .task-text img
   max-height: 16px

views/app/index.html

@@ -217,7 +217,7 @@
         <span data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
       </div>
       <div class="task-controls">
-        <a x-bind=click:vote class="static-buy-link" data-direction=down>{:item.value}<img src="img/coin_single_gold.png"/></a>
+        <a x-bind=click:buy-item class="item-buy-link" data-direction=down>{:item.value}<img src="img/coin_single_gold.png"/></a>
       </div>
       <div class="task-text"><img src="/img/BrowserQuest/{:item.icon}.png" /> {:item.text}</div>
     </pre>