begin writing navigation css

19 files changed, 277 insertions, 51 deletions

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
new file mode 100644
index 00000000..5f0641c2
--- /dev/null
+++ b/StoneIsland/www/css/blogs.css
@@ -0,0 +1,14 @@
+.story #story { display: block }
+#story {
+  display: none;
+}
+
+.hub #hub { display: block }
+#hub {
+  display: none;
+}
+
+.archive #archive { display: block }
+#archive {
+  display: none;
+}
\ No newline at end of file
diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
new file mode 100644
index 00000000..6e50c076
--- /dev/null
+++ b/StoneIsland/www/css/cart.css
@@ -0,0 +1,17 @@
+
+.cart #cart { display: block; }
+#cart {
+  display: none;
+}
+
+#summary {
+  display: none;
+}
+
+#shipping {
+  display: none;
+}
+
+#billing {
+  display: none;
+}
diff --git a/StoneIsland/www/css/fonts.css b/StoneIsland/www/css/fonts/fonts.css
index 01fbb382..8ddce654 100644
--- a/StoneIsland/www/css/fonts.css
+++ b/StoneIsland/www/css/fonts/fonts.css
@@ -1,37 +1,37 @@
 @font-face {
   font-family: andale;
-  src: url(fonts/andale_mono.woff);
+  src: url(andale_mono.woff);
   font-style: normal;
   font-weight: normal;
 }
 
 @font-face {
   font-family: pfd;
-  src: url(fonts/pfdintextpro-regular.woff);
+  src: url(pfdintextpro-regular-webfont.woff);
   font-style: normal;
   font-weight: normal;
 }
 @font-face {
   font-family: pfd;
-  src: url(fonts/pfdintextpro-bold.woff);
+  src: url(pfdintextpro-bold-webfont.woff);
   font-style: normal;
   font-weight: bold;
 }
 @font-face {
   font-family: pfd;
-  src: url(fonts/pfdintextpro-medium.woff);
+  src: url(pfdintextpro-medium-webfont.woff);
   font-style: normal;
   font-weight: 300;
 }
 @font-face {
   font-family: pfd;
-  src: url(fonts/pfdintextpro-light.woff);
+  src: url(pfdintextpro-light-webfont.woff);
   font-style: normal;
   font-weight: 100;
 }
 @font-face {
   font-family: pfd;
-  src: url(fonts/pfdintextpro-italic.woff);
+  src: url(pfdintextpro-italic-webfont.woff);
   font-style: italic;
   font-weight: normal;
 }
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 5ac5d15d..c6eaadcf 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -9,23 +9,6 @@ body {
   -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: white;
-  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', sans-serif;
+  font-family: pfd, sans-serif;
   font-size: 12px;
 }
