sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/desktop/views/scene.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /** @class

data/frameworks/sproutcore/frameworks/desktop/views/scroll.js

@@ -2,12 +2,15 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/scroller');
 sc_require('mixins/border');
 
+SC.NORMAL_SCROLL_DECELERATION = 0.95;
+SC.FAST_SCROLL_DECELERATION = 0.85;
+
 /** @class
 
   Implements a complete scroll view.  This class uses a manual implementation
@@ -24,7 +27,7 @@ sc_require('mixins/border');
   @since SproutCore 1.0
 */
 SC.ScrollView = SC.View.extend(SC.Border, {
-
+  /** @scope SC.ScrollView.prototype */
   classNames: ['sc-scroll-view'],
   
   // ..........................................................
@@ -37,16 +40,91 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     The content view you want the scroll view to manage. This will be assigned to the contentView of the clipView also.
   */
   contentView: null,
+  
+  /**
+    The horizontal alignment for non-filling content inside of the ScrollView.
+  */
+  horizontalAlign: SC.ALIGN_LEFT,
+  
+  /**
+    The vertical alignment for non-filling content inside of the ScrollView.
+  */
+  verticalAlign: SC.ALIGN_TOP,
 
   /**
     The current horizontal scroll offset. Changing this value will update both the contentView and the horizontal scroller, if there is one.
   */
-  horizontalScrollOffset: 0,
+  horizontalScrollOffset: function(key, value) {
+    if (value !== undefined) {
+      var minOffset = this.minimumHorizontalScrollOffset(),
+          maxOffset = this.get('maximumHorizontalScrollOffset');
+      this._scroll_horizontalScrollOffset = Math.max(minOffset,Math.min(maxOffset, value)) ;
+    }
+
+    return this._scroll_horizontalScrollOffset||0;
+  }.property().cacheable(),
   
   /**
     The current vertical scroll offset.  Changing this value will update both the contentView and the vertical scroller, if there is one.
   */
-  verticalScrollOffset: 0,
+  verticalScrollOffset: function(key, value) {
+    if (value !== undefined) {
+      var minOffset = this.get('minimumVerticalScrollOffset'),
+          maxOffset = this.get('maximumVerticalScrollOffset');
+      this._scroll_verticalScrollOffset = Math.max(minOffset,Math.min(maxOffset, value)) ;
+    }
+
+    return this._scroll_verticalScrollOffset||0;
+  }.property().cacheable(),
+  
+  /**
+    @private
+    Calculates the maximum offset given content and container sizes, and the
+    alignment.
+  */
+  maximumScrollOffset: function(contentSize, containerSize, align) {
+    // if our content size is larger than or the same size as the container, it's quite
+    // simple to calculate the answer. Otherwise, we need to do some fancy-pants
+    // alignment logic (read: simple math)
+    if (contentSize >= containerSize) return contentSize - containerSize;
+    
+    // alignment, yeah
+    if (align === SC.ALIGN_LEFT || align === SC.ALIGN_TOP) {
+      // if we left-align something, and it is smaller than the view, does that not mean
+      // that it's maximum (and minimum) offset is 0, because it should be positioned at 0?
+      return 0;
+    } else if (align === SC.ALIGN_MIDDLE || align === SC.ALIGN_CENTER) {
+      // middle align means the difference divided by two, because we want equal parts on each side.
+      return 0 - Math.round((containerSize - contentSize) / 2);
+    } else {
+      // right align means the entire difference, because we want all that space on the left
+      return 0 - (containerSize - contentSize);
+    }
+  },
+  
+  /**
+    @private
+    Calculates the minimum offset given content and container sizes, and the
+    alignment.
+  */
+  minimumScrollOffset: function(contentSize, containerSize, align) {
+    // if the content is larger than the container, we have no need to change the minimum
+    // away from the natural 0 position.
+    if (contentSize > containerSize) return 0;
+    
+    // alignment, yeah
+    if (align === SC.ALIGN_LEFT || align === SC.ALIGN_TOP) {
+      // if we left-align something, and it is smaller than the view, does that not mean
+      // that it's maximum (and minimum) offset is 0, because it should be positioned at 0?
+      return 0;
+    } else if (align === SC.ALIGN_MIDDLE || align === SC.ALIGN_CENTER) {
+      // middle align means the difference divided by two, because we want equal parts on each side.
+      return 0 - Math.round((containerSize - contentSize) / 2);
+    } else {
+      // right align means the entire difference, because we want all that space on the left
+      return 0 - (containerSize - contentSize);
+    }
+  },
   
   /**
     The maximum horizontal scroll offset allowed given the current contentView 
@@ -56,40 +134,111 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     @property {Number}
   */
   maximumHorizontalScrollOffset: function() {
-    if (!this.get('canScrollHorizontal')) return 0 ;
-    var view = this.get('contentView') ;
-    var contentWidth = view ? view.get('frame').width : 0 ;
+    var view = this.get('contentView'),
+        contentWidth = 0, calculatedWidth = 0;
+        
+    if (view && view.get('frame')) contentWidth = view.get('frame').width;
+    if (view) calculatedWidth = view.calculatedWidth || 0;
     
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view.calculatedWidth && view.calculatedWidth!==0){
+    if(view && view.calculatedWidth && view.calculatedWidth!==0){
       contentWidth = view.calculatedWidth; 
     }
+    contentWidth *= this._scale;
+    
     var containerWidth = this.get('containerView').get('frame').width ;
-    return Math.max(0, contentWidth-containerWidth) ;
+    
+    // we still must go through minimumScrollOffset even if we can't scroll
+    // because we need to adjust for alignment. So, just make sure it won't allow scrolling.
+    if (!this.get('canScrollHorizontal')) contentWidth = Math.min(contentWidth, containerWidth);
+    return this.maximumScrollOffset(contentWidth, containerWidth, this.get("horizontalAlign"));
   }.property(),
   
   /**
     The maximum vertical scroll offset allowed given the current contentView 
     size and the size of the scroll view.  If vertical scrolling is disabled,
-    this will always return 0.
+    this will always return 0 (or whatever alignment dictates).
     
     @property {Number}
   */
   maximumVerticalScrollOffset: function() {
-    if (!this.get('canScrollVertical')) return 0 ;
+    var view = this.get('contentView'),
+        contentHeight = 0, calculatedHeight = 0;
+        
+    if (view && view.get('frame')) contentHeight = view.get('frame').height;
+    if (view) calculatedHeight = view.calculatedHeight || 0;
+    
+    // The following code checks if there is a calculatedWidth (collections)
+    // to avoid looking at the incorrect value calculated by frame.
+    if(view && view.calculatedHeight && view.calculatedHeight!==0){
+      contentHeight = view.calculatedHeight; 
+    }
+    contentHeight *= this._scale;
+    
+    var containerHeight = this.get('containerView').get('frame').height ;
+    
+    // we still must go through minimumScrollOffset even if we can't scroll
+    // because we need to adjust for alignment. So, just make sure it won't allow scrolling.
+    if (!this.get('canScrollVertical')) contentHeight = Math.min(contentHeight, containerHeight);
+    return this.maximumScrollOffset(contentHeight, containerHeight, this.get("verticalAlign"));
+  }.property(),
+  
+  
+  /**
+    The minimum horizontal scroll offset allowed given the current contentView 
+    size and the size of the scroll view.  If horizontal scrolling is 
+    disabled, this will always return 0 (or whatever alignment dictates).
+    
+    @property {Number}
+  */
+  minimumHorizontalScrollOffset: function() {
+    var view = this.get('contentView') ;
+    var contentWidth = view ? view.get('frame').width : 0 ;
+    
+    // The following code checks if there is a calculatedWidth (collections)
+    // to avoid looking at the incorrect value calculated by frame.
+    if(view && view.calculatedWidth && view.calculatedWidth!==0){
+      contentWidth = view.calculatedWidth; 
+    }
+    contentWidth *= this._scale;
+    
+    var containerWidth = this.get('containerView').get('frame').width ;
+    
+    // we still must go through minimumScrollOffset even if we can't scroll
+    // because we need to adjust for alignment. So, just make sure it won't allow scrolling.
+    if (!this.get('canScrollHorizontal')) contentWidth = Math.min(contentWidth, containerWidth);
+    return this.minimumScrollOffset(contentWidth, containerWidth, this.get("horizontalAlign"));
+  }.property(),
+  
+  /**
+    The minimum vertical scroll offset allowed given the current contentView 
+    size and the size of the scroll view.  If vertical scrolling is disabled,
+    this will always return 0 (or whatever alignment dictates).
+    
+    @property {Number}
+  */
+  minimumVerticalScrollOffset: function() {
     var view = this.get('contentView') ;
     var contentHeight = (view && view.get('frame')) ? view.get('frame').height : 0 ;
     
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view.calculatedHeight && view.calculatedHeight!==0){
+    if(view && view.calculatedHeight && view.calculatedHeight!==0){
       contentHeight = view.calculatedHeight; 
     }
+    contentHeight *= this._scale;
+    
     var containerHeight = this.get('containerView').get('frame').height ;
-    return Math.max(0, contentHeight-containerHeight) ;
+    
+    // we still must go through minimumScrollOffset even if we can't scroll
+    // because we need to adjust for alignment. So, just make sure it won't allow scrolling.
+    if (!this.get('canScrollVertical')) contentHeight = Math.min(contentHeight, containerHeight);
+    return this.minimumScrollOffset(contentHeight, containerHeight, this.get("verticalAlign"));
   }.property(),
   
+  
+  
   /** 
     Amount to scroll one vertical line.
   
@@ -145,7 +294,9 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     @property {SC.View}
   */
-  horizontalScrollerView: SC.ScrollerView,
+  horizontalScrollerView: function() {
+    return SC.ScrollerView;
+  }.property().cacheable(),
   
   /**
     YES if the horizontal scroller should be visible.  You can change this 
@@ -191,7 +342,9 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     @property {SC.View}
   */
-  verticalScrollerView: SC.ScrollerView,
+  verticalScrollerView: function() {
+    return SC.ScrollerView;
+  }.property().cacheable(),
   
   /**
     YES if the vertical scroller should be visible.  You can change this 
@@ -231,6 +384,60 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   */
   verticalScrollerBottom: 0,
   
+  /**
+    Use this to overlay the vertical scroller.
+    
+    This ensures that the container frame will not resize to accomodate the
+    vertical scroller, hence overlaying the scroller on top of 
+    the container.
+  
+    @property {Boolean}
+  */
+  verticalOverlay: function() {
+    if (SC.platform.touch) return YES;
+    return NO;
+  }.property().cacheable(),
+  
+  /**
+    Use this to overlay the horizontal scroller.
+    
+    This ensures that the container frame will not resize to accomodate the
+    horizontal scroller, hence overlaying the scroller on top of 
+    the container
+    
+    @property {Boolean}
+  */
+  horizontalOverlay: function() {
+    if (SC.platform.touch) return YES;
+    return NO;
+  }.property().cacheable(),
+  
+  /**
+    Use to control the positioning of the vertical scroller.  If you do not
+    set 'verticalOverlay' to YES, then the content view will be automatically
+    sized to meet the left edge of the vertical scroller, wherever it may be.
+    This allows you to easily, for example, have “one pixel higher and one
+    pixel lower” scroll bars that blend into their parent views.
+    
+    If you do set 'verticalOverlay' to YES, then the scroller view will
+    “float on top” of the content view.
+    
+    Example: { top: -1, bottom: -1, right: 0 }
+  */
+  verticalScrollerLayout: null,
+  
+  /**
+    Use to control the positioning of the horizontal scroller.  If you do not
+    set 'horizontalOverlay' to YES, then the content view will be
+    automatically sized to meet the top edge of the horizontal scroller,
+    wherever it may be.
+    
+    If you do set 'horizontalOverlay' to YES, then the scroller view will
+    “float on top” of the content view.
+    
+    Example: { left: 0, bottom: 0, right: 0 }
+  */
+  horizontalScrollerLayout: null,
   
   // ..........................................................
   // CUSTOM VIEWS
@@ -242,7 +449,9 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     @type {SC.ContainerView}
   */
-  containerView: SC.ContainerView,
+  containerView: SC.ContainerView.extend({
+
+  }),
   
   // ..........................................................
   // METHODS
@@ -272,12 +481,12 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     }
     
     if (!SC.none(x)) {
-      x = Math.max(0,Math.min(this.get('maximumHorizontalScrollOffset'), x)) ;
+      x = Math.max(this.get('minimumHorizontalScrollOffset'),Math.min(this.get('maximumHorizontalScrollOffset'), x)) ;
       this.set('horizontalScrollOffset', x) ;
     }
     
     if (!SC.none(y)) {
-      y = Math.max(0,Math.min(this.get('maximumVerticalScrollOffset'), y)) ;
+      y = Math.max(this.get('minimumVerticalScrollOffset'),Math.min(this.get('maximumVerticalScrollOffset'), y)) ;
       this.set('verticalScrollOffset', y) ;
     }
     
@@ -334,6 +543,15 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     // will become the new scroll offset after some adjustment.
     vf = contentView.convertFrameFromView(vf, view.get('parentView')) ;
     
+    return this.scrollToRect(vf);
+  },
+  
+  /**
+    Scroll to the supplied rectangle.
+    @param {rect} Rectangle to scroll to.
+    @returns {Boolean} YES if scroll position was changed.
+  */
+  scrollToRect: function(rect) {
     // find current visible frame.
     var vo = SC.cloneRect(this.get('containerView').get('frame')) ;
     
@@ -343,12 +561,12 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     var origX = vo.x, origY = vo.y;
     
     // if top edge is not visible, shift origin
-    vo.y -= Math.max(0, SC.minY(vo) - SC.minY(vf)) ;
-    vo.x -= Math.max(0, SC.minX(vo) - SC.minX(vf)) ;
+    vo.y -= Math.max(0, SC.minY(vo) - SC.minY(rect)) ;
+    vo.x -= Math.max(0, SC.minX(vo) - SC.minX(rect)) ;
     
     // if bottom edge is not visible, shift origin
-    vo.y += Math.max(0, SC.maxY(vf) - SC.maxY(vo)) ;
-    vo.x += Math.max(0, SC.maxX(vf) - SC.maxX(vo)) ;
+    vo.y += Math.max(0, SC.maxY(rect) - SC.maxY(vo)) ;
+    vo.x += Math.max(0, SC.maxX(rect) - SC.maxX(vo)) ;
     
     // scroll to that origin.
     if ((origX !== vo.x) || (origY !== vo.y)) {
@@ -357,6 +575,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     } else return NO;
   },
   
