3 files changed, 191 insertions, 15 deletions

diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js
new file mode 100644
index 00000000..259d916e
--- /dev/null
+++ b/js/controllers/clipboard-controller.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,
+    ElementsClipboardAgent =         require("js/clipboard/internal-ops/elements-clipboard-agent").ElementsClipboardAgent,
+    ExternalAppsClipboardAgent= require("js/clipboard/external-apps-clipboard-agent").ExternalAppsClipboardAgent;
+
+var ClipboardController = exports.ClipboardController = Montage.create(Component, {
+
+    deserializedFromTemplate: {
+        value: function() {
+            document.body.addEventListener("copy", this, false);
+            document.body.addEventListener("cut", this, false);
+            document.body.addEventListener("paste", this, false);
+
+            //ninja menu events
+            this.eventManager.addEventListener("executeCut", this, false);
+            this.eventManager.addEventListener("executeCopy", this, false);
+            this.eventManager.addEventListener("executePaste", this, false);
+
+        }
+    },
+
+    clipboardContext:{
+        value : "stage" /* cleanup: formulate better context representation */
+    },
+
+    operationsAgent:{//appropriate agent instant required for execution of cut/copy/paste
+        value: null
+    },
+
+    handleExecuteCopy:{
+        value: function(){document.execCommand('copy',false,null);}
+    },
+
+    handleExecuteCut:{
+        value: function(){document.execCommand('cut',false,null);}
+    },
+
+    handleExecutePaste:{
+        value: function(){document.execCommand('paste',false,null);}
+    },
+
+    handleCopy:{
+        value:function(clipboardEvent){
+            if(!this.application.ninja.currentDocument
+                || (this.application.ninja.currentDocument && this.application.ninja.currentDocument.currentView === "code")){
+
+                return;
+            }//for design view only
+
+            // Don't do anything if an input or other control is focused
+            if(document.activeElement.nodeName !== "BODY") {
+                return;
+            }
+
+            if(this.clipboardContext === "stage"){
+                ElementsClipboardAgent.copy(clipboardEvent);
+            }
+
+            clipboardEvent.preventDefault();
+        }
+    },
+
+    handleCut:{
+        value:function(clipboardEvent){
+            if(this.application.ninja.currentDocument.currentView === "code") return;
+
+            // Don't do anything if an input or other control is focused
+            if(document.activeElement.nodeName !== "BODY") {
+                return;
+            }
+
+            if(this.clipboardContext === "stage"){
+                ElementsClipboardAgent.cut(clipboardEvent);
+            }
+
+            clipboardEvent.preventDefault();
+        }
+    },
+
+    handlePaste:{
+        value:function(clipboardEvent){
+            var clipboardData = clipboardEvent.clipboardData,
+                ninjaData = clipboardData.getData("ninja");
+
+            if(!this.application.ninja.currentDocument
+                || (this.application.ninja.currentDocument && this.application.ninja.currentDocument.currentView === "code")){
+
+                return;
+            }//for design view only
+
+            // Don't do anything if an input or other control is focused
+            if(document.activeElement.nodeName !== "BODY") {
+                return;
+            }
+
+            //TODO: return if stage is not focussed
+
+            if(this.clipboardContext === "stage"){
+                if(ninjaData){
+                    ElementsClipboardAgent.pasteInternal();
+                }
+                else{
+                    ExternalAppsClipboardAgent.paste(clipboardEvent);
+                }
+            }
+
+            clipboardEvent.preventDefault();
+        }
+    }
+
+
+});
\ No newline at end of file
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0ca6c417..604b22d0 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -19,6 +19,14 @@ exports.BodyController = Montage.create(ElementController, {
             el.elementModel.props3D.matrix3d = mat;
             el.elementModel.props3D.perspectiveDist = dist;
 
+            if(this.application.ninja.currentDocument.model.views.design._template) {
+                if(!MathUtils.isIdentityMatrix(mat)) {
+                    el.parentNode.style.backgroundColor = "transparent";
+                } else {
+                    el.parentNode.style.removeProperty("background-color");
+                }
+            }
+
             this.application.ninja.stage.updatedStage = true;
 
             if(update3DModel) {
@@ -32,7 +40,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background" :
                 case "background-color":
-                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color"));
+                    } else {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    }
                 case "border":
                     return 0;
                 case "height":
@@ -51,7 +63,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background":
                 case "background-color":
-                    this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value);
+                    } else {
+                        this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    }
                     break;
                 case "overflow":
                 case "width":
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index a25a05df..1c1e75ed 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -426,7 +426,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                     ///// rule to the calling method
                     return {
                         useImportant   : useImportant,
-                        ruleToOverride : dominantRule
+                        ruleToOverride : dominantRule,
+                        singleTargetBackup : this._getFirstSingleTargetRule(matchedRules.slice(1), doc)
                     };
                 }
                 
@@ -674,6 +675,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                     if(sheetAIndex === sheetBIndex) {
                         ruleAIndex = this.getRuleIndex(ruleA); ruleBIndex = this.getRuleIndex(ruleB);
                         return ruleAIndex < ruleBIndex ? 1 : (ruleAIndex > ruleBIndex) ? -1 : 0;
+                    } else {
+                        return sheetAIndex < sheetBIndex ? 1 : (sheetAIndex > sheetBIndex) ? -1 : 0;
                     }
                 }
 
@@ -737,6 +740,40 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             console.error('StylesController::_getMostSpecificSelectorForElement - no matching selectors in specificity array.');
         }
     },
+
+
+    ///// Has Greater Specificity
+    ///// A method that returns true if the first argument has higher
+    ///// specificity than the second argument
+    ///// An element has to be supplied to determine which selector
+    ///// to evaluate within grouped selectors
+    hasGreaterSpecificity : {
+        value: function(rule1, rule2, element) {
+            var a = this._getMostSpecificSelectorForElement(element, rule1[this.CONST.SPECIFICITY_KEY]),
+                b = this._getMostSpecificSelectorForElement(element, rule2[this.CONST.SPECIFICITY_KEY]),
+                win = element.ownerDocument.defaultView,
+                order;
+
+              order = this.compareSpecificity(a.specificity, b.specificity);
+
+            if(order === 0) {
+                 /// Tie. Sway one way or other based on stylesheet/rule order
+                 sheetAIndex = nj.toArray(win.document.styleSheets).indexOf(rule1.parentStyleSheet);