lib/yui/slider/slider.js

   1 /*
   2 Copyright (c) 2006, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 0.12.2
   6 */
   7 /**
   8  * The Slider component is a UI control that enables the user to adjust
   9  * values in a finite range along one or two axes. Typically, the Slider
  10  * control is used in a web application as a rich, visual replacement
  11  * for an input box that takes a number as input. The Slider control can
  12  * also easily accommodate a second dimension, providing x,y output for
  13  * a selection point chosen from a rectangular region.
  14  *
  15  * @module    slider
  16  * @title     Slider Widget
  17  * @namespace YAHOO.widget
  18  * @requires  yahoo,dom,dragdrop,event
  19  * @optional  animation
  20  */
  21
  22 /**
  23  * A DragDrop implementation that can be used as a background for a
  24  * slider.  It takes a reference to the thumb instance
  25  * so it can delegate some of the events to it.  The goal is to make the
  26  * thumb jump to the location on the background when the background is
  27  * clicked.
  28  *
  29  * @class Slider
  30  * @extends YAHOO.util.DragDrop
  31  * @uses YAHOO.util.EventProvider
  32  * @constructor
  33  * @param {String}      id     The id of the element linked to this instance
  34  * @param {String}      sGroup The group of related DragDrop items
  35  * @param {SliderThumb} oThumb The thumb for this slider
  36  * @param {String}      sType  The type of slider (horiz, vert, region)
  37  */
  38 YAHOO.widget.Slider = function(sElementId, sGroup, oThumb, sType) {
  39     if (sElementId) {
  40         this.init(sElementId, sGroup, true);
  41         this.initSlider(sType);
  42         this.initThumb(oThumb);
  43     }
  44 };
  45
  46 /**
  47  * Factory method for creating a horizontal slider
  48  * @method YAHOO.widget.Slider.getHorizSlider
  49  * @static
  50  * @param {String} sBGElId the id of the slider's background element
  51  * @param {String} sHandleElId the id of the thumb element
  52  * @param {int} iLeft the number of pixels the element can move left
  53  * @param {int} iRight the number of pixels the element can move right
  54  * @param {int} iTickSize optional parameter for specifying that the element
  55  * should move a certain number pixels at a time.
  56  * @return {Slider} a horizontal slider control
  57  */
  58 YAHOO.widget.Slider.getHorizSlider =
  59     function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) {
  60         return new YAHOO.widget.Slider(sBGElId, sBGElId,
  61             new YAHOO.widget.SliderThumb(sHandleElId, sBGElId,
  62                                iLeft, iRight, 0, 0, iTickSize), "horiz");
  63 };
  64
  65 /**
  66  * Factory method for creating a vertical slider
  67  * @method YAHOO.widget.Slider.getVertSlider
  68  * @static
  69  * @param {String} sBGElId the id of the slider's background element
  70  * @param {String} sHandleElId the id of the thumb element
  71  * @param {int} iUp the number of pixels the element can move up
  72  * @param {int} iDown the number of pixels the element can move down
  73  * @param {int} iTickSize optional parameter for specifying that the element
  74  * should move a certain number pixels at a time.
  75  * @return {Slider} a vertical slider control
  76  */
  77 YAHOO.widget.Slider.getVertSlider =
  78     function (sBGElId, sHandleElId, iUp, iDown, iTickSize) {
  79         return new YAHOO.widget.Slider(sBGElId, sBGElId,
  80             new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0,
  81                                iUp, iDown, iTickSize), "vert");
  82 };
  83
  84 /**
  85  * Factory method for creating a slider region like the one in the color
  86  * picker example
  87  * @method YAHOO.widget.Slider.getSliderRegion
  88  * @static
  89  * @param {String} sBGElId the id of the slider's background element
  90  * @param {String} sHandleElId the id of the thumb element
  91  * @param {int} iLeft the number of pixels the element can move left
  92  * @param {int} iRight the number of pixels the element can move right
  93  * @param {int} iUp the number of pixels the element can move up
  94  * @param {int} iDown the number of pixels the element can move down
  95  * @param {int} iTickSize optional parameter for specifying that the element
  96  * should move a certain number pixels at a time.
  97  * @return {Slider} a slider region control
  98  */
  99 YAHOO.widget.Slider.getSliderRegion =
 100     function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) {
 101         return new YAHOO.widget.Slider(sBGElId, sBGElId,
 102             new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight,
 103                                iUp, iDown, iTickSize), "region");
 104 };
 105
 106 /**
 107  * By default, animation is available if the animation library is detected.
 108  * @property YAHOO.widget.Slider.ANIM_AVAIL
 109  * @static
 110  * @type boolean
 111  */
 112 YAHOO.widget.Slider.ANIM_AVAIL = true;
 113
 114 YAHOO.extend(YAHOO.widget.Slider, YAHOO.util.DragDrop, {
 115
 116     /**
 117      * Initializes the slider.  Executed in the constructor
 118      * @method initSlider
 119      * @param {string} sType the type of slider (horiz, vert, region)
 120      */
 121     initSlider: function(sType) {
 122
 123         /**
 124          * The type of the slider (horiz, vert, region)
 125          * @property type
 126          * @type string
 127          */
 128         this.type = sType;
 129
 130         //this.removeInvalidHandleType("A");
 131
 132
 133         /**
 134          * Event the fires when the value of the control changes.  If
 135          * the control is animated the event will fire every point
 136          * along the way.
 137          * @event change
 138          * @param {int} newOffset|x the new offset for normal sliders, or the new
 139          *                          x offset for region sliders
 140          * @param {int} y the number of pixels the thumb has moved on the y axis
 141          *                (region sliders only)
 142          */
 143         this.createEvent("change", this);
 144
 145         /**
 146          * Event that fires at the beginning of a slider thumb move.
 147          * @event slideStart
 148          */
 149         this.createEvent("slideStart", this);
 150
 151         /**
 152          * Event that fires at the end of a slider thumb move
 153          * @event slideEnd
 154          */
 155         this.createEvent("slideEnd", this);
 156
 157         /**
 158          * Overrides the isTarget property in YAHOO.util.DragDrop
 159          * @property isTarget
 160          * @private
 161          */
 162         this.isTarget = false;
 163
 164         /**
 165          * Flag that determines if the thumb will animate when moved
 166          * @property animate
 167          * @type boolean
 168          */
 169         this.animate = YAHOO.widget.Slider.ANIM_AVAIL;
 170
 171         /**
 172          * Set to false to disable a background click thumb move
 173          * @property backgroundEnabled
 174          * @type boolean
 175          */
 176         this.backgroundEnabled = true;
 177
 178         /**
 179          * Adjustment factor for tick animation, the more ticks, the
 180          * faster the animation (by default)
 181          * @property tickPause
 182          * @type int
 183          */
 184         this.tickPause = 40;
 185
 186         /**
 187          * Enables the arrow, home and end keys, defaults to true.
 188          * @property enableKeys
 189          * @type boolean
 190          */
 191         this.enableKeys = true;
 192
 193         /**
 194          * Specifies the number of pixels the arrow keys will move the slider.
 195          * Default is 25.
 196          * @property keyIncrement
 197          * @type int
 198          */
 199         this.keyIncrement = 20;
 200
 201         /**
 202          * moveComplete is set to true when the slider has moved to its final
 203          * destination.  For animated slider, this value can be checked in
 204          * the onChange handler to make it possible to execute logic only
 205          * when the move is complete rather than at all points along the way.
 206          *
 207          * @property moveComplete
 208          * @type Boolean
 209          */
 210         this.moveComplete = true;
 211
 212         /**
 213          * If animation is configured, specifies the length of the animation
 214          * in seconds.
 215          * @property animationDuration
 216          * @type int
 217          * @default 0.2
 218          */
 219         this.animationDuration = 0.2;
 220     },
 221
 222     /**
 223      * Initializes the slider's thumb. Executed in the constructor.
 224      * @method initThumb
 225      * @param {YAHOO.widget.SliderThumb} t the slider thumb
 226      */
 227     initThumb: function(t) {
 228
 229         var self = this;
 230
 231         /**
 232          * A YAHOO.widget.SliderThumb instance that we will use to
 233          * reposition the thumb when the background is clicked
 234          * @property thumb
 235          * @type YAHOO.widget.SliderThumb
 236          */
 237         this.thumb = t;
 238         t.cacheBetweenDrags = true;
 239
 240         // add handler for the handle onchange event
 241         t.onChange = function() {
 242             self.handleThumbChange();
 243         };
 244
 245         if (t._isHoriz && t.xTicks && t.xTicks.length) {
 246             this.tickPause = Math.round(360 / t.xTicks.length);
 247         } else if (t.yTicks && t.yTicks.length) {
 248             this.tickPause = Math.round(360 / t.yTicks.length);
 249         }
 250
 251
 252         // delegate thumb methods
 253         t.onMouseDown = function () { return self.focus(); };
 254         t.onMouseUp = function() { self.thumbMouseUp(); };
 255         t.onDrag = function() { self.fireEvents(true); };
 256         t.onAvailable = function() { return self.setStartSliderState(); };
 257
 258     },
 259
 260     /**
 261      * Executed when the slider element is available
 262      * @method onAvailable
 263      */
 264     onAvailable: function() {
 265         var Event = YAHOO.util.Event;
 266         Event.on(this.id, "keydown",  this.handleKeyDown,  this, true);
 267         Event.on(this.id, "keypress", this.handleKeyPress, this, true);
 268     },
 269
 270     /**
 271      * Executed when a keypress event happens with the control focused.
 272      * Prevents the default behavior for navigation keys.  The actual
 273      * logic for moving the slider thumb in response to a key event
 274      * happens in handleKeyDown.
 275      * @param {Event} e the keypress event
 276      */
 277     handleKeyPress: function(e) {
 278         if (this.enableKeys) {
 279             var Event = YAHOO.util.Event;
 280             var kc = Event.getCharCode(e);
 281             switch (kc) {
 282                 case 0x25: // left
 283                 case 0x26: // up
 284                 case 0x27: // right
 285                 case 0x28: // down
 286                 case 0x24: // home
 287                 case 0x23: // end
 288                     Event.preventDefault(e);
 289                     break;
 290                 default:
 291             }
 292         }
 293     },
 294
 295     /**
 296      * Executed when a keydown event happens with the control focused.
 297      * Updates the slider value and display when the keypress is an
 298      * arrow key, home, or end as long as enableKeys is set to true.
 299      * @param {Event} e the keydown event
 300      */
 301     handleKeyDown: function(e) {
 302         if (this.enableKeys) {
 303             var Event = YAHOO.util.Event;
 304
 305             var kc = Event.getCharCode(e), t=this.thumb;
 306             var h=this.getXValue(),v=this.getYValue();
 307
 308             var horiz = false;
 309             var changeValue = true;
 310             switch (kc) {
 311
 312                 // left
 313                 case 0x25: h -= this.keyIncrement; break;
 314
 315                 // up
 316                 case 0x26: v -= this.keyIncrement; break;
 317
 318                 // right
 319                 case 0x27: h += this.keyIncrement; break;
 320
 321                 // down
 322                 case 0x28: v += this.keyIncrement; break;
 323
 324                 // home
 325                 case 0x24: h = t.leftConstraint;
 326                            v = t.topConstraint;
 327                            break;
 328
 329                 // end
 330                 case 0x23: h = t.rightConstraint;
 331                            v = t.bottomConstraint;
 332                            break;
 333
 334                 default:   changeValue = false;
 335             }
 336
 337             if (changeValue) {
 338                 if (t._isRegion) {
 339                     this.setRegionValue(h, v, true);
 340                 } else {
 341                     var newVal = (t._isHoriz) ? h : v;
 342                     this.setValue(newVal, true);
 343                 }
 344                 Event.stopEvent(e);
 345             }
 346
 347         }
 348     },
 349
 350     /**
 351      * Initialization that sets up the value offsets once the elements are ready
 352      * @method setStartSliderState
 353      */
 354     setStartSliderState: function() {
 355
 356
 357         this.setThumbCenterPoint();
 358
 359         /**
 360          * The basline position of the background element, used
 361          * to determine if the background has moved since the last
 362          * operation.
 363          * @property baselinePos
 364          * @type [int, int]
 365          */
 366         this.baselinePos = YAHOO.util.Dom.getXY(this.getEl());
 367
 368         this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos);
 369
 370         if (this.thumb._isRegion) {
 371             if (this.deferredSetRegionValue) {
 372                 this.setRegionValue.apply(this, this.deferredSetRegionValue, true);
 373                 this.deferredSetRegionValue = null;
 374             } else {
 375                 this.setRegionValue(0, 0, true, true);
 376             }
 377         } else {
 378             if (this.deferredSetValue) {
 379                 this.setValue.apply(this, this.deferredSetValue, true);
 380                 this.deferredSetValue = null;
 381             } else {
 382                 this.setValue(0, true, true);
 383             }
 384         }
 385     },
 386
 387     /**
 388      * When the thumb is available, we cache the centerpoint of the element so
 389      * we can position the element correctly when the background is clicked
 390      * @method setThumbCenterPoint
 391      */
 392     setThumbCenterPoint: function() {
 393
 394         var el = this.thumb.getEl();
 395
 396         if (el) {
 397             /**
 398              * The center of the slider element is stored so we can
 399              * place it in the correct position when the background is clicked.
 400              * @property thumbCenterPoint
 401              * @type {"x": int, "y": int}
 402              */
 403             this.thumbCenterPoint = {
 404                     x: parseInt(el.offsetWidth/2, 10),
 405                     y: parseInt(el.offsetHeight/2, 10)
 406             };
 407         }
 408
 409     },
 410
 411     /**
 412      * Locks the slider, overrides YAHOO.util.DragDrop
 413      * @method lock
 414      */
 415     lock: function() {
 416         this.thumb.lock();
 417         this.locked = true;
 418     },
 419
 420     /**
 421      * Unlocks the slider, overrides YAHOO.util.DragDrop
 422      * @method unlock
 423      */
 424     unlock: function() {
 425         this.thumb.unlock();
 426         this.locked = false;
 427     },
 428
 429     /**
 430      * Handles mouseup event on the slider background
 431      * @method thumbMouseUp
 432      * @private
 433      */
 434     thumbMouseUp: function() {
 435         if (!this.isLocked() && !this.moveComplete) {
 436             this.endMove();
 437         }
 438
 439     },
 440
 441     /**
 442      * Returns a reference to this slider's thumb
 443      * @method getThumb
 444      * @return {SliderThumb} this slider's thumb
 445      */
 446     getThumb: function() {
 447         return this.thumb;
 448     },
 449
 450     /**
 451      * Try to focus the element when clicked so we can add
 452      * accessibility features
 453      * @method focus
 454      * @private
 455      */
 456     focus: function() {
 457
 458         // Focus the background element if possible
 459         var el = this.getEl();
 460
 461         if (el.focus) {
 462             try {
 463                 el.focus();
 464             } catch(e) {
 465                 // Prevent permission denied unhandled exception in FF that can
 466                 // happen when setting focus while another element is handling
 467                 // the blur.  @TODO this is still writing to the error log
 468                 // (unhandled error) in FF1.5 with strict error checking on.
 469             }
 470         }
 471
 472         this.verifyOffset();
 473
 474         if (this.isLocked()) {
 475             return false;
 476         } else {
 477             this.onSlideStart();
 478             return true;
 479         }
 480     },
 481
 482     /**
 483      * Event that fires when the value of the slider has changed
 484      * @method onChange
 485      * @param {int} firstOffset the number of pixels the thumb has moved
 486      * from its start position. Normal horizontal and vertical sliders will only
 487      * have the firstOffset.  Regions will have both, the first is the horizontal
 488      * offset, the second the vertical.
 489      * @param {int} secondOffset the y offset for region sliders
 490      * @deprecated use instance.subscribe("change") instead
 491      */
 492     onChange: function (firstOffset, secondOffset) {
 493         /* override me */
 494     },
 495
 496     /**
 497      * Event that fires when the at the beginning of the slider thumb move
 498      * @method onSlideStart
 499      * @deprecated use instance.subscribe("slideStart") instead
 500      */
 501     onSlideStart: function () {
 502         /* override me */
 503     },
 504
 505     /**
 506      * Event that fires at the end of a slider thumb move
 507      * @method onSliderEnd
 508      * @deprecated use instance.subscribe("slideEnd") instead
 509      */
 510     onSlideEnd: function () {
 511         /* override me */
 512     },
 513
 514     /**
 515      * Returns the slider's thumb offset from the start position
 516      * @method getValue
 517      * @return {int} the current value
 518      */
 519     getValue: function () {
 520         return this.thumb.getValue();
 521     },
 522
 523     /**
 524      * Returns the slider's thumb X offset from the start position
 525      * @method getXValue
 526      * @return {int} the current horizontal offset
 527      */
 528     getXValue: function () {
 529         return this.thumb.getXValue();
 530     },
 531
 532     /**
 533      * Returns the slider's thumb Y offset from the start position
 534      * @method getYValue
 535      * @return {int} the current vertical offset
 536      */
 537     getYValue: function () {
 538         return this.thumb.getYValue();
 539     },
 540
 541     /**
 542      * Internal handler for the slider thumb's onChange event
 543      * @method handleThumbChange
 544      * @private
 545      */
 546     handleThumbChange: function () {
 547         var t = this.thumb;
 548         if (t._isRegion) {
 549             t.onChange(t.getXValue(), t.getYValue());
 550             this.fireEvent("change", { x: t.getXValue(), y: t.getYValue() } );
 551         } else {
 552             t.onChange(t.getValue());
 553             this.fireEvent("change", t.getValue());
 554         }
 555
 556     },
 557
 558     /**
 559      * Provides a way to set the value of the slider in code.
 560      * @method setValue
 561      * @param {int} newOffset the number of pixels the thumb should be
 562      * positioned away from the initial start point
 563      * @param {boolean} skipAnim set to true to disable the animation
 564      * for this move action (but not others).
 565      * @param {boolean} force ignore the locked setting and set value anyway
 566      * @return {boolean} true if the move was performed, false if it failed
 567      */
 568     setValue: function(newOffset, skipAnim, force) {
 569
 570         if (!this.thumb.available) {
 571             this.deferredSetValue = arguments;
 572             return false;
 573         }
 574
 575         if (this.isLocked() && !force) {
 576             return false;
 577         }
 578
 579         if ( isNaN(newOffset) ) {
 580             return false;
 581         }
 582
 583         var t = this.thumb;
 584         var newX, newY;
 585         this.verifyOffset(true);
 586         if (t._isRegion) {
 587             return false;
 588         } else if (t._isHoriz) {
 589             this.onSlideStart();
 590             // this.fireEvent("slideStart");
 591             newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 592             this.moveThumb(newX, t.initPageY, skipAnim);
 593         } else {
 594             this.onSlideStart();
 595             // this.fireEvent("slideStart");
 596             newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
 597             this.moveThumb(t.initPageX, newY, skipAnim);
 598         }
 599
 600         return true;
 601     },
 602
 603     /**
 604      * Provides a way to set the value of the region slider in code.
 605      * @method setRegionValue
 606      * @param {int} newOffset the number of pixels the thumb should be
 607      * positioned away from the initial start point (x axis for region)
 608      * @param {int} newOffset2 the number of pixels the thumb should be
 609      * positioned away from the initial start point (y axis for region)
 610      * @param {boolean} skipAnim set to true to disable the animation
 611      * for this move action (but not others).
 612      * @param {boolean} force ignore the locked setting and set value anyway
 613      * @return {boolean} true if the move was performed, false if it failed
 614      */
 615     setRegionValue: function(newOffset, newOffset2, skipAnim, force) {
 616
 617         if (!this.thumb.available) {
 618             this.deferredSetRegionValue = arguments;
 619             return false;
 620         }
 621
 622         if (this.isLocked() && !force) {
 623             return false;
 624         }
 625
 626         if ( isNaN(newOffset) ) {
 627             return false;
 628         }
 629
 630         var t = this.thumb;
 631         if (t._isRegion) {
 632             this.onSlideStart();
 633             var newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 634             var newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
 635             this.moveThumb(newX, newY, skipAnim);
 636             return true;
 637         }
 638
 639         return false;
 640
 641     },
 642
 643     /**
 644      * Checks the background position element position.  If it has moved from the
 645      * baseline position, the constraints for the thumb are reset
 646      * @param checkPos {boolean} check the position instead of using cached value
 647      * @method verifyOffset
 648      * @return {boolean} True if the offset is the same as the baseline.
 649      */
 650     verifyOffset: function(checkPos) {
 651
 652         var newPos = YAHOO.util.Dom.getXY(this.getEl());
 653         //var newPos = [this.initPageX, this.initPageY];
 654
 655
 656         if (newPos[0] != this.baselinePos[0] || newPos[1] != this.baselinePos[1]) {
 657             this.thumb.resetConstraints();
 658             this.baselinePos = newPos;
 659             return false;
 660         }
 661
 662         return true;
 663     },
 664
 665     /**
 666      * Move the associated slider moved to a timeout to try to get around the
 667      * mousedown stealing moz does when I move the slider element between the
 668      * cursor and the background during the mouseup event
 669      * @method moveThumb
 670      * @param {int} x the X coordinate of the click
 671      * @param {int} y the Y coordinate of the click
 672      * @param {boolean} skipAnim don't animate if the move happend onDrag
 673      * @private
 674      */
 675     moveThumb: function(x, y, skipAnim) {
 676
 677
 678         var t = this.thumb;
 679         var self = this;
 680
 681         if (!t.available) {
 682             return;
 683         }
 684
 685
 686         // this.verifyOffset();
 687
 688         t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
 689
 690         var _p = t.getTargetCoord(x, y);
 691         var p = [_p.x, _p.y];
 692
 693         this.fireEvent("slideStart");
 694
 695         if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) {
 696             // this.thumb._animating = true;
 697             this.lock();
 698
 699             // cache the current thumb pos
 700             this.curCoord = YAHOO.util.Dom.getXY(this.thumb.getEl());
 701
 702             setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
 703
 704         } else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) {
 705
 706             // this.thumb._animating = true;
 707             this.lock();
 708
 709             var oAnim = new YAHOO.util.Motion(
 710                     t.id, { points: { to: p } },
 711                     this.animationDuration,
 712                     YAHOO.util.Easing.easeOut );
 713
 714             oAnim.onComplete.subscribe( function() { self.endMove(); } );
 715             oAnim.animate();
 716         } else {
 717             t.setDragElPos(x, y);
 718             // this.fireEvents();
 719             this.endMove();
 720         }
 721     },
 722
 723     /**
 724      * Move the slider one tick mark towards its final coordinate.  Used
 725      * for the animation when tick marks are defined
 726      * @method moveOneTick
 727      * @param {int[]} the destination coordinate
 728      * @private
 729      */
 730     moveOneTick: function(finalCoord) {
 731
 732         var t = this.thumb, tmp;
 733
 734         // redundant call to getXY since we set the position most of time prior
 735         // to getting here.  Moved to this.curCoord
 736         //var curCoord = YAHOO.util.Dom.getXY(t.getEl());
 737
 738         // alignElWithMouse caches position in lastPageX, lastPageY .. doesn't work
 739         //var curCoord = [this.lastPageX, this.lastPageY];
 740
 741         // var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10);
 742         // var thresh = 10;
 743         // var thresh = t.tickSize + (Math.floor(t.tickSize/2));
 744
 745         var nextCoord = null;
 746
 747         if (t._isRegion) {
 748             nextCoord = this._getNextX(this.curCoord, finalCoord);
 749             var tmpX = (nextCoord) ? nextCoord[0] : this.curCoord[0];
 750             nextCoord = this._getNextY([tmpX, this.curCoord[1]], finalCoord);
 751
 752         } else if (t._isHoriz) {
 753             nextCoord = this._getNextX(this.curCoord, finalCoord);
 754         } else {
 755             nextCoord = this._getNextY(this.curCoord, finalCoord);
 756         }
 757
 758
 759         if (nextCoord) {
 760
 761             // cache the position
 762             this.curCoord = nextCoord;
 763
 764             // move to the next coord
 765             // YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
 766
 767             // var el = t.getEl();
 768             // YAHOO.util.Dom.setStyle(el, "left", (nextCoord[0] + this.thumb.deltaSetXY[0]) + "px");
 769             // YAHOO.util.Dom.setStyle(el, "top",  (nextCoord[1] + this.thumb.deltaSetXY[1]) + "px");
 770
 771             this.thumb.alignElWithMouse(t.getEl(), nextCoord[0], nextCoord[1]);
 772
 773             // check if we are in the final position, if not make a recursive call
 774             if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) {
 775                 var self = this;
 776                 setTimeout(function() { self.moveOneTick(finalCoord); },
 777                         this.tickPause);
 778             } else {
 779                 this.endMove();
 780             }
 781         } else {
 782             this.endMove();
 783         }
 784
 785         //this.tickPause = Math.round(this.tickPause/2);
 786     },
 787
 788     /**
 789      * Returns the next X tick value based on the current coord and the target coord.
 790      * @method _getNextX
 791      * @private
 792      */
 793     _getNextX: function(curCoord, finalCoord) {
 794         var t = this.thumb;
 795         var thresh;
 796         var tmp = [];
 797         var nextCoord = null;
 798         if (curCoord[0] > finalCoord[0]) {
 799             thresh = t.tickSize - this.thumbCenterPoint.x;
 800             tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] );
 801             nextCoord = [tmp.x, tmp.y];
 802         } else if (curCoord[0] < finalCoord[0]) {
 803             thresh = t.tickSize + this.thumbCenterPoint.x;
 804             tmp = t.getTargetCoord( curCoord[0] + thresh, curCoord[1] );
 805             nextCoord = [tmp.x, tmp.y];
 806         } else {
 807             // equal, do nothing
 808         }
 809
 810         return nextCoord;
 811     },
 812
 813     /**
 814      * Returns the next Y tick value based on the current coord and the target coord.
 815      * @method _getNextY
 816      * @private
 817      */
 818     _getNextY: function(curCoord, finalCoord) {
 819         var t = this.thumb;
 820         var thresh;
 821         var tmp = [];
 822         var nextCoord = null;
 823
 824         if (curCoord[1] > finalCoord[1]) {
 825             thresh = t.tickSize - this.thumbCenterPoint.y;
 826             tmp = t.getTargetCoord( curCoord[0], curCoord[1] - thresh );
 827             nextCoord = [tmp.x, tmp.y];
 828         } else if (curCoord[1] < finalCoord[1]) {
 829             thresh = t.tickSize + this.thumbCenterPoint.y;
 830             tmp = t.getTargetCoord( curCoord[0], curCoord[1] + thresh );
 831             nextCoord = [tmp.x, tmp.y];
 832         } else {
 833             // equal, do nothing
 834         }
 835
 836         return nextCoord;
 837     },
 838
 839     /**
 840      * Resets the constraints before moving the thumb.
 841      * @method b4MouseDown
 842      * @private
 843      */
 844     b4MouseDown: function(e) {
 845         this.thumb.autoOffset();
 846         this.thumb.resetConstraints();
 847     },
 848
 849     /**
 850      * Handles the mousedown event for the slider background
 851      * @method onMouseDown
 852      * @private
 853      */
 854     onMouseDown: function(e) {
 855         // this.resetConstraints(true);
 856         // this.thumb.resetConstraints(true);
 857
 858         if (! this.isLocked() && this.backgroundEnabled) {
 859             var x = YAHOO.util.Event.getPageX(e);
 860             var y = YAHOO.util.Event.getPageY(e);
 861
 862             this.focus();
 863             this.moveThumb(x, y);
 864         }
 865
 866     },
 867
 868     /**
 869      * Handles the onDrag event for the slider background
 870      * @method onDrag
 871      * @private
 872      */
 873     onDrag: function(e) {
 874         if (! this.isLocked()) {
 875             var x = YAHOO.util.Event.getPageX(e);
 876             var y = YAHOO.util.Event.getPageY(e);
 877             this.moveThumb(x, y, true);
 878         }
 879     },
 880
 881     /**
 882      * Fired when the slider movement ends
 883      * @method endMove
 884      * @private
 885      */
 886     endMove: function () {
 887         // this._animating = false;
 888         this.unlock();
 889         this.moveComplete = true;
 890         this.fireEvents();
 891     },
 892
 893     /**
 894      * Fires the change event if the value has been changed.  Ignored if we are in
 895      * the middle of an animation as the event will fire when the animation is
 896      * complete
 897      * @method fireEvents
 898      * @param {boolean} thumbEvent set to true if this event is fired from an event
 899      *                  that occurred on the thumb.  If it is, the state of the
 900      *                  thumb dd object should be correct.  Otherwise, the event
 901      *                  originated on the background, so the thumb state needs to
 902      *                  be refreshed before proceeding.
 903      * @private
 904      */
 905     fireEvents: function (thumbEvent) {
 906
 907         var t = this.thumb;
 908
 909         if (!thumbEvent) {
 910             t.cachePosition();
 911         }
 912
 913         if (! this.isLocked()) {
 914             if (t._isRegion) {
 915                 var newX = t.getXValue();
 916                 var newY = t.getYValue();
 917
 918                 if (newX != this.previousX || newY != this.previousY) {
 919                     this.onChange(newX, newY);
 920                     this.fireEvent("change", { x: newX, y: newY });
 921                 }
 922
 923                 this.previousX = newX;
 924                 this.previousY = newY;
 925
 926             } else {
 927                 var newVal = t.getValue();
 928                 if (newVal != this.previousVal) {
 929                     this.onChange( newVal );
 930                     this.fireEvent("change", newVal);
 931                 }
 932                 this.previousVal = newVal;
 933             }
 934
 935             if (this.moveComplete) {
 936                 this.onSlideEnd();
 937                 this.fireEvent("slideEnd");
 938                 this.moveComplete = false;
 939             }
 940
 941         }
 942     },
 943
 944     /**
 945      * Slider toString
 946      * @method toString
 947      * @return {string} string representation of the instance
 948      */
 949     toString: function () {
 950         return ("Slider (" + this.type +") " + this.id);
 951     }
 952
 953 });
 954
 955 YAHOO.augment(YAHOO.widget.Slider, YAHOO.util.EventProvider);
 956
 957 /**
 958  * A drag and drop implementation to be used as the thumb of a slider.
 959  * @class SliderThumb
 960  * @extends YAHOO.util.DD
 961  * @constructor
 962  * @param {String} id the id of the slider html element
 963  * @param {String} sGroup the group of related DragDrop items
 964  * @param {int} iLeft the number of pixels the element can move left
 965  * @param {int} iRight the number of pixels the element can move right
 966  * @param {int} iUp the number of pixels the element can move up
 967  * @param {int} iDown the number of pixels the element can move down
 968  * @param {int} iTickSize optional parameter for specifying that the element
 969  * should move a certain number pixels at a time.
 970  */
 971 YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
 972
 973     if (id) {
 974         //this.init(id, sGroup);
 975         YAHOO.widget.SliderThumb.superclass.constructor.call(this, id, sGroup);
 976
 977         /**
 978          * The id of the thumbs parent HTML element (the slider background
 979          * element).
 980          * @property parentElId
 981          * @type string
 982          */
 983         this.parentElId = sGroup;
 984     }
 985
 986     //this.removeInvalidHandleType("A");
 987
 988
 989     /**
 990      * Overrides the isTarget property in YAHOO.util.DragDrop
 991      * @property isTarget
 992      * @private
 993      */
 994     this.isTarget = false;
 995
 996     /**
 997      * The tick size for this slider
 998      * @property tickSize
 999      * @type int
1000      * @private
1001      */
1002     this.tickSize = iTickSize;
1003
1004     /**
1005      * Informs the drag and drop util that the offsets should remain when
1006      * resetting the constraints.  This preserves the slider value when
1007      * the constraints are reset
1008      * @property maintainOffset
1009      * @type boolean
1010      * @private
1011      */
1012     this.maintainOffset = true;
1013
1014     this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
1015
1016     /**
1017      * Turns off the autoscroll feature in drag and drop
1018      * @property scroll
1019      * @private
1020      */
1021     this.scroll = false;
1022
1023 };
1024
1025 YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD, {
1026
1027     /**
1028      * The (X and Y) difference between the thumb location and its parent
1029      * (the slider background) when the control is instantiated.
1030      * @property startOffset
1031      * @type [int, int]
1032      */
1033     startOffset: null,
1034
1035     /**
1036      * Flag used to figure out if this is a horizontal or vertical slider
1037      * @property _isHoriz
1038      * @type boolean
1039      * @private
1040      */
1041     _isHoriz: false,
1042
1043     /**
1044      * Cache the last value so we can check for change
1045      * @property _prevVal
1046      * @type int
1047      * @private
1048      */
1049     _prevVal: 0,
1050
1051     /**
1052      * The slider is _graduated if there is a tick interval defined
1053      * @property _graduated
1054      * @type boolean
1055      * @private
1056      */
1057     _graduated: false,
1058
1059     /**
1060      * Returns the difference between the location of the thumb and its parent.
1061      * @method getOffsetFromParent
1062      * @param {[int, int]} parentPos Optionally accepts the position of the parent
1063      * @type [int, int]
1064      */
1065     getOffsetFromParent0: function(parentPos) {
1066         var myPos = YAHOO.util.Dom.getXY(this.getEl());
1067         var ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1068
1069         return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1070     },
1071
1072     getOffsetFromParent: function(parentPos) {
1073
1074         var el = this.getEl();
1075
1076         if (!this.deltaOffset) {
1077
1078             var myPos = YAHOO.util.Dom.getXY(el);
1079             var ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1080
1081             var newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1082
1083             var l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1084             var t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1085
1086             var deltaX = l - newOffset[0];
1087             var deltaY = t - newOffset[1];
1088
1089             if (isNaN(deltaX) || isNaN(deltaY)) {
1090             } else {
1091                 this.deltaOffset = [deltaX, deltaY];
1092             }
1093
1094         } else {
1095             var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1096             var newTop  = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1097
1098             newOffset  = [newLeft + this.deltaOffset[0], newTop + this.deltaOffset[1]];
1099         }
1100
1101         return newOffset;
1102
1103         //return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1104     },
1105
1106     /**
1107      * Set up the slider, must be called in the constructor of all subclasses
1108      * @method initSlider
1109      * @param {int} iLeft the number of pixels the element can move left
1110      * @param {int} iRight the number of pixels the element can move right
1111      * @param {int} iUp the number of pixels the element can move up
1112      * @param {int} iDown the number of pixels the element can move down
1113      * @param {int} iTickSize the width of the tick interval.
1114      */
1115     initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) {
1116
1117         //document these.  new for 0.12.1
1118         this.initLeft = iLeft;
1119         this.initRight = iRight;
1120         this.initUp = iUp;
1121         this.initDown = iDown;
1122
1123         this.setXConstraint(iLeft, iRight, iTickSize);
1124         this.setYConstraint(iUp, iDown, iTickSize);
1125
1126         if (iTickSize && iTickSize > 1) {
1127             this._graduated = true;
1128         }
1129
1130         this._isHoriz  = (iLeft || iRight);
1131         this._isVert   = (iUp   || iDown);
1132         this._isRegion = (this._isHoriz && this._isVert);
1133
1134     },
1135
1136     /**
1137      * Clear's the slider's ticks
1138      * @method clearTicks
1139      */
1140     clearTicks: function () {
1141         YAHOO.widget.SliderThumb.superclass.clearTicks.call(this);
1142         this.tickSize = 0;
1143         this._graduated = false;
1144     },
1145
1146     /**
1147      * Gets the current offset from the element's start position in
1148      * pixels.
1149      * @method getValue
1150      * @return {int} the number of pixels (positive or negative) the
1151      * slider has moved from the start position.
1152      */
1153     getValue: function () {
1154         if (!this.available) { return 0; }
1155         var val = (this._isHoriz) ? this.getXValue() : this.getYValue();
1156         return val;
1157     },
1158
1159     /**
1160      * Gets the current X offset from the element's start position in
1161      * pixels.
1162      * @method getXValue
1163      * @return {int} the number of pixels (positive or negative) the
1164      * slider has moved horizontally from the start position.
1165      */
1166     getXValue: function () {
1167         if (!this.available) { return 0; }
1168         var newOffset = this.getOffsetFromParent();
1169         return (newOffset[0] - this.startOffset[0]);
1170     },
1171
1172     /**
1173      * Gets the current Y offset from the element's start position in
1174      * pixels.
1175      * @method getYValue
1176      * @return {int} the number of pixels (positive or negative) the
1177      * slider has moved vertically from the start position.
1178      */
1179     getYValue: function () {
1180         if (!this.available) { return 0; }
1181         var newOffset = this.getOffsetFromParent();
1182         return (newOffset[1] - this.startOffset[1]);
1183     },
1184
1185     /**
1186      * Thumb toString
1187      * @method toString
1188      * @return {string} string representation of the instance
1189      */
1190     toString: function () {
1191         return "SliderThumb " + this.id;
1192     },
1193
1194     /**
1195      * The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
1196      * instance it belongs to.
1197      * @method onChange
1198      * @private
1199      */
1200     onChange: function (x, y) {
1201     }
1202
1203 });
1204
1205 if ("undefined" == typeof YAHOO.util.Anim) {
1206     YAHOO.widget.Slider.ANIM_AVAIL = false;
1207 }
1208