From 05bb7a317356a71ede049be24a60b5fcaf0a41f9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 30 Jan 2012 16:35:59 -0800
Subject: Adding a version json object to Ninja

Versions object to start keeping track of versions for Ninja, Montage and eventually other dependencies.
Loaded before montage to use in the splash screen.

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 index.html             | 18 +++++++++++++++++-
 js/ninja.reel/ninja.js |  1 +
 versions.json          |  8 ++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 versions.json

diff --git a/index.html b/index.html
index 44f8ec7e..5fa4790c 100644
--- a/index.html
+++ b/index.html
@@ -168,11 +168,27 @@
 		
 		<script type="text/javascript">
 			window.onload = function() {
+                // Load the version json
+                var req = new XMLHttpRequest();
+                req.open("GET", "versions.json");
+                req.onreadystatechange = (function(req) {
+                    return function(event) {
+                        if (req.readyState === 4) {
+                            if (req.status === 200) {
+                                window.ninjaVersion = JSON.parse(req.responseText);
+                            } else {
+                                console.log("Ninja version file could not be loaded");
+                            }
+                        }
+                    }
+                })(req);
+                req.send();
 				//
 				var star = document.getElementById('star');
 				//
 				njstar(star.getContext("2d"));
-			}
+			};
+
 			function njstar (ctx) {
 				ctx.save();
 				ctx.translate(0,0);
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index bc31e0e1..75ec7fcc 100644
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -36,6 +36,7 @@ exports.Ninja = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
+            console.log("Loading Ninja --> ", window.ninjaVersion.ninja.version);
 
             this.application.ninja = this;
 
diff --git a/versions.json b/versions.json
new file mode 100644
index 00000000..2d568314
--- /dev/null
+++ b/versions.json
@@ -0,0 +1,8 @@
+{
+    "ninja": {
+        "version": "0.5.0"
+    },
+    "montage": {
+        "version": "0.5.1"
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 36e7379c7c282fc3e1b5b86b0b0ed59be60c4253 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 30 Jan 2012 16:36:31 -0800
Subject: Code cleanup - Removed extra log.

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 js/preloader/Preloader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js
index f137f4b6..93d71e8f 100755
--- a/js/preloader/Preloader.js
+++ b/js/preloader/Preloader.js
@@ -136,7 +136,6 @@ exports.Preloader = Montage.create(Component, {
 
     deserializedFromTemplate: {
         value: function() {
-            console.log("Start Preloading");
 
             this.filesTotal = this.ninjaJsRequire.length + this.ninjaCssRequire.length;
 
-- 
cgit v1.2.3


From 98bd02216abf6d550fbb4ed01658c0f273fc9dc5 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 31 Jan 2012 08:57:57 +0800
Subject: Adding the version to the main Ninja reel component.

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 js/ninja.reel/ninja.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 75ec7fcc..465533cd 100644
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -13,6 +13,10 @@ exports.Ninja = Montage.create(Component, {
     _appLoaded: { value: false },
     _preload: { value: false },
 
+    ninjaVersion: {
+        value: window.ninjaVersion.ninja.version
+    },
+
     toolsData: { value: null },
     appData:    { value: AppData },
 
@@ -36,7 +40,7 @@ exports.Ninja = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
-            console.log("Loading Ninja --> ", window.ninjaVersion.ninja.version);
+            console.log("Loading Ninja --> ", this.ninjaVersion);
 
             this.application.ninja = this;
 
-- 
cgit v1.2.3


From a46e1ba07cccc2fbf1c81c1d35308971440a3968 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 30 Jan 2012 23:08:42 -0800
Subject: Adding browser check for Chrome and redirect page.

Adding a check for Google Chrome browser and a redirect page to download and install Chrome.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 index.html    |  4 ++++
 redirect.html | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 redirect.html

diff --git a/index.html b/index.html
index 5fa4790c..f3018823 100644
--- a/index.html
+++ b/index.html
@@ -168,6 +168,10 @@
 		
 		<script type="text/javascript">
 			window.onload = function() {
+                // Check if we are running in Chrome
+                if(navigator.userAgent.toLowerCase().indexOf("chrome") === -1) {
+                    window.location = "./redirect.html";
+                }
                 // Load the version json
                 var req = new XMLHttpRequest();
                 req.open("GET", "versions.json");
diff --git a/redirect.html b/redirect.html
new file mode 100644
index 00000000..cf602f58
--- /dev/null
+++ b/redirect.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+
+<head>
+
+    <title>Ninja - Browser support: Download Google Chrome</title>
+
+</head>
+
+<body>
+
+    <div>
+        <p>Your browser is not supported. Please download and install the latest version of <a href="https://www.google.com/chrome/">Google Chrome</a></p>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
-- 
cgit v1.2.3


From 1d8af9fb2be85c33ce6a846f97360ba2ee17ea23 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 31 Jan 2012 01:54:55 +0800
Subject: Checkbox and Combobox change/changing events were not setting
 wasSetByCode property correctly, causing our PI to dispatch events at
 improper times.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/components/combobox.reel/combobox.js | 2 +-
 js/components/radio.reel/radio.js       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index f262bb06..a68a7d6b 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -67,7 +67,7 @@ exports.Combobox = Montage.create(Component, {
                 var e = document.createEvent("CustomEvent");
                 e.initEvent("change", true, true);
                 e.type = "change";
-                e._wasSetByCode = this._wasSetByCode;
+                e.wasSetByCode = this._wasSetByCode;
                 e.value = this._value;
                 this.dispatchEvent(e);
 
diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js
index 954da3c4..c661ec11 100644
--- a/js/components/radio.reel/radio.js
+++ b/js/components/radio.reel/radio.js
@@ -41,7 +41,7 @@ exports.RadioGroup = Montage.create(Component, {
                     e = document.createEvent("CustomEvent");
                     e.initEvent("change", true, true);
                     e.type = "change";
-                    e._wasSetByCode = this._wasSetByCode;
+                    e.wasSetByCode = this._wasSetByCode;
                     e.selectedIndex = i;
                     e.selectedItem = value;
                     this.dispatchEvent(e);
@@ -77,7 +77,7 @@ exports.RadioGroup = Montage.create(Component, {
     {
         value:function(event)
         {
-            this._wasSetByCode = event._event._wasSetByCode;
+            this._wasSetByCode = event._event.wasSetByCode;
             this.selectedItem = event._event.value;
         }
     }
@@ -126,7 +126,7 @@ exports.Radio = Montage.create(Component, {
             var e = document.createEvent("CustomEvent");
             e.initEvent("change", true, true);
             e.type = "change";
-            e._wasSetByCode = this._wasSetByCode;
+            e.wasSetByCode = this._wasSetByCode;
             e.value = this;
             this.dispatchEvent(e);
 
-- 
cgit v1.2.3


From b01b586a26ae47d329bdd5fe005051513711fab7 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 31 Jan 2012 15:11:04 -0800
Subject: Fixing the bread-crumb background

The CSS cleanup added a background to the bottom panel container which broke the bread-crumb background.
Fixing by adding the background directly to the bread-crumb component.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/layout/bread-crumb.reel/bread-crumb.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index f84c6e80..cc984609 100644
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -5,6 +5,7 @@
  </copyright> */
 
 .bread_crumb{
+    background-color: #282828;
     border-style: double;
     height: 26px;
 }
-- 
cgit v1.2.3


From e75223a2c4c1e13d66639841e6418e94fe9b726f Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 31 Jan 2012 15:59:46 -0800
Subject: Cloud IO Prompt

Setting up UI for the file IO prompt on initialization of Ninja and whenever a cloud IO call is made and the server is not detected.
---
 .gitignore                                        |   3 +-
 js/components/popup-manager.reel/popup-manager.js |   3 +-
 js/io/system/coreioapi.js                         |  84 +++++++++++++--
 js/io/ui/cloudpopup.reel/cloudpopup.html          |  54 ++++++++++
 js/io/ui/cloudpopup.reel/cloudpopup.js            |  55 ++++++++++
 js/io/ui/cloudpopup.reel/config.rb                |   9 ++
 js/io/ui/cloudpopup.reel/css/cloudpopup.css       | 118 +++++++++++++++++++++
 js/io/ui/cloudpopup.reel/css/cloudpopup.scss      | 122 ++++++++++++++++++++++
 js/ninja.reel/ninja.js                            |   4 +
 9 files changed, 439 insertions(+), 13 deletions(-)
 create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.html
 create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.js
 create mode 100755 js/io/ui/cloudpopup.reel/config.rb
 create mode 100644 js/io/ui/cloudpopup.reel/css/cloudpopup.css
 create mode 100755 js/io/ui/cloudpopup.reel/css/cloudpopup.scss

diff --git a/.gitignore b/.gitignore
index fd016bd0..6c288e8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ cloud/
 
 /.idea/scopes/scope_settings.xml
 _scss/imports/scss/_Stage.scss
-compass_app_log.txt
\ No newline at end of file
+compass_app_log.txt
+js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc
\ No newline at end of file
diff --git a/js/components/popup-manager.reel/popup-manager.js b/js/components/popup-manager.reel/popup-manager.js
index be3c1e8d..bc755f74 100755
--- a/js/components/popup-manager.reel/popup-manager.js
+++ b/js/components/popup-manager.reel/popup-manager.js
@@ -32,7 +32,8 @@ exports.PopupMananger = Montage.create(Component, {
     addPopup: {
     	enumerable: true,
     	value: function (popup, depth, blackout) {
-    		//
+    		//Fix to ensure always highest
+    		this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body
     		//TODO: Add blackout background
     		//Checking for manual or setting auto to next highest depth
     		if (depth) {
diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 33c7bc28..4407d59a 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -10,7 +10,9 @@ NOTES:
 ////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////// */
 var Montage = 		require("montage/core/core").Montage,
-    Component = 	require("montage/ui/component").Component;
+    Component = 	require("montage/ui/component").Component,
+    Popup = 		require("js/components/popup.reel").Popup,
+    CloudPopup = 	require("js/io/ui/cloudpopup.reel").CloudPopup;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as Project I/O
 exports.CoreIoApi = Montage.create(Component, {
@@ -26,16 +28,11 @@ exports.CoreIoApi = Montage.create(Component, {
 				//Checks for IO API to be active
 				this.ioServiceDetected = this.cloudAvailable();
 				//
-				console.log('FileIO: localStorage URL detected | IO Service Detected: '+ this.ioServiceDetected);
-				//
+				console.log('Cloud Status: URL detected in localStorage as '+this.rootUrl);
 			} else {
-				//TODO: Remove, automatically prompt user on welcome
-				this.rootUrl = 'http://localhost:16380';
-				//TODO: Changed to false, welcome screen prompts user
-				this.ioServiceDetected = this.cloudAvailable();
-				//
-				console.log('FileIO: localStorage URL NOT detected | IO Service Detected: '+ this.ioServiceDetected);
 				//
+				this.ioServiceDetected = false;
+				console.log('Cloud Status: No URL detected in localStorage');
 			}
 		}
 	},
@@ -45,18 +42,83 @@ exports.CoreIoApi = Montage.create(Component, {
 		enumerable: false,
 		value: function () {
 			//
-			if (this.getCloudStatus().status === 200) {
+			if (this.rootUrl && this.getCloudStatus().status === 200) {
 				//Active
 				return true;
 			} else {
 				//Inactive
-				//TODO: Logic to prompt the user for cloud, otherwise return false
+				if (!this._cloudDialogOpen || this.application.ninja) {
+					this.showCloudDialog();
+				}
 				return false;
 			}
 		}
 	},
 	////////////////////////////////////////////////////////////////////
     //
+    _cloudDialogOpen: {
+    	enumerable: false,
+		value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _cloudDialogComponents: {
+    	enumerable: false,
+		value: {blackout: null, popup: null, dialog: null}
+    },
+	////////////////////////////////////////////////////////////////////
+    //
+    showCloudDialog: {
+    	enumerable: false,
+		value: function () {
+			//
+			this._cloudDialogComponents.blackout = document.createElement('div');
+			this._cloudDialogComponents.blackout.style.width = '100%';
+			this._cloudDialogComponents.blackout.style.height = '100%';
+			this._cloudDialogComponents.blackout.style.background = 'rgba(0, 0, 0, .6)';
+			this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout);
+    		//
+    		////////////////////////////////////////////////////
+    		//Creating popup from m-js component
+    		var popup = document.createElement('div');
+    		//
+    		this._cloudDialogComponents.dialog = CloudPopup.create();
+    		//
+    		document.body.appendChild(popup);
+    		//
+    		this._cloudDialogComponents.dialog.element = popup;
+    		this._cloudDialogComponents.dialog.needsDraw = true;
+    		this._cloudDialogComponents.dialog.element.style.opacity = 0;
+    		//
+    		this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false);
+		}
+    },
+    
+    handleFirstDraw: {
+    	value: function (e) {
+			if (e._target._element.className === 'cloud_popup') {
+	    		this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false);
+		    	//
+				this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '200px', y: '200px'});
+				this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false);
+			} else {
+				//
+				this._cloudDialogComponents.dialog.element.style.opacity = 1;
+				this._cloudDialogComponents.popup.element.style.opacity = 1;
+			}
+    	}
+    },
+    
+    
+    ////////////////////////////////////////////////////////////////////
+    //
+    hideCloudDialog: {
+    	enumerable: false,
+		value: function () {
+		}
+    },
+	////////////////////////////////////////////////////////////////////
+    //
     _ioServiceDetected: {
         enumerable: false,
         value: false
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
new file mode 100755
index 00000000..8e45f926
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+ 
+<html lang="en">
+	<head>
+    	
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    	
+    	<link rel="stylesheet" type="text/css" href="css/cloudpopup.css">
+   		
+   		<script type="text/montage-serialization">
+    	{
+            "owner": {
+                "module": "js/io/ui/cloudpopup.reel",
+                "name": "cloudpopup",
+                "properties": {
+                    "element": {"#": "cloud_popup"}
+                }
+            }
+        }
+		</script>
+		
+	</head>
+	
+	<body>
+    
+    	<div id="cloud_popup" class="cloud_popup">
+	    	<div class="content">
+	    		
+	    		<h3>Cloud Service Dialog</h3>
+	    		
+	    		<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
+	    		
+	    		<label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" />
+	    		
+	    		<button class="test">Test</button>
+	    		
+	    		<label>Status:</label><div class="status">Disconnected</div>
+	    		
+	    		<button class="handle_cancel">Cancel</button>
+	    		
+	    		<button class="handle_ok">Ok</button>
+	    		
+	    	</div>
+    	</div>
+    
+	</body>
+
+</html>
\ No newline at end of file
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
new file mode 100755
index 00000000..3e104bb7
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -0,0 +1,55 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 			require("montage/core/core").Montage,
+	Component = 		require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
+exports.CloudPopup = Montage.create(Component, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+        value: true
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    prepareForDraw: {
+    	enumerable: false,
+    	value: function () {
+    		//
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    willDraw: {
+    	enumerable: false,
+    	value: function() {
+    		//
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    draw: {
+    	enumerable: false,
+    	value: function() {
+    		//
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    didDraw: {
+    	enumerable: false,
+    	value: function() {
+    		//
+    	}
+    }
+    ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/io/ui/cloudpopup.reel/config.rb b/js/io/ui/cloudpopup.reel/config.rb
new file mode 100755
index 00000000..9b55af19
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/config.rb
@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "css"
+images_dir = "img"
+javascripts_dir = "../"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
new file mode 100644
index 00000000..009ba835
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -0,0 +1,118 @@
+@charset "UTF-8";
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/* line 12, cloudpopup.scss */
+.cloud_popup {
+  font-size: 12px;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+}
+
+/* line 19, cloudpopup.scss */
+.cloud_popup .content {
+  width: 360px;
+}
+
+/* line 24, cloudpopup.scss */
+.cloud_popup .content h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  font-size: 14px;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+  display: block;
+  float: left;
+  clear: both;
+  margin: 4px 0px 8px 0px;
+  padding: 0px;
+  width: 100%;
+  text-align: center;
+}
+
+/* line 40, cloudpopup.scss */
+.cloud_popup .content p {
+  text-shadow: 1px 1px 1px #333;
+  margin: 0px 0px 12px 0px;
+  text-align: justify;
+  color: #EEE;
+}
+
+/* line 48, cloudpopup.scss */
+.cloud_popup .content .test {
+  float: right;
+  clear: right;
+  margin: 0px 0px 0px 8px;
+}
+
+/* line 55, cloudpopup.scss */
+.cloud_popup .content label {
+  float: left;
+  margin: 5px 8px 0px 0px;
+  display: block;
+  width: 96px;
+  text-align: right;
+}
+
+/* line 64, cloudpopup.scss */
+.cloud_popup .content input {
+  display: block;
+  border: 0px;
+  padding: 4px;
+  margin: 0px;
+  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
+  border: 1px #5c5c5c solid;
+  color: #FFF;
+  float: left;
+  width: 202px;
+  border-radius: 4px;
+}
+
+/* line 77, cloudpopup.scss */
+.cloud_popup .content input:focus {
+  background: #FFF;
+  border: 1px #292929 solid;
+  color: #292929;
+}
+
+/* line 84, cloudpopup.scss */
+.cloud_popup .content button {
+  display: block;
+  border: 0px;
+  margin: 0px;
+  padding: 4px;
+  border: 1px #333 solid;
+  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929));
+  border-radius: 4px;
+  color: #FFF;
+  text-transform: uppercase;
+  cursor: pointer;
+  text-shadow: 1px 1px 1px #000;
+}
+
+/* line 99, cloudpopup.scss */
+.cloud_popup .content button:hover {
+  border: 1px #222 solid;
+  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
+  color: #EEE;
+}
+
+/* line 107, cloudpopup.scss */
+.cloud_popup .content .status {
+  color: red;
+  float: left;
+  clear: right;
+  margin: 5px 0px 0px 6px;
+  text-shadow: 1px 1px 1px #333;
+  width: 240px;
+}
+
+/* line 117, cloudpopup.scss */
+.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel {
+  width: 80px;
+  text-align: center;
+  float: right;
+  margin: 4px 0px 0px 8px;
+}
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
new file mode 100755
index 00000000..ea54b1d8
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -0,0 +1,122 @@
+@charset "UTF-8";
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+$grey_dark: #292929;
+$grey_light: #494949;
+
+.cloud_popup
+{
+	font-size: 12px;
+  	text-shadow: 1px 1px 1px #000;
+  	font-family: 'Droid Sans', sans-serif;
+}
+
+.cloud_popup .content
+{
+	width: 360px;
+}
+
+.cloud_popup .content h3
+{
+	text-transform: uppercase;
+	font-weight: normal;
+	font-size: 14px;
+  	text-shadow: 1px 1px 1px #000;
+  	font-family: 'Droid Sans', sans-serif;
+  	display: block;
+  	float: left;
+  	clear: both;
+  	margin: 4px 0px 8px 0px;
+  	padding: 0px;
+  	width: 100%;
+  	text-align: center;
+}
+
+.cloud_popup .content p
+{
+  	text-shadow: 1px 1px 1px #333;
+  	margin: 0px 0px 12px 0px;
+  	text-align: justify;
+  	color: #EEE;
+}
+
+.cloud_popup .content .test
+{
+	float: right;
+	clear: right;
+	margin: 0px 0px 0px 8px;
+}
+
+.cloud_popup .content label
+{
+	float: left;
+	margin: 5px 8px 0px 0px;
+	display: block;
+	width: 96px;
+	text-align: right;
+}
+
+.cloud_popup .content input
+{
+	display: block;
+	border: 0px;
+	padding: 4px;
+	margin: 0px;
+	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
+	border: 1px lighten($grey_dark, 20%) solid;
+	color: #FFF;
+	float: left;
+	width: 202px;
+	border-radius: 4px;
+}
+
+.cloud_popup .content input:focus {
+    background: #FFF;
+    border: 1px $grey_dark solid;
+    color: $grey_dark;
+}
+
+.cloud_popup .content button
+{
+	display: block;
+	border: 0px;
+	margin: 0px;
+	padding: 4px;
+	border: 1px #333 solid;
+	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark));
+	border-radius: 4px;
+	color: #FFF;
+	text-transform: uppercase;
+	cursor: pointer;
+	text-shadow: 1px 1px 1px #000;
+}
+
+.cloud_popup .content button:hover
+{
+	
+	border: 1px #222 solid;
+	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%)));
+	color: #EEE;
+}
+
+.cloud_popup .content .status
+{
+	color: red;
+	float: left;
+	clear: right;
+	margin: 5px 0px 0px 6px;
+	text-shadow: 1px 1px 1px #333;
+	width: 240px;
+}
+
+.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel
+{
+	width: 80px;
+	text-align: center;
+	float: right;
+	margin: 4px 0px 0px 8px;
+}
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 465533cd..38bc22fb 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -97,6 +97,10 @@ exports.Ninja = Montage.create(Component, {
     didDraw: {
         value: function() {
             NJevent("appLoaded");
+            //
+            if (!this.application.ninja.coreIoApi.ioServiceDetected) {
+            	var check = this.application.ninja.coreIoApi.cloudAvailable();
+            }
         }
     },
 
-- 
cgit v1.2.3


From ea8b9e2e62b85ecc75baf0b6ead5acafd70f0ab3 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 31 Jan 2012 17:26:56 -0800
Subject: Added skin for html buttons.

---
 _scss/compass_app_log.txt     |  1 +
 _scss/imports/scss/_Base.scss | 18 ++++++++++++++++--
 css/ninja.css                 |  6 ++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/_scss/compass_app_log.txt b/_scss/compass_app_log.txt
index 00a7f071..463846ba 100644
--- a/_scss/compass_app_log.txt
+++ b/_scss/compass_app_log.txt
@@ -106,3 +106,4 @@
 2012-01-27 16:12:29 overwrite ../css/ninja.css
 2012-01-27 16:13:46 overwrite ../css/ninja.css
 2012-01-27 16:14:02 overwrite ../css/ninja.css
+2012-01-31 17:22:02 overwrite ../css/ninja.css
diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss
index 75ccc07d..77faa8f3 100644
--- a/_scss/imports/scss/_Base.scss
+++ b/_scss/imports/scss/_Base.scss
@@ -48,8 +48,7 @@ input.nj-skinned,
 textarea.nj-skinned, 
 button.nj-skinned,
 select.nj-skinned,
-select.nj-skinned option,
-button.nj-skinned {
+select.nj-skinned option {
 	-webkit-appearance: none;
 	outline: none;
 }
@@ -122,6 +121,21 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
 button.nj-skinned {
 	font-size: 9px;
     cursor: pointer;
+	display: block;
+	border: 0px;
+	margin: 0px;
+	padding: 4px;
+	border: 1px $color-input-border solid;
+	background-color: $color-menu-bg;
+	background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
+	border-radius: 4px;
+	color: $color-menu-text;
+	text-transform: uppercase;
+	cursor: pointer;
+	text-shadow: 1px 1px 1px $color-app-shadow
+}
+button.nj-skinned:hover {
+	background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); 
 }
 
 // Radio buttons 
diff --git a/css/ninja.css b/css/ninja.css
index 9126c1d3..bf71955f 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -16,7 +16,7 @@
 
 .layout-table .flexor div:last-child { float: right; }
 
-input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; }
+input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option { -webkit-appearance: none; outline: none; }
 
 input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, textarea.nj-skinned, select.nj-skinned, select.nj-skinned option { border: 1px solid #313131; color: white; background-color: #444444; font-size: 12px; font-family: 'Droid Sans', sans-serif; }
 
@@ -34,7 +34,9 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button { -webkit-appearan
 
 input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; }
 
-button.nj-skinned { font-size: 9px; cursor: pointer; }
+button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
+
+button.nj-skinned:hover { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); }
 
 input[type="radio"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 2px solid #282828; width: 12px; height: 12px; overflow: hidden; border-radius: 10px; font-size: 16px; line-height: 7px; text-indent: -7px; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); }
 
-- 
cgit v1.2.3


From d2ff7026abd7e40b49917491773cba9367221f99 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 31 Jan 2012 22:44:15 -0800
Subject: Hooking cloud popup UI to core

Set up the popup UI for cloud to core API to detected cloud API connection.
---
 js/io/system/coreioapi.js                    | 17 +++++++----
 js/io/ui/cloudpopup.reel/cloudpopup.html     | 10 +++----
 js/io/ui/cloudpopup.reel/cloudpopup.js       | 43 ++++++++++++++++++++++++++++
 js/io/ui/cloudpopup.reel/css/cloudpopup.css  | 34 +++++++++++-----------
 js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 23 ++++++++-------
 5 files changed, 90 insertions(+), 37 deletions(-)

diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 4407d59a..6b803f22 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -47,7 +47,7 @@ exports.CoreIoApi = Montage.create(Component, {
 				return true;
 			} else {
 				//Inactive
-				if (!this._cloudDialogOpen || this.application.ninja) {
+				if (!this._cloudDialogOpen && this.application.ninja) {
 					this.showCloudDialog();
 				}
 				return false;
@@ -71,11 +71,13 @@ exports.CoreIoApi = Montage.create(Component, {
     showCloudDialog: {
     	enumerable: false,
 		value: function () {
+			//
+			this._cloudDialogOpen = true;
 			//
 			this._cloudDialogComponents.blackout = document.createElement('div');
 			this._cloudDialogComponents.blackout.style.width = '100%';
 			this._cloudDialogComponents.blackout.style.height = '100%';
-			this._cloudDialogComponents.blackout.style.background = 'rgba(0, 0, 0, .6)';
+			this._cloudDialogComponents.blackout.style.background = '-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,0.8) 80%)';
 			this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout);
     		//
     		////////////////////////////////////////////////////
@@ -93,28 +95,31 @@ exports.CoreIoApi = Montage.create(Component, {
     		this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false);
 		}
     },
-    
+    ////////////////////////////////////////////////////////////////////
+    //
     handleFirstDraw: {
     	value: function (e) {
 			if (e._target._element.className === 'cloud_popup') {
 	    		this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false);
 		    	//
-				this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '200px', y: '200px'});
+				this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '50%', y: '50%'});
 				this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false);
 			} else {
 				//
 				this._cloudDialogComponents.dialog.element.style.opacity = 1;
 				this._cloudDialogComponents.popup.element.style.opacity = 1;
+				this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px';
 			}
     	}
     },
-    
-    
     ////////////////////////////////////////////////////////////////////
     //
     hideCloudDialog: {
     	enumerable: false,
 		value: function () {
+			//
+			this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.blackout);
+			this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.popup.element);
 		}
     },
 	////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 8e45f926..5d7de347 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -36,15 +36,15 @@
 	    		
 	    		<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
 	    		
-	    		<label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" />
+	    		<label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
 	    		
-	    		<button class="test">Test</button>
+	    		<button class="btn_test">Test</button>
 	    		
-	    		<label>Status:</label><div class="status">Disconnected</div>
+	    		<label>Status:</label><div class="status">&nbsp;</div>
 	    		
-	    		<button class="handle_cancel">Cancel</button>
+	    		<button class="btn_cancel">Cancel</button>
 	    		
-	    		<button class="handle_ok">Ok</button>
+	    		<button class="btn_ok">Ok</button>
 	    		
 	    	</div>
     	</div>
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 3e104bb7..f81dc93c 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -18,10 +18,21 @@ exports.CloudPopup = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    components: {
+    	enumerable: false,
+    	value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     prepareForDraw: {
     	enumerable: false,
     	value: function () {
     		//
+    		this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
+    		this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
+    		this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
+    		this.components.status = this.element.getElementsByClassName('status')[0];
+    		this.components.url = this.element.getElementsByClassName('cloud_url')[0];
     	}
     },
     ////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
     	enumerable: false,
     	value: function() {
     		//
+    		
     	}
     },
     ////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
     	enumerable: false,
     	value: function() {
     		//
+    		this.testConnection();
     	}
     },
     ////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
     	enumerable: false,
     	value: function() {
     		//
+    		this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
+    		//
+    		this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
+    		this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //this.application.ninja.coreIoApi.hideCloudDialog
+    testConnection: {
+    	enumerable: false,
+    	value: function() {
+    		//
+    		this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
+    		//
+   			if (this.application.ninja.coreIoApi.cloudAvailable()) {
+    			this.components.status.style.color = '#77FF00';
+    			this.components.status.innerHTML = 'Connected';
+    		} else {
+    			this.components.status.style.color = '#FF3A3A';
+    			this.components.status.innerHTML = 'Disconnected';
+    		}
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    closeDialog: {
+    	enumerable: false,
+    	value: function() {
+    		//
+    		this.application.ninja.coreIoApi.hideCloudDialog();
     	}
     }
     ////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index 009ba835..81e0742f 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -34,20 +34,21 @@
 
 /* line 40, cloudpopup.scss */
 .cloud_popup .content p {
-  text-shadow: 1px 1px 1px #333;
+  text-shadow: 1px 1px 1px #222;
   margin: 0px 0px 12px 0px;
   text-align: justify;
   color: #EEE;
 }
 
 /* line 48, cloudpopup.scss */
-.cloud_popup .content .test {
+.cloud_popup .content .btn_test {
   float: right;
   clear: right;
   margin: 0px 0px 0px 8px;
+  width: 60px;
 }
 
-/* line 55, cloudpopup.scss */
+/* line 56, cloudpopup.scss */
 .cloud_popup .content label {
   float: left;
   margin: 5px 8px 0px 0px;
@@ -56,28 +57,30 @@
   text-align: right;
 }
 
-/* line 64, cloudpopup.scss */
+/* line 65, cloudpopup.scss */
 .cloud_popup .content input {
   display: block;
+  float: left;
+  color: #FFF;
   border: 0px;
   padding: 4px;
   margin: 0px;
-  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
-  border: 1px #5c5c5c solid;
-  color: #FFF;
-  float: left;
-  width: 202px;
+  width: 176px;
   border-radius: 4px;
+  text-shadow: 1px 1px 1px #222;
+  border: 1px #5c5c5c solid;
+  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
 }
 
-/* line 77, cloudpopup.scss */
+/* line 80, cloudpopup.scss */
 .cloud_popup .content input:focus {
+  text-shadow: none;
   background: #FFF;
   border: 1px #292929 solid;
   color: #292929;
 }
 
-/* line 84, cloudpopup.scss */
+/* line 88, cloudpopup.scss */
 .cloud_popup .content button {
   display: block;
   border: 0px;
@@ -92,16 +95,15 @@
   text-shadow: 1px 1px 1px #000;
 }
 
-/* line 99, cloudpopup.scss */
+/* line 103, cloudpopup.scss */
 .cloud_popup .content button:hover {
   border: 1px #222 solid;
   background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
   color: #EEE;
 }
 
-/* line 107, cloudpopup.scss */
+/* line 111, cloudpopup.scss */
 .cloud_popup .content .status {
-  color: red;
   float: left;
   clear: right;
   margin: 5px 0px 0px 6px;
@@ -109,8 +111,8 @@
   width: 240px;
 }
 
-/* line 117, cloudpopup.scss */
-.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel {
+/* line 120, cloudpopup.scss */
+.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel {
   width: 80px;
   text-align: center;
   float: right;
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index ea54b1d8..ec03eb01 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -38,17 +38,18 @@ $grey_light: #494949;
 
 .cloud_popup .content p
 {
-  	text-shadow: 1px 1px 1px #333;
+  	text-shadow: 1px 1px 1px #222;
   	margin: 0px 0px 12px 0px;
   	text-align: justify;
   	color: #EEE;
 }
 
-.cloud_popup .content .test
+.cloud_popup .content .btn_test
 {
 	float: right;
 	clear: right;
 	margin: 0px 0px 0px 8px;
+	width: 60px;
 }
 
 .cloud_popup .content label
@@ -63,18 +64,21 @@ $grey_light: #494949;
 .cloud_popup .content input
 {
 	display: block;
+	float: left;
+	color: #FFF;
 	border: 0px;
 	padding: 4px;
 	margin: 0px;
-	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
-	border: 1px lighten($grey_dark, 20%) solid;
-	color: #FFF;
-	float: left;
-	width: 202px;
+	width: 176px;
 	border-radius: 4px;
+	text-shadow: 1px 1px 1px #222;
+	border: 1px lighten($grey_dark, 20%) solid;
+	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
 }
 
-.cloud_popup .content input:focus {
+.cloud_popup .content input:focus
+{
+	text-shadow: none;
     background: #FFF;
     border: 1px $grey_dark solid;
     color: $grey_dark;
@@ -105,7 +109,6 @@ $grey_light: #494949;
 
 .cloud_popup .content .status
 {
-	color: red;
 	float: left;
 	clear: right;
 	margin: 5px 0px 0px 6px;
@@ -113,7 +116,7 @@ $grey_light: #494949;
 	width: 240px;
 }
 
-.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel
+.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel
 {
 	width: 80px;
 	text-align: center;
-- 
cgit v1.2.3


From 372604713c2f7ac5c0b0ef475cf4043ba3194fec Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 31 Jan 2012 23:34:44 -0800
Subject: Cloud API Popup Fixes

Minor layout fixes, adjusted functionality slightly, need to check into adjusting the file and directory URL constructs for API changes.
---
 js/io/system/coreioapi.js                    | 21 ++++++++++++++-------
 js/io/ui/cloudpopup.reel/cloudpopup.js       |  2 +-
 js/io/ui/cloudpopup.reel/css/cloudpopup.css  |  2 +-
 js/io/ui/cloudpopup.reel/css/cloudpopup.scss |  2 +-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 6b803f22..74b066ac 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -27,12 +27,9 @@ exports.CoreIoApi = Montage.create(Component, {
 				this.rootUrl = window.localStorage['ioRootUrl'];
 				//Checks for IO API to be active
 				this.ioServiceDetected = this.cloudAvailable();
-				//
-				console.log('Cloud Status: URL detected in localStorage as '+this.rootUrl);
 			} else {
-				//
+				//IO API to be inactive
 				this.ioServiceDetected = false;
-				console.log('Cloud Status: No URL detected in localStorage');
 			}
 		}
 	},
@@ -41,9 +38,12 @@ exports.CoreIoApi = Montage.create(Component, {
 	cloudAvailable: {
 		enumerable: false,
 		value: function () {
+			var cloud = this.getCloudStatus();
 			//
-			if (this.rootUrl && this.getCloudStatus().status === 200) {
+			if (this.rootUrl && cloud.status === 200) {
 				//Active
+				this.cloudData.name = cloud.response['name'];
+				this.cloudData.root = cloud.response['server-root'];
 				return true;
 			} else {
 				//Inactive
@@ -62,6 +62,12 @@ exports.CoreIoApi = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    cloudData: {
+    	enumerable: false,
+		value: {name: null, root: ''}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     _cloudDialogComponents: {
     	enumerable: false,
 		value: {blackout: null, popup: null, dialog: null}
@@ -223,8 +229,8 @@ exports.CoreIoApi = Montage.create(Component, {
             if((urlOut.length > 1) && (urlOut.charAt(urlOut.length - 1) === "/")){
                 urlOut = urlOut.substring(0, (urlOut.length - 1));
             }
-
-            return serviceURL + urlOut;
+			//
+            return String(serviceURL+urlOut);
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -1009,6 +1015,7 @@ exports.CoreIoApi = Montage.create(Component, {
 				//
                	if (xhr.readyState === 4) {
                  	retValue.status = xhr.status;
+                 	eval('retValue.response = '+xhr.response);
                   	retValue.success = true;
                	}
            	}
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index f81dc93c..d256f226 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -75,7 +75,7 @@ exports.CloudPopup = Montage.create(Component, {
     		//
    			if (this.application.ninja.coreIoApi.cloudAvailable()) {
     			this.components.status.style.color = '#77FF00';
-    			this.components.status.innerHTML = 'Connected';
+    			this.components.status.innerHTML = 'Connected to '+this.application.ninja.coreIoApi.cloudData.name;
     		} else {
     			this.components.status.style.color = '#FF3A3A';
     			this.components.status.innerHTML = 'Disconnected';
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index 81e0742f..b42263b9 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -116,5 +116,5 @@
   width: 80px;
   text-align: center;
   float: right;
-  margin: 4px 0px 0px 8px;
+  margin: 8px 0px 0px 8px;
 }
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index ec03eb01..1ae5579b 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -121,5 +121,5 @@ $grey_light: #494949;
 	width: 80px;
 	text-align: center;
 	float: right;
-	margin: 4px 0px 0px 8px;
+	margin: 8px 0px 0px 8px;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From e824b4901817429231cd9ab6aa068cc0a0849e3a Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Wed, 1 Feb 2012 10:16:16 -0800
Subject: Applying global button styles to cloud popup

---
 js/io/ui/cloudpopup.reel/cloudpopup.html     |  6 +++---
 js/io/ui/cloudpopup.reel/cloudpopup.js       |  6 +++---
 js/io/ui/cloudpopup.reel/css/cloudpopup.css  | 29 ++++------------------------
 js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 24 +----------------------
 4 files changed, 11 insertions(+), 54 deletions(-)

diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 5d7de347..fa4533d7 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -38,13 +38,13 @@
 	    		
 	    		<label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
 	    		
-	    		<button class="btn_test">Test</button>
+	    		<button class="btn_test nj-skinned">Test</button>
 	    		
 	    		<label>Status:</label><div class="status">&nbsp;</div>
 	    		
-	    		<button class="btn_cancel">Cancel</button>
+	    		<button class="btn_cancel nj-skinned">Cancel</button>
 	    		
-	    		<button class="btn_ok">Ok</button>
+	    		<button class="btn_ok nj-skinned">Ok</button>
 	    		
 	    	</div>
     	</div>
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index d256f226..e8558179 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -28,9 +28,9 @@ exports.CloudPopup = Montage.create(Component, {
     	enumerable: false,
     	value: function () {
     		//
-    		this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
-    		this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
-    		this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
+    		this.components.test_btn = this.element.getElementsByClassName('btn_test nj-skinned')[0];
+    		this.components.ok_btn = this.element.getElementsByClassName('btn_ok nj-skinned')[0];
+    		this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel nj-skinned')[0];
     		this.components.status = this.element.getElementsByClassName('status')[0];
     		this.components.url = this.element.getElementsByClassName('cloud_url')[0];
     	}
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index b42263b9..eac18083 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -68,11 +68,12 @@
   width: 176px;
   border-radius: 4px;
   text-shadow: 1px 1px 1px #222;
+  font-family: 'Droid Sans', sans-serif;
   border: 1px #5c5c5c solid;
   background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
 }
 
-/* line 80, cloudpopup.scss */
+/* line 81, cloudpopup.scss */
 .cloud_popup .content input:focus {
   text-shadow: none;
   background: #FFF;
@@ -80,29 +81,7 @@
   color: #292929;
 }
 
-/* line 88, cloudpopup.scss */
-.cloud_popup .content button {
-  display: block;
-  border: 0px;
-  margin: 0px;
-  padding: 4px;
-  border: 1px #333 solid;
-  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929));
-  border-radius: 4px;
-  color: #FFF;
-  text-transform: uppercase;
-  cursor: pointer;
-  text-shadow: 1px 1px 1px #000;
-}
-
-/* line 103, cloudpopup.scss */
-.cloud_popup .content button:hover {
-  border: 1px #222 solid;
-  background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
-  color: #EEE;
-}
-
-/* line 111, cloudpopup.scss */
+/* line 89, cloudpopup.scss */
 .cloud_popup .content .status {
   float: left;
   clear: right;
@@ -111,7 +90,7 @@
   width: 240px;
 }
 
-/* line 120, cloudpopup.scss */
+/* line 98, cloudpopup.scss */
 .cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel {
   width: 80px;
   text-align: center;
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index 1ae5579b..047e2dd1 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -72,6 +72,7 @@ $grey_light: #494949;
 	width: 176px;
 	border-radius: 4px;
 	text-shadow: 1px 1px 1px #222;
+	font-family: 'Droid Sans', sans-serif;
 	border: 1px lighten($grey_dark, 20%) solid;
 	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
 }
@@ -84,29 +85,6 @@ $grey_light: #494949;
     color: $grey_dark;
 }
 
-.cloud_popup .content button
-{
-	display: block;
-	border: 0px;
-	margin: 0px;
-	padding: 4px;
-	border: 1px #333 solid;
-	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark));
-	border-radius: 4px;
-	color: #FFF;
-	text-transform: uppercase;
-	cursor: pointer;
-	text-shadow: 1px 1px 1px #000;
-}
-
-.cloud_popup .content button:hover
-{
-	
-	border: 1px #222 solid;
-	background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%)));
-	color: #EEE;
-}
-
 .cloud_popup .content .status
 {
 	float: left;
-- 
cgit v1.2.3


From d74910a897f2db920f6f67d922532d245074c8f7 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Wed, 1 Feb 2012 11:51:24 -0800
Subject: Fixing coreIO API referencing

---
 js/components/ui/FilePicker/file-picker-controller.js |  9 ++++-----
 js/io/system/coreioapi.js                             |  3 ++-
 js/io/system/fileio.js                                | 11 ++++++-----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/js/components/ui/FilePicker/file-picker-controller.js b/js/components/ui/FilePicker/file-picker-controller.js
index f14857ac..e71d1460 100755
--- a/js/components/ui/FilePicker/file-picker-controller.js
+++ b/js/components/ui/FilePicker/file-picker-controller.js
@@ -8,7 +8,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage,
     pickerNavigatorReel = require("js/components/ui/FilePicker/pickerNavigator.reel").PickerNavigator,
     filePickerModelModule = require("js/components/ui/FilePicker/file-picker-model"),
-    fileSystem = require("js/io/system/filesystem").FileSystem,
     Popup = require("montage/ui/popup/popup.reel").Popup;
 
 //singleton with functions to create a new file picker instance and utilities to format or filter the model data
@@ -101,7 +100,7 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
             var aModel = filePickerModelModule.FilePickerModel.create();
 
             var topLevelDirectories = null;
-            var driveData = fileSystem.shellApiHandler.getDirectoryContents({uri:"", recursive:false, returnType:"all"});
+            var driveData = this.application.ninja.coreIoApi.getDirectoryContents({uri:"", recursive:false, returnType:"all"});
             if(driveData.success){
                 topLevelDirectories = (JSON.parse(driveData.content)).children;
             }else{
@@ -244,7 +243,7 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
                 || !this._directoryContentCache[folderUri].children){
                 //get data using IO api
                 try{
-                    var iodata = fileSystem.shellApiHandler.getDirectoryContents({uri:folderUri, recursive:false, returnType:"all"});
+                    var iodata = this.application.ninja.coreIoApi.getDirectoryContents({uri:folderUri, recursive:false, returnType:"all"});
                     //console.log("IO:getDirectoryContents:Response:\n"+"uri="+folderUri+"\n status="+iodata.status+"\n content= "+iodata.content);
                     if(iodata.success && (iodata.status === 200) && (iodata.content !== null)){
                         folderContent = JSON.parse(iodata.content);
@@ -456,7 +455,7 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
             //check for directory staleness.... if stale query filesystem
             if((new Date()).getTime() > (this._directoryContentCache[folderUri].queriedTimeStamp + this.cacheStaleTime)){
                 try{
-                    var ifModifiedResponse = fileSystem.shellApiHandler.isDirectoryModified({uri:folderUri, recursive:false, returnType:"all"}, this._directoryContentCache[folderUri].queriedTimeStamp);
+                    var ifModifiedResponse = this.application.ninja.coreIoApi.isDirectoryModified({uri:folderUri, recursive:false, returnType:"all"}, this._directoryContentCache[folderUri].queriedTimeStamp);
                     //console.log("ifModifiedResponse");
                     //console.log(ifModifiedResponse);
                 }catch(e){
@@ -468,7 +467,7 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
                     wasStale = true;
                     //uri has changed. so update cache
                     try{
-                        var iodata = fileSystem.shellApiHandler.getDirectoryContents({uri:folderUri, recursive:false, returnType:"all"});
+                        var iodata = this.application.ninja.coreIoApi.getDirectoryContents({uri:folderUri, recursive:false, returnType:"all"});
                         //console.log("IO:getDirectoryContents:Response:\n"+"uri="+folderUri+"\n status="+iodata.status+"\n content= "+iodata.content);
                         if(iodata.success && (iodata.status === 200) && (iodata.content !== null)){
                             folderContent = JSON.parse(iodata.content);
diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 74b066ac..7e883b81 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -207,6 +207,7 @@ exports.CoreIoApi = Montage.create(Component, {
     directoryServiceURL: {
     	enumerable: false,
     	get: function() {
+    		console.log(this);
             return String(this.rootUrl+this._directoryServiceURL);
         },
         set: function(value) {
@@ -1015,7 +1016,7 @@ exports.CoreIoApi = Montage.create(Component, {
 				//
                	if (xhr.readyState === 4) {
                  	retValue.status = xhr.status;
-                 	eval('retValue.response = '+xhr.response);
+                 	retValue.response = JSON.parse(xhr.response);
                   	retValue.success = true;
                	}
            	}
diff --git a/js/io/system/fileio.js b/js/io/system/fileio.js
index 38ab05e8..ac5812e9 100755
--- a/js/io/system/fileio.js
+++ b/js/io/system/fileio.js
@@ -11,11 +11,12 @@ NOTES:
 	empty file will be created. 'contents' should be a string to be saved
 	as the file. 'contentType' is the mime type of the file.
 	
+	coreIoApi: this.application.ninja.coreIoApi
+	
 ////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////// */
 //
-var Montage = 		require("montage/core/core").Montage,
-	CoreIoApi =		require("js/io/system/coreioapi").CoreIoApi;
+var Montage = 		require("montage/core/core").Montage;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as File I/O
 exports.FileIo = Montage.create(Object.prototype, {
@@ -28,12 +29,12 @@ exports.FileIo = Montage.create(Object.prototype, {
     	enumerable: true,
     	value: function(file) {
     		//Checking for API to be available
-    		if (!CoreIoApi.cloudAvailable()) {
+    		if (!this.application.ninja.coreIoApi.cloudAvailable()) {
     			//API not available, no IO action taken
     			return null;
     		}
     		//Peforming check for file to exist
-    		var check = CoreIoApi.fileExists(file.uri), status, create;
+    		var check = this.application.ninja.coreIoApi.fileExists(file.uri), status, create;
     		//Upon successful check, handling results
     		if (check.success) {
     			//Handling status of check
@@ -44,7 +45,7 @@ exports.FileIo = Montage.create(Object.prototype, {
     					break;
     				case 404:
     					//File does not exists, ready to be created
-    					create = CoreIoApi.createFile(file);
+    					create = this.application.ninja.coreIoApi.createFile(file);
     					//Storing status to be returned (for UI handling)
     					if (create.success) {
     						status = check.status;
-- 
cgit v1.2.3