From 3a754133dbc138390503341fd2e9beba3e43aa4b Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 27 Jan 2012 12:05:17 -0800
Subject: Merged old FileIO

---
 .../new-file-location.reel/new-file-location.css   |  23 +-
 .../new-file-location.reel/new-file-location.html  |  61 +++-
 .../new-file-location.reel/new-file-location.js    |  30 +-
 .../new-file-options-navigator.css                 | 107 ++++--
 .../new-file-options-navigator.html                |  45 ++-
 .../new-file-options-navigator.js                  | 375 +++++++++++++++++----
 .../newFileDialog/new-file-workflow-controller.js  |  75 ++++-
 .../newFileDialog/new-file-workflow-model.js       |  39 ++-
 8 files changed, 637 insertions(+), 118 deletions(-)
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.css
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.html
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.js
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-workflow-controller.js
 mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-workflow-model.js

(limited to 'js/io/workflow/newFileDialog')

diff --git a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.css b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.css
old mode 100644
new mode 100755
index 1e857874..7f11c225
--- a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.css
+++ b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.css
@@ -38,13 +38,22 @@
     padding-bottom: 5px;
 }
 
-.newfileLocation .locationSelection span{
-    padding-right: 5px;
+.newfileLocation .locationSelection input{
+    margin-left: 5px;
     white-space: nowrap;
 }
 
-.newfileLocation .findDirectory{
-    width: 17px;
-    height:17px;
-    vertical-align: bottom;
-}
\ No newline at end of file
+.newfileLocation .templatePx{
+    padding-left: 5px;
+    white-space: nowrap;
+}
+
+.newfileLocation .nameText{
+    margin-right:31px;
+}
+
+.newfileLocation .hottextunit{
+    float: none;
+    display: inline;
+}
+
diff --git a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.html b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.html
old mode 100644
new mode 100755
index 1be4e485..7c271511
--- a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.html
+++ b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.html
@@ -10,12 +10,61 @@
     <link rel="stylesheet" type="text/css" href="new-file-location.css">
     <script type="text/montage-serialization">
     {
+        "hottextHeight": {
+            "module": "js/components/hottextunit.reel",
+            "name": "HotTextUnit",
+            "properties": {
+                "element": {"#": "templateHeight"},
+                "minValue":25,
+                "maxValue" :2000,
+                "stepSize" :5,
+                "acceptableUnits" : ["px"],
+                "units" : "px"
+            },
+            "bindings": {
+                "value": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "templateHeight",
+                    "oneway": false
+                }
+            }
+        },
+
+        "hottextWidth": {
+            "module": "js/components/hottextunit.reel",
+            "name": "HotTextUnit",
+            "properties": {
+                "element": {"#": "templateWidth"},
+                "minValue":25,
+                "maxValue" :2000,
+                "stepSize" :5,
+                "acceptableUnits" : ["px"],
+                "units" : "px"
+            },
+            "bindings": {
+                "value": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "templateWidth",
+                    "oneway": false
+                }
+            }
+        },
+
+        "fileInputField":{
+            "module": "js/components/ui/FilePicker/file-input-field.reel",
+            "name": "FileInputField",
+            "properties": {
+                "element": {"#": "fileInputField"}
+            }
+        },
 
         "owner":{
             "module": "js/io/workflow/newFileDialog/new-file-location.reel",
             "name": "NewFileLocation",
             "properties": {
-                "element": {"#": "newfileLocation"}
+                "element": {"#": "newfileLocation"},
+                "fileInputField": {"@": "fileInputField"},
+                "newFileName": {"#": "newFileName"}
             }
         }
     }
@@ -27,14 +76,14 @@
         <div class="template"></div>
     </div>
     <div class="locationSelection">
-        <div><span>NAME:</span><input id="newFileName" class="nj-skinned newFileName" type="search" value="" /></div>
+        <div><span class="nameText">NAME:</span><input id="newFileName" class="nj-skinned newFileName" type="search" value="" /></div>
         <div>
             <span>DIRECTORY:</span>
-            <input type="search" id="newFileDirectory" class="nj-skinned newFileDirectory" />
-            <img id="findDirectory" class="findDirectory" src="images/panels/project-panel/icon-button-search.png" />
+            <div id="fileInputField"></div>
         </div>
