Put in the new BuyGemsModal design.

app/locale/en.coffee

@@ -310,6 +310,11 @@
     restricted: "(restricted in this level)"
     equip: "Equip"
     unequip: "Unequip"
+    
+  buy_gems:
+    few_gems: 'A few gems'
+    pile_gems: 'Pile of gems'
+    chest_gems: 'Chest of gems'
 
   choose_hero:
     choose_hero: "Choose Your Hero"

app/styles/play/modal/buy-gems-modal.sass

@@ -1,8 +1,44 @@
 #buy-gems-modal
-  button
-    width: 100%
-    margin-bottom: 10px
+
+  //- Clear modal defaults
+  .modal-dialog
+    margin: 100px auto 0 auto
+    padding: 0
+    width: 820px
+    height: 460px
+    background: none
+
+  //- Background
+  #buy-gems-background
+    position: absolute
+    top: -157px
+    left: -2px
+
+  //- Products
+
+  #products
+    position: absolute
+    left: 55px
+    top: 242px
+    width: 720px
+    height: 140px
+    index: 1
     
-  .gem
-    width: 20px
-    height: 20px
+    .product
+      width: 228px
+      overflow: none
+      float: left
+      text-align: center
+      margin-right: 12px
+      
+      h4
+        font-size: 20px
+        color: rgb(22,16,5)
+        
+      h3
+        margin-top: 10px
+        text-transform: uppercase
+        color: rgb(22,16,5)
+        
+      button
+        width: 80%

app/templates/play/modal/buy-gems-modal.jade

@@ -1,14 +1,11 @@
-extends /templates/modal/modal_base
-
-block modal-header-content
-  h3(data-i18n='play.buy_gems')
-
-block modal-body-content
-  for product in products
-    button.product.btn.btn-lg(value=product.id)
-      img.gem(src="/images/common/gem.png")
-      span x#{product.gems): #{product.price}
-
-block modal-footer
-  .modal-footer
-    button(data-dismiss="modal", data-i18n="common.cancel").btn Cancel
+.modal-dialog
+  .modal-content
+    img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background
+    
+    #products
+      for product in products
+        .product
+          h4 x#{product.gems}
+          h3(data-i18n=product.i18n)
+          button.btn.btn-illustrated.btn-lg(value=product.id)
+            span= product.price

app/views/play/modal/BuyGemsModal.coffee

@@ -7,9 +7,9 @@ module.exports = class BuyGemsModal extends ModalView
   plain: true
   
   products: [
-    { price: '$4.99', gems: 5000, id: 'gems_5' }
-    { price: '$9.99', gems: 11000, id: 'gems_10' }
-    { price: '$19.99', gems: 25000, id: 'gems_20' }
+    { price: '$4.99', gems: 5000, id: 'gems_5', i18n: 'buy_gems.few_gems' }
+    { price: '$9.99', gems: 11000, id: 'gems_10', i18n: 'buy_gems.pile_gems' }
+    { price: '$19.99', gems: 25000, id: 'gems_20', i18n: 'buy_gems.chest_gems' }
   ]
   
   subscriptions:
@@ -17,7 +17,7 @@ module.exports = class BuyGemsModal extends ModalView
     'ipad:iap-complete': 'onIAPComplete'
   
   events:
-    'click button.product': 'onClickProductButton'
+    'click .product button': 'onClickProductButton'
 
   constructor: (options) ->
     super(options)
@@ -48,7 +48,8 @@ module.exports = class BuyGemsModal extends ModalView
       Backbone.Mediator.publish 'buy-gems-modal:purchase-initiated', { productID: productID }
       
     else
-      @$el.find('.modal-body').append($('<div class="alert alert-danger">Not implemented</div>'))
+      application.tracker?.trackEvent 'Started purchase', {productID:productID}, ['Google Analytics']
+      alert('Not yet implemented, but thanks for trying!')
       
   onIAPComplete: (e) ->
     product = _.find @products, { id: e.productID }