iscroll workin, api fetching, hud populating

11 files changed, 75 insertions, 24 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index db803fa9..674ab65c 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -12,7 +12,7 @@ body {
   -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
   -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-  background: #eeeeee;
+  background: #fff;
   font-family: pfd, sans-serif;
   font-size: 12px;
 }
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 2463d123..03f468a7 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -7,7 +7,7 @@
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
   -webkit-transition: -webkit-transform 0.3s;
-  background: #eeeeee;
+  background: #fff;
 }
 #content {
   position: absolute;
@@ -132,6 +132,7 @@
   top: 0; left: 0; width: 100%;
   height: 42px;
   background: white;
+  border-bottom: 1px solid black;
 }
 #header .logo {
   background-image: url(../img/wide-logo.png);
@@ -159,8 +160,9 @@
   display: block;
   position: absolute;
   bottom: 0; left: 0; width: 100%;
-  background: #eee;
+  background: #fff;
   border-top: 1px solid #ddd;
+  z-index: 1;
 }
 #footer span {
   display: none;
@@ -197,6 +199,7 @@
 #curtain.visible {
   pointer-events: auto;
   opacity: 1;
+  z-index: 2;
 }
 
 
@@ -217,17 +220,18 @@
   display: none;
   height: 100%; width: 100%;
   position: absolute; top: 0; left: 0;
-  background: #eeeeee;
+  background: #fff;
 }
 
 /* CONTENT */
 
 #story, #hub, #archive, #collection, #product, #cart {
   position: absolute;
-  top: 40px;
-  height: -webkit-calc(100% - 40px);
-  height: calc(100% - 40px);
+  top: 42px;
+  height: -webkit-calc(100% - 42px);
+  height: calc(100% - 42px);
   width: 100%;
+  overflow: hidden;
 }
 h1 {
   text-align: center;
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index bac0d116..63faed3e 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -1,14 +1,24 @@
 .collection #collection { display: block }
 .collection #footer .filter { display: block }
-#content.collection { overflow: scroll }
 #collection {
   display: none;
 }
+#collection .item {
+  text-align: center;
+}
+#collection .item img {
+  width: 306px;
+  height: 390px;
+}
 
 .product #product { display: block }
 .product #footer .buynow { display: block }
 .product #footer .addtocart { display: block }
-#content.product { overflow: scroll }
 #product {
   display: none;
 }
+
+.scroll {
+  position: absolute;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index e0b08351..1beaa708 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -6,6 +6,11 @@ var app = (function(){
     app.build()
     
     sdk.init({ env: "test" })
+    
+    app.iscroll_options = {
+      mouseWheel: true,
+      scrollbars: true,
+    }
 
     if (window.cordova) {
       document.addEventListener('deviceready', app.ready, false)
diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js
index 08b8b819..567d1aad 100644
--- a/StoneIsland/www/js/lib/_router.js
+++ b/StoneIsland/www/js/lib/_router.js
@@ -6,11 +6,13 @@ var SiteRouter = Router.extend({
 	routes: {
 		'/':              'intro',
 		'/intro':         'intro',
-    '/store':         'store',
     '/hub':           'hub',
     '/story':         'story',
     '/archive':       'archive',
 
+    '/store':         'store',
+    '/store/:code':   'product',
+
     '/faq':           'faq',
     '/search':        'search',
 
@@ -38,6 +40,11 @@ var SiteRouter = Router.extend({
 	  app.collection.show()
 	},
 	
+	product: function(code){
+	  app.view = app.product
+	  app.product.load(code)
+	},
+	
 	hub: function(){
 	  app.view = app.hub
 	  app.hub.show()
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 34e8b109..13bacb22 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -9,7 +9,7 @@ var ArchiveView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#archive .scroll')
+    this.scroller = new IScroll('#archive', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index ea9b3048..95cdef3f 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -9,7 +9,7 @@ var HubView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#hub .scroll')
+    this.scroller = new IScroll('#hub', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 7f9b30a1..b47b0488 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -9,7 +9,7 @@ var StoryView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#story .scroll')
+    this.scroller = new IScroll('#story', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index 987804fc..d638171b 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -13,7 +13,7 @@ var CollectionView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#collection .scroll')
+    this.scroller = new IScroll('#collection', app.iscroll_options)
   },
 
   show: function(){
@@ -39,17 +39,21 @@ var CollectionView = View.extend({
     console.log(data)
     data.SearchResponseFull.Results.Items.forEach(function(item){
       this.items[ item['Code8'] ] = item
-      var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10']))
+      var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f'))
                            .replace(/{{code8}}/, item['Code8'])
       this.$content.append(t)
-      
     }.bind(this))
+    
+    setTimeout(function(){
+      this.scroller.refresh()
+      app.collection.scroller.scrollTo(0, 0)
+    }.bind(this), 0)
   },
   
   pick: function(e){
     var code = $(e.currentTarget).data("code")
     var data = this.items[code]
-    app.product.load(data)
+    app.product.load(code, data)
   },
 
 })
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 76527c8b..c0a1ee79 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -41,7 +41,24 @@ var ProductView = View.extend({
   color: null,
   code: null,
   
-  load: function(data){
+  cache: {},
+  
+  load: function(code, data){
+    window.location.href = "#/product/" + code
+    data = data || app.collection.items[code]
+    if (code in this.cache) {
+      return this.populate(data, this.cache[code])
+    }
+    sdk.product.item({
+      code: code,
+      success: function(details){
+        this.cache[code] = details
+        this.populate(data, details)
+      }.bind(this),
+    })
+  },
+  
+  populate: function(data, details){
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
     var title = name_partz.join(' ')
@@ -50,7 +67,8 @@ var ProductView = View.extend({
     var size = data['Sizes'][0]
     var size_label = SIZE_LOOKUP[size]
     var color = data['Colors'][0]
-    var color_label = color['Text']
+    console.log(color)
+    var color_label = color && color['Text']
     var body = ""
     
     this.item = data
@@ -63,10 +81,13 @@ var ProductView = View.extend({
     this.$type.html(type)
     this.$price.html(price)
     this.$size.html(size_label)
-    this.$color.html(color)
+    if (color_label) {
+      this.$color.show().html(color_label)
+    }
+    else {
+      this.$color.hide()
+    }
     this.$body.html(body)
-    
-    // TODO: fetch product from item API, get other Code10s so you can populate the gallery
   },
 
   select_size: function(){
diff --git a/StoneIsland/www/js/sdk/_sdk.js b/StoneIsland/www/js/sdk/_sdk.js
index a0250f77..e87bd86c 100644
--- a/StoneIsland/www/js/sdk/_sdk.js
+++ b/StoneIsland/www/js/sdk/_sdk.js
@@ -23,8 +23,8 @@ var sdk = (function(){
     return endpoint + api + "/STONEISLAND_US/" + path
   }
   
-  sdk.image = function(code){
-    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code + "_11_f.jpg"
+  sdk.image = function(code, size){
+    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code + "_" + size + ".jpg"
   }
   
   $.ajaxSetup({