From 8592cfb89db05f0e52d8c1b8c7046e6f49e3522d Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 1 Feb 2012 00:09:27 -0800
Subject: Adding a montage framework copy for the user document

Adding a new montage copy containing the latest version of montage to use the new native widgets

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../montage-user/ui/popup/alert.reel/alert.css     |  67 +++
 .../montage-user/ui/popup/alert.reel/alert.html    | 120 +++++
 .../montage-user/ui/popup/alert.reel/alert.js      | 134 ++++++
 .../montage-user/ui/popup/confirm.reel/confirm.css |  17 +
 .../ui/popup/confirm.reel/confirm.html             | 120 +++++
 .../montage-user/ui/popup/confirm.reel/confirm.js  | 186 ++++++++
 .../ui/popup/notifier.reel/notifier.css            |  15 +
 .../ui/popup/notifier.reel/notifier.html           |  35 ++
 .../ui/popup/notifier.reel/notifier.js             | 121 +++++
 .../montage-user/ui/popup/popup.reel/popup.css     |  70 +++
 .../montage-user/ui/popup/popup.reel/popup.html    |  54 +++
 .../montage-user/ui/popup/popup.reel/popup.js      | 519 +++++++++++++++++++++
 12 files changed, 1458 insertions(+)
 create mode 100755 node_modules/montage-user/ui/popup/alert.reel/alert.css
 create mode 100755 node_modules/montage-user/ui/popup/alert.reel/alert.html
 create mode 100755 node_modules/montage-user/ui/popup/alert.reel/alert.js
 create mode 100755 node_modules/montage-user/ui/popup/confirm.reel/confirm.css
 create mode 100755 node_modules/montage-user/ui/popup/confirm.reel/confirm.html
 create mode 100755 node_modules/montage-user/ui/popup/confirm.reel/confirm.js
 create mode 100755 node_modules/montage-user/ui/popup/notifier.reel/notifier.css
 create mode 100755 node_modules/montage-user/ui/popup/notifier.reel/notifier.html
 create mode 100755 node_modules/montage-user/ui/popup/notifier.reel/notifier.js
 create mode 100755 node_modules/montage-user/ui/popup/popup.reel/popup.css
 create mode 100755 node_modules/montage-user/ui/popup/popup.reel/popup.html
 create mode 100755 node_modules/montage-user/ui/popup/popup.reel/popup.js

(limited to 'node_modules/montage-user/ui/popup')