+  
   /**
     Scrolls the receiver down one or more lines if allowed.  If number of
     lines is not specified, scrolls one line.
@@ -470,40 +689,60 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     additional controls you have added to the view.
   */
   tile: function() {
+    
+    // for now just hide scroll bars on touch platforms
+    var isTouch = SC.platform.touch;
+    
     // get horizontal scroller/determine if we should have a scroller
     var hscroll = this.get('hasHorizontalScroller') ? this.get('horizontalScrollerView') : null ;
-    var hasHorizontal = hscroll && this.get('isHorizontalScrollerVisible');
+    var hasHorizontal = hscroll && !isTouch && this.get('isHorizontalScrollerVisible');
     
     // get vertical scroller/determine if we should have a scroller
     var vscroll = this.get('hasVerticalScroller') ? this.get('verticalScrollerView') : null ;
-    var hasVertical = vscroll && this.get('isVerticalScrollerVisible') ;
+    var hasVertical = vscroll && !isTouch && this.get('isVerticalScrollerVisible') ;
     
     // get the containerView
     var clip = this.get('containerView') ;
     var clipLayout = { left: 0, top: 0 } ;
-    var t ;
+    var t, layout, vo, ho, vl, hl;
     
-    var ht = ((hasHorizontal) ? hscroll.get('scrollerThickness') : 0) ;
-    var vt = (hasVertical) ?   vscroll.get('scrollerThickness') : 0 ;
+    var ht = ((hasHorizontal) ? hscroll.get('scrollbarThickness') : 0) ;
+    var vt = (hasVertical) ?   vscroll.get('scrollbarThickness') : 0 ;
     
     if (hasHorizontal) {
-      hscroll.set('layout', { left: 0, bottom: 0, right: vt-1, height: ht }) ;
-      clipLayout.bottom = ht-1 ;
+      hl     = this.get('horizontalScrollerLayout');
+      layout = { 
+        left: (hl ? hl.left : 0), 
+        bottom: (hl ? hl.bottom : 0), 
+        right: (hl ? hl.right + vt-1 : vt-1), 
+        height: ht 
+      };
+      hscroll.set('layout', layout) ;
+      ho = this.get('horizontalOverlay');
+      clipLayout.bottom = ho ? 0 : (layout.bottom + ht) ;
     } else {
       clipLayout.bottom = 0 ;
     }
     if (hscroll) hscroll.set('isVisible', hasHorizontal) ;
     
     if (hasVertical) {
-      ht = ht + this.get('verticalScrollerBottom') ;
-      vscroll.set('layout', { top: 0, bottom: ht, right: 0, width: vt }) ;
-      clipLayout.right = vt-1 ;
+      ht     = ht + this.get('verticalScrollerBottom') ;
+      vl     = this.get('verticalScrollerLayout');
+      layout = { 
+        top: (vl ? vl.top : 0), 
+        bottom: (vl ? vl.bottom + ht : ht), 
+        right: (vl ? vl.right : 0), 
+        width: vt 
+      };
+      vscroll.set('layout', layout) ;
+      vo = this.get('verticalOverlay');
+      clipLayout.right = vo ? 0 : (layout.right + vt) ;
     } else {
       clipLayout.right = 0 ;
     }
     if (vscroll) vscroll.set('isVisible', hasVertical) ;
-    
-    clip.set('layout', clipLayout) ;
+
+    clip.adjust(clipLayout) ;
   },
   
   /** @private
@@ -523,18 +762,737 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   // save adjustment and then invoke the actual scroll code later.  This will
   // keep the view feeling smooth.
   mouseWheel: function(evt) {
-    this._scroll_wheelDeltaX += evt.wheelDeltaX;
-    this._scroll_wheelDeltaY += evt.wheelDeltaY;
+    var deltaAdjust = (SC.browser.safari && SC.browser.version > 533.0) ? 120 : 1;
+    
+    this._scroll_wheelDeltaX += evt.wheelDeltaX / deltaAdjust;
+    this._scroll_wheelDeltaY += evt.wheelDeltaY / deltaAdjust;
     this.invokeLater(this._scroll_mouseWheel, 10) ;
     return this.get('canScrollHorizontal') || this.get('canScrollVertical') ;  
   },
-  
+
   /** @private */
   _scroll_mouseWheel: function() {
     this.scrollBy(this._scroll_wheelDeltaX, this._scroll_wheelDeltaY);
-    this._scroll_wheelDeltaX = this._scroll_wheelDeltaY = 0;
+    if (SC.WHEEL_MOMENTUM && this._scroll_wheelDeltaY > 0) {
+      this._scroll_wheelDeltaY = Math.floor(this._scroll_wheelDeltaY*0.950);
+      this._scroll_wheelDeltaY = Math.max(this._scroll_wheelDeltaY, 0);
+      this.invokeLater(this._scroll_mouseWheel, 10) ;
+    } else if (SC.WHEEL_MOMENTUM && this._scroll_wheelDeltaY < 0){
+      this._scroll_wheelDeltaY = Math.ceil(this._scroll_wheelDeltaY*0.950);
+      this._scroll_wheelDeltaY = Math.min(this._scroll_wheelDeltaY, 0);
+      this.invokeLater(this._scroll_mouseWheel, 10) ;
+    } else {
+      this._scroll_wheelDeltaY = 0;
+      this._scroll_wheelDeltaX = 0;
+    }
   },
   
