store shape images in CMS

4 files changed, 92 insertions, 46 deletions

diff --git a/site/db.json b/site/db.json
index 4c8321e..f8431f0 100644
--- a/site/db.json
+++ b/site/db.json
@@ -46,6 +46,75 @@
       "__index": "0"
     }
   ],
+  "shape": [
+    {
+      "id": "shape-images",
+      "title": "Shape Images",
+      "images": [
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/1.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/2.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/3.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/4.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/5.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/6.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/7.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/8.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/9.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/12.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/13.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/14.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/15.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/16.gif",
+          "caption": ""
+        },
+        {
+          "uri": "http://okfocus.s3.amazonaws.com/2h/17.gif",
+          "caption": ""
+        }
+      ],
+      "__index": "0"
+    }
+  ],
   "experiential": [],
   "content": [],
   "advertising": []
diff --git a/site/index.js b/site/index.js
index b6dea48..7457bbf 100644
--- a/site/index.js
+++ b/site/index.js
@@ -24,11 +24,17 @@ var app  = okcms.createApp({
     advertising: projectSchema,
     experiential: projectSchema,
     content: projectSchema,
+    shape: {
+      id: {type: 'string', id: true, hidden: true},
+      title: {type: 'string'},    
+      images: {type: 'captioned-image-list'},
+    }
   },
 
   resources: [
     { type: 'page', static: {id: 'about'}},
     { type: 'page', static: {id: 'contact'}},
+    { type: 'shape', static: {id: 'shape-images'}},
     { type: 'retail' },
     { type: 'advertising' },
     { type: 'experiential' },
@@ -47,6 +53,7 @@ var app  = okcms.createApp({
     '/': {
       data: [
         {type: 'page', query: '*'},
+        {type: 'shape', query: 'shape-images'},
         {type: 'retail', query: '*'},
         {type: 'advertising', query: '*'},
         {type: 'experiential', query: '*'},
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 5fddaa7..ac155b3 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -1,13 +1,4 @@
-var base_href = "http://okfocus.s3.amazonaws.com/2h/"
-var box_images = shuffle([
-	"1.gif", "2.gif", "3.gif", "4.gif", "5.gif",
-// 	"dies2.gif", "dies3.gif",
-	"6.gif", "7.gif", "8.gif", "9.gif",
-	"12.gif", "13.gif", "14.gif", "15.gif",
-	"16.gif", "17.gif", // "CCP-GIF.gif", "dies1.gif",
-])
-
-var strips = []
+var strips = [], boxImages = []
 
 var done_loading = false, menu_open = false, entry_open = false
 
@@ -16,9 +7,8 @@ environment.init = function(){
   $("#scene").addClass("fade")
 	var loader = new Loader(environment.ready, new HustleLoader)
 	var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s })
-	loader.preloadImages(box_images.map(function(url){
-		return base_href + url
-	}).concat(preloadImages))
+	boxImages = $("#box-image-list").html().split("\n").filter(function(s){ return !!s })
+	loader.preloadImages( preloadImages.concat(boxImages) )
 	loader.ready()
 }
 environment.ready = function(){
@@ -160,7 +150,9 @@ environment.ready = function(){
   }
   else {
     build_scene()
-    $("#scene").removeClass("fade")
+    setTimeout(function(){
+      $("#scene").removeClass("fade")
+    }, 50)
   }
   
   setTimeout(function(){ done_loading = true }, 200)
@@ -194,7 +186,7 @@ function build_scene () {
   controls.zoom(1000)
 
   strips.push( new Strip({
-    images: box_images.slice(0, 5),
+    images: boxImages.slice(0, 5),
     x: -100,
     y: 100,
 	  rotationY: PI/4,
@@ -202,7 +194,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: box_images.slice(5, 10),
+    images: boxImages.slice(5, 10),
     x: 100,
     y: 100,
 	  rotationX: PI/4,
@@ -211,7 +203,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: box_images.slice(10, 15),
+    images: boxImages.slice(10, 15),
     x:  0,
     y: 100,
     z: 100,
@@ -220,7 +212,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: box_images.slice(15, 20),
+    images: boxImages.slice(15, 20),
     x: 0,
     y: 100,
     z: -50,
@@ -438,24 +430,6 @@ environment.updateOnReady = function(t){
 	controls.update()
 }
 
-var titles = [
-  "BARNEY'S, GAGA CONSTELLATION",
-  "CCP GAMES, EVE ONLINE",
-  "DIESEL ACCESSORIES",
-  "DIESEL CAMPAIGN FW13/SS14",
-  "DIESEL CAMPAIGN FW14",
-  "#DIESELREBOOT",
-  "#DIESELTRIBUTE",
-  "DIESEL JOGG JEANS",
-  "DIESEL WATCHES",
-  'MAC, "UNTITLED, SELF-PORTRAIT"',
-  "MUGLER, BROTHERS OF ARCADIA",
-  "MUGLER, LADY GAGA",
-  "MUGLER, MEN’S FW11",
-  "NICOLA’S, HO HO HO CHRISTMAS SHOP",
-  "NICOLA'S, LANE CRAWFORD",
-  "NICOLA’S, NEW YORK"
-]
 var Strip = function( opt ){
   this.opt = opt
   
@@ -471,11 +445,10 @@ var Strip = function( opt ){
 	var prev = root
 	this.els = opt.images.map(function(url, i){
 		var el = new MX.Image({
-			src: base_href + url,
+			src: url,
 			onload: function(img){
 			}
 		})
-		$(el.el).attr("data-title", choice(titles))
  		el.setCSSTransformOrigin( "50% 100%" )
 		el.addTo(prev)
 		el.update()
diff --git a/site/templates/index.liquid b/site/templates/index.liquid
index e870a6d..b05590b 100644
--- a/site/templates/index.liquid
+++ b/site/templates/index.liquid
@@ -235,16 +235,13 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
 </div>
 
 <script type="text/plain" id="preload-image-list">
-{% for project in retails %}{{ project.images[0].uri }}
-{% endfor %}{% for project in advertisings %}{{ project.images[0].uri }}
-{% endfor %}{% for project in experientials %}{{ project.images[0].uri }}
-{% endfor %}{% for project in contents %}{{ project.images[0].uri }}
-{% endfor %}{% for page in pages %}{{ page.image }}
+{% for page in pages %}{{ page.image }}
+{% endfor %}{% for image in shape.images %}{{ image.uri }}
+{% endfor %}</script>
+<script type="text/plain" id="box-image-list">
+{% for image in shape.images %}{{ image.uri }}
 {% endfor %}</script>
 
-<a class="burgWrapper" href="##">
-  <div class="burg"></div>
-</a>
 <div class="toggleRapper">
 <div class="menuToggle"></div>
 </div>