From a9c369c2e5d8f6fc8d936f7e1e6b84f693226ddf Mon Sep 17 00:00:00 2001
From: Ananya Sen
Date: Thu, 16 Feb 2012 13:11:48 -0800
Subject: moved file picker in file io

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
---
 .../file-input-field.reel/file-input-field.css     |   28 +
 .../file-input-field.reel/file-input-field.html    |   31 +
 .../file-input-field.reel/file-input-field.js      |  120 +++
 js/io/ui/file-picker/file-picker-controller.js     |  494 +++++++++
 js/io/ui/file-picker/file-picker-model.js          |  128 +++
 .../picker-navigator.reel/picker-navigator.css     |  253 +++++
 .../picker-navigator.reel/picker-navigator.html    |   80 ++
 .../picker-navigator.reel/picker-navigator.js      | 1072 ++++++++++++++++++++
 .../new-file-location.reel/new-file-location.html  |    2 +-
 js/io/ui/save-as-dialog.reel/save-as-dialog.html   |    2 +-
 10 files changed, 2208 insertions(+), 2 deletions(-)
 create mode 100755 js/io/ui/file-picker/file-input-field.reel/file-input-field.css
 create mode 100755 js/io/ui/file-picker/file-input-field.reel/file-input-field.html
 create mode 100755 js/io/ui/file-picker/file-input-field.reel/file-input-field.js
 create mode 100755 js/io/ui/file-picker/file-picker-controller.js
 create mode 100755 js/io/ui/file-picker/file-picker-model.js
 create mode 100644 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css
 create mode 100755 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html
 create mode 100644 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js

(limited to 'js/io/ui')

