29 files changed, 1065 insertions, 113 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 4d2de3ee..d98aa513 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -677,7 +677,9 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 
 .toolOptionsSpacer { margin-right: 9px; }
 
-.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; }
+.toolColorChipCtrl { width: 16px; height: 16px; border: 1px #000 solid; }
+
+.toolColorChipContainer { background: url(../../../../../images/colorpanel/transparent.png) repeat; width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px #777 solid; }
 
 .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; }
 
diff --git a/js/clipboard/external-apps-clipboard-agent.js b/js/clipboard/external-apps-clipboard-agent.js
new file mode 100644
index 00000000..7e55cf08
--- /dev/null
+++ b/js/clipboard/external-apps-clipboard-agent.js
@@ -0,0 +1,220 @@
+/* <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,
+    ClipboardUtil = require("js/clipboard/util").ClipboardUtil;
+
+var ExternalAppsClipboardAgent = exports.ExternalAppsClipboardAgent = Montage.create(Component, {
+
+    paste:{
+        value: function(clipboardEvent){
+            var clipboardData = clipboardEvent.clipboardData,
+            htmlData = clipboardData.getData("text/html"),
+            textData = clipboardData.getData("text/plain"),
+            i=0,
+            imageMime, imageData, imageElement;
+
+            //handle image blobs
+            if(clipboardData.items &&  (clipboardData.items.length > 0)){
+                for(i=0; i < clipboardData.items.length; i++ ){
+                    if((clipboardData.items[i].kind === "file") && (clipboardData.items[i].type.indexOf("image") === 0)){//example type -> "image/png"
+                        imageMime = clipboardData.items[i].type;
+                        imageData = clipboardData.items[i].getAsFile();
+                        try{
+                            imageElement = this.pasteImageBinary(imageData);
+                        }catch(e){
+                            console.log(""+e.stack);
+                        }
+                        this.application.ninja.selectionController.selectElements(imageElement);
+                        this.application.ninja.currentDocument.model.needsSave = true;
+
+                    }
+                }
+            }
+
+            try{
+                if(!!htmlData || !!textData){
+                    this.pasteHtml(htmlData, textData);
+                }
+            }catch(e){
+                console.log(""+e.stack);
+            }
+
+        }
+    },
+
+    //todo: this will be moved to a seperate api
+    pasteImageBinary:{
+        value: function(imageBlob){
+            var element, self = this,
+                fileType = imageBlob.type;
+
+            element = this.application.ninja.ioMediator.createFileFromBinary(imageBlob, {"addFileToStage" : self.addImageElement.bind(self)});
+
+            return element;
+
+        }
+    },
+
+    addImageElement:{
+        value: function(status){
+            var save = status.save,
+                fileName = status.filename,
+                url = status.url,
+                fileType = status.fileType,
+                element, rules, self = this;
+
+            if (save && save.success && save.status === 201) {
+                //
+                if (fileType.indexOf('svg') !== -1) {
+                    element = document.application.njUtils.make('embed', null, this.application.ninja.currentDocument);//TODO: Verify this is proper
+                    element.type = 'image/svg+xml';
+                    element.src = url+'/'+fileName;
+                } else {
+                    element = document.application.njUtils.make('image', null, this.application.ninja.currentDocument);
+                    element.src = url+'/'+fileName;
+                }
+                //Adding element once it is loaded
+                element.onload = function () {
+                    element.onload = null;
+                    self.application.ninja.elementMediator.addElements(element, rules, true);
+                };
+                //Setting rules of element
+                rules = {
+                    'position': 'absolute',
+                    'top' : '100px',
+                    'left' : '100px'
+                };
+                //
+                self.application.ninja.elementMediator.addElements(element, rules, false);
+            } else {
+                //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT
+            }
+
+            return element;
+        }
+    },
+
+    //paste from external applicaitons
+    pasteHtml:{//todo: change to pasteNinja, pasteHTML, etc
+        value: function(htmlData, textData){
+            var i=0, j=0,
+                pasteDataObject=null,
+                pastedElements = [],
+                node = null, nodeList = null,
+                styles = null,
+                divWrapper = null,
+                spanWrapper = null,
+                metaEl = null,
+                self = this;
+
+            if(htmlData){
+
+                //TODO: cleanse HTML
+
+                htmlData.replace(/[<script]/g," ");
+
+                this.application.ninja.selectedElements.length = 0;
+                NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
+
+                try{
+                    nodeList = ClipboardUtil.deserializeHtmlString(htmlData);//this removes html and body tags
+                }
+                catch(e){
+                    console.log(""+e.stack);
+                }
+
+                for(i=0; i < nodeList.length; i++){
+                    if(nodeList[i].tagName === "META") {
+                        nodeList[i] = null;
+                    }
+                    else if (nodeList[i].tagName === "CANVAS"){
+                        //can't paste external canvas for lack of all metadata
+                        nodeList[i] = null;
+                    }
+                    else if((nodeList[i].nodeType === 3) || (nodeList[i].tagName === "A")){
+                        node = nodeList[i].cloneNode(true);
+
+                        divWrapper = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+                        spanWrapper = document.application.njUtils.make("span", null, this.application.ninja.currentDocument);
+                        spanWrapper.appendChild(node);
+                        divWrapper.appendChild(spanWrapper);
+                        styles = {"position":"absolute", "top":"100px", "left":"100px"};
+
+                        this.pastePositioned(divWrapper, styles);
+
+                        nodeList[i] = null;
+                        pastedElements.push(divWrapper);
+
+                    }else if(nodeList[i].tagName === "SPAN"){
+                        node = nodeList[i].cloneNode(true);
+
+                        divWrapper = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+                        divWrapper.appendChild(node);
+                        styles =  {"position":"absolute", "top":"100px", "left":"100px"};