-
-
-#nav {
-  width: 300px;
-  -webkit-transform: translateZ(0) translateX(-300px);
-  -webkit-transition: -webkit-transform 0.3s;
-}
-#content {
-  -webkit-transform: translateZ(0) translateX(0px);
-  -webkit-transition: -webkit-transform 0.3s;
-}
-body.nav #nav {
-  -webkit-transform: translateZ(0) translateX(0);
-}
-body.nav #content {
-  -webkit-transform: translateZ(0) translateX(300px);
-}
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
new file mode 100644
index 00000000..69a6f686
--- /dev/null
+++ b/StoneIsland/www/css/nav.css
@@ -0,0 +1,101 @@
+
+/* NAV BAR */
+
+#nav {
+  width: 300px;
+  -webkit-transform: translateZ(0) translateX(-300px);
+  -webkit-transition: -webkit-transform 0.3s;
+}
+#content {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  overflow: hidden;
+  -webkit-transform: translateZ(0) translateX(0px);
+  -webkit-transition: -webkit-transform 0.3s;
+}
+.ios #content {
+  top: 40px;
+  height: -webkit-calc(100% - 40px);
+}
+.nav #nav {
+  -webkit-transform: translateZ(0) translateX(0);
+}
+.nav #content {
+  -webkit-transform: translateZ(0) translateX(300px);
+}
+
+
+/* INTRO PAGE WITH SPINNING COMPASS */
+
+#intro {
+  display: none;
+}
+.intro #intro {
+  display: block;
+}
+.intro #header,
+.intro #footer {
+  display: none;
+}
+#compass {
+  position: absolute;
+  top: 50%; left: 50%;
+}
+#compass .store {
+}
+#compass .hub {
+}
+#compass .story {
+}
+#compass .archive {
+}
+#compass .latlng {
+}
+
+
+/* HEADER AND FOOTER ON MOST PAGES */
+
+#header {
+  display: block;
+  position: absolute;
+  top: 0; left: 0; width: 100%;
+}
+#footer {
+  display: block;
+  position: absolute;
+  bottom: 0; left: 0; width: 100%;
+}
+#footer span {
+  display: none;
+}
+
+
+/* CURTAIN FOR LOGIN AND SELECTOR VIEWS */
+
+#curtain {
+  display: none;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(238,238,238,0.9);
+}
+
+
+/* LOGIN / SIGNUP SCREEN */
+
+#login {
+  display: none;
+  position: absolute;
+  top: 50%; left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  background: #fff;
+}
+
+
+/* SELECTOR */
+
+#selector {
+  display: none;
+}
+
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
new file mode 100644
index 00000000..970104a1
--- /dev/null
+++ b/StoneIsland/www/css/products.css
@@ -0,0 +1,9 @@
+.collection #collection { display: block }
+#collection {
+  display: none;
+}
+
+.product #product { display: block }
+#product {
+  display: none;
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 08a7949a..37107801 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -16,21 +16,16 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-  <link rel="stylesheet" type="text/css" href="css/fonts.css">
+  <link rel="stylesheet" type="text/css" href="css/fonts/fonts.css">
   <link rel="stylesheet" type="text/css" href="css/index.css">
+  <link rel="stylesheet" type="text/css" href="css/nav.css">
+  <link rel="stylesheet" type="text/css" href="css/products.css">
+  <link rel="stylesheet" type="text/css" href="css/cart.css">
+  <link rel="stylesheet" type="text/css" href="css/blogs.css">
   <title>Stone Island</title>
 </head>
 <body>
 
-<div id="intro">
-  <div id="compass"></div>
-  <span class="store">STORE</span>
-  <span class="hub">HUB</span>
-  <span class="story">STORY</span>
-  <span class="archive">ARCHIVE</span>
-  <span class="latlng">+40.589060 -74.044636</span>
-</div>
-
 <div id="nav">
   <span class="logo"></span>
   <span class="store">STORE</span>
@@ -49,6 +44,16 @@
 </div>
 
 <div id="content">
+
+  <div id="intro">
+    <div id="compass"></div>
+    <span class="store">STORE</span>
+    <span class="hub">HUB</span>
+    <span class="story">STORY</span>
+    <span class="archive">ARCHIVE</span>
+    <span class="latlng">+40.589060 -74.044636</span>
+  </div>
+
   <div id="header">
     <span class="burger"></span>
     <span class="logo"></span>
@@ -112,19 +117,20 @@
   
   <div id="collection">
     <h1>COLLECTION NAME</h1>
-    <img src="">
-    <img src="">
-    <img src="">
-    <img src="">
-    <img src="">
-    <img src="">
+    <div class="content">
+      <script type="text/html" class="template">
+        <img src="{{image}}">
+      </script>
+    </div>
   </div>
   
   
   <div id="product">
     <span class="left"></span>
     <span class="right"></span>
-    <img src="">
+    <div class="gallery">
+      <img src="">
+    </div>
     <span class="title"></span>
     <span class="type"></span>
     <span class="price"></span>
@@ -149,7 +155,7 @@
     </div>
   </div>
 