+  /*..............................................
+    SCALING SUPPORT
+  */
+  
+  /**
+    Determines whether scaling is allowed.
+  */
+  canScale: NO,
+  
+  /**
+    The current scale.
+  */
+  _scale: 1.0,
+  scale: function(key, value) {
+    if (value !== undefined) {
+      this._scale = Math.min(Math.max(this.get("minimumScale"), value), this.get("maximumScale"));
+    }
+    return this._scale;
+  }.property().cacheable(),
+  
+  /**
+    The minimum scale.
+  */
+  minimumScale: 0.25,
+  
+  /**
+    The maximum scale.
+  */
+  maximumScale: 2.0,
+  
+  /**
+    Whether to automatically determine the scale range based on the size of the content.
+  */
+  autoScaleRange: NO,
+  
+  _scale_css: "",
+  
+  updateScale: function(scale) {
+    var contentView = this.get("contentView");
+    if (!contentView) return;
+    
+    if (contentView.isScalable) {
+      this.get("contentView").applyScale(scale);
+      this._scale_css = "";
+    } else {
+      this._scale_css = "scale3d(" + scale + ", " + scale + ", 1)";
+    }
+  },
+  
+  /*..............................................
+    TOUCH SUPPORT
+  */
+  acceptsMultitouch: YES,
+  
+  /**
+    The scroll deceleration rate.
+  */
+  decelerationRate: SC.NORMAL_SCROLL_DECELERATION,
+  
+  /**
+    If YES, bouncing will always be enabled in the horizontal direction, even if the content
+    is smaller or the same size as the view. NO by default.
+  */
+  alwaysBounceHorizontal: NO,
+  
+  /**
+    If NO, bouncing will not be enabled in the vertical direction when the content is smaller
+    or the same size as the scroll view. YES by default.
+  */
+  alwaysBounceVertical: YES,
+  
+  /**
+    Whether to delay touches from passing through to the content.
+  */
+  delaysContentTouches: YES,
+  
+  /**
+    @private
+    If the view supports it, this 
+  */
+  _touchScrollDidChange: function() {
+    if (this.get("contentView").touchScrollDidChange) {
+      this.get("contentView").touchScrollDidChange(
+        this._scroll_horizontalScrollOffset,
+        this._scroll_verticalScrollOffset
+      );
+    }
+    
+    // tell scrollers
+    if (this.verticalScrollerView && this.verticalScrollerView.touchScrollDidChange) {
+      this.verticalScrollerView.touchScrollDidChange(this._scroll_verticalScrollOffset);
+    }
+    
+    if (this.horizontalScrollerView && this.horizontalScrollerView.touchScrollDidChange) {
+      this.horizontalScrollerView.touchScrollDidChange(this._scroll_horizontalScrollOffset);
+    }
+  },
+  
+  _touchScrollDidStart: function() {
+    if (this.get("contentView").touchScrollDidStart) {
+      this.get("contentView").touchScrollDidStart(this._scroll_horizontalScrollOffset, this._scroll_verticalScrollOffset);
+    }
+    
+    // tell scrollers
+    if (this.verticalScrollerView && this.verticalScrollerView.touchScrollDidStart) {
+      this.verticalScrollerView.touchScrollDidStart(this._touch_verticalScrollOffset);
+    }
+    if (this.horizontalScrollerView && this.horizontalScrollerView.touchScrollDidStart) {
+      this.horizontalScrollerView.touchScrollDidStart(this._touch_horizontalScrollOffset);
+    }
+  },
+  
+  _touchScrollDidEnd: function() {
+    if (this.get("contentView").touchScrollDidEnd) {
+      this.get("contentView").touchScrollDidEnd(this._scroll_horizontalScrollOffset, this._scroll_verticalScrollOffset);
+    }
+    
+    // tell scrollers
+    if (this.verticalScrollerView && this.verticalScrollerView.touchScrollDidEnd) {
+      this.verticalScrollerView.touchScrollDidEnd(this._touch_verticalScrollOffset);
+    }
+    
+    if (this.horizontalScrollerView && this.horizontalScrollerView.touchScrollDidEnd) {
+      this.horizontalScrollerView.touchScrollDidEnd(this._touch_horizontalScrollOffset);
+    }
+  },
+  
+  _applyCSSTransforms: function(layer) {
+    var transform = "";
+    this.updateScale(this._scale);
+    transform += 'translate3d('+ -this._scroll_horizontalScrollOffset +'px, '+ -Math.round(this._scroll_verticalScrollOffset)+'px,0) ';
+    transform += this._scale_css;
+    if (layer) {
+      layer.style.webkitTransform = transform;
+      layer.style.webkitTransformOrigin = "top left";
+    }
+  },
+  
+  captureTouch: function(touch) {
+    return YES;
+  },
+  
+  touchGeneration: 0,
+  touchStart: function(touch) {
+    var generation = ++this.touchGeneration;
+    if (!this.tracking && this.get("delaysContentTouches")) {
+      this.invokeLater(this.beginTouchesInContent, 150, generation);
+    } else if (!this.tracking) {
+      // NOTE: We still have to delay because we don't want to call touchStart
+      // while touchStart is itself being called...
+      this.invokeLater(this.beginTouchesInContent, 1, generation);
+    }
+    this.beginTouchTracking(touch, YES);
+    return YES;
+  },
+
+  beginTouchesInContent: function(gen) {
+    if (gen !== this.touchGeneration) return;
+    var touch = this.touch, itemView;
+    if (touch && this.tracking && !this.dragging && !touch.touch.scrollHasEnded) {
+      // try to capture the touch
+      touch.touch.captureTouch(this, YES);
+      if (!touch.touch.touchResponder) touch.touch.makeTouchResponder(this);
+    }
+  },
+
+  /**
+    Initializes the start state of the gesture.
+
+    We keep information about the initial location of the touch so we can
+    disambiguate between a tap and a drag.
+
+    @param {Event} evt
+  */
+  beginTouchTracking: function(touch, starting) {
+    var avg = touch.averagedTouchesForView(this, starting);
+    
+    var verticalScrollOffset = this._scroll_verticalScrollOffset || 0,
+        horizontalScrollOffset = this._scroll_horizontalScrollOffset || 0,
+        startClipOffsetX = horizontalScrollOffset,
+        startClipOffsetY = verticalScrollOffset;
+    
+    if (this.touch && this.touch.timeout) {
+      // clear the timeout
+      clearTimeout(this.touch.timeout);
+      this.touch.timeout = null;
+      
+      // get the scroll offsets
+      startClipOffsetX = this.touch.startClipOffset.x;
+      startClipOffsetY = this.touch.startClipOffset.y;
+    }
+    
+    // calculate container+content width/height
+    var view = this.get('contentView') ;
+    var contentWidth = view ? view.get('frame').width : 0,
+        contentHeight = view ? view.get('frame').height : 0;
+    
+    if(view.calculatedWidth && view.calculatedWidth!==0) contentWidth = view.calculatedWidth;
+    if (view.calculatedHeight && view.calculatedHeight !==0) contentHeight = view.calculatedHeight;
+    
+    var containerWidth = this.get('containerView').get('frame').width,
+        containerHeight = this.get('containerView').get('frame').height;
+    
+
+    // calculate position in content
+    var globalFrame = this.convertFrameToView(this.get("frame"), null),
+        positionInContentX = (horizontalScrollOffset + (avg.x - globalFrame.x)) / this._scale,
+        positionInContentY = (verticalScrollOffset + (avg.y - globalFrame.y)) / this._scale;
+
+    this.touch = {
+      startTime: touch.timeStamp,
+      notCalculated: YES,
+      
+      enableScrolling: { 
+        x: contentWidth * this._scale > containerWidth || this.get("alwaysBounceHorizontal"), 
+        y: contentHeight * this._scale > containerHeight || this.get("alwaysBounceVertical") 
+      },
+      scrolling: { x: NO, y: NO },
+      
+      enableBouncing: SC.platform.bounceOnScroll,
+      
+      // offsets and velocities
+      startClipOffset: { x: startClipOffsetX, y: startClipOffsetY },
+      lastScrollOffset: { x: horizontalScrollOffset, y: verticalScrollOffset },
+      startTouchOffset: { x: avg.x, y: avg.y },
+      scrollVelocity: { x: 0, y: 0 },
+      
+      startTouchOffsetInContent: { x: positionInContentX, y: positionInContentY },
+      
+      containerSize: { width: containerWidth, height: containerHeight },
+      contentSize: { width: contentWidth, height: contentHeight },
+      
+      startScale: this._scale,
+      startDistance: avg.d,
+      canScale: this.get("canScale") && SC.platform.pinchToZoom,
+      minimumScale: this.get("minimumScale"),
+      maximumScale: this.get("maximumScale"),
+      
+      globalFrame: globalFrame,
+      
+      // cache some things
+      layer: this.get("contentView").get('layer'),
+
+      // some constants
+      resistanceCoefficient: 0.998,
+      resistanceAsymptote: 320,
+      decelerationFromEdge: 0.05,
+      accelerationToEdge: 0.1,
+      
+      // how much percent of the other drag direction you must drag to start dragging that direction too.
+      scrollTolerance: { x: 15, y: 15 },
+      scaleTolerance: 5,
+      secondaryScrollTolerance: 30,
+      scrollLock: 500,
+      
+      decelerationRate: this.get("decelerationRate"),
+
+      // general status
+      lastEventTime: touch.timeStamp,      
+      
+      // the touch used
+      touch: (starting ? touch : (this.touch ? this.touch.touch : null))
+    };
+
+    if (!this.tracking) {
+      this.tracking = YES;
+      this.dragging = NO;
+    }
+  },
+  
+  _adjustForEdgeResistance: function(offset, minOffset, maxOffset, resistanceCoefficient, asymptote) {
+    var distanceFromEdge;
+    
+    // find distance from edge
+    if (offset < minOffset) distanceFromEdge = offset - minOffset;
+    else if (offset > maxOffset) distanceFromEdge = maxOffset - offset;
+    else return offset;
+    
+    // manipulate logarithmically
+    distanceFromEdge = Math.pow(resistanceCoefficient, Math.abs(distanceFromEdge)) * asymptote;
+    
+    // adjust mathematically
+    if (offset < minOffset) distanceFromEdge = distanceFromEdge - asymptote;
+    else distanceFromEdge = -distanceFromEdge + asymptote;
+    
+    // generate final value
+    return Math.min(Math.max(minOffset, offset), maxOffset) + distanceFromEdge;
+  },
+  
+  touchesDragged: function(evt, touches) {
+    var avg = evt.averagedTouchesForView(this);
+    this.updateTouchScroll(avg.x, avg.y, avg.d, evt.timeStamp);
+  },
+  
+  updateTouchScroll: function(touchX, touchY, distance, timeStamp) {
+    // get some vars
+    var touch = this.touch,
+        touchXInFrame = touchX - touch.globalFrame.x,
+        touchYInFrame = touchY - touch.globalFrame.y,
+        offsetY,
+        maxOffsetY,
+        offsetX,
+        maxOffsetX,
+        minOffsetX, minOffsetY;
+        
+    // calculate new position in content
+    var positionInContentX = ((this._scroll_horizontalScrollOffset||0) + touchXInFrame) / this._scale,
+        positionInContentY = ((this._scroll_verticalScrollOffset||0) + touchYInFrame) / this._scale;
+    
+    // calculate deltas
+    var deltaX = positionInContentX - touch.startTouchOffset.x,
+        deltaY = positionInContentY - touch.startTouchOffset.y;
+    
+    var isDragging = touch.dragging;
+    if (!touch.scrolling.x && Math.abs(deltaX) > touch.scrollTolerance.x && touch.enableScrolling.x) {
+      // say we are scrolling
+      isDragging = YES;
+      touch.scrolling.x = YES;
+      touch.scrollTolerance.y = touch.secondaryScrollTolerance;
+      
+      // reset position
+      touch.startTouchOffset.x = touchX;
+      deltaX = 0;
+    }
+    if (!touch.scrolling.y && Math.abs(deltaY) > touch.scrollTolerance.y && touch.enableScrolling.y) {
+      // say we are scrolling
+      isDragging = YES;
+      touch.scrolling.y = YES;
+      touch.scrollTolerance.x = touch.secondaryScrollTolerance;
+      
+      // reset position
+      touch.startTouchOffset.y = touchY;
+      deltaY = 0;
+    }
+    
+    // handle scroll start
+    if (isDragging && !touch.dragging) {
+      touch.dragging = YES;
+      this.dragging = YES;
+      this._touchScrollDidStart();
+    }
+    
+    // calculate new offset
+    if (!touch.scrolling.x && !touch.scrolling.y && !touch.canScale) return;
+    if (touch.scrolling.x && !touch.scrolling.y) {
+      if (deltaX > touch.scrollLock && !touch.scrolling.y) touch.enableScrolling.y = NO;
+    }
+    if (touch.scrolling.y && !touch.scrolling.x) {
+      if (deltaY > touch.scrollLock && !touch.scrolling.x) touch.enableScrolling.x = NO;
+    }
+    
+    // handle scaling through pinch gesture
+    if (touch.canScale) {
+      
+      var startDistance = touch.startDistance, dd = distance - startDistance;
+      if (Math.abs(dd) > touch.scaleTolerance) {
+        touch.scrolling.y = YES; // if you scale, you can scroll.
+        touch.scrolling.x = YES;
+        
+        // we want to say something that was the startDistance away from each other should now be
+        // distance away. So, if we are twice as far away as we started...
+        var scale = touch.startScale * (distance / Math.max(startDistance, 50));
+
+        var newScale = this._adjustForEdgeResistance(scale, touch.minimumScale, touch.maximumScale, touch.resistanceCoefficient, touch.resistanceAsymptote);
+        this.dragging = YES;
+        this._scale = newScale;
+        var newPositionInContentX = positionInContentX * this._scale,
+            newPositionInContentY = positionInContentY * this._scale;
+      }
+    }
+    
+    // these do exactly what they sound like. So, this comment is just to
+    // block off the code a bit
+    // In english, these calculate the minimum X/Y offsets
+    minOffsetX = this.minimumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
+    minOffsetY = this.minimumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
+    
+    // and now, maximum...
+    maxOffsetX = this.maximumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
+    maxOffsetY = this.maximumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
+    
+    
+    // So, the following is the completely written out algebra:
+    // (offsetY + touchYInFrame) / this._scale = touch.startTouchOffsetInContent.y
+    // offsetY + touchYInFrame = touch.startTouchOffsetInContent.y * this._scale;
+    // offsetY = touch.startTouchOffset * this._scale - touchYInFrame
+    
+    // and the result applied:
+    offsetX = touch.startTouchOffsetInContent.x * this._scale - touchXInFrame;
+    offsetY = touch.startTouchOffsetInContent.y * this._scale - touchYInFrame;
+    
+    
+    // we need to adjust for edge resistance, or, if bouncing is disabled, just stop flat.
+    if (touch.enableBouncing) {
+      offsetX = this._adjustForEdgeResistance(offsetX, minOffsetX, maxOffsetX, touch.resistanceCoefficient, touch.resistanceAsymptote);
+      offsetY = this._adjustForEdgeResistance(offsetY, minOffsetY, maxOffsetY, touch.resistanceCoefficient, touch.resistanceAsymptote);
+    } else {
+      offsetX = Math.max(minOffsetX, Math.min(maxOffsetX, offsetX));
+      offsetY = Math.max(minOffsetY, Math.min(maxOffsetY, offsetY));
+    }
+    
+    // and now, _if_ scrolling is enabled, set the new coordinates
+    if (touch.scrolling.x) this._scroll_horizontalScrollOffset = offsetX;
+    if (touch.scrolling.y) this._scroll_verticalScrollOffset = offsetY;
+    
+    // and apply the CSS transforms.
+    this._applyCSSTransforms(touch.layer);
+    this._touchScrollDidChange();
+    
+    
+    // now we must prepare for momentum scrolling by calculating the momentum.
+    if (timeStamp - touch.lastEventTime >= 1 || touch.notCalculated) {
+      touch.notCalculated = NO;
+      var horizontalOffset = this._scroll_horizontalScrollOffset;
+      var verticalOffset = this._scroll_verticalScrollOffset;
+      
+      touch.scrollVelocity.x = ((horizontalOffset - touch.lastScrollOffset.x) / Math.max(1, timeStamp - touch.lastEventTime)); // in px per ms
+      touch.scrollVelocity.y = ((verticalOffset - touch.lastScrollOffset.y) / Math.max(1, timeStamp - touch.lastEventTime)); // in px per ms
+      touch.lastScrollOffset.x = horizontalOffset;
+      touch.lastScrollOffset.y = verticalOffset;
+      touch.lastEventTime = timeStamp;
+    }
+  },
+
+  touchEnd: function(touch) {
+    var touchStatus = this.touch,
+        avg = touch.averagedTouchesForView(this);
+    
+    touch.scrollHasEnded = YES;
+    if (avg.touchCount > 0) {
+      this.beginTouchTracking(touch, NO);
+    } else {
+      if (this.dragging) {
+        touchStatus.dragging = NO;
+
+        // reset last event time
+        touchStatus.lastEventTime = touch.timeStamp;
+
+        this.startDecelerationAnimation();
+      } else {
+        // this part looks weird, but it is actually quite simple.
+        // First, we send the touch off for capture+starting again, but telling it to return to us
+        // if nothing is found or if it is released.
+        touch.captureTouch(this, YES);
+        
+        // if we went anywhere, did anything, etc., call end()
+        if (touch.touchResponder && touch.touchResponder !== this) {
+          touch.end();
+        }
+        
+        // now check if it was released to us or stayed with us the whole time, or is for some
+        // wacky reason empty (in which case it is ours still). If so, and there is a next responder,
+        // relay to that.
+        if (!touch.touchResponder || touch.touchResponder === this) {
+          if (touch.nextTouchResponder) touch.makeTouchResponder(touch.nextTouchResponder);
+        } else {
+          // in this case, the view that captured it and changed responder should have handled
+          // everything for us.
+        }
+      }
+      
+      this.tracking = NO;
+      this.dragging = NO;
+    }
+  },
+  
+  touchCancelled: function(touch) {
+    this.beginPropertyChanges();
+    this.set("scale", this._scale);
+    this.set("verticalScrollOffset", this._scroll_verticalScrollOffset);
+    this.set("horizontalScrollOffset", this._scroll_horizontalScrollOffset);
+    this.endPropertyChanges();
+    this.tracking = NO;
+    
+    if (this.dragging) {
+      this._touchScrollDidEnd();
+    }
+    
+    this.dragging = NO;
+    this.touch = null;
+  },
+
+  startDecelerationAnimation: function(evt) {
+    var touch = this.touch;
+    touch.decelerationVelocity = {
+      x: touch.scrollVelocity.x * 10,
+      y: touch.scrollVelocity.y * 10
+    };
+    
+    this.decelerateAnimation();
+  },
+  
+  /**
+    @private
+    Does bounce calculations, adjusting velocity.
+    
+    Bouncing is fun. Functions that handle it should have fun names,
+    don'tcha think?
+    
+    P.S.: should this be named "bouncityBounce" instead?
+  */
+  bouncyBounce: function(velocity, value, minValue, maxValue, de, ac, additionalAcceleration) {
+    // we have 4 possible paths. On a higher level, we have two leaf paths that can be applied
+    // for either of two super-paths.
+    //
+    // The first path is if we are decelerating past an edge: in this case, this function must
+    // must enhance that deceleration. In this case, our math boils down to taking the amount
+    // by which we are past the edge, multiplying it by our deceleration factor, and reducing
+    // velocity by that amount.
+    //
+    // The second path is if we are not decelerating, but are still past the edge. In this case,
+    // we must start acceleration back _to_ the edge. The math here takes the distance we are from
+    // the edge, multiplies by the acceleration factor, and then performs two additional things:
+    // First, it speeds up the acceleration artificially  with additionalAcceleration; this will
+    // make the stop feel more sudden, as it will still have this additional acceleration when it reaches
+    // the edge. Second, it ensures the result does not go past the final value, so we don't end up
+    // bouncing back and forth all crazy-like.
+    if (value < minValue) {
+      if (velocity < 0) velocity = velocity + ((minValue - value) * de);
+      else {
+        velocity = Math.min((minValue-value) * ac + additionalAcceleration, minValue - value - 0.01);
+      }
+    } else if (value > maxValue) {
+      if (velocity > 0) velocity = velocity - ((value - maxValue) * de);
+      else {
+        velocity = -Math.min((value - maxValue) * ac + additionalAcceleration, value - maxValue - 0.01);
+      }
+    }
+    return velocity;
+  },
+
+  decelerateAnimation: function() {
+    // get a bunch of properties. They are named well, so not much explanation of what they are...
+    // However, note maxOffsetX/Y takes into account the scale;
+    // also, newX/Y adds in the current deceleration velocity (the deceleration velocity will
+    // be changed later in this function).
+    var touch = this.touch,
+        scale = this._scale,
+        minOffsetX = this.minimumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign")),
+        minOffsetY = this.minimumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign")),
+        maxOffsetX = this.maximumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign")),
+        maxOffsetY = this.maximumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign")),
+        
+        now = Date.now(),
+        t = Math.max(now - touch.lastEventTime, 1),
+        
+        newX = this._scroll_horizontalScrollOffset + touch.decelerationVelocity.x * (t/10),
+        newY = this._scroll_verticalScrollOffset + touch.decelerationVelocity.y * (t/10);
+    
+    var de = touch.decelerationFromEdge, ac = touch.accelerationToEdge;
+    
+    // under a few circumstances, we may want to force a valid X/Y position.
+    // For instance, if bouncing is disabled, or if position was okay before
+    // adjusting scale.
+    var forceValidXPosition = !touch.enableBouncing, forceValidYPosition = !touch.enableBouncing;
+    
+    // determine if position was okay before adjusting scale (which we do, in
+    // a lovely, animated way, for the scaled out/in too far bounce-back).
+    // if the position was okay, then we are going to make sure that we keep the
+    // position okay when adjusting the scale.
+    //
+    // Position OKness, here, referring to if the position is valid (within
+    // minimum and maximum scroll offsets)
+    if (newX >= minOffsetX && newX <= maxOffsetX) forceValidXPosition = YES;
+    if (newY >= minOffsetY && newY <= maxOffsetY) forceValidYPosition = YES;
+    
+    // We are going to change scale in a moment, but the position should stay the
+    // same, if possible (unless it would be more jarring, as described above, in
+    // the case of starting with a valid position and ending with an invalid one).
+    //
+    // Because we are changing the scale, we need to make the position scale-neutral.
+    // we'll make it non-scale-neutral after applying scale.
+    //
+    // Question: might it be better to save the center position instead, so scaling
+    // bounces back around the center of the screen?
+    newX /= this._scale;
+    newY /= this._scale;
+    
+    // scale velocity (amount to change) starts out at 0 each time, because 
+    // it is calculated by how far out of bounds it is, rather than by the
+    // previous such velocity.
+    var sv = 0;
+    
+    // do said calculation; we'll use the same bouncyBounce method used for everything
+    // else, but our adjustor that gives a minimum amount to change by and (which, as we'll
+    // discuss, is to make the stop feel slightly more like a stop), we'll leave at 0 
+    // (scale doesn't really need it as much; if you disagree, at least come up with 
+    // numbers more appropriate for scale than the ones for X/Y)
+    sv = this.bouncyBounce(sv, scale, touch.minimumScale, touch.maximumScale, de, ac, 0);
+    
+    // add the amount to scale. This is linear, rather than multiplicative. If you think
+    // it should be multiplicative (or however you say that), come up with a new formula.
+    this._scale = scale = scale + sv;
+    
+    // now we can convert newX/Y back to scale-specific coordinates...
+    newX *= this._scale;
+    newY *= this._scale;
+    
+    // It looks very weird if the content started in-bounds, but the scale animation
+    // made it not be in bounds; it causes the position to animate snapping back, and,
+    // well, it looks very weird. It is more proper to just make sure it stays in a valid
+    // position. So, we'll determine the new maximum/minimum offsets, and then, if it was
+    // originally a valid position, we'll adjust the new position to a valid position as well.
+    
+    
+    // determine new max offset
+    minOffsetX = this.minimumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
+    minOffsetY = this.minimumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
+    maxOffsetX = this.maximumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
+    maxOffsetY = this.maximumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
+    
+    // see if scaling messed up the X position (but ignore if 'tweren't right to begin with).
+    if (forceValidXPosition && (newX < minOffsetX || newX > maxOffsetX)) {
+      // Correct the position
+      newX = Math.max(minOffsetX, Math.min(newX, maxOffsetX));
+      
+      // also, make the velocity be ZERO; it is obviously not needed...
+      touch.decelerationVelocity.x = 0;
+    }
+    
+    // now the y
+    if (forceValidYPosition && (newY < minOffsetY || newY > maxOffsetY)) {
+      // again, correct it...
+      newY = Math.max(minOffsetY, Math.min(newY, maxOffsetY));
+      
+      // also, make the velocity be ZERO; it is obviously not needed...
+      touch.decelerationVelocity.y = 0;
+    }
+    
+    
+    // now that we are done modifying the position, we may update the actual scroll
+    this._scroll_horizontalScrollOffset = newX;
+    this._scroll_verticalScrollOffset = newY;
+    
+    this._applyCSSTransforms(touch.layer); // <- Does what it sounds like.
+
+    SC.RunLoop.begin();
+    this._touchScrollDidChange();
+    SC.RunLoop.end();
+    
+    // Now we have to adjust the velocities. The velocities are simple x and y numbers that
+    // get added to the scroll X/Y positions each frame.
+    // The default decay rate is .950 per frame. To achieve some semblance of accuracy, we
+    // make it to the power of the elapsed number of frames. This is not fully accurate,
+    // as this is applying the elapsed time between this frame and the previous time to
+    // modify the velocity for the next frame. My mind goes blank when I try to figure out
+    // a way to fix this (given that we don't want to change the velocity on the first frame),
+    // and as it seems to work great as-is, I'm just leaving it.
+    var decay = touch.decelerationRate;
+    touch.decelerationVelocity.y *= Math.pow(decay, (t / 10));
+    touch.decelerationVelocity.x *= Math.pow(decay, (t / 10));
+    
+    // We have a bouncyBounce method that adjusts the velocity for bounce. That is, if it is
+    // out of range and still going, it will slow it down. This step is decelerationFromEdge.
+    // If it is not moving (or has come to a stop from decelerating), but is still out of range, 
+    // it will start it moving back into range (accelerationToEdge)
+    // we supply de and ac as these properties.
+    // The .3 artificially increases the acceleration by .3; this is actually to make the final
+    // stop a bit more abrupt.
+    touch.decelerationVelocity.x = this.bouncyBounce(touch.decelerationVelocity.x, newX, minOffsetX, maxOffsetX, de, ac, 0.3);
+    touch.decelerationVelocity.y = this.bouncyBounce(touch.decelerationVelocity.y, newY, minOffsetY, maxOffsetY, de, ac, 0.3);
+ 
+    // if we ain't got no velocity... then we must be finished, as there is no where else to go.
+    // to determine our velocity, we take the absolue value, and use that; if it is less than .01, we
+    // must be done. Note that we check scale's most recent velocity, calculated above using bouncyBounce,
+    // as well.
+    var absXVelocity = Math.abs(touch.decelerationVelocity.x);
+    var absYVelocity = Math.abs(touch.decelerationVelocity.y);
+    if (absYVelocity < 0.01 && absXVelocity < 0.01 && Math.abs(sv) < 0.01) {
+      // we can reset the timeout, as it will no longer be required, and we don't want to re-cancel it later.
+      touch.timeout = null;
+      this.touch = null;
+      
+      // we aren't in a run loop right now (see below, where we trigger the timer)
+      // so, we must start one.
+      SC.RunLoop.begin();
+      
+      // trigger scroll end
+      this._touchScrollDidEnd();
+      
+      // set the scale, vertical, and horizontal offsets to what they technically already are,
+      // but don't know they are yet. This will finally update things like, say, the clipping frame.
+      this.beginPropertyChanges();
+      this.set("scale", this._scale);
+      this.set("verticalScrollOffset", this._scroll_verticalScrollOffset);
+      this.set("horizontalScrollOffset", this._scroll_horizontalScrollOffset);
+      this.endPropertyChanges();
+      
+      // and now we're done, so just end the run loop and return.
+      SC.RunLoop.end();
+      return;
+    }
+    
+    // We now set up the next round. We are doing this as raw as we possibly can, not touching the
+    // run loop at all. This speeds up performance drastically--keep in mind, we're on comparatively
+    // slow devices, here. So, we'll just make a closure, saving "this" into "self" and calling
+    // 10ms later (or however long it takes). Note also that we save both the last event time
+    // (so we may calculate elapsed time) and the timeout we are creating, so we may cancel it in future.
+    var self = this;
+    touch.lastEventTime = Date.now();
+    this.touch.timeout = setTimeout(function(){
+      SC.RunLoop.begin();
+      self.decelerateAnimation();
+      SC.RunLoop.end();
+    }, 10);
+  },
   
   // ..........................................................
   // INTERNAL SUPPORT
