sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/platform.js

@@ -4,7 +4,7 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-/*global jQuery*/
+
 
 /**
   A constant indicating an unsupported method, property or other.
@@ -81,25 +81,44 @@ SC.platform = SC.Object.create({
   touch: (!SC.none(window.ontouchstart) || SC.browser.name === SC.BROWSER.android || 'ontouchstart' in document.documentElement) && SC.none(window._phantom),
 
   /**
-    YES if the current browser supports bounce on scroll.
+    True if bouncing on scroll is expected in the current platform.
 
     @type Boolean
   */
   bounceOnScroll: SC.browser.os === SC.OS.ios,
 
   /**
-    YES if the current browser supports pinch to zoom.
+    True if pinch-to-zoom is expected in the current platform.
 
     @type Boolean
   */
-  pinchToZoom:  SC.browser.os === SC.OS.ios,
+  pinchToZoom: SC.browser.os === SC.OS.ios,
+
+  /**
+    A hash that contains properties that indicate support for new HTML5
+    a attributes.
+
+    For example, to test to see if the `download` attribute is supported,
+    you would verify that `SC.platform.a.download` is true.
+
+    @type Array
+  */
+  a: function () {
+    var elem = document.createElement('a');
+
+    return {
+      download: !!('download' in elem),
+      media: !!('media' in elem),
+      ping: !!('ping' in elem),
+    };
+  }(),
 
   /**
     A hash that contains properties that indicate support for new HTML5
     input attributes.
 
-    For example, to test to see if the placeholder attribute is supported,
-    you would verify that SC.platform.input.placeholder is YES.
+    For example, to test to see if the `placeholder` attribute is supported,
+    you would verify that `SC.platform.input.placeholder` is true.
 
     @type Array
   */
@@ -117,7 +136,8 @@ SC.platform = SC.Object.create({
 
     return ret;
   }(['autocomplete', 'readonly', 'list', 'size', 'required', 'multiple', 'maxlength',
-      'pattern', 'min', 'max', 'step', 'placeholder']),
+        'pattern', 'min', 'max', 'step', 'placeholder',
+        'selectionStart', 'selectionEnd', 'selectionDirection']),
 
   /**
     YES if the application is currently running as a standalone application.
@@ -396,6 +416,34 @@ SC.platform = SC.Object.create({
     return !!document.createElement('canvas').getContext;
   }(),
 
+  /**
+    Whether the browser supports the XHR2 ProgressEvent specification. This
+    reliably implies support for XMLHttpRequest 'loadstart' and 'progress'
+    events, as well as the terminal 'load', 'error' and 'abort' events. Support
+    for 'loadend', which fires no matter how the request terminats, is a bit
+    spottier and should be verified separately using `supportsXHR2LoadEndEvent`.
+
+    @type Boolean
+  */
+  supportsXHR2ProgressEvent: ('ProgressEvent' in window),
+
+  /**
+    Whether the browser supports the XHR2 FormData specification.
+
+    @type Boolean
+  */
+  supportsXHR2FormData: ('FormData' in window),
+
+  /**
+    Whether the browser supports the XHR2 ProgressEvent's loadend event. If not
+    supported, you should handle 'load', 'error' and 'abort' events instead.
+
+    @type Boolean
+   */
+  supportsXHR2LoadEndEvent: function () {
+    return (new XMLHttpRequest).onloadend === null;
+  } (),
+
   /**
     Whether the browser supports the orientationchange event.
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/render_context.js

@@ -882,30 +882,35 @@ SC.RenderContext = SC.Builder.create(
     // Add the updated styles to the internal styles object.
     if (SC.typeOf(nameOrStyles) === SC.T_HASH) {
       for (var key in nameOrStyles) {
-        if (!nameOrStyles.hasOwnProperty(key)) continue;
-
-        value = nameOrStyles[key];
-
-        didChange = this._deleteComboStyles(styles, key) || didChange;
-        didChange = this._setOnHash(styles, key, value) || didChange;
+        // Call a separate function so that it may be optimized.
+        didChange = this._sc_setStyleFromObject(didChange, key, nameOrStyles, styles);
       }
     } else {
       didChange = this._deleteComboStyles(styles, nameOrStyles);
       didChange = this._setOnHash(styles, nameOrStyles, value) || didChange;
     }
 
-    if (didChange) {
-
-      // Set the styles on the element if we have one already.
-      if (this._elem) {
-        // Note: jQuery .css doesn't remove old styles
-        this.$().css(styles);
-      }
+    // Set the styles on the element if we have one already.
+    if (didChange && this._elem) {
+      // Note: jQuery .css doesn't remove old styles
+      this.$().css(styles);
     }
 
     return this;
   },
 
+  /** @private Sets the style by key from the styles object. This allows for optimization outside of the for..in loop. */
+  _sc_setStyleFromObject: function (didChange, key, stylesObject, styles) {
+    if (!stylesObject.hasOwnProperty(key)) return false;
+
+    var value = stylesObject[key];
+
+    didChange = this._deleteComboStyles(styles, key) || didChange;
+    didChange = this._setOnHash(styles, key, value) || didChange;
+
+    return didChange;
+  },
+
   /** @private */
   _deleteComboStyles: function (styles, key) {
     var comboStyles = SC.COMBO_STYLES[key],
@@ -926,10 +931,10 @@ SC.RenderContext = SC.Builder.create(
 
   /** @private Sets or unsets the key:value on the hash and returns whether a change occurred. */
   _setOnHash: function (hash, key, value) {
-    /*jshint eqnull:true*/
     var cur = hash[key],
       didChange = true;
 
+    /*jshint eqnull:true */
     if (cur == null && value != null) {
       hash[key] = value;
     } else if (cur != null && value == null) {
@@ -1009,7 +1014,7 @@ SC.RenderContext = SC.Builder.create(
           attr = elAttrs.item(i);
           name = attr.nodeName;
           if (name.match(/^(?!class|style).*$/i)) {
-            attrs[name] = attr.nodeValue;
+            attrs[name] = attr.value;
           }
         }
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/req_anim_frame.js

@@ -2,7 +2,7 @@
   Polyfill for cross-browser backwards compatible window.requestAnimationFrame
   support.
 
-  Via Erik Möller:
+  Modified from Erik Möller:
   http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 */
 (function() {
@@ -14,18 +14,17 @@
       'CancelRequestAnimationFrame'];
   }
 
-  if (!window.requestAnimationFrame)
-    window.requestAnimationFrame = function(callback, element) {
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function(callback) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
-        timeToCall);
+      var id = window.setTimeout(function() { callback(window.performance.now()); }, timeToCall);
       lastTime = currTime + timeToCall;
       return id;
     };
+  }
 
-  if (!window.cancelAnimationFrame)
-    window.cancelAnimationFrame = function(id) {
-      clearTimeout(id);
-    };
-}())
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function(id) { clearTimeout(id); };
+  }
+}());

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/root_responder.js

@@ -7,9 +7,10 @@
 
 sc_require('system/ready');
 sc_require('system/platform');
+sc_require('system/touch');
 
 /** Set to NO to leave the backspace key under the control of the browser.*/
-SC.CAPTURE_BACKSPACE_KEY = NO;
+SC.CAPTURE_BACKSPACE_KEY = NO ;
 
 /** @class
 
@@ -57,7 +58,7 @@ SC.RootResponder = SC.Object.extend(
   */
   panes: null,
 