diff --git a/js/io/ui/file-picker/file-input-field.reel/file-input-field.css b/js/io/ui/file-picker/file-input-field.reel/file-input-field.css
new file mode 100755
index 00000000..91e412f8
--- /dev/null
+++ b/js/io/ui/file-picker/file-input-field.reel/file-input-field.css
@@ -0,0 +1,28 @@
+/* <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> */
+
+.fileInputField{
+    display:inline;
+}
+
+.fileInputField .newFileDirectory{
+    width:70%;
+    margin-left:5px;
+}
+
+
+.fileInputField .findDirectory{
+    display:inline;
+    width: 17px;
+    height:17px;
+    vertical-align: bottom;
+    background-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%04%00%00%00%B5%FA7%EA%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%03%18iCCPPhotoshop%20ICC%20profile%00%00x%DAc%60%60%9E%E0%E8%E2%E4%CA%24%C0%C0PPTR%E4%1E%E4%18%19%11%19%A5%C0~%9E%81%8D%81%99%81%81%81%81%81!1%B9%B8%C01%20%C0%87%81%81%81!%2F%3F%2F%95%01%15020%7C%BB%C6%C0%C8%C0%C0%C0pY%D7%D1%C5%C9%95%814%C0%9A%5CPT%C2%C0%C0p%80%81%81%C1(%25%B58%99%81%81%E1%0B%03%03CzyIA%09%03%03c%0C%03%03%83HRvA%09%03%03c%01%03%03%83HvH%903%03%03c%0B%03%03%13OIjE%09%03%03%03%83s~AeQfzF%89%82%A1%A5%A5%A5%82cJ~R%AABpeqIjn%B1%82g%5Er~QA~QbIj%0A%03%03%03%D4%0E%06%06%06%06%5E%97%FC%12%05%F7%C4%CC%3C%05%23%03U%06*%83%88%C8(%05%08%0B%11%3E%081%04H.-*%83%07%25%03%83%00%83%02%83%01%83%03C%00C%22C%3D%C3%02%86%A3%0Co%18%C5%19%5D%18K%19W0%DEc%12c%0Ab%9A%C0t%81Y%989%92y!%F3%1B%16K%96%0E%96%5B%ACz%AC%AD%AC%F7%D8%2C%D9%A6%B1%7Dc%0Fg%DF%CD%A1%C4%D1%C5%F1%853%91%F3%02%97%23%D7%16nM%EE%05%3CR%3CSy%85x'%F1%09%F3M%E3%97%E1_%2C%A0%23%B0C%D0U%F0%8AP%AA%D0%0F%E1%5E%11%15%91%BD%A2%E1%A2_%C4%26%89%1B%89_%91%A8%90%94%93%3C%26%95%2F--%7DB%A6LV%5D%F6%96%5C%9F%BC%8B%FC%1F%85%AD%8A%85JzJo%95%D7%AA%14%A8%9A%A8%FET%3B%A8%DE%A5%11%AA%A9%A4%F9A%EB%80%F6%24%9DT%5D%2B%3DA%BDW%FAG%0C%16%18%D6%1A%C5%18%DB%9A%C8%9B2%9B%BE4%BB%60%BE%D3b%89%E5%04%AB%3A%EB%5C%9B8%DB%40%3BW%7Bk%07cG%1D'5g%25%17%05Wy7%05we%0FuO%5D%2F%13o%1B%1Fw%DF%60%BF%04%FF%FC%80%FA%C0%89AK%83w%85%5C%0C%7D%19%CE%14!%17i%15%15%11%5D%1133vO%DC%83%04%B6D%DD%A4%B0%E4%86%945%A97%D392%2C23%B3%E6f_%CCe%CF%B3%CF%AF(%D8T%F8%AEX%BB%24%ABtU%D9%9B%0A%FD%CA%92%AA%5D5%8C%B5%5EuS%EB%1F6%EA5%D54%9Fm%95k%2Bl%3F%DA)%DDU%D4%7D%BAW%B5%AF%B1%FF%EED%9BI%B3'%FF%9D%1A%3F%ED%F0%0C%8D%99%FD%B3%BE%CFI%98%7Bz%BE%F9%82%A5%8BD%16%B7.%F9%B6%2Cs%F9%BD%95!%ABN%AFqY%BBo%BD%E5%86m%9BL6o%D9j%B2m%FB%0E%AB%9D%FBw%BB%EE9%BB%2Fl%FF%83%839%87~%1Ei%3F%26~%7C%C5I%EBS%E7%CE%24%9F%FDu~%D2E%EDKG%AF%24%5E%FDw%7D%CEM%9B%5Bw%EF%D4%DFS%BE%7F%E2a%DEc%B1'%FB%9Fe%BE%10yy%F0u%FE%5B%F9w%17%3E4%7D2%FD%FC%EA%EB%82%EF%E1%3F%05~%9D%FA%D3%FA%CF%F1%FF%7F%00%0D%00%0F4%FA%96%F1%5D%00%00%00%20cHRM%00%00z%25%00%00%80%83%00%00%F9%FF%00%00%80%E9%00%00u0%00%00%EA%60%00%00%3A%98%00%00%17o%92_%C5F%00%00%01%3AIDATx%DA%84%91MK%02a%14%85%9Fwf%98%60%C4%CA%24BL%A4%E8%CBV%FD%82V%B5%0A%8A%DAD%05%AD%DA%B5%C9%A0%96%EDBw%FD%82VQ%B8%0C%FFB%CB%3E(%8A%24%A8%C4%5C%18L%86%18%D6%E8%A8o%8B%99a%B0%85%9D%ED%3D%3C%F7%9C%7B%85%A4%BB4%00%81%3D%A1%EE%C9%10%9A%CCh%19%7F(%01%05%C0%9Al%A7%EBa%F3%EA%B3%D8%DA%7F%5ED%ED%40H%24_%C7%D5%F3%D84%B3%CCg%0F%CD%8B%B9%88g%91H%87P%1F%CC%5D%16%A3%18%D8%E9%9B%BA%26F1%10%1E%C0Y%A1%C8qT%0A%3Cl%D5Pr%06%C1%3F!%0B%D9%E1%ED%D3%B7%F2%FBr%5C%EC%98w%BA%86%8E%C0%AD'%24%20%86R%1BK%2BzS%D3%1A%F7%CD)%CB%3A98%BA%A6%ED%B4p%0CA%C6%06%A21%9Br%3C%9CJ%E9%01%EB%E5qw%F5%09%E9%1BT%FA%89%12BAYO%247%03%7D%8D%D2%CC%02%DFR%BA%19hQ%A1%81I%0F%F2%CC%AC%B4%93k%A5Wb%14%F8%F1%08n%1E%04%02%83%11%12%F4%92%E7V~x%04%FF.P%23O%93%08U%9A~%8B%CE%FF(%F4%60%D0%A2%26m%D7%D0M%CA%3Fs~%07%00f%81qU%9E%9B%ECi%00%00%00%00IEND%AEB%60%82");
+    background-size:17px 17px;
+    background-position: -2px -1px;
+    background-repeat: no-repeat;
+    padding-right: 12px;
+    cursor:pointer;
+}
diff --git a/js/io/ui/file-picker/file-input-field.reel/file-input-field.html b/js/io/ui/file-picker/file-input-field.reel/file-input-field.html
new file mode 100755
index 00000000..2fcaa075
--- /dev/null
+++ b/js/io/ui/file-picker/file-input-field.reel/file-input-field.html
@@ -0,0 +1,31 @@
+<!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>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="file-input-field.css">
+    <script type="text/montage-serialization">
+    {
+        "owner":{
+            "module": "js/io/ui/file-picker/file-input-field.reel",
+            "name": "FileInputField",
+            "properties": {
+                "element": {"#": "fileInputField"},
+                "findDirectory": {"#": "findDirectory"},
+                "newFileDirectory": {"#": "newFileDirectory"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+<div id="fileInputField" class="fileInputField">
+    <input type="search" id="newFileDirectory" class="nj-skinned newFileDirectory" />
+    <span id="findDirectory" class="findDirectory"></span>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/io/ui/file-picker/file-input-field.reel/file-input-field.js b/js/io/ui/file-picker/file-input-field.reel/file-input-field.js
new file mode 100755
index 00000000..235be8ad
--- /dev/null
+++ b/js/io/ui/file-picker/file-input-field.reel/file-input-field.js
@@ -0,0 +1,120 @@
+/* <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;
+
+var FileInputField = exports.FileInputField = Montage.create(Component, {
+
+	hasReel: {
+        value: true
+    },
+
+    willDraw: {
+        enumerable: false,
+        value: function() {}
+    },
+    draw: {
+        enumerable: false,
+        value: function() {}
+    },
+    didDraw: {
+        enumerable: false,
+        value: function() {
+            var that = this;
+            this.findDirectory.identifier = "findDirectory";
+            this.findDirectory.addEventListener("click", function(evt){that.handleFindDirectoryClick(evt);}, false);
+
+            this.eventManager.addEventListener("pickerSelectionsDone", function(evt){that.handleFileInputPickerSelectionsDone(evt);}, false);
+
+            this.newFileDirectory.addEventListener("keyup", function(evt){that.handleNewFileDirectoryOnkeyup(evt);}, false);
+        }
+    },
+
+    /**
+     * Either selectDirectory OR selectFile can be true
+     * If both are false then the file picker will default to file selection mode
+     */
+
+    selectDirectory:{
+        writable: true,
+        enumerable:false,
+        value: false
+    },
+
+    pickerName:{
+        writable: true,
+        enumerable:false,
+        value: null
+    },
+
+    selectFile:{
+        writable: true,
+        enumerable:false,
+        value: false
+    },
+
+
+    handleFindDirectoryClick: {
+        value: function(evt){
+            var openFilePicker = document.createEvent("Events");
+            openFilePicker.initEvent("openFilePicker", false, false);
+            var settings = {};
+            if(this.selectDirectory === true){
+                settings.inFileMode = false;
+                settings.pickerName = this.pickerName || "newFileDirectorySelector";
+            }else{
+                settings.inFileMode = true;
+                settings.pickerName = this.pickerName || "fileSelector";
+            }
+            settings.callback = this.filePickerCallback.bind(this);
+            openFilePicker.settings = settings;
+            this.eventManager.dispatchEvent(openFilePicker);
+        }
+    },
+
+    handleNewFileDirectoryOnkeyup:{
+          value:function(evt){
+              if(this.newFileDirectory.value !== ""){
+                  var newFileDirectorySetEvent = document.createEvent("Events");
+                  newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
+                  newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
+                  this.eventManager.dispatchEvent(newFileDirectorySetEvent);
+              }
+          }
+    },
+
+    handleFileInputPickerSelectionsDone:{
+        value: function(evt){
+            var selectedUri = "";
+            if(!!evt._event.selectedItems && evt._event.selectedItems.length > 0){
+                selectedUri = evt._event.selectedItems[0];
+                this.newFileDirectory.value = selectedUri;
+
+                var newFileDirectorySetEvent = document.createEvent("Events");
+                  newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
+                  newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
+                  this.eventManager.dispatchEvent(newFileDirectorySetEvent);
+            }
+        }
+    },
+
+    filePickerCallback:{
+        value: function(obj){
+            var selectedUri = "";
+            if(!!obj && obj.uri && obj.uri.length > 0){
+                selectedUri = obj.uri[0];
+                this.newFileDirectory.value = selectedUri;
+
+                var newFileDirectorySetEvent = document.createEvent("Events");
+                  newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
+                  newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
+                  this.eventManager.dispatchEvent(newFileDirectorySetEvent);
+            }
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/io/ui/file-picker/file-picker-controller.js b/js/io/ui/file-picker/file-picker-controller.js
new file mode 100755
index 00000000..129bebad
--- /dev/null
+++ b/js/io/ui/file-picker/file-picker-controller.js
@@ -0,0 +1,494 @@
+/* <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,
+    pickerNavigatorReel = require("js/io/ui/file-picker/picker-navigator.reel").PickerNavigator,
+    filePickerModelModule = require("js/io/ui/file-picker/file-picker-model"),
+    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
+var FilePickerController = exports.FilePickerController = Montage.create(require("montage/ui/component").Component, {
+    /**
+     * Register a listener for file open event
+     */
+    deserializedFromTemplate:{
+        writable:false,
+        enumerable:true,
+        value:function(){
+            var that = this;
+
+            this.eventManager.addEventListener("openFilePicker", function(evt){
+                var settings;
+                if(typeof evt._event.settings !== "undefined"){
+                    settings = evt._event.settings;
+                }
+                that.showFilePicker(settings);
+            }, false);
+
+        }
+    },
+
+    filePickerPopupType:{
+        writable: true,
+        enumerable: false,
+        value: "filePicker"
+    },
+
+    /**
+     *this function is used to create an instance of a file picker
+     *
+     * parameters:
+     * settings is an object containing :
+     *      callback [optional]: the call back function which will be used to send the selected URIs back. If undefined then an event is fired with the selected uri
+     *      callbackScope : required if callback is set
+     *      pickerMode [optional]: ["read", "write"] : specifies if the file picker is opened to read a file/folder or to save a file
+     *      currentFilter [optional]: if a current filter needs to be applied [ex: .psd]
+     *      allFileFilters [optional]: list of filters that user can use to filter the view
+     *      inFileMode [optional]: true => allow file selection , false => allow directory selection
+     *      allowNewFileCreation [optional]:  flag to specify whether or not it should return URI(s) to item(s) that do not exist. i.e. a user can type a filename to a new file that doesn't yet exist in the file system.
+     *      allowMultipleSelections [optional]: allowMultipleSelections
+     *      pickerName: name for montage custom popup
+     *
+     * return: none
+     */
+
+    showFilePicker:{
+        writable:false,
+        enumerable:true,
+        value:function(settings){
+            var callback, callbackScope, pickerMode, currentFilter, allFileFilters, inFileMode, allowNewFileCreation, allowMultipleSelections, pickerName;
+            if(!!settings){
+                if(typeof settings.callback !== "undefined"){callback = settings.callback;}
+                if(typeof settings.pickerMode !== "undefined"){pickerMode = settings.pickerMode;}
+                if(typeof settings.currentFilter !== "undefined"){currentFilter = settings.currentFilter;}
+                if(typeof settings.allFileFilters !== "undefined"){allFileFilters = settings.allFileFilters;}
+                if(typeof settings.inFileMode !== "undefined"){inFileMode = settings.inFileMode;}
+                if(typeof settings.allowNewFileCreation !== "undefined"){allowNewFileCreation = settings.allowNewFileCreation;}
+                if(typeof settings.allowMultipleSelections !== "undefined"){allowMultipleSelections = settings.allowMultipleSelections;}
+                if(typeof settings.pickerName !== "undefined"){this.filePickerPopupType = settings.pickerName;}
+            }
+
+            if(settings.pickerName === "saveAsDirectoryPicker"){//need to set the picker mode in a better way
+                pickerMode = "write";
+            }else{
+                pickerMode = "read";
+            }
+
+            var aModel = filePickerModelModule.FilePickerModel.create();
+
+            var topLevelDirectories = null;
+            var driveData = this.application.ninja.coreIoApi.getDirectoryContents({uri:"", recursive:false, returnType:"all"});
+            if(driveData.success){
+                topLevelDirectories = (JSON.parse(driveData.content)).children;
+            }else{
+                var errorCause = "";
+                if(driveData.status === null){
+                    errorCause = "Service Unavailable"
+                }else{
+                    errorCause = driveData.status;
+                }
+                aModel.fatalError = " ** Unable to get files [Error: "+ errorCause +"]";
+            }
+
+            //dummy data - TODO:remove after testing
+            //aModel.currentFilter = "*.html, *.png";
+            //aModel.currentFilter = "*.jpg";
+            aModel.currentFilter = "*.*";
+            aModel.inFileMode = true;
+            aModel.fileFilters = [".html, .htm", ".jpg, .jpeg, .png, .gif", ".js, .json", ".css", ".txt, .rtf", ".doc, .docx", ".pdf", ".avi, .mov, .mpeg, .ogg, .webm", "*.*"];
+            //-end - dummy data
+
+            if(!!currentFilter){aModel.currentFilter = currentFilter;}
+            if(typeof inFileMode !== "undefined"){aModel.inFileMode = inFileMode;}
+
+            aModel.topLevelDirectories = topLevelDirectories;
+
+            if(!!topLevelDirectories && !!topLevelDirectories[0]){
+                aModel.currentRoot = topLevelDirectories[0].uri;
+            }
+
+            //populate the last opened folder first, if none then populate default root
+            var storedUri = null;
+            var sessionStorage = window.sessionStorage;
+            try{
+                if(pickerMode === "write"){
+                    storedUri = sessionStorage.getItem("lastSavedFolderURI");
+                }else if(inFileMode === true){
+                    storedUri = sessionStorage.getItem("lastOpenedFolderURI_fileSelection");
+                }else if(inFileMode === false){
+                    storedUri = sessionStorage.getItem("lastOpenedFolderURI_folderSelection");
+                }
+            }catch(e){
+                if(e.code == 22){
+                    sessionStorage.clear();
+                }
+            }
+
+            if(!!storedUri){
+                aModel.currentRoot = unescape(storedUri);
+            }
+
+            if(!!allFileFilters){aModel.fileFilters = allFileFilters;}
+            if(!!callback){aModel.callback = callback;}
+            if(!!callbackScope){aModel.callbackScope = callbackScope;}
+            if(typeof pickerMode !== "undefined"){aModel.pickerMode = pickerMode;}
+
+
+
+            //logic: get file content data onDemand from the REST api for the default or last opened root. Cache the data in page [in local cache ? dirty fs? ]. Filter on client side to reduce network calls.
+            this.openFilePickerAsModal(callback, aModel);
+
+
+            //to open this on another modal dialog, make it a popup instead above the modal dialog container layer
+
+        }
+    },
+
+    openFilePickerAsModal:{
+          writable:false,
+        enumerable:true,
+        value:function(callback, aModel){
+            //render modal dialog
+            var pickerNavContent = document.createElement("div");
+            pickerNavContent.id = "filePicker";
+
+            pickerNavContent.style.color = "#fff";
+
+            //hack (elements needs to be on DOM to be drawn)
+            document.getElementById('modalContainer').appendChild(pickerNavContent);
+
+            var pickerNavChoices = Montage.create(pickerNavigatorReel);
+            var initUri = aModel.currentRoot;
+
+            //remove extra / at the end
+            if((initUri.length > 1) && (initUri.charAt(initUri.length - 1) === "/")){
+                initUri = initUri.substring(0, (initUri.length - 1));
+            }
+
+            pickerNavChoices.mainContentData = this.prepareContentList(initUri, aModel);
+            pickerNavChoices.pickerModel = aModel;
+            pickerNavChoices.element = pickerNavContent;
+
+            //hack - remove after rendering and add in modal dialog
+            document.getElementById('modalContainer').removeChild(pickerNavContent);
+
+            var popup = Popup.create();
+            popup.content = pickerNavChoices;
+            popup.modal = true;
+            popup.type = this.filePickerPopupType;//should be set always to not default to the single custom popup layer
+            popup.show();
+            pickerNavChoices.popup = popup;//handle to be used for hiding the popup
+        }
+    },
+    openFilePickerAsPopup:{
+          writable:false,
+        enumerable:true,
+        value:function(){}
+    },
+
+    expandDirectory:{
+        writable:false,
+        enumerable:true,
+        value: function(root, currentFilter, inFileMode){
+            //populate children in dom
+        }
+    },
+
+    refreshDirectoryCache:{
+        writable:false,
+        enumerable:true,
+        value:function(directoryUri){
+            if(directoryContentCache[directoryUri] !== null){
+                directoryContentCache[directoryUri] = null; //invalidate the cached content
+                //fetch fresh content
+            }
+        }
+    },
+
+    /**
+     * queries the cache to build contents array. If not found queries the file system
+     *
+     * parameters:
+     * folderUri
+     * aModel: model instance per picker instance, containing
+     */
+
+    prepareContentList:{
+        writable: false,
+        enumerable:true,
+        value:function(folderUri, aModel, fromCache, checkStaleness){
+            var contentList = [],
+                childrenArray = [];
+
+            var folderContent = null;
+            // query filesystem and populate cache
+            if(((typeof fromCache !== "undefined") && (fromCache === false))
+                || !this._directoryContentCache[folderUri]
+                || !this._directoryContentCache[folderUri].children){
+                //get data using IO api
+                try{
+                    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);
+                    }
+                }catch(e){
+                    console.error("Error to IO uri: "+folderUri+"\n"+e.message);
+                }
+
+                if(!!folderContent){
+                    //contentList = folderContent.children;//need to apply filters and mode
+                    this.cacheContentForRandomAccess(folderUri, folderContent);
+                }
+            }
+            //now from cache - apply filters and mode
+            if((!!this._directoryContentCache[folderUri])
+                    && (this._directoryContentCache[folderUri].type === "directory")
+                    && (typeof this._directoryContentCache[folderUri].children !== "undefined")
+                    && (this._directoryContentCache[folderUri].children !== null)){
+
+                //console.log("$$$ this._directoryContentCache");
+                //console.log(this._directoryContentCache);
+
+                //check for directory staleness.... if stale query filesystem
+                if((typeof checkStaleness === "undefined") || (checkStaleness === true)){
+                    this.checkIfStale(folderUri);
+                }
+
+                childrenArray = this._directoryContentCache[folderUri].children;
+
+                //prepare content array for folder uri
+                childrenArray.forEach(function(item){
+                    if(this._directoryContentCache[item]){
+                        //apply mode and filtering here
+                        if(aModel.inFileMode){// if in file selection mode, do filtering
+                            if((this._directoryContentCache[item].type === "directory") || !aModel.currentFilter){//no filetering
+                                contentList.push(this._directoryContentCache[item]);
+                            }
+                            else if(aModel.currentFilter){
+                                if(this.applyFilter(this._directoryContentCache[item].name, aModel.currentFilter)){
+                                    contentList.push(this._directoryContentCache[item]);
+                                }
+                            }
+                        }else{// if in folder selection mode
+                            if(this._directoryContentCache[item].type === "directory"){
+                                contentList.push(this._directoryContentCache[item]);
+                            }
+                        }
+                    }
+                }, this);
+            }
+            else if((typeof this._directoryContentCache[folderUri] !== 'undefined') && (this._directoryContentCache[folderUri].type === "file")){//if the uri is for a file
+
+                //check for directory staleness.... if stale query filesystem
+                if((typeof checkStaleness === "undefined") || (checkStaleness === true)){
+                    this.checkIfStale(folderUri);
+                }
+
+                contentList.push(this._directoryContentCache[folderUri]);
+            }
+            //end - from cache
+
+            return contentList;
+        }
+    },
+
+    /**
+     * populates/updates cache for a uri
+     */
+    cacheContentForRandomAccess:{
+            writable:false,
+            enumerable:true,
+            value: function(directoryUri, directoryContents){
+
+                var that = this;
+                //assumption: directoryContents will have only its direct files and subfolders
+                //uri is the unique identifier
+
+
+                //check if the directoryUri exists in cache
+                //if not add uri content object, prepare children's uri array,then add/update objects for children
+                if(!this._directoryContentCache[directoryUri]){//uri not in cache... so add it
+                    //add uri content object
+                    this._directoryContentCache[directoryUri] = {"type":directoryContents.type,"name":directoryContents.name,"uri":directoryUri};
+                    if(!!directoryContents.size){
+                        this._directoryContentCache[directoryUri].size = directoryContents.size;
+                    }
+                    if(!!directoryContents.creationDate){
+                        this._directoryContentCache[directoryUri].creationDate = directoryContents.creationDate;
+                    }
+                    if(!!directoryContents.modifiedDate){
+                        this._directoryContentCache[directoryUri].modifiedDate = directoryContents.modifiedDate;
+                    }
+
+                    //store the current queried time for refreshing cache logic
+                    this._directoryContentCache[directoryUri].queriedTimeStamp = (new Date()).getTime();
+
+                    if(!!directoryContents.children && directoryContents.children.length > 0){
+                        this._directoryContentCache[directoryUri].children = [];
+
+                        //add the uri to this._directoryContentCache[directoryUri].children, and add the child's description objects
+                        directoryContents.children.forEach(function(obj){
+                            //add uri to parent's children list
+                            that._directoryContentCache[directoryUri].children.push(obj.uri);
+                            //add the child object
+                            that._directoryContentCache[obj.uri] = obj;
+
+                            //store the current queried time for refreshing cache logic
+                            that._directoryContentCache[obj.uri].queriedTimeStamp = (new Date()).getTime();
+
+                        } ,this);
+                    }
+                }else{//uri in cache... so update it AND its children
+                    this._directoryContentCache[directoryUri].type = directoryContents.type;
+                    this._directoryContentCache[directoryUri].name = directoryContents.name;
+                    if(!!directoryContents.size){
+                        this._directoryContentCache[directoryUri].size = directoryContents.size;
+                    }
+                    if(!!directoryContents.creationDate){
+                        this._directoryContentCache[directoryUri].creationDate = directoryContents.creationDate;
+                    }
+                    if(!!directoryContents.modifiedDate){
+                        this._directoryContentCache[directoryUri].modifiedDate = directoryContents.modifiedDate;
+                    }
+
+                    //store the current queried time for refreshing cache logic
+                    this._directoryContentCache[directoryUri].queriedTimeStamp = (new Date()).getTime();
+
+                    if(!!directoryContents.children && directoryContents.children.length > 0){
+
+                        // logic to clear off objects from cache if they no longer exist in the filesystem
+                        //better logic - use isUpdatedFlag for a folder .. then compare modified date
+
+                        //hack for now - clear up the old children and add new ones
+                        var tempArr = this._directoryContentCache[directoryUri].children;
+                        if( !!tempArr && Array.isArray(tempArr) && tempArr.length>0){
+                           tempArr.forEach(function(uriString){
+                               if(!!that._directoryContentCache[uriString]){
+                                    delete that._directoryContentCache[uriString];
+                               }
+                           });
+                        }
+
+                        this._directoryContentCache[directoryUri].children = [];
+
+                        //add the uri to this._directoryContentCache[directoryUri].children, and add the child's description objects
+                        directoryContents.children.forEach(function(obj){
+                            //add uri to parent's children list
+                            that._directoryContentCache[directoryUri].children.push(obj.uri);
+                            //add the child object
+                            that._directoryContentCache[obj.uri] = obj;
+                            //store the current queried time for refreshing cache logic
+                            that._directoryContentCache[obj.uri].queriedTimeStamp = (new Date()).getTime();
+                        } ,this);
+                    }else{
+                        this._directoryContentCache[directoryUri].children = [];
+                    }
+                }
+
+                //console.log("$$$ "+directoryUri+" modifiedDate = "+this._directoryContentCache[directoryUri].modifiedDate);
+                //console.log("$$$ "+directoryUri+" queriedTimeStamp = "+this._directoryContentCache[directoryUri].queriedTimeStamp);
+            }
+    },
+
+    applyFilter:{
+        writable: false,
+        enumerable:true,
+        value:function(fileName , filters){
+
+            if(filters.indexOf("*.*") !== -1){return true;}
+
+            //console.log(""+fileName);
+            var filtersArr = filters.split(",");
+            var passed = false;
+            for(var i=0; i< filtersArr.length; i++){
+                filtersArr[i] = filtersArr[i].trim();
+                //console.log(filtersArr[i]);
+                var fileType = filtersArr[i].substring(filtersArr[i].indexOf(".") );
+                //console.log(""+fileType);
+
+                //ignore uppercase
+                fileName = fileName.toLowerCase();
+                fileType = fileType.toLowerCase();
+
+                if(fileName.indexOf(fileType, fileName.length - fileType.length) !== -1){//ends with file type
+                    passed = true;
+                    break;
+                }
+            }
+            return passed;
+        }
+    },
+
+    /**
+     * Stale Time (ms) for each resource
+     * Logic: the last queried time for a resource is compared to stale time. If stale, then file system is queried
+     */
+    cacheStaleTime:{
+        writable: false,
+        enumerable: false,
+        value: 5000
+    },
+
+    checkIfStale: {
+        writable: false,
+        enumerable: true,
+        value: function(folderUri){
+            var wasStale = false;
+            var folderContent = null;
+            //check for directory staleness.... if stale query filesystem
+            if((new Date()).getTime() > (this._directoryContentCache[folderUri].queriedTimeStamp + this.cacheStaleTime)){
+                try{
+                    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){
+                    console.error("Error to IO uri with isDirectoryModified: "+folderUri+"\n"+e.message);
+                }
+                if(ifModifiedResponse && ifModifiedResponse.status === 304){
+                    //do nothing since the uri has not changed
+                }else if(ifModifiedResponse && (ifModifiedResponse.status === 200)){
+                    wasStale = true;
+                    //uri has changed. so update cache
+                    try{
+                        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);
+                        }
+                    }catch(e){
+                        console.error("Error to IO uri: "+folderUri+"\n"+e.message);
+                    }
+
+                    if(!!folderContent){
+                        this.cacheContentForRandomAccess(folderUri, folderContent);
+                    }
+                }
+            }
+
+            return wasStale;
+        }
+    },
+
+    /**
+     * This will store the directory content per session
+     * check session storage for this
+     */
+    _directoryContentCache:{
+        writable:true,
+        enumerable:false,
+        value:{}
+    },
+
+    clearCache:{
+        writable:false,
+        enumerable: true,
+        value: function(){
+            this._directoryContentCache = {};
+        }
+    }
+});
\ No newline at end of file
diff --git a/js/io/ui/file-picker/file-picker-model.js b/js/io/ui/file-picker/file-picker-model.js
new file mode 100755
index 00000000..09c3ae9c
--- /dev/null
+++ b/js/io/ui/file-picker/file-picker-model.js
@@ -0,0 +1,128 @@
+/* <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 filePickerControllerModule = require("js/io/ui/file-picker/file-picker-controller");
+
+//this is per file picker instance
+exports.FilePickerModel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+
+    fatalError:{
+         writable:true,
+         enumerable:true,
+         value:null
+    },
+
+    _fileFilters:{
+            writable:true,
+            enumerable:false,
+            value:null
+        },
+        fileFilters:{
+            get:function(){
+                return this._fileFilters;
+            },
+            set:function(value){
+                this._fileFilters = value;
+            }
+        },
+        _currentFilter:{
+            writable:true,
+            enumerable:false,
+            value:null
+        },
+        currentFilter:{
+            get:function(){
+                return this._currentFilter;
+            },
+            set:function(value){
+                this._currentFilter = value;
+            }
+        },
+
+        /**
+         * true -> file selection mode
+         * false -> directory selection mode
+         */
+        inFileMode:{
+            writable:true,
+            enumerable:false,
+            value:null
+        },
+
+    /**
+     * pickerMode: ["read", "write"] : specifies if the file picker is opened to read a file/folder or to save a file
+     */
+        pickerMode:{
+            writable:true,
+            enumerable:false,
+            value:null
+        },
+
+        topLevelDirectories:{
+            writable:true,
+            enumerable:true,
+            value:[]
+        },
+
+        currentRoot:{
+            writable:true,
+            enumerable:true,
+            value:""
+        },
+
+        callback:{
+            writable:true,
+            enumerable:true,
+            value:null
+        },
+
+        callbackScope:{
+            writable:true,
+            enumerable:true,
+            value:null
+        },
+
+        /**
+         * stores the previously viewed directory uris in an array [FILO] per file picker instance
+         */
+        _history:{
+            writable:true,
+            enumerable:true,
+            value:[]//array of visited URIs for the back/forward arrows
+        },
+
+    /**
+     * store history of folders navigated if it was already not visited last
+     */
+        storeHistory:{
+            writable:false,
+            enumerable:true,
+            value:function(uri){
+                //remove redundant / at end
+//                uri = new String(uri);
+//                if((uri.charAt(uri.length - 1) === "/") || (uri.charAt(uri.length - 1) === "\\")){
+//                    uri = uri.substring(0, (uri.length - 1));
+//                }
+                //console.log("storeHistory: "+uri);
+                if(uri && (uri !== this._history[this._history.length -1]) && (!!filePickerControllerModule.FilePickerController._directoryContentCache[uri]) && (filePickerControllerModule.FilePickerController._directoryContentCache[uri].type === "directory")){
+                    //remove history after current pointer
+                    if(this._history.length >0){
+                        this._history.splice((this.currentHistoryPointer+1), (this._history.length - this.currentHistoryPointer - 1));
+                    }
+                    //now add the new state
+                    this._history.push(uri);
+                    this.currentHistoryPointer = this._history.length -1;
+                    //console.log("### stored: "+uri+" : pointer="+this.currentHistoryPointer);
+                }
+            }
+        },
+
+        currentHistoryPointer:{
+            writable:true,
+            enumerable:true,
+            value:-1
+        }
+});
\ No newline at end of file
diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css
new file mode 100644
index 00000000..796c283f
--- /dev/null
+++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css
@@ -0,0 +1,253 @@
+/* <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> */
+
+.picker{
+    font-size:12px;
+    width:523px;
+    height:500px;
+    padding-top:15px;
+    padding-left:15px;
+    padding-bottom:15px;
+    color:#ffffff;
+    background-color:#494949;
+    font-family: 'Droid Sans', sans-serif;
+    border-radius: 8px;
+	box-shadow: 0px 0px 8px rgba(0, 0, 0, .8);
+	text-shadow: 1px 1px 1px #000;
+}
+
+.picker .pickerHeader{
+    margin-bottom: 10px;
+}
+
+.picker .container{
+    border: 1px solid #000000;
+    overflow: auto;
+    background-color:#5f5f5f;
+}
+
+.picker .left-nav{
+    float:left;
+    width:20%;
+    height:86%;
+    padding-top: 10px;
+    overflow-x:hidden;
+    overflow-y:auto
+}
+
+.picker .right-nav{
+    float:left;
+    width:75%;
+    height:88%;
+    overflow: hidden;
+    border-left: none;
+}
+
+.picker .right-top{
+    border-right: 1px solid #000000;
+    overflow: auto;
+    min-height:150px;
+    height:75%;
+    width:auto;
+    border-right: none;
+    margin: 8px 0px 0px 8px;
+}
+
+.picker .right-bottom{
+    border: 1px solid #000000;
+    border-left: none;
+    overflow: auto;
+    height:20%;
+    padding: 10px;
+    border-bottom: none;
+    border-right: none;
+}
+
+.picker .driversList{
+    padding: 3px;
+    text-align: center;
+}
+
+.picker .driversList:hover{
+    cursor:pointer;
+    background-color: #444444;
+}
+
+.picker .highlighted{
+    background-color: #343434;
+}
+
+
+.picker .buttons{
+    float:right;
+    margin-top: 7px;
+}
+
+.picker .historyArrows{
+    width:20px;
+    display:inline;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+}
+
+.picker .historyArrows span{
+    font-size: 0.7em;
+    cursor: pointer;
+}
+
+.picker .addressbar{
+    display:inline;
+    margin-left: 2px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    position:relative;
+}
+
+.picker .addressbar input{
+    width:320px;
+}
+
+.picker .dropdownArrow{
+    font-size: 0.7em;
+    cursor: pointer;
+}
+
+.picker .dropdown{
+    position:absolute;
+    z-index:10000;
+    border: 1px solid #d1d1d1;
+    background-color: #444;
+    opacity:0.9;
+}
+
+.picker .dropdown div{
+    padding: 3px;
+}
+
+.picker .dropdown div:hover{
+    cursor: pointer;
+    background-color: #343434;
+}
+
+.picker .addressbar .dropdown{
+    width:331px;
+    min-height:50px;
+}
+
+.picker .go{
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.picker .viewSwitcher{
+    display:inline;
+    margin-left: 30px;
+}
+
+.picker .viewSwitcher span{
+    margin-left: 5px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    cursor: pointer;
+}
+
+.picker .reload{
+    position:relative;
+    margin-left: 15px;
+    top:4px;
+    cursor: pointer;
+}
+
+.picker .filters{
+    display:inline;
+    float:left;
+    margin-left: 12px;
+    margin-top: 7px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    /*width:150px;*/
+    position:relative;
+    max-width: 65%;
+}
+
+.picker .filters .dropdown{
+    min-height:25px;
+    /*width:154px;*/
+    bottom:21px;
+    left:-1px;
+    white-space: nowrap;
+}
+
+.picker .filterVal{
+    width:120px;
+    margin-left: 5px;
+    background-color: #444;
+}
+
+.picker .disable{
+    color:#5f5f5f;
+    cursor:auto;
+}
+
+.picker .hide{
+    display: none;
+}
+
+.picker .viewSelected{
+    background-color:#6f6f6f;
+    pointer:auto;
+}
+
+.picker .buttons button {
+	float: left;
+	width: 100px;
+	margin-top: 3px;
+}
+
+.picker .okButton{
+	margin: 0px 22px 0px 8px; 
+    /*
+margin-right:25px;
+    -webkit-box-align: center;
+    text-align: center;
+    cursor: default;
+    padding: 0px 6px 0px;
+    border:2px solid #d1d1d1;
+    background-color: #e1e1e1;
+    box-sizing: border-box;
+    border-radius:10px;
+    background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%);
+    cursor:pointer;
+*/
+}
+
+.picker .cancelButton{
+    /*
+-webkit-box-align: center;
+    text-align: center;
+    cursor: default;
+    padding: 0px 6px 0px;
+    border:2px solid #d1d1d1;
+    background-color: #e1e1e1;
+    box-sizing: border-box;
+    border-radius:10px;
+    background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%);
+    cursor:pointer;
+*/
+}
+
+.picker input[type="button"]:disabled{
+    background-color: #a1a1a1;
+    border:2px solid #a1a1a1;
+    background-image:none;
+    cursor:auto;
+}
+
+
+
diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html
new file mode 100755
index 00000000..f46068ec
--- /dev/null
+++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html
@@ -0,0 +1,80 @@
+<!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>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="picker-navigator.css">
+    <script type="text/montage-serialization">
+        {
+            "owner":{
+                "module": "js/io/ui/file-picker/picker-navigator.reel",
+                "name":"PickerNavigator",
+                "properties":{
+                    "element": {"#": "picker"},
+                    "filterVal" : {"#": "filterVal"},
+                    "error": {"#": "error"},
+                    "addressBarUri": {"#": "addressbarUri"},
+                    "forwardArrow": {"#": "forwardArrow"},
+                    "backArrow": {"#": "backArrow"},
+                    "leftNav": {"#": "left-nav"},
+                    "iconViewContainer": {"#": "iconViewContainer"},
+                    "iconView": {"#": "iconView"},
+                    "treeView": {"#": "treeView"},
+                    "treeViewContainer": {"#": "treeViewContainer"},
+                    "okButton": {"#": "okButton"},
+                    "metadataSection": {"#": "right-bottom"},
+                    "filters": {"#": "filters"},
+                    "refreshButton": {"#": "reload"},
+                    "cancelButton": {"#": "cancelButton"},
+                    "resultsArea": {"#" : "right-top"}
+                }
+            }
+
+        }
+    </script>
+
+</head>
+<body>
+<div id="picker" class="picker" style="visibility:hidden;">
+    <div><span id="error" class="error"></span></div>
+    <div class="pickerHeader">
+        <div class="historyArrows">
+            <span id="backArrow" class="backArrow disable">&#9664</span>
+            <span id="forwardArrow" class="forwardArrow disable">&#9654</span>
+        </div>
+        <img id="reload" alt="refresh" title="refresh" width="25px" height="15px" class="reload" src="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%24%00%00%00%16%08%06%00%00%00%A8%B2%3E%3E%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%18tEXtSoftware%00Paint.NET%20v3.30%40%84G%10%00%00%03%96IDATHK%B5%96%CBK%5BA%14%C6%13Z%84%D2B%A1%AB%82%FF%82%60%E2%2B%BAs%A1%18_%88%22f%25n*%0A%25%8A%BAiEQD%11%C4%85%DA%85%8AK%05)U%0C%8A%18%15%8A%82n%8C%8F%12%04A%17%09%D1Z%C4%92%14%91P%2Cr%3A%BF%A1%09%86%C6%DCK%AD%81%8Fsg%CE%99%EF%FBr%E7q%C7j%B9%E7W%5E%5E%FEJ%A5%5CV%AB%D5%A9b%BA%8A6%15%9F%A8%A8G%C4%E2%7D%E3ED%A7%FE%C4%5B%15%BF%A8%E6W%15%BD*~%5C%5E%5E%0E%DF76%A1%BF%B4%B4%F4YYY%D9%BB%CA%CA%CA%1F%FD%FD%FD%B2%B1%B1!'''r%7B%0B%E7%BF%FD%18%0B%07%5Cp%C2%8D%06Z)M%A9%82%D7%AAp%A7%B1%B1Q%8E%8E%8E%B4%89%C7%00%DCh%A0%85fRSN%A73%5D%15%84%26%26%26%E4%FA%FAZnnn%1E%15h%A0%85%26%DA%09%A6JJJ%D2T%C27%3B%3B%2B%D1h%F4%BFall%CC%90%0BM%B4%F1%107%A5%1C%BE%EF%EB%EB%93%AB%AB%2B%D3888%90%D6%D6V)**%92%CC%CCL%1Di%D3%0F%CF%E8%E8%A8%D8l6S%7Ch%E3A%1BR%CE%5E%B2%C8%98%D7p8l%88%8B%8B%0B-%96%93%93%23%D9%D9%D9%92%9B%9B%2Byyy%3A%C6%DA%CD%CD%CD%FA%99%1A3%9Ch%E3%01%2F%16%F5%E0%EE%ED%ED%15%84%CC%A0%BB%BB%5B%B2%B2%B2%C4%E1p%C8%D0%D0%90%EC%EE%EEJ%24%12%D1%916%FD%98%8BE3%9C%D4%E0%01%2F%96%9A%9A%9A%CF%F3%F3%F3rvvf%88%D5%D5Um%26%3F%3F_oa%88%CE%CF%CF%F58%E2%C8%C8%886B%BE%A0%A0%40%1B3%C3K%0D%1E%F0%C2%1B%FA%EE%F3%F9%24%10%08%18%A2%A5%A5EO%C3%F0%F0%B0%84B%A1%84%FA%C1%C1A%3DM1C%98%A2%D6%0C%2F5x%C0%0Bk%E8%17sx%7C%7Cl%88%E2%E2b%FD%AFwvv%12j%07%06%06%C4n%B7%EB%1CFb%C0%90%19%5Ej%F0%80%17%8B%DAr%3F%F7%F6%F6%E4%F0%F0%D0%10%2C%5ED%FC~%7FB-%A7%F0%E9%E9iR%98%E1%A5%06%0Fx%B1TWW%7F%5B%5B%5B%D3%DB%D5%08%BC!%0C%99%AD7%E2%BB%9B%87%13%2F%96%FA%FAz%DF%D4%D4%94%9E%06%23%B0%86X'%3D%3D%3D)k%C7%C7%C7%85%0D%60%C4w7%8F%07%BCX%3A%3B%3B%3F%B4%B7%B7%CB%F6%F6%B6!%E6%E6%E6%E2g%CD%F4%F4t%D2%FA%99%99%19%BD%13YO%FCk3%BC%D4%E0%01%2F%16u~8***%A2%1E%8FGo%E5T%60%60GG%87%5E%C0%9C%CE%9C%CC%18%60%0C%916%FD%9C%D0mmm%B2%B9%B9i%C8%C9X%B4%F1%80%17%EE%2Bi%5D%5D%5D%9F%DCn%B7%AC%AF%AF%1B%02S%1Cb%AC%25%C4322%E2%A0M%3Fy%EA%CC%F0Q%836%1E%F0%A2%3F%1F%C1%60%D0QWW%17%E4%AE%B2%B2%B2%92%12%5E%AFW%B6%B6%B6dqqQ_!%0A%0B%0B%F5%1B%23%D2%A6%9F%3CuF%5C%E4%D1D%1B%0F%F1%8F%ABr%F6Tm%BB7UUU%115%8F%FA%15.--%A5%04%82%BC%05%0E%B4%FD%FD%7D%1Di%D3o4%96%3C%1Ah%A1%896%1E%12%AE%20%AA%E3%B9%9A%C3%16%97%CB%15P%8EerrR%16%16%16%1E%05p%A3%81%16%9Ah'%BD%A4%A9%C4%8B%CB%CB%CB%3A%F5%01%F5%A8C*%DA%D4%D4%A4%3F%98lcv%D8C%00%07%5Cp%C2%8D%06Zh%A6%BC%C6%F2%EA%14%ECjN%DF%AA%EF%D3lCC%83%BF%B6%B66%C4%A1%F8%10%C0%01%17%9Cp%A3%F1%D74)g%BF%01%E1'%8B%DA%0F%0A%90%D8%00%00%00%00IEND%AEB%60%82" />
+        <div class="addressbar">
+            <input id="addressbarUri" class="nj-skinned addressbarUri" type="search" value="" />
+            <!--<span id="go" class="go">&#9992</span>-->
+            <span class="dropdownArrow">&#9660</span>
+            <div class="dropdown hide"></div>
+        </div>
+        <div class="viewSwitcher">
+            <span id="iconView" class="iconView" title="icon view">&#164</span>
+            <span id="treeView" class="treeView" title="tree view">&#165</span>
+        </div>
+    </div>
+    <div id="left-nav" class="container left-nav"></div>
+    <div class="container right-nav">
+        <div id="right-top" class="right-top">
+            <div id="iconViewContainer" class="iconViewContainer" style="display:block;"></div>
+            <div id="treeViewContainer" class="treeViewContainer" style="display:none;"></div>
+        </div>
+        <div id="right-bottom" class="right-bottom"></div>
+    </div>
+    <div class="buttons">
+        <button id="cancelButton" value="CANCEL" class="cancelButton nj-skinned">Cancel</button>
+        <button id="okButton" disabled="true" value="OK" class="okButton nj-skinned">Ok</button>
+    </div>
+    <div id="filters" class="filters" style="display:block;">
+        <div class="dropdown hide"></div>
+        <span class="dropdownArrow">&#9660</span>
+        <span id="filterVal" class="filterVal">*.*</span>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js
new file mode 100644
index 00000000..411386f9
--- /dev/null
+++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js
@@ -0,0 +1,1072 @@
+/* <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,
+    iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"),
+    treeModule = require("js/components/ui/tree-basic/tree.reel");
+
+var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
+
+    popup:{
+        enumerable: false,
+        writable: true,
+        value: null
+    },
+
+    mainContentData:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    _firstTime: {
+        enumerable: false,
+        value: true
+    },
+
+    firstTime:{
+        get: function(){},
+        set: function(){}
+    },
+
+    pickerCallback:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    selectedItems:{//passed to pickerCallback on click of OK
+        enumerable:false,
+        writable:true,
+        value:[]
+    },
+
+    /**
+     * store a reference to the currently selected node... for single selection
+     */
+     currentSelectedNode:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    currentURI:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    iconsViewDrawnOnce:{
+        enumerable:false,
+        writable:true,
+        value:false
+    },
+
+    /**
+     * for tree view only
+     * will store folder uri vs tree instance map
+     */
+    treeRefHash:{
+        enumerable:false,
+        writable:true,
+        value:{
+
+        }
+    },
+
+    selectedPickerView:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    /**
+     * Contains the different Views and their update handlers
+     */
+    pickerViews:{
+        enumerable:false,
+        writable:true,
+        value: function(){
+            var that = this;
+            return {
+                "iconView":that.updateIconView,
+                "treeView":that.updateTreeView
+            }
+        }
+    },
+    
+    pickerModel:{
+        enumerable:false,
+        writable:true,
+        value:null
+    },
+
+    willDraw: {
+    	enumerable: false,
+    	value: function() {
+
+    	}
+    },
+    draw: {
+    	enumerable: false,
+    	value: function() {
+            this.filterVal.innerHTML = this.pickerModel.currentFilter;
+
+            if(this.pickerModel.fatalError !== null){
+                this.error.innerHTML = this.pickerModel.fatalError;
+            }
+
+    	}
+    },
+    didDraw: {
+    	enumerable: false,
+    	value: function() {
+
+            var that = this;
+            this.iconList = null;
+            this.newContent = null;
+            this.spanEl = null;
+
+            this.addIdentifiers();
+
+            var topLevelDirs = this.pickerModel.topLevelDirectories;
+            var leftNav = this.leftNav;
+            //draw left nav
+            if(!!topLevelDirs
+                && (typeof topLevelDirs === "object")
+                && ('splice' in topLevelDirs)
+                && ('join' in topLevelDirs)
+                &&(topLevelDirs.length > 0)){
+
+                topLevelDirs.forEach(function(dirObj){
+                    var newDiv = document.createElement("div");
+                    newDiv.className = "driversList";
+                    newDiv.innerHTML = dirObj.name;
+                    leftNav.appendChild(newDiv);
+                    if(dirObj.uri === this.pickerModel.currentRoot){
+                        newDiv.classList.add("highlighted");
+                        //enable ok for logical drive selections, when in directory selection mode
+                        if(this.pickerModel.inFileMode === false){
+                            this.okButton.removeAttribute("disabled");
+                            //put into selectedItems..currently single selection is supported
+                            this.selectedItems = [dirObj.uri];
+                        }
+                    }
+
+                    newDiv.addEventListener("click", function(evt){that.handleTopLevelDirectoryClicks(evt, dirObj);}, false);
+                }, that);
+            }else{
+                console.error("need at least 1 valid top level directory");
+            }
+
+            //Draw icon view list
+            //TODO: check the default view and draw the appropriate view
+            if(this.mainContentData !== null){
+
+                this.currentURI = this.pickerModel.currentRoot;
+
+                //draw the IconsList if icons view container is on
+                if(this.iconViewContainer.style.display === "block"){
+                    this.iconList = iconsListModule.IconsList.create();
+                    //console.log(this.mainContentData);
+                    this.iconList.iconsViewDataObject = this.mainContentData;
+                    this.iconList.element = this.iconViewContainer;
+                    this.iconList.needsDraw = true;
+                    this.iconsViewDrawnOnce = true;
+                    this.selectedPickerView = "iconView";
+
+                    if(!this.iconView.classList.contains("viewSelected")){
+                        this.iconView.classList.add("viewSelected")
+                    }
+                    if(this.treeView.classList.contains("viewSelected")){
+                        this.treeView.classList.remove("viewSelected");
+                    }
+
+                }else if(this.treeViewContainer.style.display === "block"){
+                    //else draw the Tree if tree view container is on
+                    this.renderTree(this.treeViewContainer, this.currentURI);
+                    this.selectedPickerView = "treeView";
+
+                    if(!this.treeView.classList.contains("viewSelected")){
+                        this.treeView.classList.add("viewSelected")
+                    }
+                    if(this.iconView.classList.contains("viewSelected")){
+                        this.iconView.classList.remove("viewSelected");
+                    }
+                }
+
+                this.updateAddressBar(this.pickerModel.currentRoot);
+                this.pickerModel.storeHistory(this.pickerModel.currentRoot);//populate history
+
+                this.updateMetadata(this.currentURI);
+
+                //for directory selection, selected url is the folder entered
+                if(!this.pickerModel.inFileMode ){
+                    this.okButton.removeAttribute("disabled");
+                    //put into selectedItems..currently single selection is supported
+                    this.selectedItems = [this.pickerModel.currentRoot];
+                }
+            }
+
+            this.element.addEventListener("openFolder", function(evt){that.handlePickerNavOpenFolder(evt);}, false);//add icon double click event listener to reload iconList with new set of data
+            this.element.addEventListener("selectedItem", function(evt){that.handlePickerNavSelectedItem(evt);}, false);//for single selection only
+            this.element.addEventListener("showMetadata", function(evt){that.handlePickerNavShowMetadata(evt);}, false);//show metadata on hover of icon
+            this.element.addEventListener("updateMetadata", function(evt){that.handlePickerNavUpdateMetadata(evt);}, false);//show metadata on click of icon
+            //this.addressGo.addEventListener("click", this, false);
+            this.addressBarUri.addEventListener("keydown", this, false);
+            this.addressBarUri.addEventListener("keyup", this, false);
+            this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly
+            this.backArrow.addEventListener("click", this, false);
+            this.forwardArrow.addEventListener("click", this, false);
+
+            //populate filters if in file selection mode
+            if(this.pickerModel.inFileMode === true){
+                var filtersDD = this.element.querySelector(".filters .dropdown");
+                if(!!this.pickerModel.fileFilters
+                    && (typeof this.pickerModel.fileFilters === "object")
+                    && ('splice' in this.pickerModel.fileFilters)
+                    && ('join' in this.pickerModel.fileFilters)){
+                    this.pickerModel.fileFilters.forEach(function(aFilter){
+                        var newDiv = document.createElement("div");
+                        newDiv.innerHTML = aFilter;
+                        filtersDD.appendChild(newDiv);
+                        newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false);
+                    }, this);
+                }
+
+                var renderedWidth = this.getComputedWidth(filtersDD);
+                this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px";
+            }else{
+                this.filters.style.display = "none";
+            }
+            /**
+             * attach click event listeners to the addressbar dropdown arrows
+             */
+            var dropDownArrows = this.element.getElementsByClassName("dropdownArrow");
+            for(var x=0; x<dropDownArrows.length;x++){
+                dropDownArrows[x].addEventListener("click", function(evt){that.handleAddressDropdownArrowClick(evt);}, false);
+            }
+
+            this.iconView.addEventListener("click", this, false);
+            this.treeView.addEventListener("click", this, false);
+            this.element.addEventListener("drawTree", function(evt){that.handlePickerNavDrawTree(evt);}, false);
+            this.element.addEventListener("refreshTreeSegment", function(evt){that.handlePickerNavRefreshTreeSegment(evt);}, false);
+            this.resultsArea.addEventListener("click", function(evt){that.handleResultsAreaClick(evt);}, false);
+            this.element.addEventListener("click", function(evt){that.handlePickerNavClick(evt);}, false);
+
+            this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false);
+            this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false);
+
+            //ready to show picker now
+            this.element.style.visibility = "visible";
+    	}
+    },
+
+    updateAddressBar:{
+        writable: false,
+        enumerable:true,
+        value: function(folderUri){
+            var addressBarEl = this.addressBarUri;
+            if(addressBarEl){
+                addressBarEl.value = folderUri;
+
+                //update left drive selection
+                
+            }
+        }
+    },
+
+    cleanupUri:{
+        writable: false,
+        enumerable:true,
+        value: function(folderUri){
+            folderUri = folderUri.replace(/^\s+|\s+$/g,"");  // strip any leading or trailing spaces
+            //remove unnecessary / from end - for Win and Mac .... don't trim for the root
+            if(((folderUri.charAt(folderUri.length - 1) === "/") || (folderUri.charAt(folderUri.length - 1) === "\\")) && (folderUri !== "/")){
+                folderUri = folderUri.substring(0, (folderUri.length - 1));
+                //console.log("*** new uri = "+ folderUri);
+            }
+
+            return folderUri;
+        }
+    },
+
+    clearSelection:{
+        writable: false,
+        enumerable:true,
+        value: function(folderUri){
+            if((this.currentSelectedNode !== null) && (this.currentSelectedNode.classList.contains("selected"))){
+                this.currentSelectedNode.classList.remove("selected");
+            }
+            this.currentSelectedNode = null;
+            //disable OK
+            if(!this.okButton.hasAttribute("disabled")){
+                this.okButton.setAttribute("disabled", "true");
+            }
+        }
+    },
+
+    toggleDropdown:{
+        writable: false,
+        enumerable:true,
+        value: function(dropdownArrowEl){
+            var dropdownDiv = dropdownArrowEl.parentNode.getElementsByClassName("dropdown")[0];
+            dropdownDiv.classList.toggle("hide");
+        }
+    },
+
+    closeDropdowns:{
+        writable:false,
+        enumerable:true,
+        value:function(clickedTarget){
+            if(!clickedTarget.classList.contains("dropdownArrow")){//if not clicked on the drop down arrow itself
+                var dropDowns = this.element.getElementsByClassName("dropdown");
+                for(var x=0; x<dropDowns.length;x++){
+                    if(!dropDowns[x].classList.contains("hide")){//if dropdown open
+                        if(this.isOutside(dropDowns[x], clickedTarget)){
+                            dropDowns[x].classList.add("hide");
+                            //console.log("!!! closed DD: "+dropDowns[x].classList.toString());
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    prepareAddressDropdownData:{
+        writable:false,
+        enumerable:true,
+        value:function(uri){
+            uri = this.cleanupUri(uri);
+            var arr = [];
+            var temp = new String(uri);
+            while(temp.indexOf("/") != -1){
+                temp = temp.substring(0, temp.lastIndexOf("/"));
+
+                //populate dropdown irrespective of validity
+//                if(!!this.application.ninja.filePickerController._directoryContentCache[temp]){//check if it is a valid location
+//                    arr.push(temp);
+//                }els