merge

6 files changed, 370 insertions, 6 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 9b46a3e..028ebb8 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -17,13 +17,36 @@ else {
 
 new WOW().init();
 
+$(function(){
+  var player = $f( okplayer )
+  player.addEvent('ready', function(){
+    player.addEvent('finish', function(){
+      hide()
+    })
+  })
+  $('.hero .circle').click( function(){
+    $('.videoModal').css("display","table").addClass('active');
+    player.api('play')
+  })
+
+  $('.videoModal .ion-ios7-close-empty').click( function(){
+    player.api('pause')
+    hide()
+  })
+  
+  function hide() {
+    $('.videoModal').fadeOut(300, function(){
+      $('.videoModal').removeClass('active')
+    })
+  }
+})
 
 var scene, cam, map;
 
 var app = new function(){}
 
 app.mode = { editor: false, builder: false }
-
+  
 app.init = function () {
 	app.tube = new Tube ()
 	app.router = new SiteRouter ()
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index aa8c480..d68f58b 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -112,7 +112,7 @@ var Parser = {
 		},
 		tag: function (media) {
 			// return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
-			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&js_api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
+			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
 		}
 	},
 	/*
diff --git a/public/assets/javascripts/vendor/froogaloop.js b/public/assets/javascripts/vendor/froogaloop.js
new file mode 100644
index 0000000..c9330e6
--- /dev/null
+++ b/public/assets/javascripts/vendor/froogaloop.js
@@ -0,0 +1,287 @@
+// Init style shamelessly stolen from jQuery http://jquery.com
+var Froogaloop = (function(){
+    // Define a local copy of Froogaloop
+    function Froogaloop(iframe) {
+        // The Froogaloop object is actually just the init constructor
+        return new Froogaloop.fn.init(iframe);
+    }
+
+    var eventCallbacks = {},
+        hasWindowEvent = false,
+        isReady = false,
+        slice = Array.prototype.slice,
+        playerDomain = '';
+
+    Froogaloop.fn = Froogaloop.prototype = {
+        element: null,
+
+        init: function(iframe) {
+            if (typeof iframe === "string") {
+                iframe = document.getElementById(iframe);
+            }
+
+            this.element = iframe;
+
+            // Register message event listeners
+            playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
+
+            return this;
+        },
+
+        /*
+         * Calls a function to act upon the player.
+         *
+         * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
+         * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
+         *                                or callback function when the method returns a value.
+         */
+        api: function(method, valueOrCallback) {
+            if (!this.element || !method) {
+                return false;
+            }
+
+            var self = this,
+                element = self.element,
+                target_id = element.id !== '' ? element.id : null,
+                params = !isFunction(valueOrCallback) ? valueOrCallback : null,
+                callback = isFunction(valueOrCallback) ? valueOrCallback : null;
+
+            // Store the callback for get functions
+            if (callback) {
+                storeCallback(method, callback, target_id);
+            }
+
+            postMessage(method, params, element);
+            return self;
+        },
+
+        /*
+         * Registers an event listener and a callback function that gets called when the event fires.
+         *
+         * @param eventName (String): Name of the event to listen for.
+         * @param callback (Function): Function that should be called when the event fires.
+         */
+        addEvent: function(eventName, callback) {
+            if (!this.element) {
+                return false;
+            }
+
+            var self = this,
+                element = self.element,
+                target_id = element.id !== '' ? element.id : null;
+
+            storeCallback(eventName, callback, target_id);
+
+            // The ready event is not registered via postMessage. It fires regardless.
+            if (eventName != 'ready') {
+                postMessage('addEventListener', eventName, element);
+            }
+            else if (eventName == 'ready' && isReady) {
+                callback.call(null, target_id);
+            }
+
+            return self;
+        },
+
+        /*
+         * Unregisters an event listener that gets called when the event fires.
+         *
+         * @param eventName (String): Name of the event to stop listening for.
+         */
+        removeEvent: function(eventName) {
+            if (!this.element) {
+                return false;
+            }
+
+            var self = this,
+                element = self.element,
+                target_id = element.id !== '' ? element.id : null,
+                removed = removeCallback(eventName, target_id);
+
+            // The ready event is not registered
+            if (eventName != 'ready' && removed) {
+                postMessage('removeEventListener', eventName, element);
+            }
+        }
+    };
+
+    /**
+     * Handles posting a message to the parent window.
+     *
+     * @param method (String): name of the method to call inside the player. For api calls
+     * this is the name of the api method (api_play or api_pause) while for events this method
+     * is api_addEventListener.
+     * @param params (Object or Array): List of parameters to submit to the method. Can be either
+     * a single param or an array list of parameters.
+     * @param target (HTMLElement): Target iframe to post the message to.
+     */
+    function postMessage(method, params, target) {
+        if (!target.contentWindow.postMessage) {
+            return false;
+        }
+
+        var url = target.getAttribute('src').split('?')[0],
+            data = JSON.stringify({
+                method: method,
+                value: params
+            });
+
+        if (url.substr(0, 2) === '//') {
+            url = window.location.protocol + url;
+        }
+
+        target.contentWindow.postMessage(data, url);
+    }
+
+    /**
+     * Event that fires whenever the window receives a message from its parent
+     * via window.postMessage.
+     */
+    function onMessageReceived(event) {
+        var data, method;
+
+        try {
+            data = JSON.parse(event.data);
+            method = data.event || data.method;
+        }
+        catch(e)  {
+            //fail silently... like a ninja!
+        }
+        
+        if (method == 'ready' && !isReady) {
+            isReady = true;
+        }
+
+        // Handles messages from moogaloop only
+        if (event.origin != playerDomain) {
+            return false;
+        }
+
+        var value = data.value,
+            eventData = data.data,
+            target_id = target_id === '' ? null : data.player_id,
+
+            callback = getCallback(method, target_id),
+            params = [];
+
+        if (!callback) {
+            return false;
+        }
+
+        if (value !== undefined) {
+            params.push(value);
+        }
+
+        if (eventData) {
+            params.push(eventData);
+        }
+
+        if (target_id) {
+            params.push(target_id);
+        }
+
+        return params.length > 0 ? callback.apply(null, params) : callback.call();
+    }
+
+
+    /**
+     * Stores submitted callbacks for each iframe being tracked and each
+     * event for that iframe.
+     *
+     * @param eventName (String): Name of the event. Eg. api_onPlay
+     * @param callback (Function): Function that should get executed when the
+     * event is fired.
+     * @param target_id (String) [Optional]: If handling more than one iframe then
+     * it stores the different callbacks for different iframes based on the iframe's
+     * id.
+     */
+    function storeCallback(eventName, callback, target_id) {
+        if (target_id) {
+            if (!eventCallbacks[target_id]) {
+                eventCallbacks[target_id] = {};
+            }
+            eventCallbacks[target_id][eventName] = callback;
+        }
+        else {
+            eventCallbacks[eventName] = callback;
+        }
+    }
+
+    /**
+     * Retrieves stored callbacks.
+     */
+    function getCallback(eventName, target_id) {
+        if (target_id) {
+            return eventCallbacks[target_id][eventName];
+        }
+        else {
+            return eventCallbacks[eventName];
+        }
+    }
+
+    function removeCallback(eventName, target_id) {
+        if (target_id && eventCallbacks[target_id]) {
+            if (!eventCallbacks[target_id][eventName]) {
+                return false;
+            }
+            eventCallbacks[target_id][eventName] = null;
+        }
+        else {
+            if (!eventCallbacks[eventName]) {
+                return false;
+            }
+            eventCallbacks[eventName] = null;
+        }
+
+        return true;
+    }
+
+    /**
+     * Returns a domain's root domain.
+     * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
+     *
+     * @param url (String): Url to test against.
+     * @return url (String): Root domain of submitted url
+     */
+    function getDomainFromUrl(url) {
+        if (url.substr(0, 2) === '//') {
+            url = window.location.protocol + url;
+        }
+
+        var url_pieces = url.split('/'),
+            domain_str = '';
+
+        for(var i = 0, length = url_pieces.length; i < length; i++) {
+            if(i<3) {domain_str += url_pieces[i];}
+            else {break;}
+            if(i<2) {domain_str += '/';}
+        }
+
+        return domain_str;
+    }
+
+    function isFunction(obj) {
+        return !!(obj && obj.constructor && obj.call && obj.apply);
+    }
+
+    function isArray(obj) {
+        return toString.call(obj) === '[object Array]';
+    }
+
+    // Give the init function the Froogaloop prototype for later instantiation
+    Froogaloop.fn.init.prototype = Froogaloop.fn;
+
+    // Listens for the message event.
+    // W3C
+    if (window.addEventListener) {
+        window.addEventListener('message', onMessageReceived, false);
+    }
+    // IE
+    else {
+        window.attachEvent('onmessage', onMessageReceived);
+    }
+
+    // Expose froogaloop to the global object
+    return (window.Froogaloop = window.$f = Froogaloop);
+
+})();
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 488e53e..894483d 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -92,6 +92,53 @@ a{
   text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
 }
 