-  init: function () {
+  init: function() {
     sc_super();
     this.panes = SC.Set.create();
   },
@@ -91,24 +92,24 @@ SC.RootResponder = SC.Object.extend(
     @param {SC.Pane} pane
     @returns {SC.RootResponder}
   */
-  makeMainPane: function (pane) {
-    var currentMain = this.get('mainPane');
-    if (currentMain === pane) return this; // nothing to do
+  makeMainPane: function(pane) {
+    var currentMain = this.get('mainPane') ;
+    if (currentMain === pane) return this ; // nothing to do
 
-    this.beginPropertyChanges();
+    this.beginPropertyChanges() ;
 
     // change key focus if needed.
-    if (this.get('keyPane') === currentMain) this.makeKeyPane(pane);
+    if (this.get('keyPane') === currentMain) this.makeKeyPane(pane) ;
 
     // change setting
-    this.set('mainPane', pane);
+    this.set('mainPane', pane) ;
 
     // notify panes.  This will allow them to remove themselves.
-    if (currentMain) currentMain.blurMainTo(pane);
-    if (pane) pane.focusMainFrom(currentMain);
+    if (currentMain) currentMain.blurMainTo(pane) ;
+    if (pane) pane.focusMainFrom(currentMain) ;
 
-    this.endPropertyChanges();
-    return this;
+    this.endPropertyChanges() ;
+    return this ;
   },
 
   // ..........................................................
@@ -136,7 +137,7 @@ SC.RootResponder = SC.Object.extend(
     @param {SC.MenuPane} pane
     @returns {SC.RootResponder} receiver
   */
-  makeMenuPane: function (pane) {
+  makeMenuPane: function(pane) {
     // Does the specified pane accept being the menu pane?  If not, there's
     // nothing to do.
     if (pane  &&  !pane.get('acceptsMenuPane')) {
@@ -164,10 +165,11 @@ SC.RootResponder = SC.Object.extend(
   */
   keyPane: null,
 
-  /** @property
-    A stack of the previous key panes.
+  /** @private
+    A stack of previous key panes. Used to allow panes to resign key pane
+    status without having to know who had it before them.
 
-    *IMPORTANT: Property is not observable*
+    NOTE: This property is not observable.
   */
   previousKeyPanes: [],
 
@@ -180,32 +182,39 @@ SC.RootResponder = SC.Object.extend(
     @param {SC.Pane} pane
     @returns {SC.RootResponder} receiver
   */
-  makeKeyPane: function (pane) {
+  makeKeyPane: function(pane) {
+    // Quick note about previousKeyPanes: if a pane is destroyed while in the
+    // previous panes stack, it will retain a reference to it here, causing a
+    // brief leak. The reference will be removed as soon as the panes above it
+    // in the stack resign, so it's rarely an issue, and fixing it would require
+    // a dedicated method and some extra coordination that's probably not worth
+    // it.
+
     // Was a pane specified?
-    var newKeyPane, previousKeyPane, previousKeyPanes;
+    var newKeyPane, previousKeyPane, previousKeyPanes ;
 
     if (pane) {
       // Does the specified pane accept being the key pane?  If not, there's
       // nothing to do.
       if (!pane.get('acceptsKeyPane')) {
-        return this;
+        return this ;
       }
       else {
         // It does accept key pane status?  Then push the current keyPane to
         // the top of the stack and make the specified pane the new keyPane.
         // First, though, do a sanity-check to make sure it's not already the
         // key pane, in which case we have nothing to do.
-        previousKeyPane = this.get('keyPane');
+        previousKeyPane = this.get('keyPane') ;
         if (previousKeyPane === pane) {
-          return this;
+          return this ;
         }
         else {
           if (previousKeyPane) {
-            previousKeyPanes = this.get('previousKeyPanes');
-            previousKeyPanes.push(previousKeyPane);
+            previousKeyPanes = this.get('previousKeyPanes') ;
+            previousKeyPanes.push(previousKeyPane) ;
           }
 
-          newKeyPane = pane;
+          newKeyPane = pane ;
         }
       }
     } else {
@@ -214,16 +223,16 @@ SC.RootResponder = SC.Object.extend(
       // attached and accepts key pane (its value for acceptsKeyPane might
       // have changed in the meantime).  Otherwise, we'll keep going up the
       // stack.
-      previousKeyPane = this.get('keyPane');
-      previousKeyPanes = this.get('previousKeyPanes');
+      previousKeyPane = this.get('keyPane') ;
+      previousKeyPanes = this.get('previousKeyPanes') ;
 
-      newKeyPane = null;
+      newKeyPane = null ;
       var candidate;
       while (previousKeyPanes.length > 0) {
         candidate = previousKeyPanes.pop();
         if (candidate.get('isPaneAttached')  &&  candidate.get('acceptsKeyPane')) {
-          newKeyPane = candidate;
-          break;
+          newKeyPane = candidate ;
+          break ;
         }
       }
     }
@@ -232,20 +241,20 @@ SC.RootResponder = SC.Object.extend(
     // If we found an appropriate candidate, make it the new key pane.
     // Otherwise, make the main pane the key pane (if it accepts it).
     if (!newKeyPane) {
-      var mainPane = this.get('mainPane');
-      if (mainPane && mainPane.get('acceptsKeyPane')) newKeyPane = mainPane;
+      var mainPane = this.get('mainPane') ;
+      if (mainPane && mainPane.get('acceptsKeyPane')) newKeyPane = mainPane ;
     }
 
     // now notify old and new key views of change after edit
-    if (previousKeyPane) previousKeyPane.willLoseKeyPaneTo(newKeyPane);
-    if (newKeyPane) newKeyPane.willBecomeKeyPaneFrom(previousKeyPane);
+    if (previousKeyPane) previousKeyPane.willLoseKeyPaneTo(newKeyPane) ;
+    if (newKeyPane) newKeyPane.willBecomeKeyPaneFrom(previousKeyPane) ;
 
-    this.set('keyPane', newKeyPane);
+    this.set('keyPane', newKeyPane) ;
 
-    if (newKeyPane) newKeyPane.didBecomeKeyPaneFrom(previousKeyPane);
-    if (previousKeyPane) previousKeyPane.didLoseKeyPaneTo(newKeyPane);
+    if (newKeyPane) newKeyPane.didBecomeKeyPaneFrom(previousKeyPane) ;
+    if (previousKeyPane) previousKeyPane.didLoseKeyPaneTo(newKeyPane) ;
 
-    return this;
+    return this ;
   },
 
   // ..........................................................
@@ -264,14 +273,14 @@ SC.RootResponder = SC.Object.extend(
 
     @returns Rect
   */
-  computeWindowSize: function () {
+  computeWindowSize: function() {
     var size, bod, docElement;
-    if (!this._bod || !this._docElement) {
+    if(!this._bod || !this._docElement){
       bod = document.body;
       docElement = document.documentElement;
-      this._bod = bod;
-      this._docElement = docElement;
-    } else {
+      this._bod=bod;
+      this._docElement=docElement;
+    }else{
       bod = this._bod;
       docElement = this._docElement;
     }
@@ -280,7 +289,7 @@ SC.RootResponder = SC.Object.extend(
       size = {
         width: window.innerWidth,
         height: window.innerHeight
-      };
+      } ;
     } else if (docElement && docElement.clientHeight) {
       size = {
         width: docElement.clientWidth,
@@ -290,7 +299,7 @@ SC.RootResponder = SC.Object.extend(
       size = {
         width: bod.clientWidth,
         height: bod.clientHeight
-      };
+      } ;
     }
     return size;
   },
@@ -300,27 +309,46 @@ SC.RootResponder = SC.Object.extend(
 
     @returns {Boolean}
   */
-  resize: function () {
+  resize: function() {
     this._resize();
+    this._assignDesignMode();
 
     return YES; //always allow normal processing to continue.
   },
 
-  _resize: function () {
+  /** @private */
+  _resize: function() {
     // calculate new window size...
     var newSize = this.computeWindowSize(), oldSize = this.get('currentWindowSize');
     this.set('currentWindowSize', newSize); // update size
 
     if (!SC.rectsEqual(newSize, oldSize)) {
+      SC.run(function() {
+        //Notify orientation change. This is faster than waiting for the orientation
+        //change event.
+        SC.device.windowSizeDidChange(newSize);
+
+        // notify panes
+        if (this.panes) {
+            if (oldSize !== newSize) {
+              this.panes.invoke('windowSizeDidChange', oldSize, newSize);
+            }
+        }
+      }, this);
+    }
+  },
 
-      //Notify orientation change. This is faster than waiting for the orientation
-      //change event.
-      SC.device.windowSizeDidChange(newSize);
+  /** @private */
+  _assignDesignMode: function () {
+    var newDesignMode = this.computeDesignMode(),
+      oldDesignMode = this.get('currentDesignMode');
+
+    if (oldDesignMode !== newDesignMode) {
+      this.set('currentDesignMode', newDesignMode);
 
-      // notify panes
       if (this.panes) {
-        SC.run(function () {
-          this.panes.invoke('windowSizeDidChange', oldSize, newSize);
+        SC.run(function() {
+          this.panes.invoke('updateDesignMode', oldDesignMode, newDesignMode);
         }, this);
       }
     }
@@ -340,46 +368,46 @@ SC.RootResponder = SC.Object.extend(
     Handle window focus.  Change hasFocus and add sc-focus CSS class
     (removing sc-blur).  Also notify panes.
   */
-  focus: function (evt) {
+  focus: function(evt) {
     if (!this.get('hasFocus')) {
       SC.$('body').addClass('sc-focus').removeClass('sc-blur');
 
       SC.run(function () {
-        // If the app is getting focus again set the first responder to the first
-        // valid firstResponder view in the view's tree
-        if (!SC.TABBING_ONLY_INSIDE_DOCUMENT && !SC.browser.isIE8OrLower) {
-          var keyPane = SC.RootResponder.responder.get('keyPane');
-          if (keyPane) {
-            var nextValidKeyView = keyPane.get('nextValidKeyView');
-            if (nextValidKeyView) keyPane.makeFirstResponder(nextValidKeyView);
-          }
+      // If the app is getting focus again set the first responder to the first
+      // valid firstResponder view in the view's tree
+      if(!SC.TABBING_ONLY_INSIDE_DOCUMENT && !SC.browser.isIE8OrLower){
+        var keyPane = SC.RootResponder.responder.get('keyPane');
+        if (keyPane) {
+          var nextValidKeyView = keyPane.get('nextValidKeyView');
+          if (nextValidKeyView) keyPane.makeFirstResponder(nextValidKeyView);
         }
+      }
 
         this.set('hasFocus', YES);
       }, this);
     }
 
-    return YES; // allow default
+    return YES ; // allow default
   },
 
   /**
     Handle window focus event for IE. Listening to the focus event is not
     reliable as per every focus event you receive you immediately get a blur
-    event (Only on IE of course;)
+    event (Only on IE of course ;)
   */
-  focusin: function (evt) {
-    if (this._focusTimeout) clearTimeout(this._focusTimeout);
+  focusin: function(evt) {
+    if(this._focusTimeout) clearTimeout(this._focusTimeout);
     this.focus(evt);
   },
 
   /**
     Handle window blur event for IE. Listening to the focus event is not
     reliable as per every focus event you receive you immediately get a blur
-    event (Only on IE of course;)
+    event (Only on IE of course ;)
   */
-  focusout: function (evt) {
+  focusout: function(evt) {
     var that = this;
-    this._focusTimeout = setTimeout(function () { that.blur(evt); }, 300);
+    this._focusTimeout = setTimeout(function(){that.blur(evt);}, 300);
   },
 
 
@@ -387,20 +415,128 @@ SC.RootResponder = SC.Object.extend(
     Handle window focus.  Change hasFocus and add sc-focus CSS class (removing
     sc-blur).  Also notify panes.
   */
-  blur: function (evt) {
+  blur: function(evt) {
     if (this.get('hasFocus')) {
       SC.$('body').addClass('sc-blur').removeClass('sc-focus');
 
-      SC.run(function () {
+      SC.run(function() {
         this.set('hasFocus', NO);
       }, this);
     }
-    return YES; // allow default
+    return YES ; // allow default
+  },
+
+  dragDidStart: function(drag) {
+    this._mouseDownView = drag ;
+    this._drag = drag ;
+  },
+
+  // ------------------------------------------------------------------------
+  // Design Modes
+  //
+
+  /** @private */
+  currentDesignMode: null,
+
+  /** @private Managed by SC.Application. */
+  designModes: function (key, value) {
+    if (SC.none(value)) {
+      // Clear previous values.
+      if (this._designModeNames) {
+        delete this._designModeNames;
+        delete this._designModeThresholds;
+      }
+
+      value = null;
+    } else {
+      this._prepOrderedArrays(value);
+    }
+
+    this._assignDesignMode();
+
+    return value;
+  }.property().cacheable(),
+
+  /** @private Determine the design mode based on area and pixel density. */
+  computeDesignMode: function () {
+    var designMode = null,
+      designModeNames = this._designModeNames,
+      designModeThresholds = this._designModeThresholds,
+      currentWindowSize,
+      area;
+
+    // Fast path!
+    if (!designModeNames) { return null; }
+
+    currentWindowSize = this.get('currentWindowSize');
+    area = (currentWindowSize.width * currentWindowSize.height);
+    var i, len;
+    for (i = 0, len = designModeThresholds.get('length'); i < len; i++) {
+      var layoutWidthThreshold = designModeThresholds.objectAt(i);
+      if (area < layoutWidthThreshold) {
+        designMode = designModeNames.objectAt(i);
+        break;
+      }
+    }
+
+    // If no smaller designMode was found, use the biggest designMode.
+    if (SC.none(designMode) && designModeNames && designModeNames.get('length') > 0) {
+      designMode = designModeNames.objectAt(i);
+    }
+
+    return SC.device.orientation === SC.PORTRAIT_ORIENTATION ? designMode + '_p' : designMode + '_l';
+  },
+
+  /** @private (semi-private)
+    Returns the fallback design mode for the given design mode.  This is
+    primarily used by SC.View for the case where an adjustment isn't found
+    for the current design mode and we want to apply the next best design
+    mode as a fallback.
+  */
+  fallbackDesignMode: function (designMode) {
+    var designModeNames = this._designModeNames,
+      index,
+      ret = null;
+
+    index = designModeNames.indexOf(designMode);
+    if (index >= 0) {
+      ret = designModeNames[index - 1];
+    }
+
+    return ret;
   },
 
-  dragDidStart: function (drag) {
-    this._mouseDownView = drag;
-    this._drag = drag;
+  /** @private Prepares ordered design modes & widths arrays when designModes changes. */
+  _prepOrderedArrays: function (designModes) {
+    var designModeNames,
+      designModeThresholds;
+
+    // Order the design modes for easier access later.
+    if (designModes) {
+      designModeNames = this._designModeNames = [];
+      designModeThresholds = this._designModeThresholds = [];
+
+      var key;
+
+      outer:
+        for (key in designModes) {
+          var i, value;
+
+          // Assume that the keys will be ordered smallest to largest so run backwards.
+          value = designModes[key];
+          inner:
+            for (i = designModeThresholds.length - 1; i >= 0; i--) {
+              if (designModeThresholds[i] < value) {
+                // Exit early!
+                break inner;
+              }
+            }
+
+          i += 1;
+          designModeNames.splice(i, 0, key);
+          designModeThresholds.splice(i, 0, value);
+        }
+    }
   },
 
   // .......................................................
@@ -436,8 +572,8 @@ SC.RootResponder = SC.Object.extend(
     @returns {Boolean} YES if action was performed, NO otherwise
     @test in targetForAction
   */
-  sendAction: function (action, target, sender, pane, context, firstResponder) {
-    target = this.targetForAction(action, target, sender, pane, firstResponder);
+  sendAction: function( action, target, sender, pane, context, firstResponder) {
+    target = this.targetForAction(action, target, sender, pane, firstResponder) ;
 
     // HACK: If the target is a ResponderContext, forward the action.
     if (target && target.isResponderContext) {
@@ -445,14 +581,14 @@ SC.RootResponder = SC.Object.extend(
     } else return target && target.tryToPerform(action, sender);
   },
 
-  _responderFor: function (target, methodName, firstResponder) {
+  _responderFor: function(target, methodName, firstResponder) {
     var defaultResponder = target ? target.get('defaultResponder') : null;
 
     if (target) {
       target = firstResponder || target.get('firstResponder') || target;
       do {
-        if (target.respondsTo(methodName)) return target;
-      } while ((target = target.get('nextResponder')));
+        if (target.respondsTo(methodName)) return target ;
+      } while ((target = target.get('nextResponder'))) ;
     }
 
     // HACK: Eventually we need to normalize the sendAction() method between
@@ -489,11 +625,11 @@ SC.RootResponder = SC.Object.extend(
     @param {firstResponder} a first responder to use
     @returns {Object} target object or null if none found
   */
-  targetForAction: function (methodName, target, sender, pane, firstResponder) {
+  targetForAction: function(methodName, target, sender, pane, firstResponder) {
 
     // 1. no action, no target...
     if (!methodName || (SC.typeOf(methodName) !== SC.T_STRING)) {
-      return null;
+      return null ;
     }
 
     // 2. an explicit target was passed...
@@ -505,13 +641,13 @@ SC.RootResponder = SC.Object.extend(
 
       if (target && !target.isResponderContext) {
         if (target.respondsTo && !target.respondsTo(methodName)) {
-          target = null;
+          target = null ;
         } else if (SC.typeOf(target[methodName]) !== SC.T_FUNCTION) {
-          target = null;
+          target = null ;
         }
       }
 
-      return target;
+      return target ;
     }
 
     // 3. an explicit pane was passed...
@@ -522,32 +658,32 @@ SC.RootResponder = SC.Object.extend(
 
     // 4. no target or pane passed... try to find target in the active panes
     // and the defaultResponder
-    var keyPane = this.get('keyPane'), mainPane = this.get('mainPane');
+    var keyPane = this.get('keyPane'), mainPane = this.get('mainPane') ;
 
     // ...check key and main panes first
     if (keyPane && (keyPane !== pane)) {
-      target = this._responderFor(keyPane, methodName);
+      target = this._responderFor(keyPane, methodName) ;
     }
     if (!target && mainPane && (mainPane !== keyPane)) {
-      target = this._responderFor(mainPane, methodName);
+      target = this._responderFor(mainPane, methodName) ;
     }
 
     // ...still no target? check the defaultResponder...
     if (!target && (target = this.get('defaultResponder'))) {
       if (SC.typeOf(target) === SC.T_STRING) {
-        target = SC.objectForPropertyPath(target);
-        if (target) this.set('defaultResponder', target); // cache if found
+        target = SC.objectForPropertyPath(target) ;
+        if (target) this.set('defaultResponder', target) ; // cache if found
       }
       if (target && !target.isResponderContext) {
         if (target.respondsTo && !target.respondsTo(methodName)) {
-          target = null;
+          target = null ;
         } else if (SC.typeOf(target[methodName]) !== SC.T_FUNCTION) {
-          target = null;
+          target = null ;
         }
       }
     }
 
-    return target;
+    return target ;
   },
 
   /**
@@ -558,7 +694,10 @@ SC.RootResponder = SC.Object.extend(
     @returns {SC.View} view instance or null
   */
   targetViewForEvent: function (evt) {
-    return evt.target ? SC.$(evt.target).view()[0] : null;
+    var ret = null;
+    if (evt.target) { ret = SC.viewFor(evt.target); }
+
+    return ret;
   },
 
   /**
@@ -575,19 +714,19 @@ SC.RootResponder = SC.Object.extend(
     @param {Object} target
     @returns {Object} object that handled the event or null if not handled
   */
-  sendEvent: function (action, evt, target) {
-    var pane, ret;
+  sendEvent: function(action, evt, target) {
+    var pane, ret ;
 
-    SC.run(function () {
+    SC.run(function() {
       // get the target pane
-      if (target) pane = target.get('pane');
-      else pane = this.get('menuPane') || this.get('keyPane') || this.get('mainPane');
+      if (target) pane = target.get('pane') ;
+      else pane = this.get('menuPane') || this.get('keyPane') || this.get('mainPane') ;
 
       // if we found a valid pane, send the event to it
-      ret = (pane) ? pane.sendEvent(action, evt, target) : null;
+      ret = (pane) ? pane.sendEvent(action, evt, target) : null ;
     }, this);
 
-    return ret;
+    return ret ;
   },
 
   // .......................................................
@@ -607,16 +746,16 @@ SC.RootResponder = SC.Object.extend(
     @param {Boolean} useCapture
     @returns {SC.RootResponder} receiver
   */
-  listenFor: function (keyNames, target, receiver, useCapture) {
+  listenFor: function(keyNames, target, receiver, useCapture) {
     receiver = receiver ? receiver : this;
-    keyNames.forEach(function (keyName) {
-      var method = receiver[keyName];
-      if (method) SC.Event.add(target, keyName, receiver, method, null, useCapture);
-    }, this);
+    keyNames.forEach( function(keyName) {
+      var method = receiver[keyName] ;
+      if (method) SC.Event.add(target, keyName, receiver, method, null, useCapture) ;
+    },this) ;
 
-    target = null;
+    target = null ;
 
-    return receiver;
+    return receiver ;
   },
 
   /**
@@ -626,20 +765,20 @@ SC.RootResponder = SC.Object.extend(
 
     @returns {void}
   */
-  setup: function () {
+  setup: function() {
     // handle basic events
-    this.listenFor(['touchstart', 'touchmove', 'touchend', 'touchcancel', 'keydown', 'keyup', 'beforedeactivate', 'mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'contextmenu'], document)
+    this.listenFor(['touchstart', 'touchmove', 'touchend', 'touchcancel', 'keydown', 'keyup', 'beforedeactivate', 'mousedown', 'mouseup', 'dragenter', 'dragover', 'dragleave', 'drop', 'click', 'dblclick', 'mousemove', 'contextmenu'], document)
         .listenFor(['resize'], window);
 
-    if (SC.browser.isIE8OrLower) this.listenFor(['focusin', 'focusout'], document);
+    if(SC.browser.isIE8OrLower) this.listenFor(['focusin', 'focusout'], document);
     else this.listenFor(['focus', 'blur'], window);
 
     // handle special case for keypress- you can't use normal listener to block
     // the backspace key on Mozilla
     if (this.keypress) {
       if (SC.CAPTURE_BACKSPACE_KEY && SC.browser.isMozilla) {
-        var responder = this;
-        document.onkeypress = function (e) {
+        var responder = this ;
+        document.onkeypress = function(e) {
           e = SC.Event.normalizeEvent(e);
           return responder.keypress.call(responder, e);
         };
@@ -702,19 +841,19 @@ SC.RootResponder = SC.Object.extend(
     }
 
     // handle these two events specially in IE
-    ['drag', 'selectstart'].forEach(function (keyName) {
-      var method = this[keyName];
+    ['drag', 'selectstart'].forEach(function(keyName) {
+      var method = this[keyName] ;
       if (method) {
         if (SC.browser.isIE) {
-          var responder = this;
+          var responder = this ;
 
-          document.body['on' + keyName] = function (e) {
+          document.body['on' + keyName] = function(e) {
             // return method.call(responder, SC.Event.normalizeEvent(e));
             return method.call(responder, SC.Event.normalizeEvent(event || window.event)); // this is IE :(
           };
 
           // be sure to cleanup memory leaks
-          SC.Event.add(window, 'unload', this, function () {
+           SC.Event.add(window, 'unload', this, function() {
             document.body['on' + keyName] = null;
           });
 
@@ -741,8 +880,8 @@ SC.RootResponder = SC.Object.extend(
     }
     SC.Event.add(document, mousewheel, this, this.mousewheel);
 
-    // do some initial set
-    this.set('currentWindowSize', this.computeWindowSize());
+    // Do some initial set up.
+    this.set('currentWindowSize', this.computeWindowSize()) ;
 
     // TODO: Is this workaround still valid?
     if (SC.browser.os === SC.OS.ios && SC.browser.name === SC.BROWSER.safari) {
@@ -757,7 +896,7 @@ SC.RootResponder = SC.Object.extend(
       // Monkey patch RunLoop if we're in MobileSafari
       var f = SC.RunLoop.prototype.endRunLoop, patch;
 
-      patch = function () {
+      patch = function() {
         // Call original endRunLoop implementation.
         if (f) f.apply(this, arguments);
 
@@ -832,10 +971,10 @@ SC.RootResponder = SC.Object.extend(
     // Once the actual event name is determined, simply remove all the extras.
     // This should prevent any problems with browsers that fire multiple events.
     ['transitionend', variation1, variation2, variation3].forEach(function (keyName) {
-      if (keyName != actualEventName) {
+      if (keyName !== actualEventName) {
         SC.Event.remove(document, keyName, this, this[keyName]);
         this[keyName] = null;
-      }
+    }
     });
   },
 
@@ -860,10 +999,10 @@ SC.RootResponder = SC.Object.extend(
     // Once the actual event name is determined, simply remove all the extras.
     // This should prevent any problems with browsers that fire multiple events.
     ['animationend', variation1, variation2, variation3].forEach(function (keyName) {
-      if (keyName != actualEventName) {
+      if (keyName !== actualEventName) {
         SC.Event.remove(document, keyName, this, this[keyName]);
         this[keyName] = null;
-      }
+    }
     });
 
     actualEventName = SC.platform.animationiterationEventName;
@@ -871,7 +1010,7 @@ SC.RootResponder = SC.Object.extend(
     variation2 = lowerDomPrefix + 'AnimationIteration';
     variation3 = domPrefix + 'AnimationIteration';
     ['animationiteration', variation1, variation2, variation3].forEach(function (keyName) {
-      if (keyName != actualEventName) {
+      if (keyName !== actualEventName) {
         SC.Event.remove(document, keyName, this, this[keyName]);
         this[keyName] = null;
       }
@@ -882,7 +1021,7 @@ SC.RootResponder = SC.Object.extend(
     variation2 = lowerDomPrefix + 'AnimationStart';
     variation3 = domPrefix + 'AnimationStart';
     ['animationstart', variation1, variation2, variation3].forEach(function (keyName) {
-      if (keyName != actualEventName) {
+      if (keyName !== actualEventName) {
         SC.Event.remove(document, keyName, this, this[keyName]);
         this[keyName] = null;
       }
@@ -892,12 +1031,6 @@ SC.RootResponder = SC.Object.extend(
   // ...........................................................................
   // TOUCH SUPPORT
   //
-  /*
-    There are three events: touchStart, touchEnd and touchesDragged.
-
-    The touchStart and touchEnd events are called individually for each touch.
-    The touchesDragged events are sent to whichever view owns the touch event.
-  */
 
   /**
     @private
@@ -920,8 +1053,10 @@ SC.RootResponder = SC.Object.extend(
 
     When views receive a touch event, they have the option to subscribe to it.
     They are then mapped to touch events and vice-versa. This returns touches mapped to the view.
+
+    This method is also available on SC.Touch objects, and you will usually call it from there.
   */
-  touchesForView: function (view) {
+  touchesForView: function(view) {
     if (this._touchedViews[SC.guidFor(view)]) {
       return this._touchedViews[SC.guidFor(view)].touches;
     }
@@ -929,43 +1064,54 @@ SC.RootResponder = SC.Object.extend(
 
   /**
     Computes a hash with x, y, and d (distance) properties, containing the average position
-    of all touches, and the average distance of all touches from that average.
+    of all touches, and the average distance of all touches from that average. This is useful
+    for implementing scaling.
 
-    This is useful for implementing scaling.
+    This method is also available on SC.Touch objects, and you will usually call it from there.
+
+    @param {SC.View} view The view whose touches should be averaged.
+    @param {SC.Touch} additionalTouch This method uses touchesForView; if you call it from
+        touchStart, that touch will not yet be included in touchesForView. To accommodate this,
+        you should pass the view to this method (or pass YES to SC.Touch#averagedTouchesForView's
+        `addSelf` argument).
   */
-  averagedTouchesForView: function (view, added) {
-    var len,
-      t = this.touchesForView(view),
+  averagedTouchesForView: function(view, additionalTouch) {
+    var t = this.touchesForView(view),
+      len, averaged, additionalTouchIsDuplicate;
 
-    // cache per view to avoid gc
+    // Each view gets its own cached average touches object for performance.
     averaged = view._scrr_averagedTouches || (view._scrr_averagedTouches = {});
 
-    if ((!t || t.length === 0) && !added) {
+    // FAST PATH: no touches to track.
+    if ((!t || t.length === 0) && !additionalTouch) {
       averaged.x = 0;
       averaged.y = 0;
       averaged.d = 0;
+      averaged.velocityX = 0;
+      averaged.velocityY = 0;
       averaged.touchCount = 0;
-
-    } else {
-      // make array of touches using cached array
+    }
+    // Otherwise, average the touches.
+    else {
+      // Cache the array object used by this method. (Cleared at the end to prevent memory leaks.)
       var touches = this._averagedTouches_touches || (this._averagedTouches_touches = []);
-      touches.length = 0;
 
       // copy touches into array
       if (t) {
         var i;
         len = t.length;
-        for (i = 0; i < len; i++) {
+        for(i = 0; i < len; i++) {
           touches.push(t[i]);
+          if (additionalTouch && t[i] === additionalTouch) additionalTouchIsDuplicate = YES;
         }
       }
 
-      // add added if needed
-      if (added) touches.push(added);
+      // Add additionalTouch if present and not duplicated.
+      if (additionalTouch && !additionalTouchIsDuplicate) touches.push(additionalTouch);
 
       // prepare variables for looping
       var idx, touch,
-          ax = 0, ay = 0, dx, dy, ad = 0;
+          ax = 0, ay = 0, dx, dy, ad = 0, avx = 0, avy = 0;
       len = touches.length;
 
       // first, add
@@ -973,11 +1119,15 @@ SC.RootResponder = SC.Object.extend(
         touch = touches[idx];
         ax += touch.pageX;
         ay += touch.pageY;
+        avx += touch.velocityX;
+        avy += touch.velocityY;
       }
 
       // now, average
       ax /= len;
       ay /= len;
+      avx /= len;
+      avy /= len;
 
       // distance
       for (idx = 0; idx < len; idx++) {
@@ -996,19 +1146,26 @@ SC.RootResponder = SC.Object.extend(
 
       averaged.x = ax;
       averaged.y = ay;
+      averaged.velocityX = avx;
+      averaged.velocityY = avy;
       averaged.d = ad;
       averaged.touchCount = len;
+
+      // Clear the touches array to prevent touch object leaks.
+      touches.length = 0;
     }
 
     return averaged;
   },
 
-  assignTouch: function (touch, view) {
+  assignTouch: function(touch, view) {
     // sanity-check
     if (touch.hasEnded) throw new Error("Attempt to assign a touch that is already finished.");
 
-    // unassign from old view if necessary
+    // Fast path, the touch is already assigned to the view.
     if (touch.view === view) return;
+
+    // unassign from old view if necessary
     if (touch.view) {
       this.unassignTouch(touch);
     }
@@ -1029,12 +1186,14 @@ SC.RootResponder = SC.Object.extend(
     this._touchedViews[SC.guidFor(view)].touchCount++;
   },
 
-  unassignTouch: function (touch) {
+  unassignTouch: function(touch) {
     // find view entry
     var view, viewEntry;
 
-    // get view
+    // Fast path, the touch is not assigned to a view.
     if (!touch.view) return; // touch.view should===touch.touchResponder eventually :)
+
+    // get view
     view = touch.view;
 
     // get view entry
@@ -1053,7 +1212,7 @@ SC.RootResponder = SC.Object.extend(
     touch.view = undefined;
   },
 
-  _flushQueuedTouchResponder: function () {
+  _flushQueuedTouchResponder: function(){
     if (this._queuedTouchResponder) {
       var queued = this._queuedTouchResponder;
       this._queuedTouchResponder = null;
@@ -1062,60 +1221,42 @@ SC.RootResponder = SC.Object.extend(
   },
 
   /**
-    The touch responder for any given touch is the view which will receive touch events
-    for that touch. Quite simple.
-
-    makeTouchResponder takes a potential responder as an argument, and, by calling touchStart on each
-    nextResponder, finds the actual responder. As a side-effect of how it does this, touchStart is called
-    on the new responder before touchCancelled is called on the old one (touchStart has to accept the touch
-    before it can be considered cancelled).
-
-    You usually don't have to think about this at all. However, if you don't want your view to,
-    for instance, prevent scrolling in a ScrollView, you need to make sure to transfer control
-    back to the previous responder:
-
-        if (Math.abs(touch.pageY - touch.startY) > this.MAX_SWIPE)
-          touch.restoreLastTouchResponder();
-
-    You don't call makeTouchResponder on RootResponder directly. Instead, it gets called for you
-    when you return YES to captureTouch or touchStart.
-
-    You do, however, use a form of makeTouchResponder to return to a previous touch responder. Consider
-    a button view inside a ScrollView: if the touch moves too much, the button should give control back
-    to the scroll view.
-
-        if (Math.abs(touch.pageX - touch.startX) > 4) {
-          if (touch.nextTouchResponder)
-            touch.makeTouchResponder(touch.nextTouchResponder);
-        }
-
-    This will give control back to the containing view. Maybe you only want to do it if it is a ScrollView?
-
-        if (
-          Math.abs(touch.pageX - touch.startX) > 4 &&
-          touch.nextTouchResponder &&
-          touch.nextTouchResponder.isScrollable
-        )
-          touch.makeTouchResponder(touch.nextTouchResponder);
-
-    Possible gotcha: while you can do touch.nextTouchResponder, the responders are not chained in a linked list like
-    normal responders, because each touch has its own responder stack. To navigate through the stack (or, though
-    it is not recommended, change it), use touch.touchResponders (the raw stack array).
-
-    makeTouchResponder is called with an event object. However, it usually triggers custom touchStart/touchCancelled
-    events on the views. The event object is passed so that functions such as stopPropagation may be called.
+    This method attempts to change the responder for a particular touch. The touch's responder is the
+    view which will receive touch events for that touch.
+
+    You will usually not call this method directly, instead calling one of the convenience methods on
+    the touch itself. See documentation for SC.Touch for more.
+
+    Possible gotchas:
+
+    - Because this method must search for a view which implements touchStart (without returning NO),
+      touchStart is called on the new responder before touchCancelled is called on the old one.
+    - While a touch exposes its current responder at `touchResponder` and any previous stacked one at
+      `nextTouchResponder`, their relationship is ad hoc and arbitrary, and so are not chained by
+      `nextResponder` like in a standard responder chain. To query the touch's current responder stack
+      (or, though it's not recommended, change it), check touch.touchResponders.
+
+    @param {SC.Touch} touch
+    @param {SC.Responder} responder The view to assign to the touch. (It, or if bubbling then an ancestor,
+      must implement touchStart.)
+    @param {Boolean} shouldStack Whether the new responder should replace the old one, or stack with it.
+      Stacked responders are easy to revert via `SC.Touch#restoreLastTouchResponder`.
+    @param {Boolean|SC.Responder} bubblesTo If YES, will attempt to find a `touchStart` responder up the
+      responder chain. If NO or undefined, will only check the passed responder. If you pass a responder
+      for this argument, the attempt will bubble until it reaches the passed responder, allowing you to
+      restrict the bubbling to a portion of the responder chain. ((Note that this responder will not be
+      given an opportunity to respond to the event.)
+    @returns {Boolean} Whether a valid touch responder was found and assigned.
   */
-  makeTouchResponder: function (touch, responder, shouldStack, upViewChain) {
-
+  makeTouchResponder: function(touch, responder, shouldStack, bubblesTo) {
     // In certain cases (SC.Gesture being one), we have to call makeTouchResponder
     // from inside makeTouchResponder so we queue it up here.
     if (this._isMakingTouchResponder) {
-      this._queuedTouchResponder = [touch, responder, shouldStack, upViewChain];
-      return;
+      this._queuedTouchResponder = [touch, responder, shouldStack, bubblesTo];
+      return YES; // um?
     }
     this._isMakingTouchResponder = YES;
 
-
     var stack = touch.touchResponders, touchesForView;
 
     // find the actual responder (if any, I suppose)
@@ -1125,33 +1266,38 @@ SC.RootResponder = SC.Object.extend(
     if (touch.touchResponder === responder) {
       this._isMakingTouchResponder = NO;
       this._flushQueuedTouchResponder();
-      return;
+      return YES; // more um
     }
 
     // send touchStart
     // get the target pane
     var pane;
-    if (responder) pane = responder.get('pane');
-    else pane = this.get('keyPane') || this.get('mainPane');
+    if (responder) pane = responder.get('pane') ;
+    else pane = this.get('keyPane') || this.get('mainPane') ;
 
     // if the responder is not already in the stack...
-
     if (stack.indexOf(responder) < 0) {
-      // if we need to go up the view chain, do so
-      if (upViewChain) {
+
+      // if we need to go up the view chain, do so via SC.Pane#sendEvent.
+      if (bubblesTo) {
         // if we found a valid pane, send the event to it
         try {
-          responder = (pane) ? pane.sendEvent("touchStart", touch, responder) : null;
+          responder = pane ? pane.sendEvent("touchStart", touch, responder, bubblesTo) : null ;
         } catch (e) {
           SC.Logger.error("Error in touchStart: " + e);
           responder = null;
         }
       } else {
-
+        // If the responder doesn't currently have a touch, or it does but it accepts multitouch, test it. Otherwise it's cool.
         if (responder && ((responder.get ? responder.get("acceptsMultitouch") : responder.acceptsMultitouch) || !responder.hasTouch)) {
-          if (!responder.touchStart(touch)) responder = null;
-        } else {
-          // do nothing; the responder is the responder, and may stay the responder, and all will be fine
+          // If it doesn't respond to touchStart, it's no good.
+          if (!responder.respondsTo("touchStart")) {
+            responder = null;
+          }
+          // If it returns NO from touchStart, it's no good. Otherwise it's cool.
+          else if (responder.touchStart(touch) === NO) {
+            responder = null;
+          }
         }
       }
     }
@@ -1204,26 +1350,38 @@ SC.RootResponder = SC.Object.extend(
       }
     }
 
-
+    // Unflag that this method is running, and flush the queue if any.
     this._isMakingTouchResponder = NO;
-    this._flushQueuedTouchResponder();
+    this._flushQueuedTouchResponder(); // this may need to be &&'ed with the responder to give the correct return value...
 
+    return !!responder;
   },
 
   /**
-    captureTouch is used to find the view to handle a touch. It starts at the starting point and works down
-    to the touch's target, looking for a view which captures the touch. If no view is found, it uses the target
-    view.
+    Before the touchStart event is sent up the usual responder chain, the views along that same responder chain
+    are given the opportunity to capture the touch event, preventing child views (including the target) from
+    hearing about it. This of course proceeds in the opposite direction from a usual event bubbling, starting at
+    the target's first ancestor and proceeding towards the target. This method implements the capture phase.
+
+    If no view captures the touch, this method will return NO, and makeTouchResponder is then called for the
+    target, proceeding with standard target-to-pane event bubbling for `touchStart`.
 
-    Then, it triggers a touchStart event starting at whatever the found view was; this propagates up the view chain
-    until a view responds YES. This view becomes the touch's owner.
+    For an example of captureTouch in action, see SC.ScrollView's touch handling, which by default captures the
+    touch and holds it for 150ms to allow it to determine whether the user is tapping or scrolling.
 
-    You usually do not call captureTouch, and if you do call it, you'd call it on the touch itself:
-    touch.captureTouch(startingPoint, shouldStack)
+    You will usually not call this method yourself, and if you do, you should call the corresponding convenience
+    method on the touch itself.
 
-    If shouldStack is YES, the previous responder will be kept so that it may be returned to later.
+    @param {SC.Touch} touch The touch to offer up for capture.
+    @param {?SC.Responder} startingPoint The view whose children should be given an opportunity to capture
+      the event. (The starting point itself is not asked.)
+    @param {Boolean} shouldStack Whether any capturing responder should stack with existing responders.
+      Stacked responders are easy to revert via `SC.Touch#restoreLastTouchResponder`.
+
+    @returns {Boolean} Whether or not the touch was captured. If it was not, you should pass it to
+      `makeTouchResponder` for standard event bubbling.
   */
-  captureTouch: function (touch, startingPoint, shouldStack) {
+  captureTouch: function(touch, startingPoint, shouldStack) {
     if (!startingPoint) startingPoint = this;
 
     var target = touch.targetView, view = target,
@@ -1234,7 +1392,8 @@ SC.RootResponder = SC.Object.extend(
       SC.Logger.info('  -- Received one touch on %@'.fmt(target.toString()));
     }
     //@endif
-    // work up the chain until we get the root
+    // Generate the captureTouch responder chain by working backwards from the target
+    // to the starting point. (Don't include the starting point.)
     while (view && (view !== startingPoint)) {
       chain.unshift(view);
       view = view.get('nextResponder');
@@ -1254,26 +1413,24 @@ SC.RootResponder = SC.Object.extend(
         //@endif
 
         // if so, make it the touch's responder
-        this.makeTouchResponder(touch, view, shouldStack, YES); // triggers touchStart/Cancel/etc. event.
-        return; // and that's all we need
+        this.makeTouchResponder(touch, view, shouldStack, startingPoint); // (touch, target, should stack, bubbles back to startingPoint, or all the way up.)
+        return YES; // and that's all we need
       }
     }
 
     //@if (debug)
-    if (SC.LOG_TOUCH_EVENTS) SC.Logger.info("   -- Didn't find a view that returned YES to captureTouch, so we're calling touchStart");
+    if (SC.LOG_TOUCH_EVENTS) SC.Logger.info("   -- Didn't find a view that returned YES to captureTouch.");
     //@endif
 
-    // if we did not capture the touch (obviously we didn't)
-    // we need to figure out what view _will_
-    // Thankfully, makeTouchResponder does exactly that: starts at the view it is supplied and keeps calling startTouch
-    this.makeTouchResponder(touch, target, shouldStack, YES);
+    return NO;
   },
 
+  //@if(debug)
   /** @private
     Artificially calls endTouch for any touch which is no longer present. This is necessary because
     _sometimes_, WebKit ends up not sending endtouch.
   */
-  endMissingTouches: function (presentTouches) {
+  endMissingTouches: function(presentTouches) {
     var idx, len = presentTouches.length, map = {}, end = [];
 
     // make a map of what touches _are_ present
@@ -1288,19 +1445,24 @@ SC.RootResponder = SC.Object.extend(
     }
 
     // end said touches
+    if (end.length) {
+      console.warn('Ending missing touches: ' + end.toString());
+    }
     for (idx = 0, len = end.length; idx < len; idx++) {
       this.endTouch(end[idx]);
       this.finishTouch(end[idx]);
     }
   },
+  //@endif
 
   _touchCount: 0,
+
   /** @private
     Ends a specific touch (for a bit, at least). This does not "finish" a touch; it merely calls
     touchEnd, touchCancelled, etc. A re-dispatch (through recapture or makeTouchResponder) will terminate
     the process; it would have to be restarted separately, through touch.end().
   */
-  endTouch: function (touchEntry, action, evt) {
+  endTouch: function(touchEntry, action, evt) {
     if (!action) { action = "touchEnd"; }
 
     var responderIdx, responders, responder, originalResponder;
@@ -1333,16 +1495,15 @@ SC.RootResponder = SC.Object.extend(
     @private
     "Finishes" a touch. That is, it eradicates it from our touch entries and removes all responder, etc. properties.
   */
-  finishTouch: function (touch) {
-    var elem;
-
+  finishTouch: function(touch) {
     // ensure the touch is indeed unassigned.
     this.unassignTouch(touch);
 
     // If we rescued this touch's initial element, we should remove it
     // from the DOM and garbage collect now. See setup() for an
     // explanation of this bug/workaround.
-    if (elem = touch._rescuedElement) {
+    var elem = touch._rescuedElement;
+    if (elem) {
       if (elem.swapNode && elem.swapNode.parentNode) {
         elem.swapNode.parentNode.replaceChild(elem, elem.swapNode);
       } else if (elem.parentNode === SC.touchHoldingPen) {
@@ -1353,7 +1514,6 @@ SC.RootResponder = SC.Object.extend(
       elem = null;
     }
 
-
     // clear responders (just to be thorough)
     touch.touchResponders = null;
     touch.touchResponder = null;
@@ -1375,18 +1535,19 @@ SC.RootResponder = SC.Object.extend(
     @param {Event} evt the event
     @returns {Boolean}
   */
-  touchstart: function (evt) {
+  touchstart: function(evt) {
     // Starting iOS5 touch events are handled by textfields.
     // As a workaround just let the browser to use the default behavior.
-    if (this.ignoreTouchHandle(evt)) return YES;
+    if(this.ignoreTouchHandle(evt)) return YES;
 
     var hidingTouchIntercept = NO;
 
-    SC.run(function () {
-      // sometimes WebKit is a bit... iffy:
+    SC.run(function() {
+      //@if(debug)
+      // When using breakpoints on touch start, we will lose the end touch event.
       this.endMissingTouches(evt.touches);
+      //@endif
 
-      // as you were...
       // loop through changed touches, calling touchStart, etc.
       var idx, touches = evt.changedTouches, len = touches.length,
           touch, touchEntry;
@@ -1418,18 +1579,16 @@ SC.RootResponder = SC.Object.extend(
         // set the event (so default action, etc. can be stopped)
         touchEntry.event = evt; // will be unset momentarily
 
-        // send out event thing: creates a chain, goes up it, then down it,
-        // with startTouch and cancelTouch. in this case, only startTouch, as
-        // there are no existing touch responders. We send the touchEntry
-        // because it is cached (we add the helpers only once)
-        this.captureTouch(touchEntry, this);
+        // First we allow any view in the responder chain to capture the touch, before triggering the standard touchStart
+        // handler chain.
+        var captured = this.captureTouch(touchEntry, this);
+        if (!captured) this.makeTouchResponder(touchEntry, touchEntry.targetView, NO, YES); // (touch, target, shouldn't stack, bubbles all the way)
 
         // Unset the reference to the original event so we can garbage collect.
         touchEntry.event = null;
       }
     }, this);
 
-
     // hack for text fields
     if (hidingTouchIntercept) {
       return YES;
@@ -1442,12 +1601,12 @@ SC.RootResponder = SC.Object.extend(
     @private
     used to keep track of when a specific type of touch event was last handled, to see if it needs to be re-handled
   */
-  touchmove: function (evt) {
+  touchmove: function(evt) {
     // Starting iOS5 touch events are handled by textfields.
     // As a workaround just let the browser to use the default behavior.
-    if (this.ignoreTouchHandle(evt)) return YES;
+    if(this.ignoreTouchHandle(evt)) return YES;
 
-    SC.run(function () {
+    SC.run(function() {
       // pretty much all we gotta do is update touches, and figure out which views need updating.
       var touches = evt.changedTouches, touch, touchEntry,
           idx, len = touches.length, view, changedTouches, viewTouches, firstTouch,
@@ -1472,7 +1631,23 @@ SC.RootResponder = SC.Object.extend(
 
         if (touchEntry.hidesTouchIntercept) hidingTouchIntercept = YES;
 
-        // update touch
+        // update touch velocity (moving average)
+        var duration = evt.timeStamp - touchEntry.timeStamp,
+          velocityLambda, latestXVelocity, latestYVelocity;
+        // Given uneven timing between events, we should give less weight to shorter (less accurate)
+        // events, with no consideration at all given zero-time events.
+        if (duration !== 0) {
+          // Lambda (how heavily we're weighting the latest number)
+          velocityLambda = Math.min(1, duration / 80);
+          // X
+          latestXVelocity = (touch.pageX - touchEntry.pageX) / duration;
+          touchEntry.velocityX = (1.0 - velocityLambda) * touchEntry.velocityX + velocityLambda * (latestXVelocity);
+          // Y
+          latestYVelocity = (touch.pageY - touchEntry.pageY) / duration;
+          touchEntry.velocityY = (1.0 - velocityLambda) * touchEntry.velocityY + velocityLambda * (latestYVelocity);
+        }
+
+        // update touch position et al.
         touchEntry.pageX = touch.pageX;
         touchEntry.pageY = touch.pageY;
         touchEntry.clientX = touch.clientX;
@@ -1480,6 +1655,7 @@ SC.RootResponder = SC.Object.extend(
         touchEntry.screenX = touch.screenX;
         touchEntry.screenY = touch.screenY;
         touchEntry.timeStamp = evt.timeStamp;
+        touchEntry.type = evt.type;
         touchEntry.event = evt;
 
         // if the touch entry has a view
@@ -1513,15 +1689,22 @@ SC.RootResponder = SC.Object.extend(
         // the first VIEW touch should be the touch info sent
         viewTouches = this.touchesForView(view);
         firstTouch = viewTouches.firstObject();
+
+        // Load the event up with data from the first touch. THIS IS FOR CONVENIENCE ONLY in cases where the developer
+        // only cares about one touch.
         evt.pageX = firstTouch.pageX;
         evt.pageY = firstTouch.pageY;
         evt.clientX = firstTouch.clientX;
         evt.clientY = firstTouch.clientY;
         evt.screenX = firstTouch.screenX;
         evt.screenY = firstTouch.screenY;
-        evt.touchContext = this; // so it can call touchesForView
+        evt.startX = firstTouch.startX;
+        evt.startY = firstTouch.startY;
+        evt.velocityX = firstTouch.velocityX;
+        evt.velocityY = firstTouch.velocityY;
+        evt.touchContext = this; // Injects the root responder so it can call e.g. `touchesForView`.
 
-        // and go
+        // Give the view a chance to handle touchesDragged. (Don't bubble; viewTouches is view-specific.)
         view.tryToPerform("touchesDragged", evt, viewTouches);
       }
 
@@ -1538,14 +1721,14 @@ SC.RootResponder = SC.Object.extend(
     return evt.hasCustomEventHandling;
   },
 
-  touchend: function (evt) {
+  touchend: function(evt) {
     var hidesTouchIntercept = NO;
 
     // Starting iOS5 touch events are handled by textfields.
     // As a workaround just let the browser to use the default behavior.
-    if (this.ignoreTouchHandle(evt)) return YES;
+    if(this.ignoreTouchHandle(evt)) return YES;
 
-    SC.run(function () {
+    SC.run(function() {
       var touches = evt.changedTouches, touch, touchEntry,
           idx, len = touches.length,
           action = evt.isCancel ? "touchCancelled" : "touchEnd";
@@ -1559,7 +1742,23 @@ SC.RootResponder = SC.Object.extend(
         // check if there is an entry
         if (!touchEntry) continue;
 
-        // continue work
+        // update touch velocity (moving average)
+        var duration = evt.timeStamp - touchEntry.timeStamp,
+          velocityLambda, latestXVelocity, latestYVelocity;
+        // Given uneven timing between events, we should give less weight to shorter (less accurate)
+        // events, with no consideration at all given zero-time events.
+        if (duration !== 0) {
+          // Lambda (how heavily we're weighting the latest number)
+          velocityLambda = Math.min(1, duration / 80);
+          // X
+          latestXVelocity = (touch.pageX - touchEntry.pageX) / duration;
+          touchEntry.velocityX = (1.0 - velocityLambda) * touchEntry.velocityX + velocityLambda * (latestXVelocity);
+          // Y
+          latestYVelocity = (touch.pageY - touchEntry.pageY) / duration;
+          touchEntry.velocityY = (1.0 - velocityLambda) * touchEntry.velocityY + velocityLambda * (latestYVelocity);
+        }
+
+        // update touch position et al.
         touchEntry.timeStamp = evt.timeStamp;
         touchEntry.pageX = touch.pageX;
         touchEntry.pageY = touch.pageY;
@@ -1579,8 +1778,8 @@ SC.RootResponder = SC.Object.extend(
         }
 
         if (this._drag) {
-          this._drag.tryToPerform('mouseUp', touch);
-          this._drag = null;
+          this._drag.tryToPerform('mouseUp', touch) ;
+          this._drag = null ;
         }
 
         // unassign
@@ -1602,7 +1801,7 @@ SC.RootResponder = SC.Object.extend(
     Handle touch cancel event.  Works just like cancelling a touch for any other reason.
     touchend handles it as a special case (sending cancel instead of end if needed).
   */
-  touchcancel: function (evt) {
+  touchcancel: function(evt) {
     evt.isCancel = YES;
     this.touchend(evt);
   },
@@ -1611,10 +1810,10 @@ SC.RootResponder = SC.Object.extend(
      Ignore Touch events on textfields and links. starting iOS 5 textfields
      get touch events. Textfields just need to get the default focus action.
   */
-  ignoreTouchHandle: function (evt) {
-    if (SC.browser.isMobileSafari) {
+  ignoreTouchHandle: function(evt) {
+    if(SC.browser.isMobileSafari){
       var tag = evt.target.tagName;
-      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "A" || tag === "SELECT") {
+      if(tag==="INPUT" || tag==="TEXTAREA" || tag==="A" || tag==="SELECT"){
         evt.allowDefault();
         return YES;
       }
@@ -1635,8 +1834,8 @@ SC.RootResponder = SC.Object.extend(
 
     @returns {Object} Object that handled evet or null
   */
-  attemptKeyEquivalent: function (evt) {
-    var ret = null;
+  attemptKeyEquivalent: function(evt) {
+    var ret = null ;
 
     // keystring is a method name representing the keys pressed (i.e
     // 'alt_shift_escape')
@@ -1650,24 +1849,24 @@ SC.RootResponder = SC.Object.extend(
         mainPane = this.get('mainPane');
 
     if (menuPane) {
-      ret = menuPane.performKeyEquivalent(keystring, evt);
+      ret = menuPane.performKeyEquivalent(keystring, evt) ;
       if (ret) return ret;
     }
 
     // Try the keyPane.  If it's modal, then try the equivalent there but on
     // nobody else.
     if (keyPane) {
-      ret = keyPane.performKeyEquivalent(keystring, evt);
-      if (ret || keyPane.get('isModal')) return ret;
+      ret = keyPane.performKeyEquivalent(keystring, evt) ;
+      if (ret || keyPane.get('isModal')) return ret ;
     }
 
     // if not, then try the main pane
-    if (!ret && mainPane && (mainPane !== keyPane)) {
+    if (!ret && mainPane && (mainPane!==keyPane)) {
       ret = mainPane.performKeyEquivalent(keystring, evt);
-      if (ret || mainPane.get('isModal')) return ret;
+      if (ret || mainPane.get('isModal')) return ret ;
     }
 
-    return ret;
+    return ret ;
   },
 
   _lastModifiers: null,
@@ -1677,7 +1876,7 @@ SC.RootResponder = SC.Object.extend(
     We turn this into a flagsChanged keyboard event.  Normally this does not
     stop the normal browser behavior.
   */
-  _handleModifierChanges: function (evt) {
+  _handleModifierChanges: function(evt) {
     // if the modifier keys have changed, then notify the first responder.
     var m;
     m = this._lastModifiers = (this._lastModifiers || { alt: false, ctrl: false, shift: false });
@@ -1699,7 +1898,7 @@ SC.RootResponder = SC.Object.extend(
     }
     evt.modifiers = m; // save on event
 
-    return (changed) ? (this.sendEvent('flagsChanged', evt) ? evt.hasCustomEventHandling : YES) : YES;
+    return (changed) ? (this.sendEvent('flagsChanged', evt) ? evt.hasCustomEventHandling : YES) : YES ;
   },
 
   /** @private
@@ -1708,7 +1907,7 @@ SC.RootResponder = SC.Object.extend(
     handles the event, then it will be sent as a regular keyDown event.
     This function is only valid when called with a keydown event.
   */
-  _isFunctionOrNonPrintableKey: function (evt) {
+  _isFunctionOrNonPrintableKey: function(evt) {
     return !!(evt.altKey || evt.ctrlKey || evt.metaKey || SC.FUNCTION_KEYS[evt.which]);
   },
 
@@ -1716,7 +1915,7 @@ SC.RootResponder = SC.Object.extend(
     Determines if the event simply reflects a modifier key change.  These
     events may generate a flagsChanged event, but are otherwise ignored.
   */
-  _isModifierKey: function (evt) {
+  _isModifierKey: function(evt) {
     return !!SC.MODIFIER_KEYS[evt.charCode];
   },
 
@@ -1747,16 +1946,16 @@ SC.RootResponder = SC.Object.extend(
         https://developer.mozilla.org/en/DOM/KeyboardEvent
         http://msdn.microsoft.com/library/ff974342.aspx
   */
-  keydown: function (evt) {
+  keydown: function(evt) {
     if (SC.none(evt)) return YES;
     var keyCode = evt.keyCode;
-    if (SC.browser.isMozilla && evt.keyCode === 9) {
+    if (SC.browser.isMozilla && evt.keyCode===9) {
       this.keydownCounter = 1;
     }
     // Fix for IME input (japanese, mandarin).
     // If the KeyCode is 229 wait for the keyup and
     // trigger a keyDown if it is is enter onKeyup.
-    if (keyCode === 229) {
+    if (keyCode===229){
       this._IMEInputON = YES;
       return this.sendEvent('keyDown', evt);
     }
@@ -1771,7 +1970,7 @@ SC.RootResponder = SC.Object.extend(
     }
 
     // Firefox does NOT handle delete here...
-    if (SC.browser.isMozilla && (evt.which === 8)) return true;
+    if (SC.browser.isMozilla && (evt.which === 8)) return true ;
 
     // modifier keys are handled separately by the 'flagsChanged' event
     // send event for modifier key changes, but only stop processing if this
@@ -1785,29 +1984,29 @@ SC.RootResponder = SC.Object.extend(
     // if this is a function or non-printable key, try to use this as a key
     // equivalent.  Otherwise, send as a keyDown event so that the focused
     // responder can do something useful with the event.
-    ret = YES;
+    ret = YES ;
     if (this._isFunctionOrNonPrintableKey(evt)) {
       // otherwise, send as keyDown event.  If no one was interested in this
       // keyDown event (probably the case), just let the browser do its own
       // processing.
 
       // Arrow keys are handled in keypress for firefox
-      if (keyCode >= 37 && keyCode <= 40 && SC.browser.isMozilla) return YES;
+      if (keyCode>=37 && keyCode<=40 && SC.browser.isMozilla) return YES;
 
-      ret = this.sendEvent('keyDown', evt);
+      ret = this.sendEvent('keyDown', evt) ;
 
       // attempt key equivalent if key not handled
       if (!ret) {
         SC.run(function () {
-          ret = !this.attemptKeyEquivalent(evt);
+        ret = !this.attemptKeyEquivalent(evt) ;
         }, this);
       } else {
-        ret = evt.hasCustomEventHandling;
-        if (ret) forceBlock = NO; // code asked explicitly to let delete go
+        ret = evt.hasCustomEventHandling ;
+        if (ret) forceBlock = NO ; // code asked explicitly to let delete go
       }
     }
 
-    return forceBlock ? NO : ret;
+    return forceBlock ? NO : ret ;
   },
 
   /** @private
@@ -1818,14 +2017,14 @@ SC.RootResponder = SC.Object.extend(
     Normally ignore any function or non-printable key events.  Otherwise, just
     trigger a keyDown.
   */
-  keypress: function (evt) {
+  keypress: function(evt) {
     var ret,
         keyCode   = evt.keyCode,
         isFirefox = SC.browser.isMozilla;
 
-    if (isFirefox && evt.keyCode === 9) {
+    if (isFirefox && evt.keyCode===9) {
       this.keydownCounter++;
-      if (this.keydownCounter == 2) return YES;
+      if (this.keydownCounter === 2) return YES;
     }
 
     // delete is handled in keydown() for most browsers
@@ -1833,27 +2032,27 @@ SC.RootResponder = SC.Object.extend(
       //get the keycode and set it for which.
       evt.which = keyCode;
       ret = this.sendEvent('keyDown', evt);
-      return ret ? (SC.allowsBackspaceToPreviousPage || evt.hasCustomEventHandling) : YES;
+      return ret ? (SC.allowsBackspaceToPreviousPage || evt.hasCustomEventHandling) : YES ;
 
     // normal processing.  send keyDown for printable keys...
     //there is a special case for arrow key repeating of events in FF.
     } else {
       var isFirefoxArrowKeys = (keyCode >= 37 && keyCode <= 40 && isFirefox),
-          charCode = evt.charCode;
+          charCode           = evt.charCode;
 
-      if ((charCode !== undefined && charCode === 0 && evt.keyCode !== 9) && !isFirefoxArrowKeys) return YES;
+      if ((charCode !== undefined && charCode === 0 && evt.keyCode!==9) && !isFirefoxArrowKeys) return YES;
       if (isFirefoxArrowKeys) evt.which = keyCode;
       // we only want to rethrow if this is a printable key so that we don't
       // duplicate the event sent in keydown when a modifier key is pressed.
       if (isFirefoxArrowKeys || this._isPrintableKey(evt)) {
         return this.sendEvent('keyDown', evt) ? evt.hasCustomEventHandling : YES;
-      }
+    }
     }
   },
 
-  keyup: function (evt) {
+  keyup: function(evt) {
     // to end the simulation of keypress in firefox set the _ffevt to null
-    if (this._ffevt) this._ffevt = null;
+    if(this._ffevt) this._ffevt=null;
 
     // modifier keys are handled separately by the 'flagsChanged' event
     // send event for modifier key changes, but only stop processing if this is only a modifier change
@@ -1862,7 +2061,7 @@ SC.RootResponder = SC.Object.extend(
     // Fix for IME input (japanese, mandarin).
     // If the KeyCode is 229 wait for the keyup and
     // trigger a keyDown if it is is enter onKeyup.
-    if (this._IMEInputON && evt.keyCode === 13) {
+    if (this._IMEInputON && evt.keyCode===13){
       evt.isIMEInput = YES;
       this.sendEvent('keyDown', evt);
       this._IMEInputON = NO;
@@ -1879,10 +2078,10 @@ SC.RootResponder = SC.Object.extend(
     want to avoid this. Think of an autocomplete menu, you want to click on
     the menu but don't loose focus.
   */
-  beforedeactivate: function (evt) {
+  beforedeactivate: function(evt) {
     var toElement = evt.toElement;
-    if (toElement && toElement.tagName && toElement.tagName !== "IFRAME") {
-      var view = SC.$(toElement).view()[0];
+    if (toElement && toElement.tagName && toElement.tagName!=="IFRAME") {
+      var view = SC.viewFor(toElement);
       //The following line is necessary to allow/block text selection for IE,
       // in combination with the selectstart event.
       if (view && view.get('blocksIEDeactivate')) return NO;
@@ -1894,30 +2093,30 @@ SC.RootResponder = SC.Object.extend(
   // MOUSE HANDLING
   //
 
-  mousedown: function (evt) {
+  mousedown: function(evt) {
     // First, save the click count. The click count resets if the mouse down
     // event occurs more than 250 ms later than the mouse up event or more
     // than 8 pixels away from the mouse down event or if the button used is different.
-    this._clickCount += 1;
+    this._clickCount += 1 ;
     if (!this._lastMouseUpAt || this._lastClickWhich !== evt.which || ((Date.now() - this._lastMouseUpAt) > 250)) {
-      this._clickCount = 1;
+      this._clickCount = 1 ;
     } else {
       var deltaX = this._lastMouseDownX - evt.clientX,
           deltaY = this._lastMouseDownY - evt.clientY,
-          distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+          distance = Math.sqrt(deltaX*deltaX + deltaY*deltaY) ;
 
-      if (distance > 8.0) this._clickCount = 1;
+      if (distance > 8.0) this._clickCount = 1 ;
     }
-    evt.clickCount = this._clickCount;
+    evt.clickCount = this._clickCount ;
 
     this._lastClickWhich = evt.which;
-    this._lastMouseDownX = evt.clientX;
-    this._lastMouseDownY = evt.clientY;
+    this._lastMouseDownX = evt.clientX ;
+    this._lastMouseDownY = evt.clientY ;
 
     var view = this.targetViewForEvent(evt);
 
-    view = this._mouseDownView = this.sendEvent('mouseDown', evt, view);
-    if (view && view.respondsTo('mouseDragged')) this._mouseCanDrag = YES;
+    view = this._mouseDownView = this.sendEvent('mouseDown', evt, view) ;
+    if (view && view.respondsTo('mouseDragged')) this._mouseCanDrag = YES ;
 
     // Determine if any views took responsibility for the
     // event. If so, save that information so we can prevent
@@ -1935,7 +2134,7 @@ SC.RootResponder = SC.Object.extend(
     implemented, then no mouseUp event will be sent, but a click will be
     sent.
   */
-  mouseup: function (evt) {
+  mouseup: function(evt) {
     var clickOrDoubleClickDidTrigger = NO,
       dragView = this._drag,
       handler = null;
@@ -1949,41 +2148,41 @@ SC.RootResponder = SC.Object.extend(
       var view = this._mouseDownView,
         targetView = this.targetViewForEvent(evt);
 
-      // record click count.
-      evt.clickCount = this._clickCount;
+    // record click count.
+    evt.clickCount = this._clickCount ;
 
-      // attempt the mouseup call only if there's a target.
-      // don't want a mouseup going to anyone unless they handled the mousedown...
-      if (view) {
-        handler = this.sendEvent('mouseUp', evt, view);
+    // attempt the mouseup call only if there's a target.
+    // don't want a mouseup going to anyone unless they handled the mousedown...
+    if (view) {
+      handler = this.sendEvent('mouseUp', evt, view) ;
 
-        // try doubleClick
-        if (!handler && (this._clickCount === 2)) {
-          handler = this.sendEvent('doubleClick', evt, view);
-          clickOrDoubleClickDidTrigger = YES;
-        }
+      // try doubleClick
+      if (!handler && (this._clickCount === 2)) {
+        handler = this.sendEvent('doubleClick', evt, view) ;
+        clickOrDoubleClickDidTrigger = YES;
+      }
 
-        // try single click
-        if (!handler) {
-          handler = this.sendEvent('click', evt, view);
-          clickOrDoubleClickDidTrigger = YES;
-        }
+      // try single click
+      if (!handler) {
+        handler = this.sendEvent('click', evt, view) ;
+        clickOrDoubleClickDidTrigger = YES;
       }
+    }
 
-      // try whoever's under the mouse if we haven't handle the mouse up yet
-      if (!handler && !clickOrDoubleClickDidTrigger) {
+    // try whoever's under the mouse if we haven't handle the mouse up yet
+    if (!handler && !clickOrDoubleClickDidTrigger) {
 
-        // try doubleClick
-        if (this._clickCount === 2) {
-          handler = this.sendEvent('doubleClick', evt, targetView);
-        }
+      // try doubleClick
+      if (this._clickCount === 2) {
+        handler = this.sendEvent('doubleClick', evt, targetView);
+      }
 
-        // try singleClick
-        if (!handler) {
-          handler = this.sendEvent('click', evt, targetView);
-        }
+      // try singleClick
+      if (!handler) {
+        handler = this.sendEvent('click', evt, targetView) ;
       }
     }
+    }
 
     // cleanup
     this._mouseCanDrag = NO;
@@ -1991,7 +2190,7 @@ SC.RootResponder = SC.Object.extend(
 
     // Save timestamp of mouseup at last possible moment.
     // (This is used to calculate double click events)
-    this._lastMouseUpAt = Date.now();
+    this._lastMouseUpAt = Date.now() ;
 
     // Determine if any views took responsibility for the
     // event. If so, save that information so we can prevent
@@ -2012,7 +2211,7 @@ SC.RootResponder = SC.Object.extend(
     @param {Event} evt the click event
     @returns {Boolean} whether the event should be propagated to the browser
   */
-  click: function (evt) {
+  click: function(evt) {
     if (!this._lastMouseUpCustomHandling || !this._lastMouseDownCustomHandling) {
       evt.preventDefault();
       evt.stopPropagation();
@@ -2022,7 +2221,7 @@ SC.RootResponder = SC.Object.extend(
     return YES;
   },
 
-  dblclick: function (evt) {
+  dblclick: function(evt){
     if (SC.browser.isIE8OrLower) {
       this._clickCount = 2;
       // this._onmouseup(evt);
@@ -2030,11 +2229,11 @@ SC.RootResponder = SC.Object.extend(
     }
   },
 
-  mousewheel: function (evt) {
-    var view = this.targetViewForEvent(evt),
-      handler = this.sendEvent('mouseWheel', evt, view);
+  mousewheel: function(evt) {
+    var view = this.targetViewForEvent(evt) ,
+        handler = this.sendEvent('mouseWheel', evt, view) ;
 
-    return (handler) ? evt.hasCustomEventHandling : YES;
+    return (handler) ? evt.hasCustomEventHandling : YES ;
   },
 
   _lastHovered: null,
@@ -2048,7 +2247,7 @@ SC.RootResponder = SC.Object.extend(
    If there is a target mouseDown view, then mouse moved events will also
    trigger calls to mouseDragged.
   */
-  mousemove: function (evt) {
+  mousemove: function(evt) {
 
     if (SC.browser.isIE) {
       if (this._lastMoveX === evt.clientX && this._lastMoveY === evt.clientY) return;
@@ -2059,7 +2258,7 @@ SC.RootResponder = SC.Object.extend(
     this._lastMoveX = evt.clientX;
     this._lastMoveY = evt.clientY;
 
-    SC.run(function () {
+    SC.run(function() {
       var dragView = this._drag;
 
        // make sure the view gets focus no matter what.  FF is inconsistent
@@ -2068,60 +2267,217 @@ SC.RootResponder = SC.Object.extend(
        // only do mouse[Moved|Entered|Exited|Dragged] if not in a drag session
        // drags send their own events, e.g. drag[Moved|Entered|Exited]
       if (dragView) {
-        //IE triggers mousemove at the same time as mousedown
-        if (SC.browser.isIE) {
-          if (this._lastMouseDownX !== evt.clientX || this._lastMouseDownY !== evt.clientY) {
+         //IE triggers mousemove at the same time as mousedown
+         if(SC.browser.isIE){
+           if (this._lastMouseDownX !== evt.clientX || this._lastMouseDownY !== evt.clientY) {
             dragView.tryToPerform('mouseDragged', evt);
-          }
+           }
         } else {
           dragView.tryToPerform('mouseDragged', evt);
-        }
-      } else {
+         }
+       } else {
         var lh = this._lastHovered || [], nh = [], loc, len,
-          view = this.targetViewForEvent(evt);
+             view = this.targetViewForEvent(evt) ;
+
+         // first collect all the responding view starting with the
+         // target view from the given mouse move event
+         while (view && (view !== this)) {
+           nh.push(view);
+           view = view.get('nextResponder');
+         }
+         // next exit views that are no longer part of the
+         // responding chain
+         for (loc=0, len=lh.length; loc < len; loc++) {
+           view = lh[loc] ;
+          if (nh.indexOf(view) === -1 && !view.isDestroyed) { // Usually we don't want to have to manually check isDestroyed, but in this case we're explicitly checking an out-of-date cache.
+             view.tryToPerform('mouseExited', evt);
+           }
+         }
+         // finally, either perform mouse moved or mouse entered depending on
+         // whether a responding view was or was not part of the last
+         // hovered views
+         for (loc=0, len=nh.length; loc < len; loc++) {
+           view = nh[loc];
+           if (lh.indexOf(view) !== -1) {
+             view.tryToPerform('mouseMoved', evt);
+           } else {
+             view.tryToPerform('mouseEntered', evt);
+           }
+         }
+         // Keep track of the view that were last hovered
+         this._lastHovered = nh;
+         // also, if a mouseDownView exists, call the mouseDragged action, if
+         // it exists.
+         if (this._mouseDownView) {
+           if(SC.browser.isIE){
+             if (this._lastMouseDownX !== evt.clientX && this._lastMouseDownY !== evt.clientY) {
+               this._mouseDownView.tryToPerform('mouseDragged', evt);
+             }
+           }
+           else {
+             this._mouseDownView.tryToPerform('mouseDragged', evt);
+           }
+         }
+       }
+    }, this);
+  },
 
-        // first collect all the responding view starting with the
-        // target view from the given mouse move event
-        while (view && (view !== this)) {
-          nh.push(view);
-          view = view.get('nextResponder');
-        }
-        // next exit views that are no longer part of the
-        // responding chain
-        for (loc = 0, len = lh.length; loc < len; loc++) {
-          view = lh[loc];
-          if (nh.indexOf(view) === -1) {
-            view.tryToPerform('mouseExited', evt);
-          }
-        }
-        // finally, either perform mouse moved or mouse entered depending on
-        // whether a responding view was or was not part of the last
-        // hovered views
-        for (loc = 0, len = nh.length; loc < len; loc++) {
-          view = nh[loc];
-          if (lh.indexOf(view) !== -1) {
-            view.tryToPerform('mouseMoved', evt);
-          } else {
-            view.tryToPerform('mouseEntered', evt);
-          }
+  // These event handlers prevent default file handling, and enable the dataDrag API.
+  /** @private The dragenter event comes from the browser when a data-ful drag enters any element. */
+  dragenter: function(evt) {
+    SC.run(function() { this._dragenter(evt); }, this);
+  },
+  /** @private */
+  _dragenter: function(evt) {
+    if (!this._dragCounter) {
+      this._dragCounter = 1;
+    }
+    else this._dragCounter++;
+    return this._dragover(evt);
+  },
+  /** @private The dragleave event comes from the browser when a data-ful drag leaves any element. */
+  dragleave: function(evt) {
+    SC.run(function() { this._dragleave(evt); }, this);
+  },
+  /** @private */
+  _dragleave: function(evt) {
+    this._dragCounter--;
+    var ret = this._dragover(evt);
+    return ret;
+  },
+  /** @private
+    Dragleave doesn't fire reliably in all browsers, so this method forces it (scheduled below). Note
+    that, being scheduled via SC.Timer, this method is already in a run loop.
+  */
+  _forceDragLeave: function() {
+    // Give it another runloop to ensure that we're not in the middle of a drag.
+    this.invokeLast(function() {
+      if (this._dragCounter === 0) return;
+      this._dragCounter = 0;
+      var evt = this._lastDraggedEvt;
+      this._dragover(evt);
+    });
+  },
+  /** @private This event fires continuously while the dataful drag is over the document. */
+  dragover: function(evt) {
+    SC.run(function() { this._dragover(evt); }, this);
+  },
+  /** @private */
+  _dragover: function(evt) {
+    // If it's a file being dragged, prevent the default (leaving the app and opening the file).
+    if (evt.dataTransfer.types && (evt.dataTransfer.types.contains('Files') || evt.dataTransfer.types.contains('text/uri-list'))) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      // Set the default drag effect to 'none'. Views may reverse this if they wish.
+      evt.dataTransfer.dropEffect = 'none';
+    }
+
+    // Walk the responder chain, alerting anyone that would like to know.
+    var ld = this._lastDraggedOver || [], nd = [], loc, len,
+        view = this.targetViewForEvent(evt);
+
+    // Build the responder chain, starting with the view's target and (presumably) moving
+    // up through parentViews to the pane.
+    while (view && (view !== this)) {
+      nd.push(view);
+      view = view.get('nextResponder');
+    }
+
+    // Invalidate the force-drag-leave timer, if we have one set up.
+    if (this._dragLeaveTimer) this._dragLeaveTimer.invalidate();
+
+    // If this is our final drag event then we've left the document and everybody gets a
+    // dataDragExited.
+    if (this._dragCounter === 0) {
+      for (loc = 0, len = nd.length; loc < len; loc++) {
+        view = nd[loc];
+        view.tryToPerform('dataDragExited', evt);
+      }
+      this._lastDraggedOver = this._lastDraggedEvt = this._dragLeaveTimer = null;
+    }
+    // Otherwise, we process the responder chain normally, ignoring dragleaves.
+    // (We skip dragleave events because they are sent after the adjacent dragenter event; checking
+    // through both stacks would result in views being exited, re-entered and re-exited each time.
+    // As a consequence, views are left ignorant of a very small number of dragleave events; those
+    // shouldn't end up being the crucial just-before-drop events, though, so they should be of no
+    // consequence.)
+    else if (evt.type !== 'dragleave') {
+      // First, exit views that are no longer part of the responder chain, child to parent.
+      for (loc = 0, len = ld.length; loc < len; loc++) {
+        view = ld[loc];
+        if (nd.indexOf(view) === -1) {
+          view.tryToPerform('dataDragExited', evt);
         }
-        // Keep track of the view that were last hovered
-        this._lastHovered = nh;
-        // also, if a mouseDownView exists, call the mouseDragged action, if
-        // it exists.
-        if (this._mouseDownView) {
-          if (SC.browser.isIE) {
-            if (this._lastMouseDownX !== evt.clientX && this._lastMouseDownY !== evt.clientY) {
-              this._mouseDownView.tryToPerform('mouseDragged', evt);
-            }
-          }
-          else {
-            this._mouseDownView.tryToPerform('mouseDragged', evt);
-          }
+      }
+      // Next, enter views that have just joined the responder chain, parent to child.
+      for (loc = nd.length - 1; loc >= 0; loc--) {
+        view = nd[loc];
+        if (ld.indexOf(view) === -1) {
+          view.tryToPerform('dataDragEntered', evt);
         }
       }
-    }, this);
+      // Finally, send hover events to everybody.
+      for (loc = 0, len = nd.length; loc < len; loc++) {
+        view = nd[loc];
+        view.tryToPerform('dataDragHovered', evt);
+      }
+      this._lastDraggedOver = nd;
+      this._lastDraggedEvt = evt;
+      // For browsers that don't reliably call a dragleave for every dragenter, we have a timer fallback.
+      this._dragLeaveTimer = SC.Timer.schedule({ target: this, action: '_forceDragLeave', interval: 300 });
+    }
+  },
+
+  /** @private This event is called if the most recent dragover event returned with a non-"none" dropEffect. */
+  drop: function(evt) {
+    SC.run(function() { this._drop(evt); }, this);
   },
+  /** @private */
+  _drop: function(evt) {
+    // If it's a file being dragged, prevent the default (leaving the app and opening the file).
+    if (evt.dataTransfer.types && (evt.dataTransfer.types.contains('Files') || evt.dataTransfer.types.contains('text/uri-list'))) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      // Set the default drag effect to 'none'. Views may reverse this if they wish.
+      evt.dataTransfer.dropEffect = 'none';
+    }
+
+    // Bubble up the responder chain until we have a successful responder.
+    var ld = this._lastDraggedOver || [], nd = [], loc, len,
+        view = this.targetViewForEvent(evt);
+
+    // First collect all the responding view starting with the target view from the given drag event.
+    while (view && (view !== this)) {
+      nd.push(view);
+      view = view.get('nextResponder');
+    }
+    // Next, exit views that are no longer part of the responding chain. (This avoids the pixel-wide
+    // edge case where a drop event fires on a new view without a final dragover event.)
+    for (loc = 0, len = ld.length; loc < len; loc++) {
+      view = ld[loc];
+      if (nd.indexOf(view) === -1) {
+        view.tryToPerform('dataDragExited', evt);
+      }
+    }
+    // Next, bubble the drop event itself until we find someone that successfully responds.
+    for (loc = 0, len = nd.length; loc < len; loc++) {
+      view = nd[loc];
+      if (view.tryToPerform('dataDragDropped', evt)) break;
+    }
+    // Finally, notify all interested views that the drag is dead and gone.
+    for (loc = 0, len = nd.length; loc < len; loc++) {
+      view = nd[loc];
+      view.tryToPerform('dataDragExited', evt);
+    }
+
+    // Reset caches and counters.
+    this._lastDraggedOver = null;
+    this._lastDraggedAt = null;
+    this._dragCounter = 0;
+    if (this._dragLeaveTimer) this._dragLeaveTimer.invalidate();
+    this._dragLeaveTimer = null;
+  },
+
 
   // these methods are used to prevent unnecessary text-selection in IE,
   // there could be some more work to improve this behavior and make it
@@ -2130,22 +2486,22 @@ SC.RootResponder = SC.Object.extend(
 
   _mouseCanDrag: YES,
 
-  selectstart: function (evt) {
+  selectstart: function(evt) {
     var targetView = this.targetViewForEvent(evt),
         result = this.sendEvent('selectStart', evt, targetView);
 
     // If the target view implements mouseDragged, then we want to ignore the
     // 'selectstart' event.
     if (targetView && targetView.respondsTo('mouseDragged')) {
-      return (result !== null ? YES : NO) && !this._mouseCanDrag;
+      return (result !==null ? YES: NO) && !this._mouseCanDrag;
     } else {
-      return (result !== null ? YES : NO);
+      return (result !==null ? YES: NO);
     }
   },
 
-  drag: function () { return false; },
+  drag: function() { return false; },
 
-  contextmenu: function (evt) {
+  contextmenu: function(evt) {
     var view = this.targetViewForEvent(evt),
       ret;
 
@@ -2162,179 +2518,44 @@ SC.RootResponder = SC.Object.extend(
 
   /* @private Handler for animationstart events. */
   animationstart: function (evt) {
-    var view = this.targetViewForEvent(evt);
-    this.sendEvent('animationDidStart', evt, view);
+      var view = this.targetViewForEvent(evt) ;
+      this.sendEvent('animationDidStart', evt, view) ;
 
     return view ? evt.hasCustomEventHandling : YES;
   },
 
   /* @private Handler for animationiteration events. */
   animationiteration: function (evt) {
-    var view = this.targetViewForEvent(evt);
-    this.sendEvent('animationDidIterate', evt, view);
+      var view = this.targetViewForEvent(evt) ;
+      this.sendEvent('animationDidIterate', evt, view) ;
 
     return view ? evt.hasCustomEventHandling : YES;
   },
 
   /* @private Handler for animationend events. */
   animationend: function (evt) {
-    var view = this.targetViewForEvent(evt);
-    this.sendEvent('animationDidEnd', evt, view);
+      var view = this.targetViewForEvent(evt) ;
+      this.sendEvent('animationDidEnd', evt, view) ;
 
     return view ? evt.hasCustomEventHandling : YES;
   },
 
   /* @private Handler for transitionend events. */
   transitionend: function (evt) {
-    var view = this.targetViewForEvent(evt);
-    this.sendEvent('transitionDidEnd', evt, view);
+      var view = this.targetViewForEvent(evt) ;
+      this.sendEvent('transitionDidEnd', evt, view) ;
 
     return view ? evt.hasCustomEventHandling : YES;
   }
 
 });
 
-/**
-  @class SC.Touch
-  Represents a touch.
-
-  Views receive touchStart and touchEnd.
-*/
-SC.Touch = function (touch, touchContext) {
-  // get the raw target view (we'll refine later)
-  this.touchContext = touchContext;
-  this.identifier = touch.identifier; // for now, our internal id is WebKit's id.
-
-  var target = touch.target, targetView;
-  if (target && SC.$(target).hasClass("touch-intercept")) {
-    touch.target.style.webkitTransform = "translate3d(0px,-5000px,0px)";
-    target = document.elementFromPoint(touch.pageX, touch.pageY);
-    if (target) targetView = SC.$(target).view()[0];
-
-    this.hidesTouchIntercept = NO;
-    if (target.tagName === "INPUT") {
-      this.hidesTouchIntercept = touch.target;
-    } else {
-      touch.target.style.webkitTransform = "translate3d(0px,0px,0px)";
-    }
-  } else {
-    targetView = touch.target ? SC.$(touch.target).view()[0] : null;
-  }
-  this.targetView = targetView;
-  this.target = target;
-  this.hasEnded = NO;
-  this.type = touch.type;
-  this.clickCount = 1;
-
-  this.view = undefined;
-  this.touchResponder = this.nextTouchResponder = undefined;
-  this.touchResponders = [];
-
-  this.startX = this.pageX = touch.pageX;
-  this.startY = this.pageY = touch.pageY;
-  this.clientX = touch.clientX;
-  this.clientY = touch.clientY;
-  this.screenX = touch.screenX;
-  this.screenY = touch.screenY;
-};
-
-SC.Touch.prototype = {
-  /**@scope SC.Touch.prototype*/
-
-  unhideTouchIntercept: function () {
-    var intercept = this.hidesTouchIntercept;
-    if (intercept) {
-      setTimeout(function () { intercept.style.webkitTransform = "translate3d(0px,0px,0px)"; }, 500);
-    }
-  },
-
-  /**
-    Indicates that you want to allow the normal default behavior.  Sets
-    the hasCustomEventHandling property to YES but does not cancel the event.
-  */
-  allowDefault: function () {
-    if (this.event) this.event.hasCustomEventHandling = YES;
-  },
-
-  /**
-    If the touch is associated with an event, prevents default action on the event.
-  */
-  preventDefault: function () {
-    if (this.event) this.event.preventDefault();
-  },
-
-  stopPropagation: function () {
-    if (this.event) this.event.stopPropagation();
-  },
-
-  stop: function () {
-    if (this.event) this.event.stop();
-  },
-
-  /**
-    Removes from and calls touchEnd on the touch responder.
-  */
-  end: function () {
-    this.touchContext.endTouch(this);
-  },
-
-  /**
-    Changes the touch responder for the touch. If shouldStack === YES,
-    the current responder will be saved so that the next responder may
-    return to it.
-  */
-  makeTouchResponder: function (responder, shouldStack, upViewChain) {
-    this.touchContext.makeTouchResponder(this, responder, shouldStack, upViewChain);
-  },
-
-
-  /**
-    Captures, or recaptures, the touch. This works from the touch's raw target view
-    up to the startingPoint, and finds either a view that returns YES to captureTouch() or
-    touchStart().
-  */
-  captureTouch: function (startingPoint, shouldStack) {
-    this.touchContext.captureTouch(this, startingPoint, shouldStack);
-  },
-
-  /**
-    Returns all touches for a specified view. Put as a convenience on the touch itself; this method
-    is also available on the event.
-  */
-  touchesForView: function (view) {
-    return this.touchContext.touchesForView(view);
-  },
-
-  /**
-    Same as touchesForView, but sounds better for responders.
-  */
-  touchesForResponder: function (responder) {
-    return this.touchContext.touchesForView(responder);
-  },
-
-  /**
-    Returns average data--x, y, and d (distance)--for the touches owned by the supplied view.
-
-    addSelf adds this touch to the set being considered. This is useful from touchStart. If
-    you use it from anywhere else, it will make this touch be used twice--so use caution.
-  */
-  averagedTouchesForView: function (view, addSelf) {
-    return this.touchContext.averagedTouchesForView(view, (addSelf ? this : null));
-  }
-};
-
-SC.mixin(SC.Touch, {
-  create: function (touch, touchContext) {
-    return new SC.Touch(touch, touchContext);
-  }
-});
-
 /*
   Invoked when the document is ready, but before main is called.  Creates
   an instance and sets up event listeners as needed.
 */
-SC.ready(SC.RootResponder, SC.RootResponder.ready = function () {
+SC.ready(SC.RootResponder, SC.RootResponder.ready = function() {
   var r;
-  r = SC.RootResponder.responder = SC.RootResponder.create();
-  r.setup();
+  r = SC.RootResponder.responder = SC.RootResponder.create() ;
+  r.setup() ;
 });