@@ -552,14 +1510,16 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     if (SC.none(view = this.containerView)) view = SC.ContainerView;
     
     childViews.push(this.containerView = this.createChildView(view, {
-      contentView: this.contentView
+      contentView: this.contentView,
+      isScrollContainer: YES
     }));
     
     // and replace our own contentView...
     this.contentView = this.containerView.get('contentView');
     
     // create a horizontal scroller view if needed...
-    if (view=this.horizontalScrollerView) {
+    view = this.get("horizontalScrollerView");
+    if (view) {
       if (this.get('hasHorizontalScroller')) {
         view = this.horizontalScrollerView = this.createChildView(view, {
           layoutDirection: SC.LAYOUT_HORIZONTAL,
@@ -570,7 +1530,8 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     }
     
     // create a vertical scroller view if needed...
-    if (view=this.verticalScrollerView) {
+    view = this.get("verticalScrollerView");
+    if (view) {
       if (this.get('hasVerticalScroller')) {
         view = this.verticalScrollerView = this.createChildView(view, {
           layoutDirection: SC.LAYOUT_VERTICAL,
@@ -614,16 +1575,25 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     frame to be notified whenever it's size changes.
   */
   contentViewDidChange: function() {
-    var newView = this.get('contentView'), oldView = this._scroll_contentView;
-    var f = this.contentViewFrameDidChange ;
+    var newView = this.get('contentView'),
+        oldView = this._scroll_contentView,
+        frameObserver = this.contentViewFrameDidChange,
+        layerObserver = this.contentViewLayerDidChange;
+
     if (newView !== oldView) {
       
       // stop observing old content view
-      if (oldView) oldView.removeObserver('frame', this, f);
+      if (oldView) {
+        oldView.removeObserver('frame', this, frameObserver);
+        oldView.removeObserver('layer', this, layerObserver);
+      }
       
       // update cache
       this._scroll_contentView = newView;
-      if (newView) newView.addObserver('frame', this, f);
+      if (newView) {
+        newView.addObserver('frame', this, frameObserver);
+        newView.addObserver('layer', this, layerObserver);
+      }
       
       // replace container
       this.containerView.set('contentView', newView);
@@ -631,47 +1601,67 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       this.contentViewFrameDidChange();
     }
   }.observes('contentView'),
-  
+
+  /** @private
+    If we redraw after the initial render, we need to make sure that we reset
+    the scrollTop/scrollLeft properties on the content view.  This ensures
+    that, for example, the scroll views displays correctly when switching
+    views out in a ContainerView.
+  */
+  render: function(context, firstTime) {
+    this.invokeLast(this.adjustElementScroll);
+    if (firstTime) {
+      context.push('<div class="corner"></div>');
+    }
+    return sc_super();
+  },
+
   /** @private
     Invoked whenever the contentView's frame changes.  This will update the 
     scroller maxmimum and optionally update the scroller visibility if the
     size of the contentView changes.  We don't care about the origin since
     that is tracked separately from the offset values.
+
+    @param {Boolean} force (optional)  Re-calculate everything even if the contentView’s frame didn’t change size
   */
-  
+
   oldMaxHOffset: 0,
   oldMaxVOffset: 0,
-  
-  contentViewFrameDidChange: function() {
-        
+
+  contentViewFrameDidChange: function(force) {
     var view   = this.get('contentView'), 
         f      = (view) ? view.get('frame') : null,
-        width  = (f) ? f.width : 0,  
-        height = (f) ? f.height : 0,
-        dim    = this.get('frame') ;
+        scale  = this._scale,
+        width  = (f) ? f.width  * scale : 0,
+        height = (f) ? f.height * scale : 0,
+        dim, dimWidth, dimHeight;
     
     // cache out scroll settings...
-    //if ((width === this._scroll_contentWidth) && (height === this._scroll_contentHeight)) return ;
-    this._scroll_contentWidth = width;
-    this._scroll_contentHeight = height ;
+    if (!force && (width === this._scroll_contentWidth) && (height === this._scroll_contentHeight)) return ;
+    this._scroll_contentWidth  = width;
+    this._scroll_contentHeight = height;
+
+    dim       = this.get('frame');
+    dimWidth  = dim.width;
+    dimHeight = dim.height;
     
     if (this.get('hasHorizontalScroller') && (view = this.get('horizontalScrollerView'))) {
-      width -= 1 ; // accurately account for our layout
       // decide if it should be visible or not
       if (this.get('autohidesHorizontalScroller')) {
-        this.set('isHorizontalScrollerVisible', width > dim.width);
+        this.set('isHorizontalScrollerVisible', width > dimWidth);
       }
-      view.setIfChanged('maximum', width) ;
+      view.setIfChanged('maximum', width-dimWidth) ;
+      view.setIfChanged('proportion', dimWidth/width);
     }
     
     if (this.get('hasVerticalScroller') && (view = this.get('verticalScrollerView'))) {
-      height -= 1 ; // accurately account for our layout
       // decide if it should be visible or not
       if (this.get('autohidesVerticalScroller')) {
-        this.set('isVerticalScrollerVisible', height > dim.height);
+        this.set('isVerticalScrollerVisible', height > dimHeight);
       }
       height -= this.get('verticalScrollerBottom') ;
-      view.setIfChanged('maximum', height) ;
+      view.setIfChanged('maximum', height-dimHeight) ;
+      view.setIfChanged('proportion', dimHeight/height);
     }
     
     // If there is no vertical scroller and auto hiding is on, make
@@ -689,31 +1679,42 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     // This forces to recalculate the height of the frame when is at the bottom
     // of the scroll and the content dimension are smaller that the previous one
-    
-    var mxVOffSet = this.get('maximumVerticalScrollOffset'),
-        vOffSet = this.get('verticalScrollOffset'),
-        mxHOffSet = this.get('maximumHorizontalScrollOffset'),
-        hOffSet = this.get('horizontalScrollOffset');
-    var forceHeight = mxVOffSet<vOffSet;
-    var forceWidth = mxHOffSet<hOffSet;
-    if(forceHeight || forceWidth){
+    var mxVOffSet   = this.get('maximumVerticalScrollOffset'),
+        vOffSet     = this.get('verticalScrollOffset'),
+        mxHOffSet   = this.get('maximumHorizontalScrollOffset'),
+        hOffSet     = this.get('horizontalScrollOffset'),
+        forceHeight = mxVOffSet < vOffSet,
+        forceWidth  = mxHOffSet < hOffSet;
+    if (forceHeight || forceWidth) {
       this.forceDimensionsRecalculation(forceWidth, forceHeight, vOffSet, hOffSet);
     }
   },
-  
+
+  /** @private
+    If our frame changes, then we need to re-calculate the visiblility of our
+    scrollers, etc.
+  */
+  frameDidChange: function() {
+    this.contentViewFrameDidChange(YES);
+  }.observes('frame'),
+
+  /** @private
+    If the layer of the content view changes, we need to readjust the
+    scrollTop and scrollLeft properties on the new DOM element.
+  */
+  contentViewLayerDidChange: function() {
+    // Invalidate these cached values, as they're no longer valid
+    if (this._verticalScrollOffset !== 0) this._verticalScrollOffset = -1;
+    if (this._horizontalScrollOffset !== 0) this._horizontalScrollOffset = -1;
+    this.invokeLast(this.adjustElementScroll);
+  },
+
   /** @private
     Whenever the horizontal scroll offset changes, update the scrollers and 
     edit the location of the contentView.
   */
   _scroll_horizontalScrollOffsetDidChange: function() {
-    var offset = this.get('horizontalScrollOffset');
-    
-    offset = Math.max(0,Math.min(this.get('maximumHorizontalScrollOffset'), offset)) ;
-    
-    // update the offset for the contentView...
-    var contentView = this.get('contentView');
-    if (contentView) contentView.adjust('left', 0-offset);
-     
+    this.invokeLast(this.adjustElementScroll);
   }.observes('horizontalScrollOffset'),
   
   /** @private
@@ -721,21 +1722,51 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     edit the location of the contentView.
   */
   _scroll_verticalScrollOffsetDidChange: function() {
-    var offset = this.get('verticalScrollOffset') ;
-    
-    offset = Math.max(0,Math.min(this.get('maximumVerticalScrollOffset'), offset)) ;
-    
-    // update the offset for the contentView...
-    var contentView = this.get('contentView');
-    var containerView = this.get('containerView');
-    
-    // Optimization when not using collections. We need to reimplement clippingFrame
-    // and scrolling to be able to scroll using scrolltop. For now I just
-    // detect if the content to scroll is a class of collectionView.
-    if (contentView) contentView.adjust('top', 0-offset) ;
-    
+    this.invokeLast(this.adjustElementScroll);
   }.observes('verticalScrollOffset'),
-  
+
+  /** @private
+    Called at the end of the run loop to actually adjust the scrollTop
+    and scrollLeft properties of the container view.
+  */
+  adjustElementScroll: function() {
+    var container = this.get('containerView'),
+        content = this.get('contentView'),
+        verticalScrollOffset = this.get('verticalScrollOffset'),
+        horizontalScrollOffset = this.get('horizontalScrollOffset');
+
+    // We notify the content view that its frame property has changed
+    // before we actually update the scrollTop/scrollLeft properties.
+    // This gives views that use incremental rendering a chance to render
+    // newly-appearing elements before they come into view.
+    if (content) {
+      SC.RunLoop.begin();
+      content._viewFrameDidChange();
+      SC.RunLoop.end();
+
+      // Use accelerated drawing if the browser supports it
+      if (SC.platform.touch) {
+        this._applyCSSTransforms(content.get('layer'));
+      }
+    }
+
+    if (container && !SC.platform.touch) {
+      container = container.$()[0];
+      
+      if (container) {
+        if (verticalScrollOffset !== this._verticalScrollOffset) {
+          container.scrollTop = verticalScrollOffset;
+          this._verticalScrollOffset = verticalScrollOffset;
+        }
+
+        if (horizontalScrollOffset !== this._horizontalScrollOffset) {
+          container.scrollLeft = horizontalScrollOffset;
+          this._horizontalScrollOffset = horizontalScrollOffset;
+        }
+      }
+    }
+  },
+
   forceDimensionsRecalculation: function (forceWidth, forceHeight, vOffSet, hOffSet) {
     var oldScrollHOffset = hOffSet;
     var oldScrollVOffset = vOffSet;
@@ -749,6 +1780,9 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     if(!forceWidth && forceHeight){
       this.scrollTo(oldScrollHOffset ,this.get('maximumVerticalScrollOffset'));
     }
-  }
+  },
+
+  _scroll_verticalScrollOffset: 0,
+  _scroll_horizontalScrollOffset: 0
   
 });