diff --git a/node_modules/montage-user/ui/popup/alert.reel/alert.css b/node_modules/montage-user/ui/popup/alert.reel/alert.css
new file mode 100755
index 00000000..70df5033
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/alert.reel/alert.css
@@ -0,0 +1,67 @@
+/* <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> */
+
+.montage-alert-dialog {
+    min-width: 300px;
+}
+.montage-alert-dialog .montage-alert-content {
+    font-size: 1.3em;
+    padding: 15px;
+
+}
+.montage-alert-dialog .montage-alert-actions {
+    float: right;
+}
+
+/*
+
+.montage-alert-dialog {
+    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
+    background-color: #333;
+    border: 1px solid #333;
+    border-radius: 5px;
+    margin: 0;
+    padding: 0px 3px;
+}
+
+.montage-alert-dialog .header {
+    height: 25px;
+    color: #fff;
+}
+
+.montage-alert-dialog .header h4 {
+    margin: 10px 0;
+    font-weight: normal;
+}
+
+.montage-alert-dialog .content {
+    text-align: center;
+    margin: 5px 0;
+    background-color: #e6e6e6;
+    padding: 10px;
+}
+
+.montage-alert-dialog .msg-container {
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+}
+
+.montage-alert-dialog .msg {
+    font-size: 18pt;
+    font-weight: normal;
+}
+
+.montage-alert-dialog .msg-detail {
+    font-size: 12pt;
+    font-weight: normal;
+    color: #cccccc;
+}
+
+.montage-alert-dialog .action-container {
+    padding: 10px 0;
+}
+*/
+
diff --git a/node_modules/montage-user/ui/popup/alert.reel/alert.html b/node_modules/montage-user/ui/popup/alert.reel/alert.html
new file mode 100755
index 00000000..cb4ef751
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/alert.reel/alert.html
@@ -0,0 +1,120 @@
+<!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="alert.css">
+        <script type="text/montage-serialization">
+{
+    "dynamictext1": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "title"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "title",
+                "oneway": true
+            }
+        }
+    },
+    "dynamictext2": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "msg"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "msg",
+                "oneway": true
+            }
+        }
+    },
+    "dynamictext3": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "msg-detail"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "details",
+                "oneway": true
+            }
+        }
+    },
+    "button1": {
+        "module": "montage/ui/bluemoon/button.reel",
+        "name": "Button",
+        "properties": {
+            "identifier": "Ok",
+            "element": {
+                "#": "action-ok"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "owner"
+                }
+            }
+        ]
+    },
+    "owner": {
+        "module": "montage/ui/popup/alert.reel",
+        "name": "Alert",
+        "properties": {
+            "element": {
+                "#": "alert-container"
+            }
+        }
+    }
+}
+    </script>
+
+
+    </head>
+    <body>
+        <div id="alert-container" class="montage-alert-dialog">
+
+            <div class="montage-popup-header">
+                <h3 id="title" class="title"></h3>
+            </div>
+
+            <div class="montage-alert-content">
+                    <div id="msg" class="msg"></div>
+                    <div id="msg-detail" class="msg-detail"></div>
+            </div>
+
+            <div class="montage-popup-footer">
+                <div class="montage-alert-actions">
+                    <button class="submit" id="action-ok">OK</button>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+
+        </div>
+    </body>
+</html>
diff --git a/node_modules/montage-user/ui/popup/alert.reel/alert.js b/node_modules/montage-user/ui/popup/alert.reel/alert.js
new file mode 100755
index 00000000..54b854a4
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/alert.reel/alert.js
@@ -0,0 +1,134 @@
+/* <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> */
+
+/**
+    @module "montage/ui/popup/alert.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+    @requires "montage/ui/popup/popup.reel"
+*/
+
+var Montage = require("montage").Montage;
+var Component = require("ui/component").Component;
+var Popup = require("ui/popup/popup.reel").Popup;
+
+/**
+ @class module:"montage/ui/popup/alert.reel".Alert
+ @extends module:montage/ui/component.Component
+ */
+
+var Alert = exports.Alert = Montage.create(Component, {
+    title: {
+        value: 'Alert'
+    },
+/**
+        Description TODO
+        @type {Property}
+        @default {String} ''
+    */
+    msg: {
+        value: ''
+    },
+/**
+        Description TODO
+        @type {Property}
+        @default {String} ''
+    */
+    details: {
+        value: ''
+    },
+/**
+  Description TODO
+  @private
+*/
+    _popup: {
+        value: null
+    },
+/**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    popup: {
+        set: function(value) {
+            this._popup = value;
+        },
+        get: function() {
+            return this._popup;
+        }
+    },
+
+    okCallback: {value: null},
+
+    prepareForDraw: {
+        value: function() {
+            this.element.addEventListener("keyup", this, false);
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} evt The event keyCode.
+    */
+    handleKeyup: {
+        value: function(evt) {
+            if (evt.keyCode == 13 /*Enter*/ ||
+                    evt.keyCode == 27 /*Escape*/) {
+
+                this.handleOkAction(evt);
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} evt The event keyCode.
+    */
+    handleOkAction: {
+        value: function(evt) {
+            if(this.okCallback) {
+                this.okCallback.call(this, evt);
+            }
+            var anEvent = document.createEvent("CustomEvent");
+            anEvent.initCustomEvent("montage_alert_ok", true, true, null);
+
+            this.dispatchEvent(anEvent);
+            this.popup.hide();
+        }
+    },
+
+    // Static method to show an Alert dialog
+    /**
+     Displays an Alert dialog with a OK button.
+     @function
+     @param {String} msg A message to display in the dialog.
+     @param {Function} okCallback Function that's invoked when the user clicks OK
+     @example
+     ...
+     */
+    show: {
+        value: function(msg, okCallback) {
+            var popup = this.application._alertPopup, alert;
+            if(!popup) {
+                popup = Popup.create();
+                this.popup = popup;
+
+                popup.type = 'alert';
+                popup.title = 'Message';
+                popup.modal = true;
+                this.application._alertPopup = popup;
+
+                alert = Alert.create();
+                popup.content = alert;
+            }
+            alert = popup.content;
+            alert.msg = msg;
+            alert.okCallback = okCallback || null;
+            popup.show();
+        }
+    }
+});
+
diff --git a/node_modules/montage-user/ui/popup/confirm.reel/confirm.css b/node_modules/montage-user/ui/popup/confirm.reel/confirm.css
new file mode 100755
index 00000000..959cf719
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/confirm.reel/confirm.css
@@ -0,0 +1,17 @@
+/* <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> */
+
+ .montage-confirm-dialog {
+     min-width: 300px;
+ }
+ .montage-confirm-dialog .montage-confirm-content {
+     font-size: 1.3em;
+     padding: 15px;
+ }
+ .montage-confirm-dialog .montage-confirm-actions {
+     float: right;
+ }
+
diff --git a/node_modules/montage-user/ui/popup/confirm.reel/confirm.html b/node_modules/montage-user/ui/popup/confirm.reel/confirm.html
new file mode 100755
index 00000000..63b521bd
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/confirm.reel/confirm.html
@@ -0,0 +1,120 @@
+<!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="confirm.css">
+        <script type="text/montage-serialization">
+{
+    "dynamictext1": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "msg"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "msg",
+                "oneway": true
+            }
+        }
+    },
+    "button1": {
+        "module": "montage/ui/bluemoon/button.reel",
+        "name": "Button",
+        "properties": {
+            "identifier": "Ok",
+            "element": {
+                "#": "action-ok"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "okLabel",
+                "oneway": true
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "owner"
+                }
+            }
+        ]
+    },
+    "button2": {
+        "module": "montage/ui/bluemoon/button.reel",
+        "name": "Button",
+        "properties": {
+            "identifier": "Cancel",
+            "element": {
+                "#": "action-cancel"
+            }
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "cancelLabel",
+                "oneway": true
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "owner"
+                }
+            }
+        ]
+    },
+    "owner": {
+        "module": "montage/ui/popup/confirm.reel",
+        "name": "Confirm",
+        "properties": {
+            "element": {
+                "#": "confirm-container"
+            }
+        }
+    }
+}
+    </script>
+
+
+    </head>
+    <body>
+        <div id="confirm-container" class="montage-confirm-dialog">
+
+            <div class="montage-popup-header">
+                <h3 id="title" class="title">Confirmation</h3>
+            </div>
+
+            <div class="montage-confirm-content">
+                    <div id="msg" class="msg"></div>
+                    <div id="msg-detail" class="msg-detail"></div>
+            </div>
+
+            <div class="montage-popup-footer">
+                <div class="montage-confirm-actions">
+                    <button class="cancel" id="action-cancel">Cancel</button>
+                    <button class="submit" id="action-ok">OK</button>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/node_modules/montage-user/ui/popup/confirm.reel/confirm.js b/node_modules/montage-user/ui/popup/confirm.reel/confirm.js
new file mode 100755
index 00000000..7e186e29
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/confirm.reel/confirm.js
@@ -0,0 +1,186 @@
+/* <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> */
+
+/**
+    @module "montage/ui/popup/confirm.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+    @requires "montage/ui/popup/popup.reel"
+*/
+
+var Montage = require("montage").Montage;
+var Component = require("ui/component").Component;
+var Popup = require("ui/popup/popup.reel").Popup;
+
+/**
+ @class module:"montage/ui/popup/confirm.reel".Confirm
+ @extends module:montage/ui/component.Component
+ */
+
+var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"montage/ui/popup/confirm.reel".Confirm# */ {
+    hasTemplate: {value: true},
+
+    title: {
+        value: 'Confirm'
+    },
+    /**
+        Text of message to display on the confirm popup
+        @type {Property}
+        @default {String} 'Are you sure?'
+    */
+    msg: {
+        value: 'Are you sure?'
+    },
+
+    /**
+        Text to display on the OK button
+        @type {Property}
+        @default {String} 'OK'
+    */
+    okLabel: {
+        value: 'OK'
+    },
+
+    /**
+        Text to display on the Cancel button
+        @type {Property}
+        @default {String} 'Cancel'
+    */
+    cancelLabel: {
+        value: 'Cancel'
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _popup: {
+        value: null
+    },
+/**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    popup: {
+        set: function(value) {
+            this._popup = value;
+        },
+        get: function() {
+            return this._popup;
+        }
+    },
+
+    okCallback: {value: null},
+    cancelCallback: {value: null},
+
+    prepareForDraw: {
+        value: function() {
+            this.element.addEventListener("keyup", this, false);
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    draw: {
+        value: function() {
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} evt The event keyCode.
+    */
+    handleKeyup: {
+        value: function(evt) {
+            if (evt.keyCode == 13 /*Enter*/) {
+                this.handleOkAction(evt);
+            } else if (evt.keyCode == 27 /*Escape*/) {
+                this.handleCancelAction(evt);
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} evt The event keyCode.
+    */
+    handleOkAction: {
+        value: function(evt) {
+            if(this.okCallback) {
+                this.okCallback.call(this, evt);
+            }
+            var anEvent = document.createEvent("CustomEvent");
+            anEvent.initCustomEvent("montage_confirm_ok", true, true);
+            this.dispatchEvent(anEvent);
+
+            this.popup.hide();
+        }
+    },
+ /**
+    Description TODO
+    @function
+    @param {Event} evt The event keyCode.
+    */
+    handleCancelAction: {
+        value: function(evt) {
+            if(this.cancelCallback) {
+                this.cancelCallback.call(this, evt);
+            }
+            var anEvent = document.createEvent("CustomEvent");
+            anEvent.initCustomEvent("montage_confirm_cancel", true, true);
+            this.dispatchEvent(anEvent);
+
+            this.popup.hide();
+        }
+    },
+
+    // Static method to show a Confirmation dialog
+    /**
+     Displays a confirm dialog with OK and Cancel buttons.
+     @function
+     @param {String} msg A message to display in the dialog.
+     @param {Function} okCallback Function that's invoked when the user clicks OK
+     @param {Function} cancelCallback Function that's invoked if the user clicks Cancel.
+     @example
+     ...
+     */
+    show: {
+        value: function(options, okCallback, cancelCallback) {
+            var popup = this.application._confirmPopup, confirm;
+            if(!popup) {
+                popup = Popup.create();
+                this.popup = popup;
+
+                popup.type = 'confirm';
+                popup.title = 'Confirmation';
+                popup.modal = true;
+                this.application._confirmPopup = popup;
+
+                confirm = Confirm.create();
+                popup.content = confirm;
+            }
+
+            confirm = popup.content;
+
+            if (typeof(options) === "string") {
+                confirm.msg = options;
+                confirm.okLabel = "OK";
+                confirm.cancelLabel = "Cancel";
+            } else {
+                confirm.msg = options.message;
+                confirm.okLabel = options.okLabel || "OK";
+                confirm.cancelLabel = options.cancelLabel || "Cancel";
+            }
+
+            confirm.okCallback = okCallback || null;
+            confirm.cancelCallback = cancelCallback || null;
+
+            popup.show();
+        }
+    }
+});
diff --git a/node_modules/montage-user/ui/popup/notifier.reel/notifier.css b/node_modules/montage-user/ui/popup/notifier.reel/notifier.css
new file mode 100755
index 00000000..fe44ed89
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/notifier.reel/notifier.css
@@ -0,0 +1,15 @@
+/* <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> */
+
+.montage-notifier {
+    background-color: #333; /*#FFF1A8*/;
+    color: #fff;
+}
+
+.montage-notifier .montage-notifier-msg {
+    padding: 10px 20px;
+    text-overflow: ellipsis;
+}
diff --git a/node_modules/montage-user/ui/popup/notifier.reel/notifier.html b/node_modules/montage-user/ui/popup/notifier.reel/notifier.html
new file mode 100755
index 00000000..71cd2608
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/notifier.reel/notifier.html
@@ -0,0 +1,35 @@
+<!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="notifier.css">
+        <script type="text/montage-serialization">
+{
+    "owner": {
+        "module": "montage/ui/popup/notifier.reel",
+        "name": "Notifier",
+        "properties": {
+            "element": {
+                "#": "notifier-main"
+            },
+            "_msgEl": {
+                "#": "notifier-msg"
+            }
+        }
+    }
+}
+    </script>
+
+
+    </head>
+    <body>
+        <div id="notifier-main" class="montage-notifier">
+            <div id="notifier-msg" class="montage-notifier-msg"></div>
+        </div>
+    </body>
+</html>
diff --git a/node_modules/montage-user/ui/popup/notifier.reel/notifier.js b/node_modules/montage-user/ui/popup/notifier.reel/notifier.js
new file mode 100755
index 00000000..6346cd19
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/notifier.reel/notifier.js
@@ -0,0 +1,121 @@
+/* <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> */
+
+/**
+    @module "montage/ui/popup/notifier.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+    @requires "montage/ui/popup/popup.reel"
+*/
+var Montage = require("montage").Montage;
+var Component = require("ui/component").Component;
+var Popup = require("ui/popup/popup.reel").Popup;
+
+/**
+ @class module:"montage/ui/popup/notifier.reel".Notifier
+ @extends module:montage/ui/component.Component
+ */
+
+var Notifier = exports.Notifier = Montage.create(Component, /** @lends module:"montage/ui/popup/notifier.reel".Notifier# */ {
+    hasTemplate: {value: true},
+
+    _msgEl: {value: null},
+/**
+  Description TODO
+  @private
+*/
+    _msg: {value: null},
+/**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    msg: {
+        get: function() {
+            return this._msg;
+        },
+        set: function(value) {
+            if (this._msg !== value) {
+                this._msg = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+/**
+        Description TODO
+        @type {Property}
+        @default {String} null
+    */
+    details: {
+        value: null
+    },
+/**
+    Description TODO
+    @function
+    */
+    draw: {
+        value: function() {
+            this._msgEl.textContent = this.msg;
+        }
+    },
+
+    // Static method to show a Notify dialog
+     /**
+      Displays a small Growl-like notification in a pop-up dialog. The notification can have a timeout that determines how long it appears before being hidden automatically.
+      You can also specify the location of the notification in the browser window (top-left corner, by default).
+      @function
+      @param {String} msg A message to display in the notification.
+      @param {Number} timeout The number of milliseconds to display the notification before it is hidden.
+      @param {Object} Contains two properties named top and left that specify top and left coordinates of the notifiction. By default, notifications are positioned at the top-left corner of the window.
+      */
+    show: {
+        value: function(msg, timeout, position) {
+            var popup = this.application._notifyPopup, notifier;
+            if(!popup) {
+                popup = Popup.create();
+                this.popup = popup;
+                popup.type = 'notify';
+                popup.boxed = false;
+                this.application._notifyPopup = popup;
+
+                notifier = Notifier.create();
+                popup.content = notifier;
+            }
+            notifier = popup.content;
+            //popup.modal = !!modal;
+            notifier.msg = msg;
+
+            if (!position) {
+                // position at the top by default
+                var viewportWidth = window.innerWidth;
+                position = {
+                    top: 1,
+                    right: 10
+                };
+            }
+            popup.position = position;
+
+            if(timeout) {
+                timeout = parseInt(timeout, 10) || 3000;
+                popup.autoDismiss = timeout;
+            }
+
+            popup.show();
+
+
+        }
+    },
+
+    hide: {
+        value: function() {
+            var popup = this.application._notifyPopup;
+            if(popup) {
+                popup.hide();
+            }
+        }
+    }
+
+});
diff --git a/node_modules/montage-user/ui/popup/popup.reel/popup.css b/node_modules/montage-user/ui/popup/popup.reel/popup.css
new file mode 100755
index 00000000..40a8d602
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/popup.reel/popup.css
@@ -0,0 +1,70 @@
+/* <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> */
+/* these need to be moved to montage.css when that is created */
+.montage-hide {
+    display: none;
+}
+.clearfix:after {
+	visibility: hidden;
+	display: block;
+	font-size: 0;
+	content: " ";
+	clear: both;
+	height: 0;
+}
+
+
+.montage-off-left {
+    position: absolute;
+    top: 0px;
+    left: -10000px;
+}
+
+.montage-popup-modal-mask {
+    position: fixed;
+    background-color: #000;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.8;
+    z-index: 9000;
+}
+
+.montage-popup-container {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 3px solid #000;
+
+}
+
+.montage-popup-noborder {
+    border: 0px;
+}
+
+.montage-modal {
+    border: 3px solid #ccc;
+}
+
+.montage-popup-container *:focus {
+    outline: none;
+}
+
+.montage-popup-wrapper {
+
+}
+
+.montage-popup-header {
+    background-color: whitesmoke;
+    border-bottom: 1px solid #eee;
+    padding: 5px 15px;
+}
+.montage-popup-footer {
+    background-color: whitesmoke;
+    padding: 10px 15px;
+    border-top: 1px solid #ddd;
+
+}
diff --git a/node_modules/montage-user/ui/popup/popup.reel/popup.html b/node_modules/montage-user/ui/popup/popup.reel/popup.html
new file mode 100755
index 00000000..69bf075c
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/popup.reel/popup.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="popup.css">
+        <script type="text/montage-serialization">
+{
+    "slot1": {
+        "module": "montage/ui/slot.reel",
+        "name": "Slot",
+        "properties": {
+            "element": {
+                "#": "popup-content"
+            }
+        }
+    },
+    "owner": {
+        "module": "montage/ui/popup/popup.reel",
+        "name": "Popup",
+        "properties": {
+            "element": {
+                "#": "popup-container"
+            },
+            "slot": {
+                "@": "slot1"
+            },
+            "contentEl": {
+                "#": "popup-content"
+            },
+            "containerEl": {
+                "#": "popup-wrapper"
+            }
+        }
+    }
+}
+    </script>
+
+    </head>
+    <body>
+        <div id="popup-container" class="montage-hide montage-popup-container">
+            <div id="popup-wrapper" class="montage-popup-tooltip montage-popup-wrapper montage-popup-border">
+                <div id="popup-content" class="montage-popup-content"></div>
+            </div>
+        </div>
+
+
+
+    </body>
+</html>
diff --git a/node_modules/montage-user/ui/popup/popup.reel/popup.js b/node_modules/montage-user/ui/popup/popup.reel/popup.js
new file mode 100755
index 00000000..5c6f167e
--- /dev/null
+++ b/node_modules/montage-user/ui/popup/popup.reel/popup.js
@@ -0,0 +1,519 @@
+/* <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> */
+
+/**
+	@module "montage/ui/popup/popup.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+*/
+var Montage = require("montage").Montage,
+    Component = require("ui/component").Component;
+
+/**
+    @class module:"montage/ui/popup.reel".Popup
+    @extends module:montage/ui/component.Component
+*/
+
+var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"module/ui/popup/popup.reel".Popup */
+
+    hasTemplate: {value: true},
+
+    // anchor element to which this popup must be anchored to
+    anchor: {value: null},
+
+    // A Delegate to control positioning (and other features, in future) of the popup in a custom manner
+    delegate: {value: null},
+
+    contentEl: {
+        value: null
+    },
+/**
+        Description TODO
+        @type {Property}
+        @default {Container} null
+    */
+    containerEl: {
+        value: null
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _pointer: {
+        value: true
+    },
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} true
+    */
+    pointer: {
+        get: function() {
+            return this._pointer;
+        },
+        set: function(value) {
+            if (this._pointer !== value) {
+                this._pointer = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _boxed: {
+        value: true
+    },
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} true
+    */
+    boxed: {
+        get: function() {
+            return this._boxed;
+        },
+        set: function(value) {
+            if (this._boxed !== value) {
+                this._boxed = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _slot: {value: null},
+/**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    slot: {
+        get: function() {
+            return this._slot;
+        },
+        set: function(val) {
+            this._slot = val;
+            if (this.content) {
+                this._slot.content = this.content;
+            }
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _content: {value: null},
+/**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    content: {
+        serializable: true,
+        get: function() {
+            return this._content;
+        },
+        set: function(value) {
+            if (this._content !== value && this.slot) {
+                this.slot.content = value;
+            }
+            this._content = value;
+            // set the popup property of the content.
+            this._content.popup = this;
+            this.needsDraw = true;
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _modal: { value: false },
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} false
+    */
+    modal: {
+        get: function() {
+            return this._modal;
+        },
+        set: function(value) {
+            // force this to be a boolean
+            value = !!value;
+
+            if (this._modal !== value) {
+                this._modal = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    // An Object wtih values {top, left}. Set it only if the popup should display at a
+    // given location instead of anchoring it to a anchor element or at the center of the screen.
+    _position: {value: null},
+    position: {
+        get: function() {
+            return this._position;
+        },
+        set: function(pos) {
+            this._position = pos;
+            //this.needsDraw = true;
+        }
+    },
+
+    autoDismiss: { value: 0 },
+
+    _displayed: { value: false },
+    displayed: {
+        get: function() {
+            return this._displayed;
+        },
+        set: function(value) {
+            if (this._displayed !== value) {
+                this.needsDraw = true;
+            }
+            this._displayed = value;
+
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    prepareForDraw: {
+        value: function() {
+
+        }
+    },
+
+    _popupSlot: {
+        value: null
+    },
+
+    _modalDialogMask: {
+        value: null
+    },
+
+
+    /**
+     @private
+     */
+    _getPosition: {
+        value: function(obj) {
+            var curleft = 0, curtop = 0, curHt = 0, curWd = 0;
+            if (obj.offsetParent) {
+                do {
+                    curleft += obj.offsetLeft;
+                    curtop += obj.offsetTop;
+                    curHt += obj.offsetHeight;
+                    curWd += obj.offsetWidth;
+                } while ((obj = obj.offsetParent));
+            }
+            return [curleft,curtop, curHt, curWd];
+
+        }
+    },
+
+    _calculatePosition: {
+        value: function() {
+            var pos, delegate = this.delegate, anchor = this.anchor, type = (this.type || 'custom');
+
+            if(delegate && (typeof delegate.positionPopup === 'function')) {
+                var anchorPosition;
+                if(anchor) {
+                    anchorPosition = this._getPosition(anchor);
+                }
+                pos = delegate.positionPopup(this, anchor, anchorPosition);
+            } else {
+                // @todo - advanced positioning support
+                var $el = this.contentEl || this.content.element;
+                var elHeight = parseFloat($el.style.height || 0) || $el.offsetHeight || 0;
+                var elWidth = parseFloat($el.style.width || 0) || $el.offsetWidth || 0;
+
+                // @todo - to get the window from application
+                var viewportHeight = window.innerHeight;
+                var viewportWidth = window.innerWidth;
+
+                if (anchor) {
+                    if (anchor.nodeName) {
+                        // if anchor is an element
+                        var elPosition = this._getPosition(anchor);
+                        var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0;
+                        var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0;
+
+                        pos = {
+                            top: elPosition[1] + tgtHeight + 20 /* pointer */,
+                            left: elPosition[0] + (tgtWidth / 2) - (elWidth / 2)
+                        };
+
+                        if (pos.left < 0) {
+                            pos.left = elPosition[0];
+                            this._showHidePointer(false);
+                            // dont show the pointer - @todo - support pointer arrow at different parts of the popup
+                        }
+                    } else {
+                        // anchor is absolute position {top, left}
+                        pos = anchor;
+                    }
+                } else {
+                    // position it at top or center
+                    // for now, just show it at center
+                    pos = {
+                        top: (viewportHeight / 2 - (elHeight / 2)),
+                        left: (viewportWidth / 2 - (elWidth / 2))
+                    };
+                }
+            }
+            return pos;
+        }
+    },
+
+    _positionPopup: {
+        value: function() {
+            //console.log('--> position popup');
+            var pos = this.position;
+            var popupSlot = this._popupSlot;
+
+            if(pos) {
+                if (pos.top) {
+                    popupSlot.element.style.top = pos.top + 'px';
+                }
+                if (pos.left) {
+                    popupSlot.element.style.left = pos.left + 'px';
+                }
+                if (pos.right) {
+                    popupSlot.element.style.right = pos.right + 'px';
+                }
+                if (pos.bottom) {
+                    popupSlot.element.style.bottom = pos.bottom + 'px';
+                }
+            }
+        }
+    },
+
+    _createModalMask: {
+        value: function() {
+            var el = document.createElement('div');
+            el.classList.add('montage-popup-modal-mask');
+            el.style['z-index'] = 9000;
+            el.classList.add('montage-hide');
+            document.body.appendChild(el);
+            return el;
+        }
+    },
+
+    _showHidePointer: {
+        value: function(showTip) {
+        }
+    },
+
+    _addEventListeners: {
+        value: function() {
+            if (window.Touch) {
+                this.element.ownerDocument.addEventListener('touchstart', this, false);
+            } else {
+                this.element.ownerDocument.addEventListener('mousedown', this, false);
+                this.element.ownerDocument.addEventListener('keyup', this, false);
+            }
+            window.addEventListener('resize', this);
+        }
+    },
+
+    _removeEventListeners: {
+        value: function() {
+            if (window.Touch) {
+                this.element.ownerDocument.removeEventListener('touchstart', this, false);
+            } else {
+                this.element.ownerDocument.removeEventListener('mousedown', this, false);
+                this.element.ownerDocument.removeEventListener('keyup', this, false);
+            }
+            window.removeEventListener('resize', this);
+        }
+    },
+
+    show: {
+        value: function() {
+            var type = this.type || "custom",
+                self = this;
+            this.application.getPopupSlot(type, this, function(slot) {
+                self._popupSlot = slot;
+                self.displayed = true;
+                self._addEventListeners();
+            });
+        }
+    },
+
+    hide: {
+        value: function() {
+            this._removeEventListeners();
+
+            var type = this.type || "custom",
+                self = this;
+            this.application.getPopupSlot(type, null, function() {
+                self.displayed = false;
+            });
+        }
+    },
+
+
+    draw: {
+        value: function() {
+            if (this.displayed) {
+                // custom, alert, confirm, notify
+                // only one popup of each type can be displayed at the same time
+                // kishore - does the above restriction make sense ? should we restrict it ?
+
+                if(this.modal === true) {
+                    this._modalDialogMask = document.querySelector('.montage-popup-modal-mask');
+                    this._modalDialogMask = this._modalDialogMask || this._createModalMask();
+                    this.element.classList.add('montage-modal');
+                } else {
+                    this.element.classList.remove('montage-modal');
+                }
+
+                // @todo - positioning should happen inside the draw. Looks like this is only possible
+                // with a double draw where we calculate the position on didDraw and position it in draw().
+                // For the first release, we position inside the didDraw
+                //this._positionPopup();
+
+                this.element.classList.remove('montage-hide');
+                this.content.element.style.display = 'block';
+                this.content.element.classList.remove('montage-hide');
+                // TODO do we want the panel to be focusable?
+                // this.content.element.setAttribute("tabindex", "0"); // Make the alert focusable
+
+                if (this.autoDismiss) {
+                    var self = this;
+                    setTimeout(function() {
+                        self.hide();
+                    }, this.autoDismiss);
+                }
+            } else {
+                if (!this.element.classList.contains('montage-hide')) {
+                    this.element.classList.add('montage-hide');
+                }
+                this.content.element.classList.add('montage-hide');
+                if(this._popupSlot) {
+                    this._popupSlot.content = null;
+                }
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    didDraw: {
+        value: function() {
+            if (this._displayed) {
+                this.content.element.focus();
+                if(this.modal === true) {
+                    this._modalDialogMask.classList.remove('montage-hide');
+                }
+
+                this.position = this.position || this._calculatePosition();
+                this._positionPopup();
+
+            } else {
+                if(this.modal === true) {
+                    this._modalDialogMask.classList.add('montage-hide');
+                }
+            }
+            // kishore: invoking this event in didDraw as we need the dimensions of the content.
+            // Inside the draw(), the display is set to none at the top level and hence
+            // offsetWidth and Height are always 0
+            var evt = document.createEvent("CustomEvent");
+            evt.initCustomEvent((this._displayed === true ? 'show' : 'hide'), true, true, this);
+            this.dispatchEvent(evt);
+
+        }
+    },
+
+    getZIndex: {
+        value: function(elem) {
+
+            var position, value, zIndex;
+            while (elem && elem !== document) {
+                position = elem.style.position;
+                if (position === "absolute" || position === "relative" || position === "fixed") {
+                    // webkit returns a string for zindex value and "" if zindex is not available
+                    zIndex = elem.style['z-index'];
+                    value = parseInt(zIndex, 10);
+                    if (!isNaN(value) && value !== 0) {
+                        return value;
+                    }
+                }
+                elem = elem.parentNode;
+            }
+            return 0;
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _handleTouchMouseup: {
+        value: function(event) {
+            var targetzIndex = this.getZIndex(event.target),
+                zIndex = this.getZIndex(this.element);
+
+            if (this.displayed === true && targetzIndex < zIndex) {
+                if (this.modal === true) {
+
+                } else {
+                    // hide the dialog when user clicks outside it
+                    this.displayed = false;
+                }
+            }
+        }
+    },
+
+    _timeoutId: {value: null},
+    handleResize: {
+        value: function(e) {
+            //console.log('window resize');
+            var self = this;
+            if(this.displayed === true) {
+                // an optimization to call positionPopup fewer times
+                window.clearTimeout(this._timeoutId);
+                this._timeoutId = setTimeout(function() {
+                    //self._positionPopup();
+                    self.position = self._calculatePosition();
+                    self._positionPopup();
+                }, 100);
+            }
+         }
+     },
+     handleMousedown: {
+         value: function(event) {
+            this._handleTouchMouseup(event);
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} event The event.
+    */
+    handleTouchstart: {
+        value: function(event) {
+            this._handleTouchMouseup(event);
+        }
+    },
+    handleKeyup: {
+        value: function(e) {
+            // default handling of the keyup event. Content inside the popup could
+            // handle the event optionally for custom behavior
+            if(this.displayed === true && !this.modal && e.keyCode === 27 /* ESC key */) {
+               this.hide();
+            }
+        }
+    }
+});
-- 
cgit v1.2.3