3 files changed, 49 insertions, 3 deletions
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index a1a506a3..1377277a 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -8,7 +8,12 @@ var CollectionView = ScrollableView.extend({
   items: {},
 
   events: {
-    "click .item": "pick",
+    "touchstart .item": "touchstart",
+    "touchmove .item": "touchmove",
+    "touchend .item": "touchend",
+    "mousedown .item": "touchstart",
+    "mousemove .item": "touchmove",
+    "mouseup .item": "touchend",
   },
   
   initialize: function(){
@@ -62,5 +67,28 @@ var CollectionView = ScrollableView.extend({
     var data = this.items[code]
     app.product.load(code, data)
   },
+  
+  firstTouch: { x: 0, y: 0, id: "" },
+  lastTouch: { x: 0, y: 0, id: "" },
+  touchstart: function(e){
+    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
+    this.firstTouch.x = this.lastTouch.x = p.pageX
+    this.firstTouch.y = this.lastTouch.y = p.pageY
+    this.firstTouch.id = e.currentTarget.dataset.id
+  },
+  touchmove: function(e){
+    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
+    this.lastTouch.x = p.pageX
+    this.lastTouch.y = p.pageY
+    this.lastTouch.id = e.currentTarget.dataset.id
+  },
+  touchend: function(e){
+    var first = app.collection.firstTouch
+    var last = app.collection.lastTouch
+    var distance = Math.sqrt( Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2) )
+    if (distance < 20) {
+      this.pick(e)
+    }
+  },
 
 })
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index 2eabe2a6..44eed9f0 100644
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -1,6 +1,7 @@
 var GalleryView = View.extend({
 
   el: "#gallery",
+  template: $("#gallery .template").html(),
   
   events: {
     "click .left": "prev",
@@ -16,7 +17,23 @@ var GalleryView = View.extend({
     this.$slider = this.$(".slider")
   },
   
-  populate: function(){
+  populate: function(code, image_ids){
+    var valid_styles = {}
+    image_ids.forEach(function(id){
+      if (id.indexOf("_") == -1) return
+      var partz = id.split("_")
+      var size = parseInt(partz[0]), style = partz[1]
+      if (size > 13) return;
+      if (! valid_styles[style] || valid_styles[style] < size) {
+        valid_styles[style] = size
+      }
+    })
+    Object.keys(valid_styles).forEach(function(style){
+      var id = valid_styles[style] + "_" + style
+      var t = this.template.replace(/{{image}}/, sdk.image(code, id))
+                           .replace(/{{id}}/, sdk.image(code, id))
+      this.$slider.append(t)
+    }.bind(this))
   },
 
   prev: function(){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index c1085b91..a179d227 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -69,12 +69,13 @@ var ProductView = ScrollableView.extend({
   
   populate: function(data, details){
     this.show()
-// console.log(data, details)
+    console.log(data, details)
 
     var descriptions = {}
     details['Item']['Descriptions'].forEach(function(pair){
       descriptions[pair.Key] = pair.Value
     })
+    this.gallery.populate( data['Code8'], details['Item']['ImageTypes'] )
 
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()