populate selector

3 files changed, 82 insertions, 8 deletions

diff --git a/StoneIsland/www/js/lib/nav/FooterView.js b/StoneIsland/www/js/lib/nav/FooterView.js
index 15c6425f..76126102 100644
--- a/StoneIsland/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/www/js/lib/nav/FooterView.js
@@ -3,9 +3,28 @@ var FooterView = View.extend({
   el: "#footer",
   
   events: {
+    "click .filter": "filter",
+    "click .buynow": "buynow",
+    "click .addtocart": "addtocart",
+    "click .cancel": "cancel",
+    "click .checkout": "checkout",
+    "click .checkout_proceed": "checkout_proceed",
   },
   
   initialize: function(){
   },
+  
+  filter: function(){
+  },
+  buynow: function(){
+  },
+  addtocart: function(){
+  },
+  cancel: function(){
+  },
+  checkout: function(){
+  },
+  checkout_proceed: function(){
+  },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index a98f3ca4..94d43508 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -37,32 +37,69 @@ var ProductView = View.extend({
     document.body.className = "product"
   },
   
+  item: null,
+  size: null,
+  color: null,
+  code: null,
+  
   load: function(data){
-    //
-    this.item = data
-    
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
     var title = name_parts.join(' ')
-    var size = data['Sizes'][0]
     var type = data['MicroCategory'].toUpperCase()
     var price = "$" + data['DiscountedPrice'] + ".00"
-    var color = SIZE_LOOKUP[ data['Colors'][0]['Text'] ]
+    var size = data['Sizes'][0]
+    var size_label = SIZE_LOOKUP[size]
+    var color = data['Colors'][0]
+    var color_label = color['Text']
     var body = ""
     
+    this.item = data
+    this.color = color
+    this.size = size
+    this.code = data['DefaultCode10']
+    
     this.$num.html(num)
     this.$title.html(title)
     this.$type.html(type)
     this.$price.html(price)
-    this.$size.html(size)
+    this.$size.html(size_label)
     this.$color.html(color)
     this.$body.html(body)
+    
+    // TODO: fetch product from item API, get other Code10s so you can populate the gallery
   },
 
   select_size: function(){
+    if (this.item['Sizes'].length == 0) { return }
+    var mapped_sizes = this.item['Sizes'].map(function(size){
+      return {
+        id: size['Id'],
+        label: SIZE_LOOKUP[ size['Text'] ],
+        value: size,
+      }
+    })
+    app.selector.select(mapped_sizes, function(size){
+      this.size = size.value
+      this.$size.html(size.label)
+    }.bind(this))
   },
+  
   select_color: function(){
+    if (this.item['Colors'].length == 0) { return }
+    var mapped_colors = this.item['Colors'].map(function(color){
+      return {
+        id: color['Id'],
+        label: color['Text'],
+        value: color,
+      }
+    })
+    app.selector.select(mapped_colors, function(color){
+      this.color = color.value
+      this.$color.html(color.label)
+    }.bind(this))
   },
+  
   share: function(){
   },
 
diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js
index c81aa121..1580624b 100644
--- a/StoneIsland/www/js/lib/products/Selector.js
+++ b/StoneIsland/www/js/lib/products/Selector.js
@@ -1,6 +1,7 @@
 var Selector = View.extend({
   
   el: "#selector",
+  template: $("#selector .template").html(),
   
   events: {
     "click .close": "hide",
@@ -8,17 +9,34 @@ var Selector = View.extend({
   },
   
   initialize: function(){
+    this.$options = this.$(".options")
   },
   
+  lookup: null,
+  callback: null,
   select: function(options, callback){
+    var lookup = this.lookup = {}
+    this.$options.empty()
+    options.forEach(function(opt){
+      lookup[opt.id] = opt
+      var t = this.template.replace(/{{id}}/, opt.id)
+                           .replace(/{{label}}/, opt.label)
+      this.$options.append(t)
+    })
+    this.$el.show()
   },
   
   hide: function(){
+    this.lookup = this.callback = null
+    this.$el.hide()
   },
   
   pick: function(e){
-    var el = $(e.currentTarget)
-    
+    var $option = $(e.currentTarget)
+    var id = $option.data("id")
+    var selection = this.lookup[id]
+    this.callback( selection )
+    this.hide()
   },
 
 })
\ No newline at end of file