From f7e4257745ccd44b8d24555f0ef787429d6e472c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 5 Jun 2012 00:11:03 -0700
Subject: adding the latest v0.10 montage

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../autocomplete/autocomplete.reel/autocomplete.js |  15 +-
 .../results-list.reel/results-list.html            |  11 +-
 .../bluemoon/button-group.reel/button-group.html   |   2 +-
 .../montage/ui/bluemoon/button.reel/button.html    |   2 +-
 .../ui/bluemoon/progress.reel/progress.html        |   1 -
 .../montage/ui/bluemoon/progress.reel/progress.js  |  11 +-
 .../montage/ui/bluemoon/slider.reel/slider.html    |   2 +-
 .../montage/ui/bluemoon/slider.reel/slider.js      | 267 +++++++--------------
 node_modules/montage/ui/button.reel/button.js      |   2 +-
 node_modules/montage/ui/component.js               |  22 +-
 node_modules/montage/ui/composer/composer.js       |   9 +-
 .../montage/ui/composer/translate-composer.js      |  99 +++-----
 .../montage/ui/condition.reel/condition.js         |  13 +-
 .../montage/ui/controller/array-controller.js      | 247 +++++++++----------
 .../ui/controller/paged-array-controller.js        | 260 --------------------
 .../montage/ui/dynamic-text.reel/dynamic-text.js   |   6 +-
 node_modules/montage/ui/editable-text.js           |   3 +-
 node_modules/montage/ui/flow.reel/flow.html        |  11 +-
 node_modules/montage/ui/flow.reel/flow.js          |  44 +++-
 node_modules/montage/ui/list.reel/list.html        |   6 +-
 node_modules/montage/ui/list.reel/list.js          |  24 +-
 node_modules/montage/ui/loader.reel/loader.js      |   5 +
 .../ui/loading-panel.reel/loading-panel.html       |  11 +-
 node_modules/montage/ui/loading.reel/loading.html  |   2 +-
 node_modules/montage/ui/loading.reel/loading.js    |   3 +-
 node_modules/montage/ui/native-control.js          |  50 ++--
 .../montage/ui/popup/alert.reel/alert.html         |  10 +-
 .../montage/ui/popup/confirm.reel/confirm.html     |   8 +-
 .../montage/ui/popup/notifier.reel/notifier.html   |   2 +-
 .../montage/ui/popup/notifier.reel/notifier.js     |   6 +-
 .../montage/ui/popup/popup.reel/popup.html         |   4 +-
 node_modules/montage/ui/popup/popup.reel/popup.js  |  41 ++--
 .../montage/ui/repetition.reel/repetition.js       | 188 +++++++--------
 .../rich-text-linkpopup.html                       |   4 +-
 .../rich-text-resizer.reel/rich-text-resizer.html  |   4 +-
 .../rich-text-editor.reel/rich-text-editor-base.js |   2 +-
 .../rich-text-editor.reel/rich-text-editor.css     |   7 +-
 .../rich-text-editor.reel/rich-text-editor.html    |   4 +-
 .../rich-text-editor.reel/rich-text-editor.js      |   6 +-
 .../montage/ui/scroll-bars.reel/scroll-bars.html   |   1 -
 .../montage/ui/scroll-bars.reel/scroll-bars.js     |  61 +++--
 .../montage/ui/scroller.reel/scroller.html         |  12 +-
 node_modules/montage/ui/scroller.reel/scroller.js  |  32 ++-
 .../montage/ui/select-input.reel/select-input.js   |  27 ++-
 .../ui/skeleton/range-input.reel/range-input.css   |   6 +-
 .../ui/skeleton/range-input.reel/range-input.html  |   6 +-
 .../ui/skeleton/range-input.reel/range-input.js    | 173 ++++++++-----
 node_modules/montage/ui/slot.reel/slot.js          |  13 +-
 .../montage/ui/substitution.reel/substitution.js   |  10 +-
 node_modules/montage/ui/tabs.reel/tabs.html        |   6 +-
 node_modules/montage/ui/tabs.reel/tabs.js          |  21 +-
 node_modules/montage/ui/template.js                |  13 +-
 node_modules/montage/ui/text-input.js              |  43 ++--
 .../montage/ui/toggle-button.reel/toggle-button.js |  50 ++--
 .../token-field/token-field.reel/token-field.html  |  12 +-
 .../ui/token-field/token-field.reel/token-field.js |  24 +-
 .../montage/ui/token-field/token.reel/token.html   |   6 +-
 .../montage/ui/token-field/token.reel/token.js     |  65 +++--
 .../montage/ui/video-player.reel/video-player.html |  44 ++--
 59 files changed, 933 insertions(+), 1106 deletions(-)
 delete mode 100755 node_modules/montage/ui/controller/paged-array-controller.js

(limited to 'node_modules/montage/ui')

diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
index c9cbca74..4e2dd82e 100644
--- a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
+++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
@@ -70,7 +70,6 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
 
     _delay: {value: null},
     delay: {
-        distinct: true,
         get: function(){
             return this._delay;
         },
@@ -81,7 +80,8 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
                 }
                 this._delay = value;
             }
-        }
+        },
+        serializable: true
     },
 
     /**
@@ -89,7 +89,8 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
     * Default = 2
     */
     minLength: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     _tokens: {value: null},
@@ -104,8 +105,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         },
         modify: function(v) {
             this._tokens = v;
-        },
-        distinct: true
+        }
     },
 
     // overridden here to get the substring/searchString