-
+  <div id="curtain"></div>
   <div id="login">
     <span class="close">
     <div class="login_ask">LOGIN</div>
@@ -326,6 +332,7 @@
 <script src="js/lib/cart/CartSummary.js"></script>
 
 <script src="js/lib/nav/IntroView.js"></script>
+<script src="js/lib/nav/CurtainView.js"></script>
 <script src="js/lib/nav/HeaderView.js"></script>
 <script src="js/lib/nav/FooterView.js"></script>
 <script src="js/lib/nav/LoginView.js"></script>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 9a8e945c..64027d2a 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -2,19 +2,39 @@ var app = (function(){
   var app = {}
   
   app.init = function(){
+	  app.archive = new ArchiveView ()
+	  app.hub = new HubView ()
+	  app.story = new StoryView ()
+	  
+	  app.cart = new CartView ()
+
+	  app.header = new HeaderView ()
+	  app.footer = new FooterView ()
+	  app.nav = new NavView ()
+
+	  app.login = new LoginView ()
+	  app.intro = new IntroView ()
+
+	  app.product = new ProductView ()
+	  app.collection = new CollectionView ()
+
+	  app.selector = new Selector ()
+
     app.bind()
   }
   
   app.bind = function(){
+    if (window.location.href.match("8000")) { app.ready() }
     document.addEventListener('deviceready', app.ready, false)
   }
   
   app.ready = function(){
     app.view = null
-    app.nav = new NavView ()
     app.router = new SiteRouter ()
+    app.router.route()
   }
   
-  app.init()
-
+  return app
 })()
