From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001
From: Pierre Frisch
Date: Thu, 22 Dec 2011 07:25:50 -0800
Subject: First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 node_modules/montage/ui/button.reel/button.css  | 386 ++++++++++++
 node_modules/montage/ui/button.reel/button.html |  26 +
 node_modules/montage/ui/button.reel/button.js   | 741 ++++++++++++++++++++++++
 3 files changed, 1153 insertions(+)
 create mode 100755 node_modules/montage/ui/button.reel/button.css
 create mode 100755 node_modules/montage/ui/button.reel/button.html
 create mode 100755 node_modules/montage/ui/button.reel/button.js

(limited to 'node_modules/montage/ui/button.reel')

diff --git a/node_modules/montage/ui/button.reel/button.css b/node_modules/montage/ui/button.reel/button.css
new file mode 100755
index 00000000..acf938cc
--- /dev/null
+++ b/node_modules/montage/ui/button.reel/button.css
@@ -0,0 +1,386 @@
+/* <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> */
+@-webkit-keyframes montage-button-light-busy {
+    0% {
+        background-color: #ccc;
+    }
+    50% {
+        background-color: #e6e6e6;
+    }
+    100% {
+        background-color: #ccc;
+    }
+}
+@-webkit-keyframes montage-button-dark-busy {
+    0% {
+        background-color: #404040;
+        color: #a0a0a0;
+    }
+    50% {
+        background-color: #505050;
+        color: #bbb;
+    }
+    100% {
+        background-color: #404040;
+        color: #a0a0a0;
+    }
+}
+.montage-button.busy {
+    -webkit-animation-delay: 100ms !important;
+}
+
+.montage-button.text:before {
+    content: "";
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: -1px;
+    bottom: -1px;
+    border: 1px solid rgba(0,0,0,.25);
+    border-radius: 26px;
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
+}
+
+.montage-button.text {
+    outline: none;
+    position: relative;
+    left: 1px;
+    top: 1px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    display: inline-block;
+    padding: 2px 32px 0 32px;
+    height: 48px;
+    border-radius: 26px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
+    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
+    text-align: center;
+    line-height: 48px;
+    font-size: 18px;
+    color: #000;
+    -webkit-transition: background 150ms;
+}
+
+.montage-button.text:active, .montage-button.text.busy {
+    background: #ccc;
+}
+
+.montage-button.text.busy {
+    -webkit-animation: montage-button-light-busy 1.1s infinite;
+    -webkit-animation-timing-function: ease-in-out;
+    cursor: default;
+}
+
+.montage-button.text.disabled:before {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.text.disabled {
+    background: none;
+    color: #969696;
+}
+
+.montage-button.submit:before {
+    content: "";
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: -4px;
+    bottom: -4px;
+    border: 2px solid #0cbeff;
+    border-radius: 26px;
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
+}
+
+.montage-button.submit:after {
+    content: "";
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: -4px;
+    bottom: -4px;
+    border-radius: 26px;
+    -webkit-box-shadow: inset 0 1px 2px #066283, inset 0 1px 2px #066283;
+}
+
+.montage-button.submit {
+    outline: none;
+    position: relative;
+    left: 1px;
+    top: 1px;
+    margin: 2px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    display: inline-block;
+    padding: 2px 31px 0 31px;
+    height: 40px;
+    border: 1px solid #f3f3f3;
+    border-radius: 26px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
+    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
+    line-height: 40px;
+    font-size: 18px;
+    color: #0f9ed2;
+    -webkit-transition-duration: 150ms;
+    -webkit-transition-property: background, color;
+    -webkit-box-shadow: 0 1px 0 #0988b7, 0 2px 0 #0988b7, 0 -2px 0 #0988b7, -2px 0 0 #0988b7, 2px 0 0 #0988b7;
+}
+
+.montage-button.submit:active, .montage-button.submit.busy {
+    border: 1px solid #0988b7;
+    color: #666;
+    -webkit-box-shadow: 0 1px 0 #afeaff, 0 2px 0 #0cbeff, 0 -2px 0 #0cbeff, -2px 0 0 #0cbeff, 2px 0 0 #0cbeff;
+    background: #ccc;
+}
+
+.montage-button.submit.disabled:before {
+    -webkit-box-shadow: none;
+    border: 1px solid #acacac;
+}
+
+.montage-button.submit.disabled {
+    -webkit-box-shadow: none;
+    background: none;
+    color: #969696;
+    border: 1px solid transparent;
+}
+
+.montage-button.submit.disabled:after {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.submit.busy {
+    -webkit-animation: montage-button-light-busy 1.1s infinite;
+    -webkit-animation-timing-function: ease-in-out;
+    cursor: default;
+}
+
+.montage-button.cancel:before {
+    content: "";
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: -4px;
+    bottom: -4px;
+    border: 2px solid #dc4d48;
+    border-radius: 26px;
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
+}
+
+.montage-button.cancel:after {
+    content: "";
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: -4px;
+    bottom: -4px;
+    border-radius: 26px;
+    -webkit-box-shadow: inset 0 1px 2px #742b28, inset 0 1px 2px #742b28;
+    opacity: .8;
+}
+
+.montage-button.cancel {
+    outline: none;
+    position: relative;
+    left: 1px;
+    top: 1px;
+    margin: 2px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    display: inline-block;
+    padding: 2px 31px 0 31px;
+    height: 40px;
+    border: 1px solid #f3f3f3;
+    border-radius: 26px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
+    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
+    line-height: 40px;
+    font-size: 18px;
+    color: #d23f3a;
+    -webkit-transition-duration: 150ms;
+    -webkit-transition-property: background, color;
+    -webkit-box-shadow: 0 1px 0 #dc4d48, 0 2px 0 #a9403a, 0 -2px 0 #a9403a, -2px 0 0 #a9403a, 2px 0 0 #a9403a;
+}
+
+.montage-button.cancel:active, .montage-button.cancel.busy {
+    border: 1px solid #a9403a;
+    color: #666;
+    -webkit-box-shadow: 0 1px 0 #f5c7c5, 0 2px 0 #dc4d48, 0 -2px 0 #dc4d48, -2px 0 0 #dc4d48, 2px 0 0 #dc4d48;
+    background: #ccc;
+}
+
+.montage-button.cancel.busy {
+    -webkit-animation: montage-button-light-busy 1.1s infinite;
+    -webkit-animation-timing-function: ease-in-out;
+    cursor: default;
+}
+
+.montage-button.cancel.disabled:before {
+    -webkit-box-shadow: none;
+    border: 1px solid #acacac;
+}
+
+.montage-button.cancel.disabled {
+    -webkit-box-shadow: none;
+    background: none;
+    color: #969696;
+    border: 1px solid transparent;
+}
+
+.montage-button.cancel.disabled:after {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.text.dark:before {
+    border: 1px solid rgba(0,0,0,.4);
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1);
+}
+
+.montage-button.text.dark {
+    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#5c5c5c)), #5c5c5c;
+    color: #fff;
+    text-shadow: 0 0 2px #404040;
+    -webkit-transition-duration: 150ms;
+    -webkit-transition-property: background, color;
+}
+
+.montage-button.text.dark:active, .montage-button.text.dark.busy {
+    background: #404040;
+    color: #a0a0a0;
+}
+
+.montage-button.text.dark.busy {
+    -webkit-animation: montage-button-dark-busy 1.1s infinite;
+}
+
+.montage-button.text.dark.disabled:before {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.text.dark.disabled {
+    background: none;
+    color: #333;
+    text-shadow: none;
+}
+
+.montage-button.submit.dark:before {
+    border: 1px solid rgba(0,0,0,.4);
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #0aa0d8, inset 0 -2px 0 #0aa0d8;
+}
+
+.montage-button.submit.dark:after {
+    left: -3px;
+    right: -3px;
+    top: -3px;
+    bottom: -3px;
+    -webkit-box-shadow: inset 0 1px 2px #066283;
+    opacity: 1;
+}
+
+.montage-button.submit.dark {
+    margin: 3px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161;
+    color: #fff;
+    border: none;
+    text-shadow: 0 0 2px #404040;
+    -webkit-box-shadow: inset 0 1px 0 #3f6d7e, inset 1px 0 0 #044259, inset -1px 0 0 #044259, inset 0 -1px 0 #044259, 0 1px 1px #087faa, 0 1px 1px #087faa, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8;
+}
+
+.montage-button.submit.dark:active, .montage-button.submit.dark.busy {
+    color: #a0a0a0;
+    -webkit-box-shadow: inset 0 0 1px #033040, inset 0 0 1px #033040, 0 1px 1px #45cdff, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8;
+    background: #404040;
+}
+
+.montage-button.submit.dark.busy {
+    -webkit-animation: montage-button-dark-busy 1.1s infinite;
+}
+
+.montage-button.submit.dark.disabled:before {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.submit.dark.disabled {
+    -webkit-box-shadow: none;
+    background: none;
+    border: none;
+    color: #333;
+    text-shadow: none;
+}
+
+.montage-button.submit.dark.disabled:after {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.cancel.dark:before {
+    border: 1px solid rgba(0,0,0,.4);
+    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #b53732, inset 0 -2px 0 #b53732;
+}
+
+.montage-button.cancel.dark:after {
+    left: -3px;
+    right: -3px;
+    top: -3px;
+    bottom: -3px;
+    -webkit-box-shadow: inset 0 1px 2px #932c29, inset 0 1px 2px #932c29;
+    opacity: 1;
+}
+
+.montage-button.cancel.dark {
+    margin: 3px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161;
+    color: #fff;
+    border: none;
+    text-shadow: 0 0 2px #404040;
+    -webkit-box-shadow: inset 0 1px 0 #7c7c7c, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732;
+}
+
+.montage-button.cancel.dark:active, .montage-button.cancel.dark.busy {
+    color: #a0a0a0;
+    -webkit-box-shadow: inset 0 1px #852824, inset 0 -1px #852824, 0 1px #dd6c68, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732;
+    background: #404040;
+}
+
+.montage-button.cancel.dark.busy {
+    -webkit-animation: montage-button-dark-busy 1.1s infinite;
+}
+
+.montage-button.cancel.dark.disabled:before {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.cancel.dark.disabled {
+    -webkit-box-shadow: none;
+    background: none;
+    border: none;
+    color: #333;
+    text-shadow: none;
+}
+
+.montage-button.cancel.dark.disabled:after {
+    -webkit-box-shadow: none;
+}
+
+.montage-button.disabled {
+    cursor: default;
+}
+
+/* Buttons icons (Used in conjunction with the iconic style in Button Groups)*/
+
+.montage-button.text.icon > img,
+.montage-button.submit.icon > img,
+.montage-button.cancel.icon > img {
+    float: left;
+    margin-left: -6px;
+    margin-right: 6px;
+    margin-top: 6px;
+    height: 26px;
+    width: 26px;
+}
+
+.montage-button.text.icon > img {
+    margin-top: 8px;
+}
diff --git a/node_modules/montage/ui/button.reel/button.html b/node_modules/montage/ui/button.reel/button.html
new file mode 100755
index 00000000..1b35e545
--- /dev/null
+++ b/node_modules/montage/ui/button.reel/button.html
@@ -0,0 +1,26 @@
+<!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>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="button.css">
+    <script type="text/montage-serialization">
+{
+    "owner": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+
+        }
+    }
+}
+    </script>
+
+</head>
+<body>
+</body>
+</html>
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js
new file mode 100755
index 00000000..60bca109
--- /dev/null
+++ b/node_modules/montage/ui/button.reel/button.js
@@ -0,0 +1,741 @@
+/* <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/button.reel"
+    @requires montage/core/core
+    @requires montage/ui/component
+*/
+var Montage = require("montage").Montage,
+    Component = require("ui/component").Component;
+
+/**
+ @class module:"montage/ui/button.reel".Button
+ @classdesc Button component implementation. Turns any div element into a multi-state labeled button.
+ @extends module:montage/ui/component.Component
+ */
+exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.reel".Button# */ {
+
+/**
+  Description TODO
+  @private
+*/
+    _preventFocus: {
+        enumerable: false,
+        value: false
+    },
+
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} false
+*/
+    preventFocus: {
+        get: function () {
+            return this._preventFocus;
+        },
+        set: function (value) {
+            if (value === true) {
+                this._preventFocus = true;
+            } else {
+                this._preventFocus = false;
+            }
+        }
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _busy: {
+        enumerable: false,
+        value: false
+    },
+
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} false
+    */
+    busy: {
+        get: function () {
+            return this._busy;
+        },
+        set: function (value) {
+            if ((value === true) && (!this._disabled)) {
+                this._busy = true;
+            } else {
+                this._busy = false;
+            }
+            this.needsDraw = true;
+        }
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _disabled: {
+        enumerable: false,
+        value: false
+    },
+
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} false
+    */
+    disabled: {
+        get: function () {
+            return this._disabled;
+        },
+        set: function (value) {
+            if (value === true) {
+                this._disabled = true;
+                this.busy = false;
+            } else {
+                this._disabled = false;
+            }
+            this.needsDraw = true;
+        }
+    },
+
+    //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
+
+    enabled: {
+        dependencies: ["disabled"],
+        get: function () {
+            return !!this._disabled;
+        },
+        set: function (value) {
+            this.disabled = !value;
+        }
+    },
+
+    /**
+     * When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed
+     * the pressed property contains the equivalent of the aria-pressed attribute: "true"||"false"||"mixed"
+     * @private
+     */
+    _pressed: {
+        value: "false",
+        enumerable: false
+    },
+    /**
+        Description TODO
+        @type {Function}
+        @default {Boolean} "false"
+    */
+    pressed: {
+        get: function() {
+            return this._pressed;
+        },
+        set: function(value) {
+            if (value !== this._pressed) {
+                this._pressed = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+    /**
+     * Used when a button is associated with an input tag. For buttons, the title comes from it's value attribute.
+     * If the value property is undefined, it will be initialized from the button's input element if the element is an input type.
+     * @private
+     */
+    _value: {
+        enumerable: false,
+        value: undefined
+    },
+    /**
+        Description TODO
+        @type {Function}
+        @default undefined
+    */
+    value: {
+        serializable: true,
+        get: function () {
+            return this._value;
+        },
+        set: function (value) {
+            this._value = value;
+            this.needsDraw = true;
+        }
+    },
+
+    /**
+        The Montage converted used to convert or format values displayed by this Button instance.
+        @type {Property}
+        @default null
+    */
+    converter: {
+        value: null
+    },
+
+    /**
+     * @private
+     */
+    _title: {
+        enumerable: false,
+        value: undefined
+    },
+    /**
+        Description Text to show in the tooltip displayed by hovering over this button
+        @type {Function}
+        @default undefined
+    */
+    title: {
+        serializable: true,
+        get: function () {
+            return this._title;
+        },
+        set: function (value) {
+            this._title = value;
+            this.needsDraw = true;
+        }
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _valueNode: {value:undefined, enumerable: false},
+
+/**
+        Used when a button is associate with an input tag.<br>
+        For buttons, the title comes from it's value attribute.<br>
+        valueActive, if set, is used when the button is in active state (mousedown / touchstart).
+        @type {String}
+        @default undefined
+    */
+    valueActive: {
+        serializable: true,
+        value: undefined
+    },
+
+ /**
+  Description TODO
+  @private
+*/
+    _valueNodeActiveNode: {value:undefined, enumerable: false},
+
+
+    /**
+     Used when a button is associate with an input tag.<br>
+     For buttons, the title comes from its value attribute.<br>
+     When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed the button has multiple states and may need different titles for that.<br>
+     So, pressedValue would contain the value to use when pressed is true.
+     @type {String}
+     @default undefined
+     */
+    pressedValue: {
+        serializable: true,
+        value: undefined
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _pressedValueNode: {value:undefined, enumerable: false},
+
+/**
+        Used when a button is associate with an input tag.<br>
+        For buttons, the title comes from its <code>value</code> attribute.<br>
+        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
+        So, pressedValue would contain the value to use when pressed is true.
+        @type {String}
+        @default undefined
+    */
+    pressedValueActive: {
+        serializable: true,
+        value: undefined
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _pressedValueActiveNode: {value:undefined, enumerable: false},
+
+/**
+        Used when a button is associate with an input tag.<br>
+        For buttons, the title comes from it's value attribute.<br>
+        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
+        So, <code>mixedValue</code> would contain the value to use when pressed is mixed.
+        @type {String}
+        @default undefined
+    */
+    mixedValue: {
+        serializable: true,
+        value: undefined
+    },
+
+ /**
+  Description TODO
+  @private
+*/
+    _mixedValueNode: {value:undefined, enumerable: false},
+
+/**
+        Used when a button is associated with an input tag.<br>
+        For buttons, the title comes from its <code>value</code> attribute.<br>
+        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
+        So, <code>mixedValue</code> would contain the value to use when pressed is mixed.
+        @type {String}
+        @default undefined
+    */
+    mixedValueActive: {
+        serializable: true,
+        value: undefined
+    },
+
+/**
+  Description TODO
+  @private
+*/
+    _mixedValueActiveNode: {value:undefined, enumerable: false},
+
+/**
+  Description TODO
+  @private
+*/
+    _active: {
+        value: false
+    },
+
+/**
+        Description TODO
+        @type {Function}
+        @default {Boolean} false
+    */
+    active: {
+        get: function() {
+            return this._active;
+        },
+        set: function(value) {
+            this._active = value;
+            this.needsDraw = true;
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _behavior: {
+        value: "transient",
+        enumerable: false
+    },
+
+    /**
+        Behavior describes how the button interprets events:
+        <ul>
+            <li><b>transient</b> is the default, trigger an action on click</li>
+            <li><b>toggle</b> maintains a state from off -> click -> on -> click -> off</li>
+            <li><b>mixed</b> maintains a state from off -> click -> on -> click -> mixed -> off</li>
+        </ul>
+        @type {Function}
+        @default {String} "transient"
+    */
+    behavior: {
+        serializable: true,
+        get: function() {
+            return this._behavior;
+        },
+        set: function(value) {
+            if (value !== this._behavior) {
+                //Sanity check on behavior
+                value = ((value === "transient") || (value === "toggle") || (value === "mixed")) ? value : "transient";
+                this._behavior = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _observedPointer: {
+        enumerable: true,
+        value: null
+    },
+
+    // Low-level event listeners
+ /**
+    Description TODO
+    @function
+    @param {Event} event The handleMousedown event
+    */
+    handleMousedown: {
+        value: function(event) {
+            if (!this._disabled && !this._busy) {
+                this._acknowledgeIntent("mouse");
+            }
+
+            event.preventDefault();
+
+            if (!this._preventFocus) {
+                this._element.focus();
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} event The handleMouseup event
+    */
+    handleMouseup: {
+        value: function(event) {
+            this._interpretInteraction(event);
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} event The handleTouchstart event
+    */
+    handleTouchstart: {
+        value: function(event) {
+
+            if (this._observedPointer !== null) {
+                return;
+            }
+
+            if (!this._disabled && !this._busy) {
+                this._acknowledgeIntent(event.changedTouches[0].identifier);
+            }
+
+            // NOTE preventingDefault disables the magnifying class
+            // sadly it also disables double tapping on the button to zoom...
+            event.preventDefault();
+
+            if (!this._preventFocus) {
+                this._element.focus();
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} event The handleTouchend event
+    */
+    handleTouchend: {
+        value: function(event) {
+
+            var i = 0,
+                changedTouchCount = event.changedTouches.length;
+
+            for (; i < changedTouchCount; i++) {
+                if (event.changedTouches[i].identifier === this._observedPointer) {
+                    this._interpretInteraction(event);
+                    return;
+                }
+            }
+
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {Event} event The handleTouchcancel event
+    */
+    handleTouchcancel: {
+        value: function(event) {
+
+            var i = 0,
+                changedTouchCount = event.changedTouches.length;
+
+            for (; i < changedTouchCount; i++) {
+                if (event.changedTouches[i].identifier === this._observedPointer) {
+                    this._releaseInterest();
+
+                    this.active = false;
+                    return;
+                }
+            }
+
+        }
+    },
+/**
+    Description TODO
+    @function
+    @param {String} pointer TODO
+    @param {Component} demandingComponent TODO
+    @returns {Boolean} true TODO
+    */
+    surrenderPointer: {
+        value: function(pointer, demandingComponent) {
+
+            this._releaseInterest();
+
+            this.active = false;
+            return true;
+        }
+    },
+
+    // Internal state management
+/**
+  Description TODO
+  @private
+*/
+    _acknowledgeIntent: {
+        value: function(pointer) {
+
+            this._observedPointer = pointer;
+            this.eventManager.claimPointer(pointer, this);
+
+            if (window.Touch) {
+                document.addEventListener("touchend", this);
+                document.addEventListener("touchcancel", this);
+            } else {
+                document.addEventListener("mouseup", this);
+            }
+
+            this.active = true;
+        },
+        enumerable: false
+    },
+/**
+  Description TODO
+  @private
+*/
+    _interpretInteraction: {
+        value: function(event) {
+
+            if (!this.active) {
+                return;
+            }
+
+            var target = event.target;
+            while (target !== this.element && target && target.parentNode) {
+                target = target.parentNode;
+            }
+
+            if (this.element === target) {
+                this._shouldDispatchActionEvent = true;
+                this._dispatchActionEvent();
+                this.updateState();
+            }
+
+            this._releaseInterest();
+
+            this.active = false;
+        },
+        enumerable: false
+    },
+/**
+  Description TODO
+  @private
+*/
+    _releaseInterest: {
+        value: function() {
+            if (window.Touch) {
+                document.removeEventListener("touchend", this);
+                document.removeEventListener("touchcancel", this);
+            } else {
+                document.removeEventListener("mouseup", this);
+            }
+
+            this.eventManager.forfeitPointer(this._observedPointer, this);
+            this._observedPointer = null;
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    updateState: {
+        value: function() {
+            var newState;
+
+            if (this._behavior !== "transient") {
+                switch (this._pressed) {
+                    case "false":
+                        newState = "true";
+                        break;
+                    case "true":
+                        newState = (this._behavior === "toggle") ? "false" : "mixed";
+                        break;
+                    case "mixed":
+                        newState = "false";
+                        break;
+                }
+                this.pressed = newState;
+            }
+            this.needsDraw = true;
+        }
+    },
+/**
+  Description TODO
+  @private
+*/
+    _isElementInput: {value: false},
+    prepareForDraw: {
+        value: function() {
+
+            this._element.tabIndex = 0;
+
+            this._element.classList.add("montage-button");
+            this._element.setAttribute("aria-role", "button");
+
+            if (!!(this._isElementInput = (this._element.tagName === "INPUT")) && this.value === undefined) {
+                this._valueNode = this._element.getAttributeNode("value");
+                this.value = this._element.value;
+            }
+            else {
+                if (!this._element.firstChild) {
+                    this._element.appendChild(document.createTextNode(""));
+
+                }
+                this._valueNode = this._element.firstChild;
+                if (this.value === undefined) {
+                    this.value = this._valueNode.data;
+                }
+            }
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    prepareForActivationEvents: {
+        value: function() {
+
+            if (window.Touch) {
+                this._element.addEventListener("touchstart", this);
+            } else {
+                this.element.addEventListener("mousedown", this);
+            }
+
+        }
+    },
+
+    /**
+      Retrieves the display value for the button, running it through a converter if needed
+      @private
+    */
+    _convertValue: {
+        value: function(value) {
+            if (this.converter) {
+                return this.converter.convert(value);
+            }
+            return value;
+        }
+    },
+/**
+    Description TODO
+    @function
+    */
+    draw: {
+        value: function() {
+
+            if (this._disabled) {
+                this._element.classList.add("disabled");
+            } else {
+                this._element.classList.remove("disabled");
+            }
+
+            if (this._busy) {
+                this._element.setAttribute("aria-busy", true);
+                this._element.classList.add("busy");
+            } else {
+                this._element.setAttribute("aria-busy", false);
+                this._element.classList.remove("busy");
+            }
+
+            if (this._behavior !== "transient") {
+
+                this._element.setAttribute("aria-pressed", this._pressed);
+
+                if (this._pressed === "true" && this.pressedValue) {
+                    if (this._isElementInput) {
+                        this._valueNode.value = this._convertValue(this.pressedValue);
+                    }
+                    else {
+                        if (!this._pressedValueNode) {
+                            this._pressedValueNode = document.createTextNode("");
+                            this._pressedValueNode.data = this._convertValue(this.pressedValue);
+                        }
+                        //TODO use replace now
+                        this._valueNode.data = this._convertValue(this.pressedValue);
+                    }
+                }
+                else if (this._pressed === "mixed" && this.mixedValue) {
+                    if (this._isElementInput) {
+                        this._element.setAttribute("value", this._convertValue(this.mixedValue));
+                    }
+                    else {
+                        this._element.firstChild.data = this._convertValue(this.mixedValue);
+                    }
+                }
+                else if ((this._pressed === "false") && (typeof this.value !== "undefined")) {
+                    if (this._isElementInput) {
+                        this._element.setAttribute("value", this._convertValue(this.value));
+                    }
+                    else {
+                        this._element.firstChild.data = this._convertValue(this.value);
+                    }
+                }
+            } else {
+                if (this._isElementInput) {
+                    this._element.setAttribute("value", this._convertValue(this.value));
+                } else {
+                    this._element.firstChild.data = this._convertValue(this.value);
+                }
+            }
+            if (this.valueActive) {
+                if (this.active) {
+                    if (this._behavior === "transient" || this._pressed === "false") {
+                        if (this._isElementInput) {
+                            this._element.setAttribute("value", this._convertValue(this.valueActive));
+                        }
+                        else {
+                            this._element.firstChild.data = this._convertValue(this.valueActive);
+                        }
+                    }
+                    else if (this._pressed === "true" && this.pressedValueActive) {
+                        if (this._isElementInput) {
+                            this._element.setAttribute("value", this._convertValue(this.pressedValueActive));
+                        }
+                        else {
+                            this._element.firstChild.data = this._convertValue(this.pressedValueActive);
+                        }
+                    }
+                    else if (this._pressed === "mixed" && this.mixedValueActive) {
+                        if (this._isElementInput) {
+                            this._element.setAttribute("value", this._convertValue(this.mixedValueActive));
+                        }
+                        else {
+                            this._element.firstChild.data = this._convertValue(this.mixedValueActive);
+                        }
+                    }
+                }
+                /* Right now, we don't handle active-pressed */
+                else if (this._behavior === "transient") {
+                    if (this._isElementInput) {
+                        this._element.setAttribute("value", this._convertValue(this.value));
+                    }
+                    else {
+                        this._element.firstChild.data = this._convertValue(this.value);
+                    }
+                }
+            }
+
+            this._element.setAttribute("title", this.title || "");
+        }
+    }
+
+}, module);
+/**
+    @class module:montage/ui/button.ToggleButton
+*/
+exports.ToggleButton = Montage.create(exports.Button,/** @lends module:montage/ui/button.ToggleButton# */ {
+/**
+  Description TODO
+  @private
+*/
+    _behavior: {
+        value: "toggle"
+    }
+});
-- 
cgit v1.2.3