-        <div><span>HEIGHT:</span><span class="templateHeight" id="templateHeight">176 px</span></div>
-        <div><span>WIDTH:</span><span class="templateWidth" id="templateWidth">220 px</span></div>
+        <br />
+        <div><span>WIDTH:</span><span class="templatePx" id="templateWidth"></span></div>
+        <div><span>HEIGHT:</span><span class="templatePx" id="templateHeight"></span></div>
     </div>
 </div>
 </body>
diff --git a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.js b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.js
old mode 100644
new mode 100755
index 4c90d1a1..805b44a4
--- a/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.js
+++ b/js/io/workflow/newFileDialog/new-file-location.reel/new-file-location.js
@@ -10,6 +10,16 @@ var newFileWorkflowControllerModule = require("js/io/workflow/newFileDialog/new-
 
 var NewFileLocation = exports.NewFileLocation = Montage.create(Component, {
 
+    templateHeight:{
+        enumerable: true,
+        value:"25 px"
+    },
+
+    templateWidth:{
+        enumerable: true,
+        value:"25 px"
+    },
+
     willDraw: {
        	enumerable: false,
        	value: function() {}
@@ -22,7 +32,25 @@ var NewFileLocation = exports.NewFileLocation = Montage.create(Component, {
 
     didDraw: {
        	enumerable: false,
-       	value: function() {}
+        value: function() {
+            var that=this;
+
+            this.fileInputField.selectDirectory = true;
+
+            this.newFileName.addEventListener("blur", function(evt){that.handleNewFileNameOnblur(evt);}, false);
+    }
+
+    },
+
+    handleNewFileNameOnblur:{
+          value:function(evt){
+              if(this.newFileName.value !== ""){
+                  var newFileNameSetEvent = document.createEvent("Events");
+                  newFileNameSetEvent.initEvent("newFileNameSet", false, false);
+                  newFileNameSetEvent.newFileName = this.newFileName.value;
+                  this.eventManager.dispatchEvent(newFileNameSetEvent);
+              }
+          }
     }
 
 });
\ No newline at end of file
diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css
old mode 100644
new mode 100755
index 01f0885e..7ef6d2ce
--- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css
+++ b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css
@@ -6,11 +6,21 @@
 
 .newfile{
     font-size:12px;
-    width:510px;
-    height:500px;
+    width:650px;
+    height:350px;
     padding-left: 15px;
-    padding-top: 15px;
+    padding-bottom:25px;
     background-color:#313131;
+    color:#ffffff;
+}
+
+.newfile .title{
+    font-size:14px;
+    height:15px;
+    padding:5px;
+    text-align: center;
+    font-weight: bold;
+    color: #C1C1C1;
 }
 
 .newfile .container{
@@ -23,7 +33,7 @@
     float:left;
     width:27%;
     height:90%;
-    overflow-x:hidden;
+    overflow-x:auto;
     overflow-y:auto
 }
 
@@ -38,24 +48,16 @@
     border: 1px groove #000000;
     overflow: auto;
     min-height:150px;
-    height:55%;
+    height:58%;
     width:auto;
+    padding:5px;
 }
 
 .newfile .right-bottom{
     border: 1px groove #000000;
     overflow: auto;
-    height:45%;
-    padding: 10px;
-}
-
-.newfile .driversList{
-    padding: 3px;
-    text-align: center;
-}
-
-.newfile .driversList:hover{
-    cursor:pointer;
+    height:42%;
+    padding: 15px;
 }
 
 .newfile .projectTypeHeader{
@@ -65,18 +67,18 @@
     font-weight: bold;
 }
 
-
-
-.newfile .highlighted{
-    background-color: #343434;
-}
-
-
 .newfile .buttons{
     float:right;
     margin-top: 7px;
 }
 
+.newfile .errorMsg{
+    float:left;
+    margin-top: 7px;
+}
+.newfile .errorMsg span{
+    color: #BF3B3B;
+}
 
 .newfile .disable{
     color:#5f5f5f;
@@ -91,5 +93,64 @@
     font-weight: bold;
 }
 
+.newfile .atreeItem .name{
+    padding: 3px;
+}
+
+.newfile .atreeItem .selected{
+    background-color: #3f3f3f;
+}
 
+.newfile .icon .selected{
+    background-color: #7f7f7f;
+}
 
+.newfile .icon{
+    height:90px;
+}
+
+.newfile .icon .iconLabel{
+    margin-top:4px;
+    max-width:90%;
+    white-space: normal;
+    padding-bottom:4px;
+    overflow: visible;
+}
+
+.newfile .icon .iconImg{
+    margin-left:25px;
+}
+
+.newfile .okButton{
+    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;
+}
+
+.newfile .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;
+}
+
+.newfile input[type="button"]:disabled{
+    background-color: #a1a1a1;
+    border:2px solid #a1a1a1;
+    background-image:none;
+    cursor:auto;
+}
\ No newline at end of file
diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html
old mode 100644
new mode 100755
index a022f841..36e937e0
--- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html
+++ b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html
@@ -10,6 +10,43 @@
     <link rel="stylesheet" type="text/css" href="new-file-options-navigator.css">
     <script type="text/montage-serialization">
     {
+        "okButton": {
+            "module": "montage/ui/button.reel",
+            "name": "Button",
+            "properties": {
+                "element": {"#": "okButton"},
+                "identifier": "okButton"
+            },
+            "listeners": [
+                {
+                    "type": "action",
+                    "listener": {"@": "owner"}
+                }
+            ]
+        },
+
+        "cancelButton": {
+            "module": "montage/ui/button.reel",
+            "name": "Button",
+            "properties": {
+                "element": {"#": "cancelButton"},
+                "identifier": "cancelButton"
+            },
+            "listeners": [
+                {
+                    "type": "action",
+                    "listener": {"@": "owner"}
+                }
+            ]
+        },
+
+        "newFileLocation":{
+            "module": "js/io/workflow/newFileDialog/new-file-location.reel",
+            "name": "NewFileLocation",
+            "properties": {
+                "element": {"#": "right-bottom"}
+            }
+        },
 
         "owner":{
             "module": "js/io/workflow/newFileDialog/new-file-options-navigator.reel",
@@ -21,7 +58,9 @@
                 "okButton": {"#": "okButton"},
                 "templateIcons": {"#": "templateIcons"},
                 "templatesContainer": {"#": "right-top"},
-                "locationSelection": {"#": "right-bottom"}
+                "locationSelection": {"#": "right-bottom"},
+                "newFileLocation": {"@": "newFileLocation"},
+                "error": {"#": "error"}
             }
         }
     }
@@ -29,8 +68,9 @@
 </head>
 <body>
 <div id="newfile" class="newfile">
+    <div class="title">Create New File</div>
     <div class="container left-nav">
-        <div class="projectTypeHeader"><span>Project Type</span></div>
+        <div class="projectTypeHeader"><span>File Type</span></div>
         <div id="projectTypeTree" class="projectTypeTree"></div>
     </div>
     <div class="container right-nav">
@@ -42,6 +82,7 @@
             <div class="selections">selections</div>
         </div>
     </div>
+    <div class="errorMsg"><span id="error" class="error"></span></div>
     <div class="buttons">
         <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" />
         <input id="okButton" disabled="true" type="button" value="OK" class="okButton" />
diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js
old mode 100644
new mode 100755
index 86c2c86b..61b963b3
--- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js
+++ b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js
@@ -8,8 +8,8 @@ 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"),
-    newFileLocationSelectionModule = require("js/io/workflow/newFileDialog/new-file-workflow-controller");
-    newFileWorkflowControllerModule = require("js/io/workflow/newFileDialog/new-file-location.reel");
+    newFileLocationSelectionModule = require("js/io/workflow/newFileDialog/new-file-workflow-controller"),
+    fileSystem = require("js/io/system/filesystem").FileSystem;
 
 var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(Component, {
 
@@ -23,10 +23,30 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
         enumerable:false,
         value:null
     },
-    selectedTemplates:{
+    selectedTemplate:{
         writable: true,
         enumerable:false,
-        value:[]
+        value:null
+    },
+    newFileName:{
+        writable:true,
+        enumerable:false,
+        value:""
+    },
+    newFileDirectory:{
+        writable:true,
+        enumerable:false,
+        value:""
+    },
+    templateWidth:{
+        writable:true,
+        enumerable:false,
+        value:"0 px"
+    },
+    templateHeight:{
+        writable:true,
+        enumerable:false,
+        value:"0 px"
     },
     willDraw: {
     	enumerable: false,
@@ -46,20 +66,32 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
             //draw left nav project type tree
             var tree = treeModule.Tree.create();
             tree.showIcons = false;
+            tree.expandTreeAfterDraw = true;
             tree.directoryBold = true;
-            tree.treeViewDataObject = this.newFileModel.prepareContents("projectTypes");
+            tree.highlightedUri = this.newFileModel.defaultProjectType;
+            tree.treeViewDataObject = this.newFileModel.prepareContents("categories");
             tree.element = this.projectTypeTree;
             tree.needsDraw = true;
 
-            var newFileLocation = newFileWorkflowControllerModule.NewFileLocation.create();
-            newFileLocation.element = this.locationSelection;
-            newFileLocation.needsDraw = true;
+            //highlight defaultProjectType
 
             this.addIdentifiers();
 
             this.element.addEventListener("drawTree", function(evt){that.handleNewFileNavDrawTree(evt);}, false);
             this.element.addEventListener("selectedItem", function(evt){that.handleNewFileNavSelectedItem(evt);}, false);//for single selection only
-            this.cancelButton.addEventListener("click", this, false);
+            this.eventManager.addEventListener("newFileDirectorySet", function(evt){that.handleNewFileDirectorySet(evt);}, false);
+            this.eventManager.addEventListener("newFileNameSet", function(evt){that.handleNewFileNameSet(evt);}, false);
+
+            if(!!this.newFileModel.defaultProjectType){
+                var templates = this.newFileModel.prepareContents(this.newFileModel.defaultProjectType);
+                this.templateList = iconsListModule.IconsList.create();
+                this.templateList.iconsViewDataObject = templates;
+                this.templateList.element = this.templateIcons;
+                this.templateList.needsDraw = true;
+
+
+                this.selectedProjectType = {"uri":this.newFileModel.defaultProjectType, "element":null};
+            }
         }
 
     },
@@ -71,61 +103,72 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
     addIdentifiers:{
         value: function(){
             this.element.identifier = "newFileNav";
-            this.okButton.identifier = "okButton";
-            this.cancelButton.identifier = "cancelButton";
         }
     },
 
     handleNewFileNavDrawTree:{
-            value: function(evt){
-                    //toggle open or close for directory
-                    if((evt.uriType === "directory") && (!!evt.subTreeContainer)){
-                        var tree = treeModule.Tree.create();
-                        tree.showIcons = false;
-                        tree.treeViewDataObject = this.newFileModel.prepareContents(evt.uri);
-                        tree.element = evt.subTreeContainer;
-                        tree.needsDraw = true;
-                    }
+        value: function(evt){
+                //toggle open or close for directory
+                if((evt.uriType === "directory") && (!!evt.subTreeContainer)){
+                    var tree = treeModule.Tree.create();
+                    tree.showIcons = false;
+                    tree.highlightedUri = this.newFileModel.defaultProjectType;
+                    tree.treeViewDataObject = this.newFileModel.prepareContents(evt.uri);
+                    tree.element = evt.subTreeContainer;
+                    tree.needsDraw = true;
                 }
-        },
+            }
+    },
 
     handleNewFileNavSelectedItem:{
         value: function(evt){
-                var selectionType =  this.newFileModel.projectTypeData[evt.uri].type;
-                if(evt.target.classList.contains("atreeItemContent") && (selectionType === "file")){//populate templates for project type selection
-                    //save project type selection
-                    this.selectedProjectType = evt.uri;
-
-                    //render templates
-                    var templates = this.newFileModel.prepareContents(evt.uri);
-                    if(this.templatesContainer.querySelectorAll(".list").length > 0){
-                        this.templateList.iconsViewDataObject = templates;
-                    }else{
-                        this.templateList = iconsListModule.IconsList.create();
-                        this.templateList.iconsViewDataObject = templates;
-                        this.templateList.element = this.templateIcons;
-                        this.templateList.needsDraw = true;
-                    }
+            var selectionType =  this.newFileModel.projectTypeData[evt.uri].type;
+            if(evt.target.classList.contains("atreeItemContent") && (selectionType === "file")){//populate templates for project type selection
+                this.highlightSelection(evt.target, "projectType", evt.uri);
+
+                //clear current template selection
+                if((!!this.selectedTemplate) && (this.selectedTemplate.element.classList.contains("selected"))){
+                                    this.selectedTemplate.element.classList.remove("selected");
                 }
 
-                if(evt.target.classList.contains("icon")){
-                    //save template selection
-                    this.selectedTemplates.push[evt.uri];//todo: check for duplicates
+                //disable ok
+                if(!this.okButton.hasAttribute("disabled")){
+                    this.okButton.setAttribute("disabled", "true");
+                }
+
+                //save project type selection
+                this.selectedProjectType = {"uri":evt.uri, "element":evt.target};
 
+                //render templates
+                var templates = this.newFileModel.prepareContents(evt.uri);
+                if(this.templatesContainer.querySelectorAll(".list").length > 0){
+                    this.templateList.iconsViewDataObject = templates;
+                }else{
+                    this.templateList = iconsListModule.IconsList.create();
+                    this.templateList.iconsViewDataObject = templates;
+                    this.templateList.element = this.templateIcons;
+                    this.templateList.needsDraw = true;
                 }
 
-//                if(!evt.target.classList.contains("selected")){
-//                    evt.target.classList.add("selected");
-//                }
 
-                //enable ok
             }
+
+            if(evt.target.classList.contains("icon")){
+                this.highlightSelection(evt.target, "template", evt.uri);
+
+                //save template selection
+                this.selectedTemplate = {"uri":evt.uri, "element":evt.target};
+
+                this.enableOk();
+
+            }
+        }
     },
 
-    handleCancelButtonClick :{
+    handleCancelButtonAction :{
         value:function(evt){
                 //clean up memory
-                //this.cleanup();
+                this.cleanup();
 
                 if(this.popup){
                     this.popup.hide();
@@ -134,27 +177,233 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C
             }
     },
 
+    handleOkButtonAction:{
+        value: function(evt){
+            var selectedProjectTypeID = this.selectedProjectType.uri,
+                templateID = this.selectedTemplate.uri,
+                projectName = this.newFileLocation.newFileName.value,
+                projectDirectory = this.newFileLocation.fileInputField.newFileDirectory.value,
+                projectWidth = this.newFileLocation.templateWidth,
+                projectHeight = this.newFileLocation.templateHeight,
 
 
+                selectionlog= "selectedProjectTypeID="+selectedProjectTypeID +"\n"+
+                            "templateID="+templateID+ "\n"+
+                            "projectName="+projectName+"\n"+
+                            "projectDirectory="+projectDirectory+"\n"+
+                            "projectWidth="+projectWidth+"\n"+
+                            "projectHeight="+projectHeight;
 
-    dummyProjectTypes:{
-        writable:false,
-        enumerable:false,
-        value:[{
-                   "type":"directory",
-                   "name":"Blank Document",
-                   "uri":"newFile"
-            },
-            {
-                   "type":"directory",
-                   "name":"New Project",
-                   "uri":"newProject"
-            },
-            {
-                   "type":"directory",
-                   "name":"From Template",
-                   "uri":"fromTemplate"
-            }]
+            if(!!this.selectedProjectType && !!this.selectedTemplate
+                && this.isValidFileName(projectName) && this.isValidUri(projectDirectory)
+                && !this.checkFileExists(projectName, projectDirectory, this.selectedProjectType)
+            ){
+                this.error.innerHTML="";
+                console.log("$$$ new file selections: \n" + selectionlog);
+                if(!!this.newFileModel.callback && !!this.newFileModel.callbackScope){//inform document-controller if save successful
+                    this.newFileModel.callback.call(this.newFileModel.callbackScope, {"selectedProjectTypeID":selectedProjectTypeID,
+                                                                                 "templateID":templateID,
+                                                                                 "projectName": projectName,
+                                                                                 "projectDirectory":projectDirectory,
+                                                                                 "projectWidth":projectWidth,
+                                                                                 "projectHeight":projectHeight});//document-controller api
+                }else{
+                    //send selection event
+                    var newFileSelectionEvent = document.createEvent("Events");
+                    newFileSelectionEvent.initEvent("createNewFile", false, false);
+                    newFileSelectionEvent.newFileOptions = {"selectedProjectTypeID":selectedProjectTypeID,
+                                                             "templateID":templateID,
+                                                             "projectName": projectName,
+                                                             "projectDirectory":projectDirectory,
+                                                             "projectWidth":projectWidth,
+                                                             "projectHeight":projectHeight};
+                    this.eventManager.dispatchEvent(newFileSelectionEvent);
+                }
+                //store last selected project type
+                var dataStore = window.sessionStorage;
+                try {
+                    dataStore.setItem('lastSelectedProjectType',escape(""+selectedProjectTypeID));
+                }
+                catch(e){
+                    if(e.code == 22){
+                        dataStore.clear();
+                    }
+                }
+
+                this.cleanup();//clear up any unnecessary memory
+
+                if(this.popup){
+                    this.popup.hide();
+                }
+            }else{
+                if(this.error.innerHTML !== ""){
+                    this.showError("! Project Template, Name and Directory should be valid.");
+                }
+                //disable ok
+                if(!this.okButton.hasAttribute("disabled")){
+                    this.okButton.setAttribute("disabled", "true");
+                }
+            }
+
+        }
+    },
+
+    handleNewFileDirectorySet:{
+        value:function(evt){
+            if(!!evt._event.newFileDirectory){
+                this.newFileDirectory = evt._event.newFileDirectory;
+                if(this.isValidUri(this.newFileDirectory)){
+                    this.enableOk();
+                }
+            }
+        }
+    },
+
+    handleNewFileNameSet:{
+        value:function(evt){
+            if(!!evt._event.newFileName){
+                this.newFileName = evt._event.newFileName;
+                if(this.isValidFileName(this.newFileName)){
+                    this.enableOk();
+                }
+            }
+        }
+    },
+
+    highlightSelection:{
+        value: function(el, selectionType, uri){
+            var elem;
+            //clear previous selection
+            if(selectionType === "projectType"){
+                if((!!this.selectedProjectType) && (uri !== this.selectedProjectType.uri)){
+                    if(!!this.selectedProjectType.element){
+                        this.selectedProjectType.element.classList.remove("selected");
+                    }else{
+                        //find the selected element
+                        elem = document.querySelector(".projectTypeTree").querySelector(".selected");
+                        if(!!elem){
+                            elem.classList.remove("selected");
+                        }
+                    }
+                    el.classList.add("selected");
+                }else if(this.selectedProjectType === null){
+                    el.classList.add("selected");
+                }
+            }else if(selectionType === "template"){
+                if((!!this.selectedTemplate) && (uri !== this.selectedTemplate.element)){
+                    if(!!this.selectedTemplate.element){this.selectedTemplate.element.classList.remove("selected");}
+                    el.classList.add("selected");
+                }else if(this.selectedTemplate === null){
+                    el.classList.add("selected");
+                }
+            }
+
+        }
+    },
+
+    enableOk:{
+        value: function(){
+            var status = false;
+
+            if(!!this.selectedProjectType && !!this.selectedTemplate
+                && this.isValidFileName(this.newFileName) && this.isValidUri(this.newFileDirectory)
+                && !this.checkFileExists(this.newFileName, this.newFileDirectory, this.selectedProjectType)
+                ){
+                status = true;
+                this.okButton.removeAttribute("disabled");
+                this.error.innerHTML="";
+            }
+            return status;
+        }
+    },
+
+    cleanup:{
+        value:function(){
+            var that = this;
+
+            this.newFileName = "";
+            this.newFileDirectory = "";
+            this.selectedProjectType = null;
+            this.selectedTemplate = null;
+
+            //remove event listeners
+            this.element.removeEventListener("drawTree", function(evt){that.handleNewFileNavDrawTree(evt);}, false);
+            this.element.removeEventListener("selectedItem", function(evt){that.handleNewFileNavSelectedItem(evt);}, false);//for single selection only
+            this.eventManager.removeEventListener("newFileDirectorySet", function(evt){that.handleNewFileDirectorySet(evt);}, false);
+            this.eventManager.removeEventListener("newFileNameSet", function(evt){that.handleNewFileNameSet(evt);}, false);
+        }
+    },
+
+    isValidUri:{
+        value: function(uri){
+            var isWindowsUri=false, isUnixUri=false,status=false;
+            if(uri !== ""){
+                uri = uri.replace(/^\s+|\s+$/g,"");  // strip any leading or trailing spaces
+
+                //for local machine folder uri
+                isWindowsUri = /^([a-zA-Z]:)(\\[^<>:"/\\|?*]+)*\\?$/gi.test(uri);
+                isUnixUri = /^(\/)?(\/(?![.])[^/]*)*\/?$/gi.test(uri);//folders beginning with . are hidden on Mac / Unix
+                status = isWindowsUri || isUnixUri;
+                if(isWindowsUri && isUnixUri){status = false;}
+
+                if(!status){
+                    this.showError("! Invalid directory.");
+                }
+            }
+            return status;
+        }
+    },
+    isValidFileName:{
+        value: function(fileName){
+            var status = false;
+            if(fileName !== ""){
+                fileName = fileName.replace(/^\s+|\s+$/g,"");
+                status = !(/[/\\]/g.test(fileName));
+                if(status && navigator.userAgent.indexOf("Macintosh") != -1){//for Mac files beginning with . are hidden
+                    status = !(/^\./g.test(fileName));
+                }
+
+                if(!status){
+                    this.showError("! Invalid file name.");
+                }
+            }
+            return status;
+        }
+    },
+    checkFileExists:{
+        value: function(fileUri, folderUri, fileType){
+            var uri = "", response=null, status=true;
+
+            //prepare absolute uri
+            if(/[^/\\]$/g.test(folderUri)){
+                folderUri = folderUri + "/";
+            }
+
+            //todo:add file extension check
+
+            uri = ""+folderUri+fileUri;
+
+            response = fileSystem.shellApiHandler.fileExists({"uri":uri});
+            if(!!response && response.success && (response.status === 204)){
+                this.showError("! File already exists.");
+                status = true;
+            }else if(!!response && response.success && (response.status === 404)){
+                status = false;
+            }else{
+                this.showError("! Cloud Service Error.");
+            }
+            return status;
+        }
+    },
+    showError:{
+        value:function(errorString){
+            this.error.innerHTML = "";
+            this.error.innerHTML=errorString;
+            //disable ok
+            if(!this.okButton.hasAttribute("disabled")){
+                this.okButton.setAttribute("disabled", "true");
+            }
+        }
     }
 
 });
\ No newline at end of file
diff --git a/js/io/workflow/newFileDialog/new-file-workflow-controller.js b/js/io/workflow/newFileDialog/new-file-workflow-controller.js
old mode 100644
new mode 100755
index 5cc68bf9..18c84724
--- a/js/io/workflow/newFileDialog/new-file-workflow-controller.js
+++ b/js/io/workflow/newFileDialog/new-file-workflow-controller.js
@@ -8,9 +8,10 @@ var Montage = require("montage/core/core").Montage,
     Popup = require("montage/ui/popup/popup.reel").Popup,
     newFileOptionsNavigatorModule = require("js/io/workflow/newFileDialog/new-file-options-navigator.reel"),
     newFileWorkflowModelModule = require("js/io/workflow/newFileDialog/new-file-workflow-model");
+    saveAsModule = require("js/io/workflow/save-as-dialog.reel");
 
 //singleton
-exports.NewFileWorkflowController = Montage.create(require("montage/ui/component").Component, {
+var NewFileWorkflowController =  exports.NewFileWorkflowController = Montage.create(require("montage/ui/component").Component, {
     /**
      * Register a listener for showPicker event
      */
@@ -20,40 +21,96 @@ exports.NewFileWorkflowController = Montage.create(require("montage/ui/component
         value:function(){
             var that = this;
             this.eventManager.addEventListener("executeNewFile", function(evt){
-                that.showNewFileDialog();
+                var data = evt._event.data || {};//data will contain callback
+                that.showNewFileDialog(data);
+            }, false);
+
+            this.eventManager.addEventListener("saveAs", function(evt){
+                var data = evt._event.data || {};//data will contain the current file name, directory location and callback
+                that.showSaveAsDialog(data);
             }, false);
         }
     },
 
+    model:{
+        writable: true,
+        enumerable:true,
+        value: newFileWorkflowModelModule.NewFileWorkflowModel
+    },
+
     showNewFileDialog:{
         writable:false,
         enumerable:true,
-        value:function(){
-            var aModel = null;
+        value:function(data){
+            //get default project type
+            this.model.defaultProjectType = "htmlTemplate";
+            this.model.callback = data.callback || null;
+            this.model.callbackScope = data.callbackScope || null;
+
+            //populate the last opened folder first, if none then populate default root
+            var sessionStorage = window.sessionStorage;
+            var lastSelectedProjectType = sessionStorage.getItem("lastSelectedProjectType");
+
+            if(!!lastSelectedProjectType){
+                this.model.defaultProjectType = lastSelectedProjectType;
+            }
+
             //render modal dialog
             var newFileNavContent = document.createElement("div");
             newFileNavContent.id = "newFileDialog";
-            newFileNavContent.style.width = "650px";
-            newFileNavContent.style.height = "350px";
-            newFileNavContent.style.color = "#fff";
 
             //elements needs to be on DOM to be drawn
             document.getElementById('modalContainer').appendChild(newFileNavContent);
 
             var newFileOptionsNav = newFileOptionsNavigatorModule.NewFileOptionsNavigator.create();
-            newFileOptionsNav.newFileModel = newFileWorkflowModelModule.NewFileWorkflowModel;
+            newFileOptionsNav.newFileModel = this.model;
             newFileOptionsNav.element = newFileNavContent;
 
-            //hack - remove after rendering and add in modal dialog
+            //remove after rendering and add in modal dialog
             document.getElementById('modalContainer').removeChild(newFileNavContent);
 
             var popup = Popup.create();
             popup.content = newFileOptionsNav;
             popup.modal = true;
+            popup.type = "newFileDialog";
             popup.show();
 
             newFileOptionsNav.popup = popup;//handle to be used for hiding the popup
 
         }
+    },
+
+    showSaveAsDialog:{
+        writable:false,
+        enumerable:true,
+        value:function(data){
+            var fileName = data.fileName || "filename.txt";
+            var folderUri = data.folderUri || "/Documents";
+
+            //render modal dialog
+            var saveAsDialogContainer = document.createElement("div");
+            saveAsDialogContainer.id = "saveAsDialog";
+
+            //elements needs to be on DOM to be drawn
+            document.getElementById('modalContainer').appendChild(saveAsDialogContainer);
+
+            var saveAsDialog = saveAsModule.SaveAsDialog.create();
+            saveAsDialog.fileName = fileName;
+            saveAsDialog.folderUri = folderUri;
+            saveAsDialog.callback = data.callback;
+            saveAsDialog.callbackScope = data.callbackScope;
+            saveAsDialog.element = saveAsDialogContainer;
+
+            //remove after rendering and add in modal dialog
+            document.getElementById('modalContainer').removeChild(saveAsDialogContainer);
+
+            var popup = Popup.create();
+            popup.content = saveAsDialog;
+            popup.modal = true;
+            popup.type = "saveAsDialog";
+            popup.show();
+
+            saveAsDialog.popup = popup;//handle to be used for hiding the popup
+        }
     }
 });
\ No newline at end of file
diff --git a/js/io/workflow/newFileDialog/new-file-workflow-model.js b/js/io/workflow/newFileDialog/new-file-workflow-model.js
old mode 100644
new mode 100755
index 49c9804d..bcaf8132
--- a/js/io/workflow/newFileDialog/new-file-workflow-model.js
+++ b/js/io/workflow/newFileDialog/new-file-workflow-model.js
@@ -22,14 +22,30 @@ exports.NewFileWorkflowModel = Object.create(Object.prototype, {
             return contents;
         }
     },
+
+    defaultProjectType:{
+        writable: true,
+        enumerable: true,
+        value: null
+    },
+
+    callback : {
+        enumerable: true,
+        writable: true,
+        value: null
+    },
+
+    callbackScope : {
+        enumerable: true,
+        writable: true,
+        value: null
+    },
+
     projectTypeData:{
             writable:false,
             enumerable:false,
             value:{//dummy data for testing
-                "projectTypes":{
-                    "name":"Project Type",
-                    "type":"directory",
-                    "uri":"projectTypes",
+                "categories":{
                     "children":["newFile", "newProject", "fromTemplate"]
                 },
                 "newProject":{
@@ -104,18 +120,27 @@ exports.NewFileWorkflowModel = Object.create(Object.prototype, {
                 "htmlTemplate":{
                     "name":"HTML",
                     "uri":"htmlTemplate",
-                    "type":"file"
+                    "type":"file",
+                    "children":["defaultTemplate", "xoomApp", "iosApp", "androidApp", "bannerAd"]
                 },
                 "cssTemplate":{
                     "name":"CSS",
                     "uri":"cssTemplate",
-                    "type":"file"
+                    "type":"file",
+                    "children":["defaultTemplate"]
                 },
                 "javascriptTemplate":{
-                    "name":"Javascript",
+                    "name":"JavaScript",
                     "uri":"javascriptTemplate",
+                    "type":"file",
+                    "children":["defaultTemplate"]
+                },
+                defaultTemplate:{
+                    "name": "default",
+                    "uri": "defaultTemplate",
                     "type":"file"
                 }
+
             }
     }
 });
-- 
cgit v1.2.3