+.videoModal {
+	position: relative;
+	width: 0;
+	height: 0;
+	background: rgba(255,255,255,0);
+	display: table;
+	opacity:0;
+	z-index: -1;
+	top:-100%;
+	left:-100%;
+	overflow:hidden;
+	-webkit-transition:0.4s background;
+	-moz-transition:0.4s background;
+	transition:0.4s background;
+	display:none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+.videoModal.active {
+	position: fixed;
+	display:table;
+	opacity:1;
+	z-index: 6;
+	width: 100%;
+	height: 100%;
+	top:0;
+	left:0;
+	background: rgba(255,255,255,0.9);
+}
+
+.videoModal .ion-ios7-close-empty {
+	position: absolute;
+	right: 50px;
+	top: 60px;
+	font-size: 80px;
+	cursor:pointer;
+	color:#444;
+}
+
+.videoModal .ion-ios7-close-empty:hover {
+	color:black;
+}
+
 #help-button {
   display: none;
 	border-right:0px!important;
@@ -266,7 +313,7 @@ h5 {
 }
 
 .projectList.about .item .rap {
-	max-width: 1250px;
+	max-width: 1500px;
 	margin: 0 auto;
 	padding: 0 10%;
 }
@@ -1475,6 +1522,8 @@ border-left: 1px solid black;
   vertical-align: text-bottom;
 	background-color:white;
   -webkit-user-drag: element;
+	background-size: auto 100%;
+	background-position: center;
 }
 .wallpaper.active .swatches .swatch:hover {
   cursor: pointer;
@@ -2662,7 +2711,7 @@ a[data-role="forgot-password"] {
 		.aboutRoom {
 			display:none;
 		}
-		body:after{
+		.mobile #scene:after{
 			content:"Hey there! For best viewing we suggest flipping your device sideways and spinning around in circles :)";
 			z-index: 3;
 			border: 1px solid;
diff --git a/views/home.ejs b/views/home.ejs
index 85d6f23..85548fb 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -71,6 +71,11 @@
 	[[ include partials/footer ]]
 
 </div>
+<div class="videoModal">
+<span class="ion-ios7-close-empty"></span>
+<div class="holder">
+<div class="video" style="width: 960px; margin: 0 auto; height: 540px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/109947131?api=1&player_id=okplayer" width="960" height="540" style="width: 960px; height: 800px; margin-top: -130px;"></iframe></div>
+</div>
 </body>
 [[ include partials/scripts ]]
 </html>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index c9b4c95..0373a3e 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -11,6 +11,7 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/chardinjs.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/froogaloop.js"></script>
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/mx/mx.js"></script>
@@ -122,5 +123,4 @@
 <script type="text/javascript" src="/assets/javascripts/defaults.js"></script>
 
 <!-- external dependencies -->
-<script src="http://www.youtube.com/player_api"></script>
-<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
+<script type="text/javascript" src="http://www.youtube.com/player_api"></script>