+
+app.init()
diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js
index 0d0c3bd1..6434e9bf 100644
--- a/StoneIsland/www/js/lib/_router.js
+++ b/StoneIsland/www/js/lib/_router.js
@@ -1,6 +1,7 @@
 var SiteRouter = Router.extend({
 
 	el: 'body',
+	routeByHash: true,
 	
 	routes: {
 		'/':              'intro',
@@ -11,32 +12,49 @@ var SiteRouter = Router.extend({
 
     '/faq':           'faq',
     '/search':        'search',
+
+    '/cart':          'cart',
 	},
 	
 	initialize: function(){
-	  this.route()
 	},
 
   go: function(url){
     if (app.view && app.view.hide) {
       app.view.hide()
     }
+    window.location.href = "#/" + url
     this.parseRoute(url)
+    console.log(url)
   },
 
 	intro: function(){
+	  app.view = app.intro
+	  app.intro.show()
 	},
 	
 	store: function(){
+	  app.view = app.store
+	  app.collection.show()
 	},
 	
 	hub: function(){
+	  app.view = app.hub
+	  app.hub.show()
 	},
 	
 	story: function(){
+	  app.view = app.story
+	  app.story.show()
 	},
 	
 	archive: function(){
+	  app.view = app.archive
+	  app.archive.show()
+	},
+
+
+	cart: function(){
 	},
 
 })
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 04b43a4b..742ee0f2 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -10,6 +10,10 @@ var ArchiveView = View.extend({
     this.$content = this.$(".content")
   },
 
+  show: function(){
+    document.body.className = "archive"
+  },
+
   populate: function(){
   },
 
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 4958b320..430464b1 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -10,6 +10,10 @@ var HubView = View.extend({
     this.$content = this.$(".content")
   },
 
+  show: function(){
+    document.body.className = "hub"
+  },
+
   populate: function(){
   },
 
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 4c71e9ff..ed46af31 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -9,7 +9,11 @@ var StoryView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
   },
-  
+
+  show: function(){
+    document.body.className = "story"
+  },
+
   populate: function(){
   },
 
diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js
new file mode 100644
index 00000000..30c3190e
--- /dev/null
+++ b/StoneIsland/www/js/lib/nav/CurtainView.js
@@ -0,0 +1,21 @@
+var CurtainView = View.extend({
+  
+  el: "#curtain",
+  
+  events: {
+    "click": "click",
+  },
+  
+  initialize: function(){
+  },
+  
+  click: function(){
+    if (document.body.classList.contains("nav")) {
+      app.nav.hide()
+    }
+    else if (document.body.classList.contains("login")) {
+      app.login.hide()
+    }
+  },
+
+})
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/nav/IntroView.js b/StoneIsland/www/js/lib/nav/IntroView.js
index 346c3aef..7b726f6a 100644
--- a/StoneIsland/www/js/lib/nav/IntroView.js
+++ b/StoneIsland/www/js/lib/nav/IntroView.js
@@ -15,13 +15,13 @@ var IntroView = View.extend({
   },
   
   show: function(){
-    this.$el.show()
+    document.body.className = "intro"
     window.addEventListener("deviceorientation", this.orient)
+    this.orient({ alpha: 0 })
     // get location..
   },
 
   hide: function(){
-    this.$el.hide()
     window.removeEventListener("deviceorientation", this.orient)
   },
 
@@ -33,7 +33,7 @@ var IntroView = View.extend({
     else {
       heading = e.alpha
     }
-    this.compass.css[transformProp] = "translateZ(0) rotate(" + heading + "deg)"
+    this.compass.style[transformProp] = "translateZ(0) transformX(-50%) transformY(-50%) rotate(" + heading + "deg)"
   },
   
   store: function(){ app.router.go("store") },
diff --git a/StoneIsland/www/js/lib/nav/LoginView.js b/StoneIsland/www/js/lib/nav/LoginView.js
index 670fb333..0f30db3d 100644
--- a/StoneIsland/www/js/lib/nav/LoginView.js
+++ b/StoneIsland/www/js/lib/nav/LoginView.js
@@ -7,5 +7,13 @@ var LoginView = View.extend({
   
   initialize: function(){
   },
+  
+  show: function(){
+    document.body.classList.add("login")
+  },
+  
+  hide: function(){
+    document.body.classList.remove("login")
+  },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/nav/NavView.js b/StoneIsland/www/js/lib/nav/NavView.js
index 42877d88..c9eb2d4e 100644
--- a/StoneIsland/www/js/lib/nav/NavView.js
+++ b/StoneIsland/www/js/lib/nav/NavView.js
@@ -22,10 +22,12 @@ var NavView = View.extend({
   
   show: function(){
     $("body").addClass("nav")
+    $("#curtain").show()
   },
   
   hide: function(){
     $("body").removeClass("nav")
+    $("#curtain").hide()
   },
 
   store: function(){
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index 65ed0230..137d0ec3 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -1,11 +1,16 @@
 var CollectionView = View.extend({
   
   el: "#collection",
-  
+  template: $("#collection .template").html(),
+
   events: {
   },
   
   initialize: function(){
+    this.$content = this.$(".content")
+  },
+
+  populate: function(){
   },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js
index c0d59deb..3d3d5ccc 100644
--- a/StoneIsland/www/js/lib/products/Selector.js
+++ b/StoneIsland/www/js/lib/products/Selector.js
@@ -7,5 +7,8 @@ var Selector = View.extend({
   
   initialize: function(){
   },
+  
+  select: function(options, callback){
+  },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/vendor/util.js b/StoneIsland/www/js/vendor/util.js
index 0cc7e704..8a58a84c 100644
--- a/StoneIsland/www/js/vendor/util.js
+++ b/StoneIsland/www/js/vendor/util.js
@@ -165,6 +165,12 @@ var is_android = (navigator.userAgent.match(/Android/i))
 var is_mobile = is_iphone || is_ipad || is_android
 var is_desktop = ! is_mobile;
 var transformProp = browser.safari ? "WebkitTransform" : "transform";
+if (is_android) {
+  document.body.parentNode.classList.add("android")
+}
+else {
+  document.body.parentNode.classList.add("ios")
+}
 
 function selectElementContents(el) {
   if (window.getSelection && document.createRange) {