4bd7756eeb8a1f05a3831492e6e79701ddefde55
[platform/framework/web/web-ui-fw.git] / src / widgets / common / js / jquery.mobile.tizen.scrollview.js
1 /*
2 * jQuery Mobile Framework : scrollview plugin
3 * Copyright (c) 2010 Adobe Systems Incorporated - Kin Blas (jblas@adobe.com)
4 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
5 * Note: Code is in draft form and is subject to change
6 * Modified by Koeun Choi <koeun.choi@samsung.com>
7 * Modified by Minkyu Kang <mk7.kang@samsung.com>
8 */
9
10 (function ( $, window, document, undefined ) {
11
12         function resizePageContentHeight( page ) {
13                 var $page = $( page ),
14                         $content = $page.children(".ui-content"),
15                         hh = $page.children(".ui-header").outerHeight() || 0,
16                         fh = $page.children(".ui-footer").outerHeight() || 0,
17                         pt = parseFloat( $content.css("padding-top") ),
18                         pb = parseFloat( $content.css("padding-bottom") ),
19                         wh = $( window ).height();
20
21                 $content.height( wh - (hh + fh) - (pt + pb) );
22         }
23
24         function MomentumTracker( options ) {
25                 this.options = $.extend( {}, options );
26                 this.easing = "easeOutQuad";
27                 this.reset();
28         }
29
30         var tstates = {
31                 scrolling: 0,
32                 overshot:  1,
33                 snapback:  2,
34                 done:      3
35         };
36
37         function getCurrentTime() {
38                 return Date.now();
39         }
40
41         jQuery.widget( "tizen.scrollview", jQuery.mobile.widget, {
42                 options: {
43                         direction:         null,  // "x", "y", or null for both.
44
45                         timerInterval:     10,
46                         scrollDuration:    1000,  // Duration of the scrolling animation in msecs.
47                         overshootDuration: 250,   // Duration of the overshoot animation in msecs.
48                         snapbackDuration:  500,   // Duration of the snapback animation in msecs.
49
50                         moveThreshold:     30,   // User must move this many pixels in any direction to trigger a scroll.
51                         moveIntervalThreshold:     150,   // Time between mousemoves must not exceed this threshold.
52
53                         scrollMethod:      "translate",  // "translate", "position"
54                         startEventName:    "scrollstart",
55                         updateEventName:   "scrollupdate",
56                         stopEventName:     "scrollstop",
57
58                         eventType:         $.support.touch ? "touch" : "mouse",
59
60                         showScrollBars:    true,
61                         overshootEnable:   false,
62                         outerScrollEnable: true,
63                         overflowEnable:    true,
64                         scrollJump:        false,
65                 },
66
67                 _getViewHeight: function () {
68                         return this._$view.height() + this._view_offset;
69                 },
70
71                 _makePositioned: function ( $ele ) {
72                         if ( $ele.css("position") === "static" ) {
73                                 $ele.css( "position", "relative" );
74                         }
75                 },
76
77                 _create: function () {
78                         var direction,
79                                 self = this;
80
81                         this._$clip = $( this.element ).addClass("ui-scrollview-clip");
82
83                         if ( this._$clip.children(".ui-scrollview-view").length ) {
84                                 this._$view = this._$clip.children(".ui-scrollview-view");
85                         } else {
86                                 this._$view = this._$clip.wrapInner("<div></div>").children()
87                                                         .addClass("ui-scrollview-view");
88                         }
89
90                         if ( this.options.scrollMethod === "translate" ) {
91                                 if ( this._$view.css("transform") === undefined ) {
92                                         this.options.scrollMethod = "position";
93                                 }
94                         }
95
96                         this._$clip.css( "overflow", "hidden" );
97                         this._makePositioned( this._$clip );
98
99                         this._makePositioned( this._$view );
100                         this._$view.css( { left: 0, top: 0 } );
101
102                         this._view_offset = this._$view.offset().top - this._$clip.offset().top;
103                         this._view_height = this._getViewHeight();
104
105                         this._sx = 0;
106                         this._sy = 0;
107
108                         direction = this.options.direction;
109
110                         this._hTracker = ( direction !== "y" ) ?
111                                         new MomentumTracker( this.options ) : null;
112                         this._vTracker = ( direction !== "x" ) ?
113                                         new MomentumTracker( this.options ) : null;
114
115                         this._timerInterval = this.options.timerInterval;
116                         this._timerID = 0;
117
118                         this._timerCB = function () {
119                                 self._handleMomentumScroll();
120                         };
121
122                         this._add_event();
123                         this._add_scrollbar();
124                         this._add_scroll_jump();
125                         this._add_overflow_indicator();
126                 },
127
128                 _startMScroll: function ( speedX, speedY ) {
129                         var keepGoing = false,
130                                 duration = this.options.scrollDuration,
131                                 ht = this._hTracker,
132                                 vt = this._vTracker,
133                                 c,
134                                 v;
135
136                         this._$clip.trigger( this.options.startEventName );
137
138                         if ( ht ) {
139                                 c = this._$clip.width();
140                                 v = this._$view.width();
141
142                                 if ( (( this._sx === 0 && speedX > 0 ) ||
143                                         ( this._sx === -(v - c) && speedX < 0 )) &&
144                                                 v > c ) {
145                                         return;
146                                 }
147
148                                 ht.start( this._sx, speedX,
149                                         duration, (v > c) ? -(v - c) : 0, 0 );
150                                 keepGoing = !ht.done();
151                         }
152
153                         if ( vt ) {
154                                 c = this._$clip.height();
155                                 v = this._getViewHeight();
156
157                                 if ( (( this._sy === 0 && speedY > 0 ) ||
158                                         ( this._sy === -(v - c) && speedY < 0 )) &&
159                                                 v > c ) {
160                                         return;
161                                 }
162
163                                 vt.start( this._sy, speedY,
164                                         duration, (v > c) ? -(v - c) : 0, 0 );
165                                 keepGoing = keepGoing || !vt.done();
166                         }
167
168                         if ( keepGoing ) {
169                                 this._timerID = setTimeout( this._timerCB, this._timerInterval );
170                         } else {
171                                 this._stopMScroll();
172                         }
173                 },
174
175                 _stopMScroll: function () {
176                         if ( this._timerID ) {
177                                 this._$clip.trigger( this.options.stopEventName );
178                                 clearTimeout( this._timerID );
179                         }
180                         this._timerID = 0;
181
182                         if ( this._vTracker ) {
183                                 this._vTracker.reset();
184                         }
185
186                         if ( this._hTracker ) {
187                                 this._hTracker.reset();
188                         }
189
190                         this._hideScrollBars();
191                         this._hideOverflowIndicator();
192                 },
193
194                 _handleMomentumScroll: function () {
195                         var keepGoing = false,
196                                 x = 0,
197                                 y = 0,
198                                 scroll_height = 0,
199                                 self = this,
200                                 end_effect = function ( dir ) {
201                                         setTimeout( function () {
202                                                 self._effect_dir = dir;
203                                                 self._setEndEffect( "in" );
204                                         }, 100 );
205
206                                         setTimeout( function () {
207                                                 self._setEndEffect( "out" );
208                                         }, 350 );
209                                 },
210                                 vt = this._vTracker,
211                                 ht = this._hTracker;
212
213                         if ( this._outerScrolling ) {
214                                 return;
215                         }
216
217                         if ( vt ) {
218                                 vt.update( this.options.overshootEnable );
219                                 y = vt.getPosition();
220                                 keepGoing = !vt.done();
221
222                                 if ( vt.getRemained() > this.options.overshootDuration ) {
223                                         scroll_height = this._getViewHeight() - this._$clip.height();
224
225                                         if ( !vt.isAvail() ) {
226                                                 if ( this._speedY > 0 ) {
227                                                         this._outerScroll( vt.getRemained() / 3, scroll_height );
228                                                 } else {
229                                                         this._outerScroll( y - vt.getRemained() / 3, scroll_height );
230                                                 }
231                                         } else if ( vt.isMin() ) {
232                                                 this._outerScroll( y - vt.getRemained() / 3, scroll_height );
233
234                                                 if ( scroll_height > 0 ) {
235                                                         end_effect( 1 );
236                                                 }
237                                         } else if ( vt.isMax() ) {
238                                                 this._outerScroll( vt.getRemained() / 3, scroll_height );
239
240                                                 if ( scroll_height > 0 ) {
241                                                         end_effect( 0 );
242                                                 }
243                                         }
244                                 }
245                         }
246
247                         if ( ht ) {
248                                 ht.update( this.options.overshootEnable );
249                                 x = ht.getPosition();
250                                 keepGoing = keepGoing || !ht.done();
251                         }
252
253                         this._setScrollPosition( x, y );
254                         this._$clip.trigger( this.options.updateEventName,
255                                         [ { x: x, y: y } ] );
256
257                         if ( keepGoing ) {
258                                 this._timerID = setTimeout( this._timerCB, this._timerInterval );
259                         } else {
260                                 this._stopMScroll();
261                         }
262                 },
263
264                 _setElementTransform: function ( $ele, x, y, duration ) {
265                         var translate,
266                                 transition;
267
268                         if ( !duration || duration === undefined ) {
269                                 transition = "none";
270                         } else {
271                                 transition =  "-webkit-transform " + duration / 1000 + "s ease-out";
272                         }
273
274                         if ( $.support.cssTransform3d ) {
275                                 translate = "translate3d(" + x + "," + y + ", 0px)";
276                         } else {
277                                 translate = "translate(" + x + "," + y + ")";
278                         }
279
280                         $ele.css({
281                                 "-moz-transform": translate,
282                                 "-webkit-transform": translate,
283                                 "-ms-transform": translate,
284                                 "-o-transform": translate,
285                                 "transform": translate,
286                                 "-webkit-transition": transition
287                         });
288                 },
289
290                 _setEndEffect: function ( dir ) {
291                         var scroll_height = this._getViewHeight() - this._$clip.height();
292
293                         if ( this._softkeyboard ) {
294                                 if ( this._effect_dir ) {
295                                         this._outerScroll( -scroll_height - this._softkeyboardHeight,
296                                                         scroll_height );
297                                 } else {
298                                         this._outerScroll( this._softkeyboardHeight, scroll_height );
299                                 }
300                                 return;
301                         }
302
303                         if ( dir === "in" ) {
304                                 if ( this._endEffect ) {
305                                         return;
306                                 }
307
308                                 this._endEffect = true;
309                                 this._setOverflowIndicator( this._effect_dir );
310                                 this._showOverflowIndicator();
311                         } else if ( dir === "out" ) {
312                                 if ( !this._endEffect ) {
313                                         return;
314                                 }
315
316                                 this._endEffect = false;
317                         } else {
318                                 this._endEffect = false;
319                                 this._setOverflowIndicator();
320                                 this._showOverflowIndicator();
321                         }
322                 },
323
324                 _setCalibration: function ( x, y ) {
325                         if ( this.options.overshootEnable ) {
326                                 this._sx = x;
327                                 this._sy = y;
328                                 return;
329                         }
330
331                         var $v = this._$view,
332                                 $c = this._$clip,
333                                 dirLock = this._directionLock,
334                                 scroll_height = 0,
335                                 scroll_width = 0;
336
337                         if ( dirLock !== "y" && this._hTracker ) {
338                                 scroll_width = $v.width() - $c.width();
339
340                                 if ( x >= 0 ) {
341                                         this._sx = 0;
342                                 } else if ( x < -scroll_width ) {
343                                         this._sx = -scroll_width;
344                                 } else {
345                                         this._sx = x;
346                                 }
347
348                                 if ( scroll_width < 0 ) {
349                                         this._sx = 0;
350                                 }
351                         }
352
353                         if ( dirLock !== "x" && this._vTracker ) {
354                                 scroll_height = this._getViewHeight() - $c.height();
355
356                                 if ( y > 0 ) {
357                                         this._sy = 0;
358
359                                         if ( this._didDrag && scroll_height > 0 ) {
360                                                 this._effect_dir = 0;
361                                                 this._setEndEffect( "in" );
362                                         }
363                                 } else if ( y < -scroll_height ) {
364                                         this._sy = -scroll_height;
365
366                                         if ( this._didDrag && scroll_height > 0 ) {
367                                                 this._effect_dir = 1;
368                                                 this._setEndEffect( "in" );
369                                         }
370                                 } else {
371                                         if ( this._endEffect && this._sy !== y ) {
372                                                 this._setEndEffect();
373                                         }
374
375                                         this._sy = y;
376                                 }
377
378                                 if ( scroll_height < 0 ) {
379                                         this._sy = 0;
380                                 }
381                         }
382                 },
383
384                 _setScrollPosition: function ( x, y, duration ) {
385                         var $v = this._$view,
386                                 sm = this.options.scrollMethod,
387                                 $vsb = this._$vScrollBar,
388                                 $hsb = this._$hScrollBar,
389                                 $sbt;
390
391                         this._setCalibration( x, y );
392
393                         x = this._sx;
394                         y = this._sy;
395
396                         if ( sm === "translate" ) {
397                                 this._setElementTransform( $v, x + "px", y + "px", duration );
398                         } else {
399                                 $v.css( {left: x + "px", top: y + "px"} );
400                         }
401
402                         if ( $vsb ) {
403                                 $sbt = $vsb.find(".ui-scrollbar-thumb");
404
405                                 if ( sm === "translate" ) {
406                                         this._setElementTransform( $sbt, "0px",
407                                                 -y / this._getViewHeight() * $sbt.parent().height() + "px",
408                                                 duration );
409                                 } else {
410                                         $sbt.css( "top", -y / this._getViewHeight() * 100 + "%" );
411                                 }
412                         }
413
414                         if ( $hsb ) {
415                                 $sbt = $hsb.find(".ui-scrollbar-thumb");
416
417                                 if ( sm === "translate" ) {
418                                         this._setElementTransform( $sbt,
419                                                 -x / $v.width() * $sbt.parent().width() + "px", "0px",
420                                                 duration);
421                                 } else {
422                                         $sbt.css("left", -x / $v.width() * 100 + "%");
423                                 }
424                         }
425                 },
426
427                 _outerScroll: function ( y, scroll_height ) {
428                         var self = this,
429                                 top = $( window ).scrollTop() - window.screenTop,
430                                 sy = 0,
431                                 duration = this.options.snapbackDuration,
432                                 start = getCurrentTime(),
433                                 tfunc;
434
435                         if ( !this.options.outerScrollEnable ) {
436                                 return;
437                         }
438
439                         if ( this._$clip.jqmData("scroll") !== "y" ) {
440                                 return;
441                         }
442
443                         if ( this._outerScrolling ) {
444                                 return;
445                         }
446
447                         if ( y > 0 ) {
448                                 sy = ( window.screenTop ? window.screenTop : -y );
449                         } else if ( y < -scroll_height ) {
450                                 sy = -y - scroll_height;
451                         } else {
452                                 return;
453                         }
454
455                         tfunc = function () {
456                                 var elapsed = getCurrentTime() - start;
457
458                                 if ( elapsed >= duration ) {
459                                         window.scrollTo( 0, top + sy );
460                                         self._outerScrolling = undefined;
461
462                                         self._stopMScroll();
463                                 } else {
464                                         ec = $.easing.easeOutQuad( elapsed / duration,
465                                                         elapsed, 0, 1, duration );
466
467                                         window.scrollTo( 0, top + ( sy * ec ) );
468                                         self._outerScrolling = setTimeout( tfunc, self._timerInterval );
469                                 }
470                         };
471                         this._outerScrolling = setTimeout( tfunc, self._timerInterval );
472                 },
473
474                 _scrollTo: function ( x, y, duration ) {
475                         var self = this,
476                                 start = getCurrentTime(),
477                                 efunc = $.easing.easeOutQuad,
478                                 sx = this._sx,
479                                 sy = this._sy,
480                                 dx = x - sx,
481                                 dy = y - sy,
482                                 tfunc;
483
484                         x = -x;
485                         y = -y;
486
487                         tfunc = function () {
488                                 var elapsed = getCurrentTime() - start,
489                                     ec;
490
491                                 if ( elapsed >= duration ) {
492                                         self._timerID = 0;
493                                         self._setScrollPosition( x, y );
494                                 } else {
495                                         ec = efunc( elapsed / duration, elapsed, 0, 1, duration );
496
497                                         self._setScrollPosition( sx + ( dx * ec ), sy + ( dy * ec ) );
498                                         self._timerID = setTimeout( tfunc, self._timerInterval );
499                                 }
500                         };
501
502                         this._timerID = setTimeout( tfunc, this._timerInterval );
503                 },
504
505                 scrollTo: function ( x, y, duration ) {
506                         this._stopMScroll();
507
508                         if ( !duration || this.options.scrollMethod === "translate" ) {
509                                 this._setScrollPosition( x, y, duration );
510                         } else {
511                                 this._scrollTo( x, y, duration );
512                         }
513                 },
514
515                 getScrollPosition: function () {
516                         return { x: -this._sx, y: -this._sy };
517                 },
518
519                 _getScrollHierarchy: function () {
520                         var svh = [],
521                                 d;
522
523                         this._$clip.parents( ".ui-scrollview-clip").each( function () {
524                                 d = $( this ).jqmData("scrollview");
525                                 if ( d ) {
526                                         svh.unshift( d );
527                                 }
528                         } );
529                         return svh;
530                 },
531
532                 _getAncestorByDirection: function ( dir ) {
533                         var svh = this._getScrollHierarchy(),
534                                 n = svh.length,
535                                 sv,
536                                 svdir;
537
538                         while ( 0 < n-- ) {
539                                 sv = svh[n];
540                                 svdir = sv.options.direction;
541
542                                 if (!svdir || svdir === dir) {
543                                         return sv;
544                                 }
545                         }
546                         return null;
547                 },
548
549                 _handleDragStart: function ( e, ex, ey ) {
550                         this._stopMScroll();
551
552                         this._didDrag = false;
553                         this._skip_dragging = false;
554
555                         var target = $( e.target ),
556                                 self = this,
557                                 $c = this._$clip,
558                                 svdir = this.options.direction;
559
560                         /* should prevent the default behavior when click the button */
561                         this._is_button = target.is( '.ui-btn' ) ||
562                                         target.is( '.ui-btn-text' ) ||
563                                         target.is( '.ui-btn-inner' ) ||
564                                         target.is( '.ui-btn-inner .ui-icon' );
565
566                         /* should prevent the default behavior when click the slider */
567                         if ( target.parents('.ui-slider').length || target.is('.ui-slider') ) {
568                                 this._skip_dragging = true;
569                                 return;
570                         }
571
572                         /*
573                          * We need to prevent the default behavior to
574                          * suppress accidental selection of text, etc.
575                          */
576                         this._is_inputbox = target.is(':input') ||
577                                         target.parents(':input').length > 0;
578
579                         if ( this._is_inputbox ) {
580                                 target.one( "resize.scrollview", function () {
581                                         if ( ey > $c.height() ) {
582                                                 self.scrollTo( -ex, self._sy - ey + $c.height(),
583                                                         self.options.snapbackDuration );
584                                         }
585                                 });
586                         }
587
588                         if ( this.options.eventType === "mouse" && !this._is_inputbox && !this._is_button ) {
589                                 e.preventDefault();
590                         }
591
592                         this._lastX = ex;
593                         this._lastY = ey;
594                         this._startY = ey;
595                         this._doSnapBackX = false;
596                         this._doSnapBackY = false;
597                         this._speedX = 0;
598                         this._speedY = 0;
599                         this._directionLock = "";
600
601                         this._lastMove = 0;
602                         this._enableTracking();
603
604                         this._set_scrollbar_size();
605                 },
606
607                 _propagateDragMove: function ( sv, e, ex, ey, dir ) {
608                         this._hideScrollBars();
609                         this._hideOverflowIndicator();
610                         this._disableTracking();
611                         sv._handleDragStart( e, ex, ey );
612                         sv._directionLock = dir;
613                         sv._didDrag = this._didDrag;
614                 },
615
616                 _handleDragMove: function ( e, ex, ey ) {
617                         if ( this._skip_dragging ) {
618                                 return;
619                         }
620
621                         if ( !this._dragging ) {
622                                 return;
623                         }
624
625                         if ( !this._is_inputbox && !this._is_button ) {
626                                 e.preventDefault();
627                         }
628
629                         var mt = this.options.moveThreshold,
630                                 dx = ex - this._lastX,
631                                 dy = ey - this._lastY,
632                                 svdir = this.options.direction,
633                                 dir = null,
634                                 x,
635                                 y,
636                                 sv,
637                                 scope,
638                                 newX,
639                                 newY,
640                                 dirLock;
641
642                         this._lastMove = getCurrentTime();
643
644                         if ( !this._directionLock ) {
645                                 x = Math.abs( dx );
646                                 y = Math.abs( dy );
647
648                                 if ( x < mt && y < mt ) {
649                                         return false;
650                                 }
651
652                                 if ( x < y && (x / y) < 0.5 ) {
653                                         dir = "y";
654                                 } else if ( x > y && (y / x) < 0.5 ) {
655                                         dir = "x";
656                                 }
657
658                                 if ( svdir && dir && svdir !== dir ) {
659                                         /*
660                                          * This scrollview can't handle the direction the user
661                                          * is attempting to scroll. Find an ancestor scrollview
662                                          * that can handle the request.
663                                          */
664
665                                         sv = this._getAncestorByDirection( dir );
666                                         if ( sv ) {
667                                                 this._propagateDragMove( sv, e, ex, ey, dir );
668                                                 return false;
669                                         }
670                                 }
671
672                                 this._directionLock = svdir || (dir || "none");
673                         }
674
675                         newX = this._sx;
676                         newY = this._sy;
677                         dirLock = this._directionLock;
678
679                         if ( dirLock !== "y" && this._hTracker ) {
680                                 x = this._sx;
681                                 this._speedX = dx;
682                                 newX = x + dx;
683
684                                 this._doSnapBackX = false;
685
686                                 scope = ( newX > 0 || newX < this._maxX );
687
688                                 if ( scope && dirLock === "x" ) {
689                                         sv = this._getAncestorByDirection("x");
690                                         if ( sv ) {
691                                                 this._setScrollPosition( newX > 0 ?
692                                                                 0 : this._maxX, newY );
693                                                 this._propagateDragMove( sv, e, ex, ey, dir );
694                                                 return false;
695                                         }
696
697                                         newX = x + ( dx / 2 );
698                                         this._doSnapBackX = true;
699                                 }
700                         }
701
702                         if ( dirLock !== "x" && this._vTracker ) {
703                                 if ( Math.abs( this._startY - ey ) < mt && dirLock !== "xy" ) {
704                                         return;
705                                 }
706
707                                 y = this._sy;
708                                 this._speedY = dy;
709                                 newY = y + dy;
710
711                                 this._doSnapBackY = false;
712
713                                 scope = ( newY > 0 || newY < this._maxY );
714
715                                 if ( scope && dirLock === "y" ) {
716                                         sv = this._getAncestorByDirection("y");
717                                         if ( sv ) {
718                                                 this._setScrollPosition( newX,
719                                                                 newY > 0 ? 0 : this._maxY );
720                                                 this._propagateDragMove( sv, e, ex, ey, dir );
721                                                 return false;
722                                         }
723
724                                         newY = y + ( dy / 2 );
725                                         this._doSnapBackY = true;
726                                 }
727                         }
728
729                         if ( this.options.overshootEnable === false ) {
730                                 this._doSnapBackX = false;
731                                 this._doSnapBackY = false;
732                         }
733
734                         this._lastX = ex;
735                         this._lastY = ey;
736
737                         this._setScrollPosition( newX, newY );
738
739                         if ( this._didDrag === false ) {
740                                 this._didDrag = true;
741                                 this._showScrollBars();
742                                 this._showOverflowIndicator();
743                         }
744                 },
745
746                 _handleDragStop: function ( e ) {
747                         var self = this;
748
749                         if ( this._skip_dragging ) {
750                                 return;
751                         }
752
753                         var l = this._lastMove,
754                                 t = getCurrentTime(),
755                                 doScroll = (l && (t - l) <= this.options.moveIntervalThreshold),
756                                 sx = ( this._hTracker && this._speedX && doScroll ) ?
757                                                 this._speedX : ( this._doSnapBackX ? 1 : 0 ),
758                                 sy = ( this._vTracker && this._speedY && doScroll ) ?
759                                                 this._speedY : ( this._doSnapBackY ? 1 : 0 ),
760                                 svdir = this.options.direction,
761                                 x,
762                                 y;
763
764                         if ( sx || sy ) {
765                                 if ( !this._setGestureScroll( sx, sy ) ) {
766                                         this._startMScroll( sx, sy );
767                                 }
768                         } else {
769                                 this._hideScrollBars();
770                                 this._hideOverflowIndicator();
771                         }
772
773                         this._disableTracking();
774
775                         if ( this._endEffect ) {
776                                 setTimeout( function () {
777                                         self._setEndEffect( "out" );
778                                         self._hideScrollBars();
779                                         self._hideOverflowIndicator();
780                                 }, 300 );
781                         }
782
783                         return !this._didDrag;
784                 },
785
786                 _setGestureScroll: function ( sx, sy ) {
787                         var self = this,
788                                 reset = function () {
789                                         clearTimeout( self._gesture_timer );
790                                         self._gesture_dir = 0;
791                                         self._gesture_count = 0;
792                                         self._gesture_timer = undefined;
793                                 };
794
795                         if ( !sy ) {
796                                 return false;
797                         }
798
799                         dir = sy > 0 ? 1 : -1;
800
801                         if ( !this._gesture_timer ) {
802                                 this._gesture_count = 1;
803                                 this._gesture_dir = dir;
804
805                                 this._gesture_timer = setTimeout( function () {
806                                         reset();
807                                 }, 1000 );
808
809                                 return false;
810                         }
811
812                         if ( this._gesture_dir !== dir ) {
813                                 reset();
814                                 return false;
815                         }
816
817                         this._gesture_count++;
818
819                         if ( this._gesture_count === 3 ) {
820                                 if ( dir > 0 ) {
821                                         this.scrollTo( 0, 0, this.options.overshootDuration );
822                                 } else {
823                                         this.scrollTo( 0, -( this._getViewHeight() - this._$clip.height() ),
824                                                         this.options.overshootDuration );
825                                 }
826                                 reset();
827
828                                 return true;
829                         }
830
831                         return false;
832                 },
833
834                 _enableTracking: function () {
835                         this._dragging = true;
836                 },
837
838                 _disableTracking: function () {
839                         this._dragging = false;
840                 },
841
842                 _showScrollBars: function ( interval ) {
843                         var vclass = "ui-scrollbar-visible",
844                                 self = this;
845
846                         if ( !this.options.showScrollBars ) {
847                                 return;
848                         }
849                         if ( this._scrollbar_showed ) {
850                                 return;
851                         }
852
853                         if ( this._$vScrollBar ) {
854                                 this._$vScrollBar.addClass( vclass );
855                         }
856                         if ( this._$hScrollBar ) {
857                                 this._$hScrollBar.addClass( vclass );
858                         }
859
860                         this._scrollbar_showed = true;
861
862                         if ( interval ) {
863                                 setTimeout( function () {
864                                         self._hideScrollBars();
865                                 }, interval );
866                         }
867                 },
868
869                 _hideScrollBars: function () {
870                         var vclass = "ui-scrollbar-visible";
871
872                         if ( !this.options.showScrollBars ) {
873                                 return;
874                         }
875                         if ( !this._scrollbar_showed ) {
876                                 return;
877                         }
878
879                         if ( this._$vScrollBar ) {
880                                 this._$vScrollBar.removeClass( vclass );
881                         }
882                         if ( this._$hScrollBar ) {
883                                 this._$hScrollBar.removeClass( vclass );
884                         }
885
886                         this._scrollbar_showed = false;
887                 },
888
889                 _setOverflowIndicator: function ( dir ) {
890                         if ( dir === 1 ) {
891                                 this._opacity_top = "0";
892                                 this._opacity_bottom = "0.8";
893                         } else if ( dir === 0 ) {
894                                 this._opacity_top = "0.8";
895                                 this._opacity_bottom = "0";
896                         } else {
897                                 this._opacity_top = "0.5";
898                                 this._opacity_bottom = "0.5";
899                         }
900                 },
901
902                 _showOverflowIndicator: function () {
903                         if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
904                                 return;
905                         }
906
907                         this._overflow_top.animate( { opacity: this._opacity_top }, 300 );
908                         this._overflow_bottom.animate( { opacity: this._opacity_bottom }, 300 );
909
910                         this._overflow_showed = true;
911                 },
912
913                 _hideOverflowIndicator: function () {
914                         if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
915                                 return;
916                         }
917
918                         if ( this._overflow_showed === false ) {
919                                 return;
920                         }
921
922                         this._overflow_top.animate( { opacity: 0 }, 300 );
923                         this._overflow_bottom.animate( { opacity: 0 }, 300 );
924
925                         this._overflow_showed = false;
926                         this._setOverflowIndicator();
927                 },
928
929                 _add_event: function () {
930                         var self = this,
931                                 $c = this._$clip,
932                                 $v = this._$view;
933
934                         if ( this.options.eventType === "mouse" ) {
935                                 this._dragEvt = "mousedown mousemove mouseup click mousewheel";
936
937                                 this._dragCB = function ( e ) {
938                                         switch ( e.type ) {
939                                         case "mousedown":
940                                                 return self._handleDragStart( e,
941                                                                 e.clientX, e.clientY );
942
943                                         case "mousemove":
944                                                 return self._handleDragMove( e,
945                                                                 e.clientX, e.clientY );
946
947                                         case "mouseup":
948                                                 return self._handleDragStop( e );
949
950                                         case "click":
951                                                 return !self._didDrag;
952
953                                         case "mousewheel":
954                                                 var old = self.getScrollPosition();
955                                                 self.scrollTo( -old.x,
956                                                         -(old.y - e.originalEvent.wheelDelta) );
957                                                 break;
958                                         }
959                                 };
960                         } else {
961                                 this._dragEvt = "touchstart touchmove touchend click";
962
963                                 this._dragCB = function ( e ) {
964                                         var touches = e.originalEvent.touches;
965
966                                         switch ( e.type ) {
967                                         case "touchstart":
968                                                 if ( touches.length != 1) {
969                                                         return;
970                                                 }
971
972                                                 return self._handleDragStart( e,
973                                                                 touches[0].pageX, touches[0].pageY );
974
975                                         case "touchmove":
976                                                 if ( touches.length != 1) {
977                                                         return;
978                                                 }
979
980                                                 return self._handleDragMove( e,
981                                                                 touches[0].pageX, touches[0].pageY );
982
983                                         case "touchend":
984                                                 if ( touches.length != 0) {
985                                                         return;
986                                                 }
987
988                                                 return self._handleDragStop( e );
989
990                                         case "click":
991                                                 return !self._didDrag;
992                                         }
993                                 };
994                         }
995
996                         $v.bind( this._dragEvt, this._dragCB );
997
998                         $v.bind( "keydown", function ( e ) {
999                                 var elem,
1000                                         elem_top,
1001                                         screen_h;
1002
1003                                 if ( e.keyCode == 9 ) {
1004                                         return false;
1005                                 }
1006
1007                                 elem = $c.find(".ui-focus");
1008
1009                                 if ( elem === undefined ) {
1010                                         return;
1011                                 }
1012
1013                                 elem_top = elem.offset().top;
1014                                 screen_h = $c.offset().top + $c.height() - elem.height();
1015
1016                                 if ( self._softkeyboard ) {
1017                                         screen_h -= self._softkeyboardHeight;
1018                                 }
1019
1020                                 if ( ( elem_top < 0 ) || ( elem_top > screen_h ) ) {
1021                                         self.scrollTo( 0, self._sy - elem_top +
1022                                                 elem.height() + $c.offset().top, 0);
1023                                 }
1024
1025                                 return;
1026                         });
1027
1028                         $v.bind( "keyup", function ( e ) {
1029                                 var input,
1030                                         elem,
1031                                         elem_top,
1032                                         screen_h;
1033
1034                                 if ( e.keyCode != 9 ) {
1035                                         return;
1036                                 }
1037
1038                                 /* Tab Key */
1039
1040                                 input = $( this ).find(":input");
1041
1042                                 for ( i = 0; i < input.length; i++ ) {
1043                                         if ( !$( input[i] ).hasClass("ui-focus") ) {
1044                                                 continue;
1045                                         }
1046
1047                                         if ( i + 1 == input.length ) {
1048                                                 elem = $( input[0] );
1049                                         } else {
1050                                                 elem = $( input[i + 1] );
1051                                         }
1052
1053                                         elem_top = elem.offset().top;
1054                                         screen_h = $c.offset().top + $c.height() - elem.height();
1055
1056                                         if ( self._softkeyboard ) {
1057                                                 screen_h -= self._softkeyboardHeight;
1058                                         }
1059
1060                                         if ( ( elem_top < 0 ) || ( elem_top > screen_h ) ) {
1061                                                 self.scrollTo( 0, self._sy - elem_top +
1062                                                         elem.height() + $c.offset().top, 0);
1063                                         }
1064
1065                                         elem.focus();
1066
1067                                         break;
1068                                 }
1069
1070                                 return false;
1071                         });
1072
1073                         $c.bind( "updatelayout", function ( e ) {
1074                                 var sy,
1075                                         vh,
1076                                         view_h = self._getViewHeight();
1077
1078                                 if ( !$c.height() || !view_h ) {
1079                                         self.scrollTo( 0, 0, 0 );
1080                                         return;
1081                                 }
1082
1083                                 sy = $c.height() - view_h;
1084                                 vh = view_h - self._view_height;
1085
1086                                 self._view_height = view_h;
1087
1088                                 if ( vh == 0 || vh > $c.height() / 2 ) {
1089                                         return;
1090                                 }
1091
1092                                 if ( sy > 0 ) {
1093                                         self.scrollTo( 0, 0, 0 );
1094                                 } else if ( self._sy - sy <= -vh ) {
1095                                         self.scrollTo( 0, self._sy,
1096                                                 self.options.snapbackDuration );
1097                                 } else if ( self._sy - sy <= vh + self.options.moveThreshold ) {
1098                                         self.scrollTo( 0, sy,
1099                                                 self.options.snapbackDuration );
1100                                 }
1101                         });
1102
1103                         $( window ).bind( "resize", function ( e ) {
1104                                 var focused,
1105                                         view_h = self._getViewHeight();
1106
1107                                 if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
1108                                         return;
1109                                 }
1110
1111                                 if ( !$c.height() || !view_h ) {
1112                                         return;
1113                                 }
1114
1115                                 focused = $c.find(".ui-focus");
1116
1117                                 if ( focused ) {
1118                                         focused.trigger("resize.scrollview");
1119                                 }
1120
1121                                 /* calibration - after triggered throttledresize */
1122                                 setTimeout( function () {
1123                                         if ( self._sy < $c.height() - self._getViewHeight() ) {
1124                                                 self.scrollTo( 0, $c.height() - self._getViewHeight(),
1125                                                         self.options.overshootDuration );
1126                                         }
1127                                 }, 260 );
1128
1129                                 self._view_height = view_h;
1130                         });
1131
1132                         $( window ).bind( "vmouseout", function ( e ) {
1133                                 var drag_stop = false;
1134
1135                                 if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
1136                                         return;
1137                                 }
1138
1139                                 if ( !self._dragging ) {
1140                                         return;
1141                                 }
1142
1143                                 if ( e.pageX < 0 || e.pageX > $( window ).width() ) {
1144                                         drag_stop = true;
1145                                 }
1146
1147                                 if ( e.pageY < 0 || e.pageY > $( window ).height() ) {
1148                                         drag_stop = true;
1149                                 }
1150
1151                                 if ( drag_stop ) {
1152                                         self._hideScrollBars();
1153                                         self._hideOverflowIndicator();
1154                                         self._disableTracking();
1155                                 }
1156                         });
1157
1158                         this._softkeyboard = false;
1159                         this._softkeyboardHeight = 0;
1160
1161                         window.addEventListener( "softkeyboardchange", function ( e ) {
1162                                 if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
1163                                         return;
1164                                 }
1165
1166                                 self._softkeyboard = ( e.state === "on" ? true : false );
1167                                 self._softkeyboardHeight = e.height;
1168                         });
1169
1170                         $c.closest(".ui-page")
1171                                 .one( "pageshow", function ( e ) {
1172                                         self._view_offset = self._$view.offset().top - self._$clip.offset().top;
1173                                         self._view_height = self._getViewHeight();
1174                                 })
1175                                 .bind( "pageshow", function ( e ) {
1176                                         /* should be called after pagelayout */
1177                                         setTimeout( function () {
1178                                                 self._set_scrollbar_size();
1179                                                 self._setScrollPosition( self._sx, self._sy );
1180                                                 self._showScrollBars( 2000 );
1181                                         }, 0 );
1182                                 });
1183                 },
1184
1185                 _add_scrollbar: function () {
1186                         var $c = this._$clip,
1187                                 prefix = "<div class=\"ui-scrollbar ui-scrollbar-",
1188                                 suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
1189
1190                         if ( !this.options.showScrollBars ) {
1191                                 return;
1192                         }
1193
1194                         if ( this._vTracker ) {
1195                                 $c.append( prefix + "y" + suffix );
1196                                 this._$vScrollBar = $c.children(".ui-scrollbar-y");
1197                         }
1198                         if ( this._hTracker ) {
1199                                 $c.append( prefix + "x" + suffix );
1200                                 this._$hScrollBar = $c.children(".ui-scrollbar-x");
1201                         }
1202
1203                         this._scrollbar_showed = false;
1204                 },
1205
1206                 _add_scroll_jump: function () {
1207                         var $c = this._$clip,
1208                                 self = this,
1209                                 top_btn,
1210                                 left_btn;
1211
1212                         if ( !this.options.scrollJump ) {
1213                                 return;
1214                         }
1215
1216                         if ( this._vTracker ) {
1217                                 top_btn = $( '<div class="ui-scroll-jump-top-bg">' +
1218                                                 '<div data-role="button" data-inline="true" data-icon="scrolltop" data-style="box"></div></div>' );
1219                                 $c.append( top_btn ).trigger("create");
1220
1221                                 top_btn.bind( "vclick", function () {
1222                                         self.scrollTo( 0, 0, self.options.overshootDuration );
1223                                 } );
1224                         }
1225
1226                         if ( this._hTracker ) {
1227                                 left_btn = $( '<div class="ui-scroll-jump-left-bg">' +
1228                                                 '<div data-role="button" data-inline="true" data-icon="scrollleft" data-style="box"></div></div>' );
1229                                 $c.append( left_btn ).trigger("create");
1230
1231                                 left_btn.bind( "vclick", function () {
1232                                         self.scrollTo( 0, 0, self.options.overshootDuration );
1233                                 } );
1234                         }
1235                 },
1236
1237                 _add_overflow_indicator: function () {
1238                         if ( !this.options.overflowEnable ) {
1239                                 return;
1240                         }
1241
1242                         this._overflow_top = $( '<div class="ui-overflow-indicator-top"></div>' );
1243                         this._overflow_bottom = $( '<div class="ui-overflow-indicator-bottom"></div>' );
1244
1245                         this._$clip.append( this._overflow_top );
1246                         this._$clip.append( this._overflow_bottom );
1247
1248                         this._opacity_top = "0.5";
1249                         this._opacity_bottom = "0.5";
1250                         this._overflow_showed = false;
1251                 },
1252
1253                 _set_scrollbar_size: function () {
1254                         var $c = this._$clip,
1255                                 $v = this._$view,
1256                                 cw = 0,
1257                                 vw = 0,
1258                                 ch = 0,
1259                                 vh = 0,
1260                                 thumb;
1261
1262                         if ( !this.options.showScrollBars ) {
1263                                 return;
1264                         }
1265
1266                         if ( this._hTracker ) {
1267                                 cw = $c.width();
1268                                 vw = $v.width();
1269                                 this._maxX = cw - vw;
1270
1271                                 if ( this._maxX > 0 ) {
1272                                         this._maxX = 0;
1273                                 }
1274                                 if ( this._$hScrollBar && vw ) {
1275                                         thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
1276                                         thumb.css( "width", (cw >= vw ? "0" :
1277                                                         (Math.floor(cw / vw * 100) || 1) + "%") );
1278                                 }
1279                         }
1280
1281                         if ( this._vTracker ) {
1282                                 ch = $c.height();
1283                                 vh = this._getViewHeight();
1284                                 this._maxY = ch - vh;
1285
1286                                 if ( this._maxY > 0 ) {
1287                                         this._maxY = 0;
1288                                 }
1289                                 if ( this._$vScrollBar && vh ) {
1290                                         thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
1291                                         thumb.css( "height", (ch >= vh ? "0" :
1292                                                         (Math.floor(ch / vh * 100) || 1) + "%") );
1293
1294                                         this._overflowAvail = !!thumb.height();
1295                                 }
1296                         }
1297                 }
1298         });
1299
1300         $.extend( MomentumTracker.prototype, {
1301                 start: function ( pos, speed, duration, minPos, maxPos ) {
1302                         var tstate = ( pos < minPos || pos > maxPos ) ?
1303                                         tstates.snapback : tstates.scrolling,
1304                                 pos_temp;
1305
1306                         this.state = ( speed !== 0 ) ? tstate : tstates.done;
1307                         this.pos = pos;
1308                         this.speed = speed;
1309                         this.duration = ( this.state === tstates.snapback ) ?
1310                                         this.options.snapbackDuration : duration;
1311                         this.minPos = minPos;
1312                         this.maxPos = maxPos;
1313
1314                         this.fromPos = ( this.state === tstates.snapback ) ? this.pos : 0;
1315                         pos_temp = ( this.pos < this.minPos ) ? this.minPos : this.maxPos;
1316                         this.toPos = ( this.state === tstates.snapback ) ? pos_temp : 0;
1317
1318                         this.startTime = getCurrentTime();
1319                 },
1320
1321                 reset: function () {
1322                         this.state = tstates.done;
1323                         this.pos = 0;
1324                         this.speed = 0;
1325                         this.minPos = 0;
1326                         this.maxPos = 0;
1327                         this.duration = 0;
1328                         this.remained = 0;
1329                 },
1330
1331                 update: function ( overshootEnable ) {
1332                         var state = this.state,
1333                                 cur_time = getCurrentTime(),
1334                                 duration = this.duration,
1335                                 elapsed =  cur_time - this.startTime,
1336                                 dx,
1337                                 x,
1338                                 didOverShoot;
1339
1340                         if ( state === tstates.done ) {
1341                                 return this.pos;
1342                         }
1343
1344                         elapsed = elapsed > duration ? duration : elapsed;
1345
1346                         this.remained = duration - elapsed;
1347
1348                         if ( state === tstates.scrolling || state === tstates.overshot ) {
1349                                 dx = this.speed *
1350                                         ( 1 - $.easing[this.easing]( elapsed / duration,
1351                                                                 elapsed, 0, 1, duration ) );
1352
1353                                 x = this.pos + dx;
1354
1355                                 didOverShoot = ( state === tstates.scrolling ) &&
1356                                         ( x < this.minPos || x > this.maxPos );
1357
1358                                 if ( didOverShoot ) {
1359                                         x = ( x < this.minPos ) ? this.minPos : this.maxPos;
1360                                 }
1361
1362                                 this.pos = x;
1363
1364                                 if ( state === tstates.overshot ) {
1365                                         if ( !overshootEnable ) {
1366                                                 this.state = tstates.done;
1367                                         }
1368                                         if ( elapsed >= duration ) {
1369                                                 this.state = tstates.snapback;
1370                                                 this.fromPos = this.pos;
1371                                                 this.toPos = ( x < this.minPos ) ?
1372                                                                 this.minPos : this.maxPos;
1373                                                 this.duration = this.options.snapbackDuration;
1374                                                 this.startTime = cur_time;
1375                                                 elapsed = 0;
1376                                         }
1377                                 } else if ( state === tstates.scrolling ) {
1378                                         if ( didOverShoot && overshootEnable ) {
1379                                                 this.state = tstates.overshot;
1380                                                 this.speed = dx / 2;
1381                                                 this.duration = this.options.overshootDuration;
1382                                                 this.startTime = cur_time;
1383                                         } else if ( elapsed >= duration ) {
1384                                                 this.state = tstates.done;
1385                                         }
1386                                 }
1387                         } else if ( state === tstates.snapback ) {
1388                                 if ( elapsed >= duration ) {
1389                                         this.pos = this.toPos;
1390                                         this.state = tstates.done;
1391                                 } else {
1392                                         this.pos = this.fromPos + (( this.toPos - this.fromPos ) *
1393                                                 $.easing[this.easing]( elapsed / duration,
1394                                                         elapsed, 0, 1, duration ));
1395                                 }
1396                         }
1397
1398                         return this.pos;
1399                 },
1400
1401                 done: function () {
1402                         return this.state === tstates.done;
1403                 },
1404
1405                 isMin: function () {
1406                         return this.pos === this.minPos;
1407                 },
1408
1409                 isMax: function () {
1410                         return this.pos === this.maxPos;
1411                 },
1412
1413                 isAvail: function () {
1414                         return !( this.minPos === this.maxPos );
1415                 },
1416
1417                 getRemained: function () {
1418                         return this.remained;
1419                 },
1420
1421                 getPosition: function () {
1422                         return this.pos;
1423                 }
1424         });
1425
1426         $( document ).bind( 'pagecreate create', function ( e ) {
1427                 var $page = $( e.target ),
1428                         content_scroll = $page.find(".ui-content").jqmData("scroll");
1429
1430                 /* content scroll */
1431                 if ( $.support.scrollview === undefined ) {
1432                         $.support.scrollview = true;
1433                 }
1434
1435                 if ( $.support.scrollview === true && content_scroll === undefined ) {
1436                         content_scroll = "y";
1437                 }
1438
1439                 if ( content_scroll !== "y" ) {
1440                         content_scroll = "none";
1441                 }
1442
1443                 $page.find(".ui-content").attr( "data-scroll", content_scroll );
1444
1445                 $page.find(":jqmData(scroll):not(.ui-scrollview-clip)").each( function () {
1446                         if ( $( this ).hasClass("ui-scrolllistview") ) {
1447                                 $( this ).scrolllistview();
1448                         } else {
1449                                 var st = $( this ).jqmData("scroll"),
1450                                         dir = st && ( st.search(/^[xy]/) !== -1 ) ? st : null,
1451                                         content = $(this).hasClass("ui-content"),
1452                                         opts;
1453
1454                                 if ( st === "none" ) {
1455                                         return;
1456                                 }
1457
1458                                 opts = {
1459                                         direction: dir || undefined,
1460                                         overflowEnable: content,
1461                                         scrollMethod: $( this ).jqmData("scroll-method") || undefined,
1462                                         scrollJump: $( this ).jqmData("scroll-jump") || undefined
1463                                 };
1464
1465                                 $( this ).scrollview( opts );
1466                         }
1467                 });
1468         });
1469
1470         $( document ).bind( 'pageshow', function ( e ) {
1471                 var $page = $( e.target ),
1472                         scroll = $page.find(".ui-content").jqmData("scroll");
1473
1474                 if ( scroll === "y" ) {
1475                         resizePageContentHeight( e.target );
1476                 }
1477         });
1478
1479 }( jQuery, window, document ) );