scrollPage: function () {
   return this.scrollBy( 0, this.get( 'pxHeight' ) - 50, true );
 },

reverseScrollPage: function () {
   return this.scrollBy( 0, 50 - this.get( 'pxHeight' ), true );
 },

scrollLine: function () {
   return this.scrollBy( 0, 40 );
 },

reverseScrollLine: function () {
   return this.scrollBy( 0, -40 );
 },

scrollBy: function ( x, y, withAnimation ) {
   var left = this.get( 'scrollLeft' ),
     top = this.get( 'scrollTop' );
   x += left;
   y += top;

   this.scrollTo( x, y, withAnimation );

   return top !== this.get( 'scrollTop' ) ||
     left !== this.get( 'scrollLeft' );
 },

scrollToView: function ( view, offset, withAnimation ) {
   var position = view.getPositionRelativeTo( this );
   return this.scrollTo(
     position.left + ( offset && offset.x || 0 ),
     position.top + ( offset && offset.y || 0 ),
     withAnimation
   );
 },

scrollTo: function ( x, y, withAnimation ) {
   // Can't have negative scroll values.
   if ( x < 0 ) { x = 0; }
   if ( y < 0 ) { y = 0; }

   var scrollAnimation = this.get( 'scrollAnimation' );
   scrollAnimation.stop();

   if ( withAnimation ) {
     scrollAnimation.animate({
       x: x,
       y: y
     });
   } else {
     this.beginPropertyChanges()
       .set( 'scrollLeft', x )
       .set( 'scrollTop', y )
     .endPropertyChanges()
     .propertyNeedsRedraw( this, 'scroll' );
   }
   return this;
 },

redrawScroll: function () {
   var layer = this.get( 'scrollLayer' ),
     x = this.get( 'scrollLeft' ),
     y = this.get( 'scrollTop' );
   layer.scrollLeft = x;
   layer.scrollTop = y;
   // In case we've gone past the end.
   if ( x || y ) {
     NS.RunLoop.queueFn( 'after', this.syncBackScroll, this );
   }
 },

syncBackScroll: function ( event ) {
   if ( this._needsRedraw ) {
     return;
   }
   var layer = this.get( 'scrollLayer' ),
     x = layer.scrollLeft,
     y = layer.scrollTop;
   this.beginPropertyChanges()
     .set( 'scrollLeft', x )
     .set( 'scrollTop', y )
     .endPropertyChanges();
   if ( event ) {
     event.stopPropagation();
     // Don't interpret tap to stop scroll as a real tap.
     if ( NS.Tap ) {
       NS.Tap.cancel();
     }
   }
 }.on( 'scroll' )
});

if ( NS.UA.isIOS ) {
 ScrollView.implement({
   isFixedDimensions: function () {
     var positioning = this.get( 'positioning' );
     return positioning === 'absolute' || positioning === 'fixed';
   }.property( 'positioning' ),

   draw: function ( layer, Element, el ) {
     var isFixedDimensions = this.get( 'isFixedDimensions' ),
       scrollFixerHeight = 1,
       wrapper = null,
       safariVersion = NS.UA.safari,
       children;

     // Render the children.
     children = ScrollView.parent.draw.call( this, layer, Element, el );

     // Trick 1: The dual overflow:scroll view.
     // By default, iOS Safari will scroll the containing scroll view
     // if you are at the top/bottom of an overflow:scroll view. This
     // means it scrolls the window instead of bouncing your scroll view.
     // The dual overflow:scroll fixes this in iOS < 8. You only need
     // this in Safari: if in a UIWebView you can disable the natural
     // scrolling of the window.
     if ( 0 < safariVersion && safariVersion < 8 ) {
       wrapper = this.scrollLayer = el( 'div', {
         style: 'position:relative;height:100%;' +
           '-webkit-overflow-scrolling:touch;' +
           'overflow-x:' +
             ( this.get( 'showScrollbarX' ) ?
               'auto;' : 'hidden;' ) +
           'overflow-y:' +
             ( this.get( 'showScrollbarY' ) ?
               'auto;' : 'hidden;' )
       });
       layer.appendChild( wrapper );
       layer = wrapper;
     }

     // Trick 2: Never leave the scroll view at the ends.
     // As Trick 1 doesn't work in Safari on iOS8, we have to use a more
     // crude method: ensure the scrollHeight is at least pxHeight + 2,
     // then make sure scrollTop is never at the absolute end, so there
     // is always room to scroll in both directions. We add a 1px tall
     // empty div at the top of the content so at scrollTop=1px, it
     // looks like it should.
     if ( safariVersion >= 8 ) {
       scrollFixerHeight = 2;
       layer.appendChild(
         el( 'div', { style: 'height:1px' } )
       );
       this.on( 'scroll', this, '_setNotAtEnd' )
         .addObserverForKey( 'isInDocument', this, '_setNotAtEnd' );
     }

     // Append the actual children of the scroll view.
     Element.appendChildren( layer, children );

     // Trick 3: Ensuring the view scrolls.
     // Following platform conventions, we assume a fixed height
     // ScrollView should always scroll, regardless of whether the
     // content is taller than the view, whereas a variable height
     // ScrollView just needs to scroll if the content requires it.
     // Therefore, if it's a fixed height view, we add an extra
     // invisible div permanently 1px below the height, so it always
     // has scrollable content.
     if ( isFixedDimensions ) {
       layer.appendChild(
         el( 'div', {
           style: 'position:absolute;top:100%;left:0px;' +
             'width:1px;height:' + scrollFixerHeight + 'px;'
         })
       );
     }
   },

   _setNotAtEnd: function () {
     if ( this.get( 'isInDocument' ) ) {
       var scrollTop = this.get( 'scrollTop' ),
         scrollLeft = this.get( 'scrollLeft' );
       if ( !scrollTop ) {
         this.scrollTo( scrollLeft, 1 );
       } else if ( scrollTop + this.get( 'pxHeight' ) ===
           this.get( 'layer' ).scrollHeight ) {
         this.scrollTo( scrollLeft, scrollTop - 1 );
       }
     }
   }.queue( 'after' ),

   preventRootScroll: function ( event ) {
     if ( !this.get( 'isFixedDimensions' ) ) {
       var layer = this.get( 'layer' );
       if ( layer.scrollHeight <= layer.offsetHeight ) {
         event.preventDefault();
       }
     }
   }.on( 'touchmove' ),

   insertView: function ( view, relativeTo, where ) {
     if ( !relativeTo && this.get( 'isRendered' ) ) {
       relativeTo = this.scrollLayer;
       if ( where === 'top' ) {
         if ( NS.UA.safari >= 8 ) {
           relativeTo = relativeTo.firstChild;
           where = 'after';
         }
       } else if ( where === 'bottom' ) {
         if ( this.get( 'isFixedDimensions' ) ) {
           relativeTo = relativeTo.lastChild;
           where = 'before';
         }
       }
     }
     return ScrollView.parent.insertView.call(
       this, view, relativeTo, where );
   }
 });
}

NS.ScrollView = ScrollView;

}( O ) );