lib/yui/slider/slider-debug.js

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