@@ -241,7 +241,6 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
 
     _suggestedValue: {value: null},
     suggestedValue: {
-        distinct: true,
         enumerable: false,
         get: function() {
             return this._suggestedValue;
@@ -443,7 +442,9 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
             fn.call(this);
 
             if (!this._valueSyncedWithInputField) {
-                this.value = this.tokens.join(this.separator);
+                if(this.tokens) {
+                    this.value = this.tokens.join(this.separator);
+                }
                 if(this.value && this.value.charAt(this.value.length-1) != this.separator) {
                     this.value += this.separator;
                 }
diff --git a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html
index 2f904d62..c40d36ce 100644
--- a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html
+++ b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html
@@ -9,21 +9,20 @@
 {
 
     "results": {
-        "prototype": "montage/ui/controller/array-controller",
+        "prototype": "ui/controller/array-controller",
         "properties": {
             "selectObjectsOnAddition": true,
             "automaticallyOrganizeObjects": true
         }
     },
     "repetition1": {
-        "prototype": "montage/ui/repetition.reel",
+        "prototype": "ui/repetition.reel",
         "properties": {
             "element": {
                 "#": "repetition1"
             },
             "contentController": {"@": "results"},
-            "isSelectionEnabled": true,
-            "orientation": "vertical"
+            "isSelectionEnabled": true
         },
         "bindings": {
             "contentController": {"<-": "@owner.contentController"},
@@ -32,7 +31,7 @@
     },
 
     "resultItem": {
-        "prototype": "montage/ui/autocomplete/result-item.reel",
+        "prototype": "ui/autocomplete/result-item.reel",
         "properties": {
             "element": {"#": "result-item"}
         },
@@ -43,7 +42,7 @@
     },
 
     "owner": {
-        "prototype": "montage/ui/autocomplete/results-list.reel",
+        "prototype": "ui/autocomplete/results-list.reel",
         "properties": {
             "element": {"#": "results-list"}
         }
diff --git a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html
index 8b192be4..e56d0bab 100644
--- a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html
+++ b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html
@@ -11,7 +11,7 @@
         <script type="text/montage-serialization">
 {
     "owner": {
-        "prototype": "montage/ui/bluemoon/button-group.reel",
+        "prototype": "ui/bluemoon/button-group.reel",
         "properties": {
 
         }
diff --git a/node_modules/montage/ui/bluemoon/button.reel/button.html b/node_modules/montage/ui/bluemoon/button.reel/button.html
index b46b3161..4ec77f61 100644
--- a/node_modules/montage/ui/bluemoon/button.reel/button.html
+++ b/node_modules/montage/ui/bluemoon/button.reel/button.html
@@ -11,7 +11,7 @@
     <script type="text/montage-serialization">
 {
     "owner": {
-        "prototype": "montage/ui/bluemoon/button.reel",
+        "prototype": "ui/bluemoon/button.reel",
         "properties": {
 
         }
diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.html b/node_modules/montage/ui/bluemoon/progress.reel/progress.html
index 53ff4ab3..a3835fe6 100644
--- a/node_modules/montage/ui/bluemoon/progress.reel/progress.html
+++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.html
@@ -11,7 +11,6 @@
     <script type="text/montage-serialization">
 {
     "owner": {
-        "prototype": "montage/ui/bluemoon/progress.reel",
         "properties": {
             "element": {"#": "progress"},
             "_barElement": {"#": "bar"}
diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.js b/node_modules/montage/ui/bluemoon/progress.reel/progress.js
index 20c60d94..d7661445 100644
--- a/node_modules/montage/ui/bluemoon/progress.reel/progress.js
+++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.js
@@ -20,7 +20,7 @@ exports.Progress = Montage.create(Component,/** @lends module:"montage/ui/bluemo
   @private
 */
     _barElement: {
-        enumerable: false,
+        serializable: true,
         value: null
     },
 /**
@@ -51,7 +51,8 @@ exports.Progress = Montage.create(Component,/** @lends module:"montage/ui/bluemo
                 }
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 /**
   Description TODO
@@ -78,7 +79,8 @@ exports.Progress = Montage.create(Component,/** @lends module:"montage/ui/bluemo
                 }
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 /**
   Description TODO
@@ -111,7 +113,8 @@ exports.Progress = Montage.create(Component,/** @lends module:"montage/ui/bluemo
                 this._scrolling = value;
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 /**
     Description TODO
diff --git a/node_modules/montage/ui/bluemoon/slider.reel/slider.html b/node_modules/montage/ui/bluemoon/slider.reel/slider.html
index de422a4a..e80a520e 100644
--- a/node_modules/montage/ui/bluemoon/slider.reel/slider.html
+++ b/node_modules/montage/ui/bluemoon/slider.reel/slider.html
@@ -11,7 +11,7 @@
     <script type="text/montage-serialization">
 {
     "owner": {
-        "prototype": "montage/ui/bluemoon/slider.reel",
+        "prototype": "ui/bluemoon/slider.reel",
         "properties": {
             "element": {
                 "#": "slider"
diff --git a/node_modules/montage/ui/bluemoon/slider.reel/slider.js b/node_modules/montage/ui/bluemoon/slider.reel/slider.js
index 1a0e3d6e..34c0a8bd 100644
--- a/node_modules/montage/ui/bluemoon/slider.reel/slider.js
+++ b/node_modules/montage/ui/bluemoon/slider.reel/slider.js
@@ -19,136 +19,84 @@ var Montage = require("montage").Montage,
  */
 exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon/slider.reel".Slider# */ {
     // Extra elements for rendering
-/**
-  Description TODO
-  @private
-*/
+
     _bghl: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handlerbg: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _bg: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handler: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _line: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _scale: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _line2: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handler2: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handler3: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handler4: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _handlerDragArea: {
-        enumerable: false,
-        value: null
+        value: null,
+        serializable: true
     },
     // Slider properties
-/**
-  Description TODO
-  @private
-*/
+
     _isDragging: {
-        enumerable: true,
         value: null
     },
-/**
-  Description TODO
-  @private
-*/
+
     _cursorPosition: {
-        enumerable: false,
         value: null
     },
-/**
-  Description TODO
-  @private
-*/
+
     _width: {
-        enumerable: false,
         value: 0
     },
-/**
-  Description TODO
-  @private
-*/
+
     _minValue: {
-        enumerable: false,
         value: 0
     },
-/**
-  Description TODO
-  @private
-*/
+
     _hasTapBarToScroll: {
-        enumerable: false,
         value: false
     },
-/**
+
+    /**
         Description TODO
         @type {Function}
         @default {Boolean} false
@@ -159,14 +107,11 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
         },
         set: function (value) {
             this._hasTapBarToScroll = !!value;
-        }
+        },
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _hasClickBarToScroll: {
-        enumerable: false,
         value: true
     },
 /**
@@ -180,12 +125,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
         },
         set: function (value) {
             this._hasClickBarToScroll = !!value;
-            if (this._hasClickBarToScroll) {
-                this.element.addEventListener("mousedown", this, false);
-            } else {
-                this.element.removeEventListener("mousedown", this, false);
-            }
-        }
+        },
+        serializable: true
     },
 /**
         Description TODO
@@ -193,7 +134,6 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
         @default {Number} 0
     */
     minValue: {
-        serializable: true,
         get: function () {
             return this._minValue;
         },
@@ -206,14 +146,11 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
                 this._valueRange = null;
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _maxValue: {
-        enumerable: false,
         value: 100
     },
 
@@ -223,7 +160,6 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
         @default {Number} 100
     */
     maxValue: {
-        serializable: true,
         get: function () {
             return this._maxValue;
         },
@@ -236,23 +172,20 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
                 this._valueRange = null;
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
     _valueRange: {
-        enumerable: false,
-        value: undefined
+        value: null
     },
- /**
+
+    /**
         Description TODO
         @type {Function}
-        @default undefined
+        @default null
     */
     valueRange: {
-        enumerable: false,
         get: function () {
             if (!this._valueRange) {
                 this._valueRange = this._maxValue - this._minValue;
@@ -260,30 +193,21 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             return this._valueRange;
         }
     },
-/**
-  Description TODO
-  @private
-*/
+
     _value: {
-        enumerable: false,
         value: 0
     },
-/**
-  Description TODO
-  @private
-*/
+
     _observedPointer: {
-        enumerable: false,
         value: null
     },
-/**
+
+    /**
         Description TODO
         @type {Function}
         @default {Number} 0
     */
     value: {
-        enumerable: true,
-        serializable: true,
         get: function () {
             if (this._value < this._minValue) {
                 return this._minValue;
@@ -302,25 +226,24 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
                     this.needsDraw = true;
                 }
             }
-        }
+        },
+        serializable: true
     },
-/**
-  Description TODO
-  @private
-*/
+
+    step: {
+        value: null,
+        serializable: true
+    },
+
     _pressed: {
-        enumerable: false,
         value: false
     },
-/**
-  Description TODO
-  @private
-*/
+
     _scrollTo: {
-        enumerable: false,
         value: null
     },
-/**
+
+    /**
     Description TODO
     @function
     @param {Event} event TODO
@@ -364,7 +287,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             }
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     @param {Event} event TODO
@@ -385,7 +309,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             this._pressedStart = false;
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     */
@@ -406,7 +331,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             }
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     @param {Event} event TODO
@@ -452,7 +378,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             }
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     @param {Event} event TODO
@@ -468,7 +395,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             this.needsDraw = true;
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     */
@@ -484,22 +412,13 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             this._pressedEnd = true;
         }
     },
-/**
-    Description TODO
-    @function
-    @param {String} pointer TODO
-    @param {Component} demandingComponent TODO
-    @returns {Boolean} false
-    */
+
     surrenderPointer: {
         value: function(pointer, demandingComponent) {
             return false;
         }
     },
-/**
-  Description TODO
-  @private
-*/
+
     _observePointer: {
         value: function(pointer) {
             this.eventManager.claimPointer(pointer, this);
@@ -510,10 +429,7 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             this.dispatchEvent(interactionStartEvent);
         }
     },
-/**
-  Description TODO
-  @private
-*/
+
     _releaseInterest: {
         value: function() {
             this.eventManager.forfeitPointer(this._observedPointer, this);
@@ -524,12 +440,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             this.dispatchEvent(interactionEndEvent);
         }
     },
-/**
-    Description TODO
-    @function
-    */
+
     prepareForActivationEvents: {
-        enumerable: false,
         value: function() {
             if (window.Touch) {
                 this._handlerDragArea.addEventListener("touchstart", this, false);
@@ -543,12 +455,8 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             }
         }
     },
-/**
-    Description TODO
-    @function
-    */
+
     willDraw: {
-        enumerable: false,
         value: function () {
             this._width = this.element.offsetWidth - 55;
             if (this._scrollTo !== null) {
@@ -557,10 +465,7 @@ exports.Slider = Montage.create(Component,/** @lends module:"montage/ui/bluemoon
             }
         }
     },
-/**
-    Description TODO
-    @function
-    */
+
     draw: {
         value: function() {
 
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js
index 9f1342f6..91b6304d 100644
--- a/node_modules/montage/ui/button.reel/button.js
+++ b/node_modules/montage/ui/button.reel/button.js
@@ -32,7 +32,7 @@ b1.addEventListener("action", function(event) {
 <caption>Serialized example</caption>
 {
     "aButton": {
-        "prototype": "montage/ui/button.reel",
+        "prototype": "ui/button.reel",
         "properties": {
             "element": {"#": "btnElement"}
         },
diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 8a8f5739..30119815 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -30,7 +30,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         @default null
     */
     delegate: {
-        enumerable: false,
+        serializable: "reference",
         value: null
     },
 
@@ -538,11 +538,19 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
      * @function
      */
     cleanupDeletedComponentTree: {
-        value: function() {
-            Object.deleteBindings(this);
+        value: function(deleteBindings) {
+            // Deleting bindings in all cases was causing the symptoms expressed in gh-603
+            // Until we have a more granular way we shouldn't do this,
+            // the deleteBindings parameter is a short term fix.
+            if (deleteBindings) {
+                Object.deleteBindings(this);
+            }
             this.needsDraw = false;
             this.traverseComponentTree(function(component) {
-                Object.deleteBindings(component);
+                // See above comment
+                if (deleteBindings) {
+                    Object.deleteBindings(component);
+                }
                 component.needsDraw = false;
             });
         }
@@ -631,7 +639,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             if (this._element) {
                 this.originalContent = Array.prototype.slice.call(this._element.childNodes, 0);
             }
-            if (!("identifier" in this)) {
+            if (! this.hasOwnProperty("identifier")) {
                 this.identifier = Montage.getInfoForObject(this).label;
             }
         }
@@ -1772,7 +1780,7 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
         enumerable: false,
         value: 0
     },
-    
+
     drawTree: {
         value: function drawTree() {
             if (this.requestedAnimationFrame === null) { // 0 is a valid requestedAnimationFrame value
@@ -1826,7 +1834,7 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
                     // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
                     var currentDate = Date.now(),
                         miliseconds = 17 - currentDate + this._previousDrawDate;
-                    
+
                     if (miliseconds < 0) {
                         miliseconds = 0;
                     }
diff --git a/node_modules/montage/ui/composer/composer.js b/node_modules/montage/ui/composer/composer.js
index 7c30b259..ccbf8dbb 100644
--- a/node_modules/montage/ui/composer/composer.js
+++ b/node_modules/montage/ui/composer/composer.js
@@ -30,7 +30,8 @@ exports.Composer = Montage.create(Montage, /** @lends module:montage/ui/composer
         },
         set: function(component) {
             this._component = component;
-        }
+        },
+        serializable: true
     },
 
     _element: {
@@ -48,7 +49,8 @@ exports.Composer = Montage.create(Montage, /** @lends module:montage/ui/composer
         },
         set: function(element) {
             this._element = element;
-        }
+        },
+        serializable: true
     },
 
 
@@ -61,7 +63,8 @@ exports.Composer = Montage.create(Montage, /** @lends module:montage/ui/composer
      * @default false
      */
     lazyLoad: {
-        value: false
+        value: false,
+        serializable: true
     },
 
     _needsFrame: {
diff --git a/node_modules/montage/ui/composer/translate-composer.js b/node_modules/montage/ui/composer/translate-composer.js
index 13e01207..78459b9d 100644
--- a/node_modules/montage/ui/composer/translate-composer.js
+++ b/node_modules/montage/ui/composer/translate-composer.js
@@ -40,12 +40,10 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _externalUpdate: {
-        enumerable: false,
         value: true
     },
 
     isAnimating: {
-        enumerable: false,
         value: false
     },
 
@@ -59,7 +57,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _pointerSpeedMultiplier: {
-        enumerable: false,
         value: 1
     },
 
@@ -74,7 +71,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         },
         set: function(value) {
             this._pointerSpeedMultiplier = value;
-        }
+        },
+        serializable: true
     },
 
     pointerStartEventPosition: {
@@ -110,11 +108,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 this.translateX = this._translateX;
                 this.translateY = this._translateY;
             }
-        }
+        },
+        serializable: true
     },
 
     _translateX: {
-        enumerable: false,
         value: 0
     },
     /**
@@ -145,11 +143,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._translateX = tmp;
             }
-        }
+        },
+        serializable: true
     },
 
     _translateY: {
-        enumerable: false,
         value: 0
     },
     /**
@@ -180,11 +178,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._translateY = tmp;
             }
-        }
+        },
+        serializable: true
     },
 
     _minTranslateX: {
-        enumerable: false,
         value: null
     },
     /**
@@ -208,10 +206,10 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._minTranslateX = value;
             }
-        }
+        },
+        serializable: true
     },
     _maxTranslateX: {
-        enumerable: false,
         value: null
     },
     /**
@@ -235,11 +233,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._maxTranslateX = value;
             }
-        }
+        },
+        serializable: true
     },
 
     _minTranslateY: {
-        enumerable: false,
         value: null
     },
     /**
@@ -263,10 +261,10 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._minTranslateY = value;
             }
-        }
+        },
+        serializable: true
     },
     _maxTranslateY: {
-        enumerable: false,
         value: null
     },
     /**
@@ -290,11 +288,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 }
                 this._maxTranslateY = value;
             }
-        }
+        },
+        serializable: true
     },
 
     _axis: {
-        enumerable: false,
         value: "both"
     },
     /**
@@ -320,7 +318,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
                 this._axis = "both";
                 break;
             }
-        }
+        },
+        serializable: true
     },
 
     /**
@@ -342,11 +341,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         set: function(value) {
             this.invertXAxis = value;
             this.invertYAxis = value;
-        }
+        },
+        serializable: true
     },
     _invertXAxis: {
-        value: false,
-        enumerable: false
+        value: false
     },
     /**
         Invert direction of translation along the X axis.
@@ -361,11 +360,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         },
         set: function(value) {
             this._invertXAxis = !!value;
-        }
+        },
+        serializable: true
     },
     _invertYAxis: {
-        value: false,
-        enumerable: false
+        value: false
     },
     /**
         Invert direction of translation along the Y axis.
@@ -380,7 +379,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         },
         set: function(value) {
             this._invertYAxis = !!value;
-        }
+        },
+        serializable: true
     },
 
     /**
@@ -390,15 +390,16 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         @default 500
     */
     startTranslateSpeed: {
-        value: 500
+        value: 500,
+        serializable: true
     },
 
     startTranslateRadius: {
-        value: 8
+        value: 8,
+        serializable: true
     },
 
     _hasMomentum: {
-        enumerable: false,
         value: true
     },
 
@@ -413,11 +414,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
         },
         set: function(value) {
             this._hasMomentum = value ? true : false;
-        }
+        },
+        serializable: true
     },
 
     __momentumDuration: {
-        enumerable: false,
         value: 650
     },
 
@@ -430,32 +431,26 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
             if (this.__momentumDuration < 1) {
                 this.__momentumDuration = 1;
             }
-        },
-        enumerable: false
+        }
     },
 
     _pointerX: {
-        enumerable: false,
         value: null
     },
 
     _pointerY: {
-        enumerable: false,
         value: null
     },
 
     _touchIdentifier: {
-        enumerable: false,
         value: null
     },
 
     _isFirstMove: {
-        enumerable: false,
         value: false
     },
 
     _start: {
-        enumerable: false,
         value: function(x, y, target) {
             this.pointerStartEventPosition = {
                 pageX: x,
@@ -477,7 +472,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _observedPointer: {
-        enumerable: false,
         value: null
     },
 
@@ -494,7 +488,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureMousedown: {
-        enumerable: false,
         value: function(event) {
             if (event.button !== 0) {
                 return;
@@ -520,7 +513,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     @private
     */
     handleMousedown: {
-        enumerable: false,
         value: function(event) {
             if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer)) {
                 this.eventManager.claimPointer(this._observedPointer, this);
@@ -531,7 +523,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureMousemove: {
-        enumerable: false,
         value: function(event) {
 
             if (this.eventManager.isPointerClaimedByComponent(this._observedPointer, this)) {
@@ -551,7 +542,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureMouseup: {
-        enumerable: false,
         value: function(event) {
             this._end(event);
         }
@@ -576,7 +566,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureTouchstart: {
-        enumerable: false,
         value: function(event) {
             if (this._shouldPreventDefault(event)) {
                 event.preventDefault();
@@ -611,7 +600,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureTouchmove: {
-        enumerable: false,
         value: function(event) {
 
             var i = 0, len = event.changedTouches.length;
@@ -632,7 +620,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     captureTouchend: {
-        enumerable: false,
         value: function(event) {
             var i = 0, len = event.changedTouches.length;
             while (i < len && !this.eventManager.isPointerClaimedByComponent(event.changedTouches[i].identifier, this)) {
@@ -709,7 +696,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _translateEndTimeout: {
-        enumerable: false,
         value: null
     },
 
@@ -722,7 +708,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     handleMousewheel: {
-        enumerable: false,
         value: function(event) {
             var self = this;
 
@@ -749,7 +734,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _move: {
-        enumerable: false,
         value: function(x, y) {
             var pointerDelta;
 
@@ -779,7 +763,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _bezierTValue: {
-        enumerable: false,
         value: function(x, p1x, p1y, p2x, p2y) {
             var a = 1 - 3 * p2x + 3 * p1x,
                 b = 3 * p2x - 6 * p1x,
@@ -800,7 +783,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _dispatchTranslateStart: {
-        enumerable: false,
         value: function(x, y) {
             var translateStartEvent = document.createEvent("CustomEvent");
 
@@ -812,7 +794,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _dispatchTranslateEnd: {
-        enumerable: false,
         value: function() {
             var translateEndEvent = document.createEvent("CustomEvent");
 
@@ -824,7 +805,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     },
 
     _dispatchTranslate: {
-        enumerable: false,
         value: function() {
             var translateEvent = document.createEvent("CustomEvent");
             translateEvent.initCustomEvent("translate", true, true, null);
@@ -848,15 +828,18 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
     endY: {value: null, enumerable: false},
 
     translateStrideX: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     translateStrideY: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     translateStrideDuration: {
-        value: 330
+        value: 330,
+        serializable: true
     },
 
     _animationInterval: {
@@ -910,13 +893,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/**
             } else {
                 this._dispatchTranslateEnd();
             }
-        },
-        enumerable: false
+        }
     },
 
 
     _end: {
-        enumerable: false,
         value: function (event) {
 
             this.startTime=Date.now();
diff --git a/node_modules/montage/ui/condition.reel/condition.js b/node_modules/montage/ui/condition.reel/condition.js
index 7553c14f..a1a421ab 100755
--- a/node_modules/montage/ui/condition.reel/condition.js
+++ b/node_modules/montage/ui/condition.reel/condition.js
@@ -26,7 +26,6 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
     @default {Boolean} false
 */
     hasTemplate: {
-        enumerable: false,
         value: false
     },
 /**
@@ -34,7 +33,6 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
   @private
 */
     _condition: {
-        enumerable: false,
         value: null
     },
 /**
@@ -43,7 +41,6 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
         @default null
     */
     condition: {
-        enumerable: false,
         set: function(value) {
 
             if (value === this._condition) {
@@ -63,15 +60,15 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
         },
         get: function() {
             return this._condition;
-        }
+        },
+        serializable: true
     },
 
     /**
      @private
      */
     _removalStrategy:{
-        value: "remove",
-        enumerable:false
+        value: "remove"
     },
 
     // TODO should this strategy be part of another class?
@@ -89,7 +86,8 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
             }
             this._removalStrategy = value;
             this.needsDraw = true;
-        }
+        },
+        serializable: true
     },
 
     prepareForDraw: {
@@ -105,7 +103,6 @@ exports.Condition = Montage.create(Component, /** @lends module:"montage/ui/cond
     @function
     */
     draw: {
-        enumerable: false,
         value: function() {
 
             if (this.condition) {
diff --git a/node_modules/montage/ui/controller/array-controller.js b/node_modules/montage/ui/controller/array-controller.js
index ec236b39..1768398f 100644
--- a/node_modules/montage/ui/controller/array-controller.js
+++ b/node_modules/montage/ui/controller/array-controller.js
@@ -21,13 +21,44 @@ var Montage = require("montage").Montage,
 */
 var ArrayController = exports.ArrayController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/array-controller.ArrayController# */ {
 
+    didCreate: {
+        value: function() {
+            var self = this;
+
+            // TODO optimize this, try to use dependentProperties perhaps
+
+            this.addPropertyChangeListener("selections", function() {
+
+                var newSelectedIndexes = [];
+                self._selections.forEach(function(item, i) {
+                    if (item) {
+                        newSelectedIndexes.push(i);
+                    }
+                });
+
+                // TODO this triggers an infinite loop
+                self.selectedIndexes = newSelectedIndexes;
+            });
+
+            this.addPropertyChangeListener("content", function() {
+                // TODO for right now assume that any content change invalidates the selection completely;
+                // we'll need to address this of course
+                self.selectedObjects = null;
+
+                if (self.automaticallyOrganizeObjects) {
+                    self.organizeObjects();
+                }
+            });
+        }
+    },
+
     /**
      @private
      */
     _content: {
-        enumerable: false,
         value: null
     },
+
     /**
         The content managed by the ArrayController.
         @type {Function}
@@ -44,11 +75,8 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             }
             this._content = value;
 
-            //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course
-            this.selectedObjects = null;
-            this.organizeObjects();
-            this._initSelections();
-        }
+        },
+        serializable: true
     },
 
     /**
@@ -68,15 +96,16 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      })
      */
     delegate: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     /**
      @private
      */
     _organizedObjects: {
-        enumerable: false,
-        value: null
+        distinct: true,
+        value: []
     },
 
     /**
@@ -85,33 +114,25 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @default null
      */
     organizedObjects: {
-        enumerable: false,
         get: function() {
-
-            if (this._organizedObjects) {
-                return this._organizedObjects;
-            }
-
-            this.organizeObjects();
-
             return this._organizedObjects;
         }
     },
 
     /**
-     Specifies whether the ArrayCollection's content is automatically organized (false, by default).
+     Specifies whether the ArrayCollection's content is automatically organized.
      @type {Property}
-     @default {Boolean} false
+     @default {Boolean} true
      */
     automaticallyOrganizeObjects: {
-        value: false
+        value: true,
+        serializable: true
     },
 
     /**
      @private
      */
     _sortFunction: {
-        enumerable: false,
         value: null
     },
 
@@ -136,14 +157,14 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             if (this.automaticallyOrganizeObjects) {
                 this.organizeObjects();
             }
-        }
+        },
+        serializable: true
     },
 
     /**
      @private
      */
     _filterFunction: {
-        enumerable: false,
         value: null
     },
 
@@ -168,14 +189,14 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             if (this.automaticallyOrganizeObjects) {
                 this.organizeObjects();
             }
-        }
+        },
+        serializable: true
     },
 
     /**
         @private
     */
     _startIndex: {
-        enumerable: false,
         value: null
     },
 
@@ -186,7 +207,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
         @version 1.0
     */
     startIndex: {
-        enumerable: false,
+        serializable: true,
         get: function() {
             return this._startIndex;
         },
@@ -219,7 +240,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
         @version 1.0
     */
     endIndex: {
-        enumerable: false,
+        serializable: true,
         get: function() {
             return this._endIndex;
         },
@@ -241,24 +262,21 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
         @private
     */
     _organizedObjectsIndexes: {
-        value: null,
-        enumerable: false
+        value: null
     },
 
     /*
         @private
     */
     _rangedOrganizedObjectsIndexes: {
-        value: null,
-        enumerable: false
+        value: null
     },
 
     /**
         @private
      */
     _selectedIndexes: {
-        value: null,
-        enumerable: false
+        value: null
     },
 
    /**
@@ -279,9 +297,10 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             return this._selectedIndexes = this._convertIndexesFromContentToOrganized(this.selectedContentIndexes);
         },
         set: function(value) {
-            if (this._selectedIndexes !== value) {
+            if (this.selectedIndexes !== value) {
                 var newIndexes = value ? this._convertIndexesFromOrganizedToContent(value) : null,
                     newSelection = null;
+
                 if (this.delegate && typeof this.delegate.shouldChangeSelection === "function") {
                     if (newIndexes) {
                         newSelection = this.content.filter(function(value, i) {
@@ -294,14 +313,17 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
                     }
                 }
 
-                this._selectedIndexes = value;
 
-                this.dispatchPropertyChange("selectedContentIndexes", "selectedObjects", function() {
+                // _selectedIndexes is assigned in the dispatcher because "selectedContentIndexes", "selectedObjects" and "selections" depend on _selectedIndexes, so in order to have a correct "minus" (and prevent the premature creation of those values) in the notification we need to hold back the change.
+                this.dispatchPropertyChange("selectedContentIndexes", "selectedObjects", "selections", function() {
+                    this._selectedIndexes = value;
                     this._selectedContentIndexes = newIndexes;
                     this._selectedObjects = null;
+                    this._selections = null;
                 });
             }
-        }
+        },
+        serializable: true
     },
 
     /**
@@ -372,19 +394,18 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
         value: function() {
 
             var organizedObjects = this.content,
-                funktion = this.filterFunction,
+                filterFunction = this.filterFunction,
+                sortFunction = this.sortFunction,
                 index = 0,
                 newIndex = 0,
                 filteredIndexes,
                 sortedIndexes,
-                startIndex = this.startIndex,
-                endIndex = this.endIndex,
                 tmpArray, item;
 
-            if (organizedObjects && typeof funktion === "function") {
+            if (organizedObjects && typeof filterFunction === "function") {
                 filteredIndexes = [];
                 organizedObjects = organizedObjects.filter(function filterFunctionWrapper(item) {
-                    var filterValue = funktion.call(this, item);
+                    var filterValue = filterFunction.call(this, item);
                     if (filterValue) {
                         // we are going to keep the item in the new array
                         filteredIndexes[newIndex] = index;
@@ -395,7 +416,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
                 }, this);
             }
 
-            if (typeof (funktion = this._sortFunction) === "function") {
+            if (typeof sortFunction === "function") {
 
                 // need to attach index information so that we can pick it up after the sort
                 // this has the added side effect of creating a clone of the array so that if it wasn't filtered,
@@ -426,7 +447,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
                     if (b._montage_array_controller_value) {
                         b = b._montage_array_controller_value;
                     }
-                    return funktion.call(this, a, b);
+                    return sortFunction.call(this, a, b);
                 });
 
                 // get all the new indexes
@@ -459,8 +480,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
         value: function(organizedObjects) {
 
             var startIndex = this.startIndex,
-                endIndex = this.endIndex,
-                changeEvent;
+                endIndex = this.endIndex;
 
 
             // We apply the range after the content is filtered and sorted
@@ -489,7 +509,6 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @private
      */
     _selectedObjects: {
-        enumerable: false,
         value: null
     },
 
@@ -501,7 +520,6 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @fires change@selectedContentIndexes
      */
     selectedObjects: {
-        enumerable: false,
         get: function() {
 
             if (this._selectedObjects) {
@@ -533,7 +551,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
 
             // TODO validate the array content maybe?
 
-            if (this._selectedObjects === value) {
+            if (this.selectedObjects === value) {
                 return;
             }
 
@@ -542,20 +560,22 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
                     return;
                 }
             }
-            this._selectedObjects = value;
 
-            this.dispatchPropertyChange("selectedContentIndexes", "selectedIndexes", function() {
+            // _selectedObjects is assigned in the dispatcher because "selectedContentIndexes", "selectedIndexes" and "selections" depend on _selectedObjects, so in order to have a correct "minus" (and prevent the premature creation of those values) in the notification we need to hold back the change.
+            this.dispatchPropertyChange("selectedContentIndexes", "selectedIndexes", "selections", function() {
+                this._selectedObjects = value;
                 this._selectedContentIndexes = null;
                 this._selectedIndexes = null;
+                this._selections = null;
             });
-        }
+        },
+        serializable: true
     },
 
     /**
      @private
      */
     _selectedContentIndexes: {
-        enumerable: false,
         value: null
     },
 
@@ -566,7 +586,6 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @default null
      */
     selectedContentIndexes: {
-        enumerable: false,
         get: function() {
 
             if (this._selectedContentIndexes) {
@@ -587,10 +606,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
 
             return this._selectedContentIndexes;
         },
-        set: function(value, internalSet) {
-            var selectedIndexesChangeEvent,
-                selectedObjectsChangeEvent;
-
+        set: function(value) {
             // Normalizing the value before the difference check prevents false-positive "changes" for things like [x]=>x
             if (value === null || value === false || typeof value === "undefined") {
                 // undefined, false => null
@@ -602,7 +618,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
 
             // TODO validate the array content maybe?
 
-            if (this._selectedContentIndexes === value) {
+            if (this.selectedContentIndexes === value) {
                 return;
             }
 
@@ -622,53 +638,12 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
 
             this._selectedContentIndexes = value;
 
-            this.dispatchPropertyChange("selectedIndexes", "selectedObjects", function() {
+            this.dispatchPropertyChange("selectedIndexes", "selectedObjects", "selections", function() {
                 this._selectedIndexes = null;
                 this._selectedObjects = null;
+                this._selections = null;
             });
 
-            if(!internalSet) {
-                // update the selections only if the selectedContentIndexes is set directly
-                this._updateSelections();
-            }
-
-        }
-    },
-
-
-    _initSelections: {
-        value: function() {
-            // create an array with null values with same
-            // length as organizedObjects
-            var len = this._organizedObjects.length;
-            var arr = [];
-            arr[0] = null;
-            arr[len-1] = null;
-
-            this._selections = arr;
-            //Object.getPropertyDescriptor(this, "selections").set.call(this, arr, true);
-        }
-    },
-
-    _updateSelections: {
-        value: function() {
-
-            if(this.selectedIndexes) {
-                this._initSelections();
-                var arr = this._selections;
-                var selectedIndexes = this.selectedIndexes || [];
-                var len = selectedIndexes.length, i=0, index;
-
-                for(i=0; i< len; i++) {
-                    index = selectedIndexes[i];
-                    if(index < arr.length-1) {
-                        arr[index] = true;
-                    }
-                }
-            }
-
-            Object.getPropertyDescriptor(this, "selections").set.call(this, arr, true);
-
         }
     },
 
@@ -676,24 +651,28 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
     _selections: {value: null},
     selections: {
         get: function() {
-            return this._selections;
-        },
-        set: function(v, internalSet) {
-            this._selections = v;
-            if(this._selections) {
-
-                if(!internalSet) {
-                    var arr = [];
-                    this._selections.forEach(function(item, i) {
-                        if(item) {
-                            arr.push(i);
+            if (!this._selections) {
+
+                this._selections = new Array(this._organizedObjects.length);
+
+                if (this.selectedIndexes) {
+
+                    var selections = this._selections,
+                        selectedIndexes = this.selectedIndexes,
+                        selectedIndexCount = selectedIndexes.length,
+                        i,
+                        index;
+
+                    for (i = 0; i < selectedIndexCount; i++) {
+                        index = selectedIndexes[i];
+                        if (index < selections.length) {
+                            selections[index] = true;
                         }
-                    });
-                    // use the internalSet flag to prevent setting the selections again,
-                    Object.getPropertyDescriptor(this, "selectedIndexes").set.call(this, arr, true);
+                    }
                 }
 
             }
+            return this._selections;
         }
     },
 
@@ -718,7 +697,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @default {Boolean} false
      */
     selectObjectsOnAddition: {
-        enumerable: false,
+        serializable: true,
         value: false
     },
 
@@ -728,7 +707,7 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
      @default {Boolean} true
      */
     clearFilterFunctionOnAddition: {
-        enumerable: false,
+        serializable: true,
         value: true
     },
 
@@ -776,15 +755,18 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             var objects = Array.prototype.slice.call(arguments),
                 i,
                 objectCount = objects.length,
-                selectedContentIndexes, firstIndex;
+                selectedContentIndexes, firstIndex,
+                content = this.content;
 
-            for (i = 0; i < objectCount; i++) {
-                this.content.push(objects[i]);
+            if (content) {
+                content.push.apply(content, objects);
+            } else {
+                this.content = content = objects;
             }
 
             if (this.selectObjectsOnAddition) {
                 selectedContentIndexes = [];
-                firstIndex = this.content.length-objectCount;
+                firstIndex = content.length-objectCount;
                 for (i = 0; i < objectCount; i++) {
                     selectedContentIndexes[i] = firstIndex++;
                 }
@@ -844,6 +826,27 @@ var ArrayController = exports.ArrayController = Montage.create(ObjectController,
             }
 
         }
+    },
+
+    removeObjectsAtSelectedIndexes: {
+        value: function() {
+            this.removeObjectsAtIndexes(this.selectedIndexes);
+        }
+    },
+
+    removeObjectsAtIndexes: {
+        value: function(indices) {
+            var remainingObjects;
+            if(indices && indices.length > 0) {
+                remainingObjects = this.content.filter(function(value, index) {
+                    return indices.indexOf(index) < 0;
+                });
+                this.content = remainingObjects;
+                if (this.automaticallyOrganizeObjects) {
+                    this.organizeObjects();
+                }
+            }
+        }
     }
 
 });
diff --git a/node_modules/montage/ui/controller/paged-array-controller.js b/node_modules/montage/ui/controller/paged-array-controller.js
deleted file mode 100755
index 80642467..00000000
--- a/node_modules/montage/ui/controller/paged-array-controller.js
+++ /dev/null
@@ -1,260 +0,0 @@
-/* <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/controller/paged-array-controller
-    @requires montage/core/core
-    @requires ui/controller/array-controller
-    @requires core/event/mutable-event
-*/
-var Montage = require("montage").Montage,
-    ArrayController = require("ui/controller/array-controller").ArrayController,
-    MutableEvent = require("core/event/mutable-event").MutableEvent;
-/**
-    @class module:montage/ui/controller/paged-array-controller.PagedArrayController
-    @extends module:montage/ui/controller/array-controller.ArrayController
-*/
-exports.PagedArrayController = Montage.create(ArrayController,/** @lends module:montage/ui/controller/paged-array-controller.PagedArrayController# */ {
-/**
-  Description TODO
-  @private
-*/
-    _pageSize: {
-        value: 10
-    },
-        //changing this should recalculate pageIndex to contain first item of previous current page
-        // via gotoOffset ?
-/**
-        Description TODO
-        @type {Function}
-        @default {Number} 10
-    */
-    pageSize: {
-        get: function() {
-            return this._pageSize;
-        },
-        set: function(value) {
-            if (value !== this._pageSize) {
-                this._calculate(value, this._pageIndex, this._padding);
-            }
-        }
-    },
-
-/**
-  Description TODO
-  @private
-*/
-    _padding: {
-        value: 0
-    },
-    // changing this should change the organized object to have the new padding
-/**
-        Description TODO
-        @type {Function}
-        @default {Number} 0
-    */
-    padding: {
-        get: function() {
-            return this._padding;
-        },
-        set: function(value) {
-            if (value !== this._padding) {
-                this._calculate(this._pageSize, this._pageIndex, value);
-            }
-        }
-    },
-/**
-  Description TODO
-  @private
-*/
-    _pageIndex: {
-        value: 0,
-        enumerable: false
-    },
-        // changing this should change the start and endIndex
-/**
-        Description TODO
-        @type {Function}
-        @default {Number} 0
-    */
-    pageIndex: {
-        get: function() {
-            return this._pageIndex;
-        },
-        set: function(pageIndex) {
-            if (pageIndex !== this._pageIndex) {
-                pageIndex = pageIndex >= this.pageCount ? this.pageCount - 1 : pageIndex < 0 ? 0 : pageIndex;
-                this._calculate(this._pageSize, pageIndex, this._padding);
-            }
-        }
-    },
-
- /**
-  Description TODO
-  @private
-*/
-    _pageCount: {
-        value: null,
-        enumerable: false
-    },
-/**
-        Description TODO
-        @type {Function}
-        @default null
-    */
-    pageCount: {
-        get: function() {
-            return this._pageCount;
-        }
-    },
-
-/**
-        Description TODO
-        @type {Function}
-        @default {Array} array
-    */
-    pageNumber: {
-        dependencies: ["pageIndex"],
-        get: function() {
-            return this._pageIndex + 1;
-        }
-    },
-
- /**
-  Description TODO
-  @private
-*/
-    _calculate: {
-        value: function(pageSize, pageIndex, padding) {
-            var contentLength = this.content.length,
-                pageCount = this._pageCount,
-                startIndex, endIndex,
-                pageSizeChangeEvent,
-                pageIndexChangeEvent,
-                paddingChangeEvent,
-                pageCountChangeEvent,
-                startIndexChangeEvent,
-                endIndexChangeEvent;
-
-            if (pageSize !== this._pageSize) {
-                pageSizeChangeEvent = MutableEvent.changeEventForKeyAndValue("pageSize", this._pageSize);
-                this._pageSize = pageSize;
-            }
-            if (pageIndex !== this._pageIndex) {
-                pageIndexChangeEvent = MutableEvent.changeEventForKeyAndValue("pageIndex", this._pageIndex);
-                this._pageIndex = pageIndex;
-            }
-            if (padding !== this._padding) {
-                paddingChangeEvent = MutableEvent.changeEventForKeyAndValue("padding", this._padding);
-                this._padding = padding;
-            }
-
-            pageCountChangeEvent = MutableEvent.changeEventForKeyAndValue("pageCount", pageCount);
-            this._pageCount = pageCount = Math.ceil(contentLength / pageSize);
-
-            startIndexChangeEvent = MutableEvent.changeEventForKeyAndValue("startIndex", this._startIndex);
-            startIndex = pageIndex * pageSize - padding;
-            this._startIndex = startIndex = startIndex < 0 ? 0 : startIndex;
-
-            endIndexChangeEvent = MutableEvent.changeEventForKeyAndValue("endIndex", this._endIndex);
-            endIndex = pageIndex * pageSize + pageSize + padding;
-            this._endIndex = endIndex = endIndex > contentLength ? contentLength : endIndex;
-
-            if (pageCountChangeEvent.minus !== pageCount) {
-                this.dispatchEvent(pageCountChangeEvent.withPlusValue(pageCount));
-            }
-            if (startIndexChangeEvent.minus !== startIndex) {
-                this.dispatchEvent(startIndexChangeEvent.withPlusValue(startIndex));
-            }
-            if (endIndexChangeEvent.minus !== endIndex) {
-                this.dispatchEvent(endIndexChangeEvent.withPlusValue(endIndex));
-            }
-            if (pageSizeChangeEvent) {
-                this.dispatchEvent(pageSizeChangeEvent.withPlusValue(pageSize));
-            }
-            if (pageIndexChangeEvent) {
-                this.dispatchEvent(pageIndexChangeEvent.withPlusValue(pageIndex));
-            }
-            if (paddingChangeEvent) {
-                this.dispatchEvent(paddingChangeEvent.withPlusValue(padding));
-            }
-        }
-    },
-/**
-    Description TODO
-    @function
-    */
-    gotoFirstPage: {
-        value: function() {
-            this.gotoPage(0);
-        }
-    },
-/**
-    Description TODO
-    @function
-    */
-    gotoLastPage: {
-        value: function() {
-            this.gotoPage(this.pageCount - 1);
-        }
-    },
-/**
-    Description TODO
-    @function
-    */
-    gotoNextPage: {
-        value: function() {
-            this.gotoPage(this.pageIndex + 1);
-        }
-    },
-/**
-    Description TODO
-    @function
-    */
-    gotoPreviousPage: {
-        value: function() {
-            this.gotoPage(this.pageIndex - 1);
-        }
-    },
-/**
-    Sets the currentPage so that the desired item is contained in that page.
-    @function
-    @param {Array} pageIndex The index of the item to be shown.
-    */
-    gotoPage: {
-        value: function(pageIndex) {
-            this.pageIndex = pageIndex;
-        }
-    },
-/**
-    Sets the currentPage so that the desired item is contained in that page.
-    @function
-    @param {Math} offset The index of the item to be shown.
-    */
-    gotoContentIndex: {
-        value: function(offset) {
-            this.gotoPage(Math.floor(offset / this.pageSize));
-        }
-    },
-
- /**
-        Description TODO
-        @type {Function}
-        @default null
-    */
-    content: {
-        get: function() {
-            return Object.getPropertyDescriptor(ArrayController, "content").get.call(this);
-        },
-        set: function(value) {
-            if (value !== this.content) {
-