koha-tt/intranet-tmpl/prog/en/lib/yui/slider/slider-debug.js

   1 /*
   2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.8.0r4
   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  (function () {
  22
  23 var getXY = YAHOO.util.Dom.getXY,
  24     Event = YAHOO.util.Event,
  25     _AS   = Array.prototype.slice;
  26
  27 /**
  28  * A DragDrop implementation that can be used as a background for a
  29  * slider.  It takes a reference to the thumb instance
  30  * so it can delegate some of the events to it.  The goal is to make the
  31  * thumb jump to the location on the background when the background is
  32  * clicked.
  33  *
  34  * @class Slider
  35  * @extends YAHOO.util.DragDrop
  36  * @uses YAHOO.util.EventProvider
  37  * @constructor
  38  * @param {String}      id     The id of the element linked to this instance
  39  * @param {String}      sGroup The group of related DragDrop items
  40  * @param {SliderThumb} oThumb The thumb for this slider
  41  * @param {String}      sType  The type of slider (horiz, vert, region)
  42  */
  43 function Slider(sElementId, sGroup, oThumb, sType) {
  44
  45     Slider.ANIM_AVAIL = (!YAHOO.lang.isUndefined(YAHOO.util.Anim));
  46
  47     if (sElementId) {
  48         this.init(sElementId, sGroup, true);
  49         this.initSlider(sType);
  50         this.initThumb(oThumb);
  51     }
  52 }
  53
  54 YAHOO.lang.augmentObject(Slider,{
  55     /**
  56      * Factory method for creating a horizontal slider
  57      * @method YAHOO.widget.Slider.getHorizSlider
  58      * @static
  59      * @param {String} sBGElId the id of the slider's background element
  60      * @param {String} sHandleElId the id of the thumb element
  61      * @param {int} iLeft the number of pixels the element can move left
  62      * @param {int} iRight the number of pixels the element can move right
  63      * @param {int} iTickSize optional parameter for specifying that the element
  64      * should move a certain number pixels at a time.
  65      * @return {Slider} a horizontal slider control
  66      */
  67     getHorizSlider :
  68         function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) {
  69             return new Slider(sBGElId, sBGElId,
  70                 new YAHOO.widget.SliderThumb(sHandleElId, sBGElId,
  71                                    iLeft, iRight, 0, 0, iTickSize), "horiz");
  72     },
  73
  74     /**
  75      * Factory method for creating a vertical slider
  76      * @method YAHOO.widget.Slider.getVertSlider
  77      * @static
  78      * @param {String} sBGElId the id of the slider's background element
  79      * @param {String} sHandleElId the id of the thumb element
  80      * @param {int} iUp the number of pixels the element can move up
  81      * @param {int} iDown the number of pixels the element can move down
  82      * @param {int} iTickSize optional parameter for specifying that the element
  83      * should move a certain number pixels at a time.
  84      * @return {Slider} a vertical slider control
  85      */
  86     getVertSlider :
  87         function (sBGElId, sHandleElId, iUp, iDown, iTickSize) {
  88             return new Slider(sBGElId, sBGElId,
  89                 new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0,
  90                                    iUp, iDown, iTickSize), "vert");
  91     },
  92
  93     /**
  94      * Factory method for creating a slider region like the one in the color
  95      * picker example
  96      * @method YAHOO.widget.Slider.getSliderRegion
  97      * @static
  98      * @param {String} sBGElId the id of the slider's background element
  99      * @param {String} sHandleElId the id of the thumb element
 100      * @param {int} iLeft the number of pixels the element can move left
 101      * @param {int} iRight the number of pixels the element can move right
 102      * @param {int} iUp the number of pixels the element can move up
 103      * @param {int} iDown the number of pixels the element can move down
 104      * @param {int} iTickSize optional parameter for specifying that the element
 105      * should move a certain number pixels at a time.
 106      * @return {Slider} a slider region control
 107      */
 108     getSliderRegion :
 109         function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) {
 110             return new Slider(sBGElId, sBGElId,
 111                 new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight,
 112                                    iUp, iDown, iTickSize), "region");
 113     },
 114
 115     /**
 116      * Constant for valueChangeSource, indicating that the user clicked or
 117      * dragged the slider to change the value.
 118      * @property Slider.SOURCE_UI_EVENT
 119      * @final
 120      * @static
 121      * @default 1
 122      */
 123     SOURCE_UI_EVENT : 1,
 124
 125     /**
 126      * Constant for valueChangeSource, indicating that the value was altered
 127      * by a programmatic call to setValue/setRegionValue.
 128      * @property Slider.SOURCE_SET_VALUE
 129      * @final
 130      * @static
 131      * @default 2
 132      */
 133     SOURCE_SET_VALUE : 2,
 134
 135     /**
 136      * Constant for valueChangeSource, indicating that the value was altered
 137      * by hitting any of the supported keyboard characters.
 138      * @property Slider.SOURCE_KEY_EVENT
 139      * @final
 140      * @static
 141      * @default 2
 142      */
 143     SOURCE_KEY_EVENT : 3,
 144
 145     /**
 146      * By default, animation is available if the animation utility is detected.
 147      * @property Slider.ANIM_AVAIL
 148      * @static
 149      * @type boolean
 150      */
 151     ANIM_AVAIL : false
 152 },true);
 153
 154 YAHOO.extend(Slider, YAHOO.util.DragDrop, {
 155
 156     /**
 157      * Tracks the state of the mouse button to aid in when events are fired.
 158      *
 159      * @property _mouseDown
 160      * @type boolean
 161      * @default false
 162      * @private
 163      */
 164     _mouseDown : false,
 165
 166     /**
 167      * Override the default setting of dragOnly to true.
 168      * @property dragOnly
 169      * @type boolean
 170      * @default true
 171      */
 172     dragOnly : true,
 173
 174     /**
 175      * Initializes the slider.  Executed in the constructor
 176      * @method initSlider
 177      * @param {string} sType the type of slider (horiz, vert, region)
 178      */
 179     initSlider: function(sType) {
 180
 181         /**
 182          * The type of the slider (horiz, vert, region)
 183          * @property type
 184          * @type string
 185          */
 186         this.type = sType;
 187
 188         //this.removeInvalidHandleType("A");
 189
 190         this.logger = new YAHOO.widget.LogWriter(this.toString());
 191
 192         /**
 193          * Event the fires when the value of the control changes.  If
 194          * the control is animated the event will fire every point
 195          * along the way.
 196          * @event change
 197          * @param {int} newOffset|x the new offset for normal sliders, or the new
 198          *                          x offset for region sliders
 199          * @param {int} y the number of pixels the thumb has moved on the y axis
 200          *                (region sliders only)
 201          */
 202         this.createEvent("change", this);
 203
 204         /**
 205          * Event that fires at the beginning of a slider thumb move.
 206          * @event slideStart
 207          */
 208         this.createEvent("slideStart", this);
 209
 210         /**
 211          * Event that fires at the end of a slider thumb move
 212          * @event slideEnd
 213          */
 214         this.createEvent("slideEnd", this);
 215
 216         /**
 217          * Overrides the isTarget property in YAHOO.util.DragDrop
 218          * @property isTarget
 219          * @private
 220          */
 221         this.isTarget = false;
 222
 223         /**
 224          * Flag that determines if the thumb will animate when moved
 225          * @property animate
 226          * @type boolean
 227          */
 228         this.animate = Slider.ANIM_AVAIL;
 229
 230         /**
 231          * Set to false to disable a background click thumb move
 232          * @property backgroundEnabled
 233          * @type boolean
 234          */
 235         this.backgroundEnabled = true;
 236
 237         /**
 238          * Adjustment factor for tick animation, the more ticks, the
 239          * faster the animation (by default)
 240          * @property tickPause
 241          * @type int
 242          */
 243         this.tickPause = 40;
 244
 245         /**
 246          * Enables the arrow, home and end keys, defaults to true.
 247          * @property enableKeys
 248          * @type boolean
 249          */
 250         this.enableKeys = true;
 251
 252         /**
 253          * Specifies the number of pixels the arrow keys will move the slider.
 254          * Default is 20.
 255          * @property keyIncrement
 256          * @type int
 257          */
 258         this.keyIncrement = 20;
 259
 260         /**
 261          * moveComplete is set to true when the slider has moved to its final
 262          * destination.  For animated slider, this value can be checked in
 263          * the onChange handler to make it possible to execute logic only
 264          * when the move is complete rather than at all points along the way.
 265          * Deprecated because this flag is only useful when the background is
 266          * clicked and the slider is animated.  If the user drags the thumb,
 267          * the flag is updated when the drag is over ... the final onDrag event
 268          * fires before the mouseup the ends the drag, so the implementer will
 269          * never see it.
 270          *
 271          * @property moveComplete
 272          * @type Boolean
 273          * @deprecated use the slideEnd event instead
 274          */
 275         this.moveComplete = true;
 276
 277         /**
 278          * If animation is configured, specifies the length of the animation
 279          * in seconds.
 280          * @property animationDuration
 281          * @type int
 282          * @default 0.2
 283          */
 284         this.animationDuration = 0.2;
 285
 286         /**
 287          * Constant for valueChangeSource, indicating that the user clicked or
 288          * dragged the slider to change the value.
 289          * @property SOURCE_UI_EVENT
 290          * @final
 291          * @default 1
 292          * @deprecated use static Slider.SOURCE_UI_EVENT
 293          */
 294         this.SOURCE_UI_EVENT = 1;
 295
 296         /**
 297          * Constant for valueChangeSource, indicating that the value was altered
 298          * by a programmatic call to setValue/setRegionValue.
 299          * @property SOURCE_SET_VALUE
 300          * @final
 301          * @default 2
 302          * @deprecated use static Slider.SOURCE_SET_VALUE
 303          */
 304         this.SOURCE_SET_VALUE = 2;
 305
 306         /**
 307          * When the slider value changes, this property is set to identify where
 308          * the update came from.  This will be either 1, meaning the slider was
 309          * clicked or dragged, or 2, meaning that it was set via a setValue() call.
 310          * This can be used within event handlers to apply some of the logic only
 311          * when dealing with one source or another.
 312          * @property valueChangeSource
 313          * @type int
 314          * @since 2.3.0
 315          */
 316         this.valueChangeSource = 0;
 317
 318         /**
 319          * Indicates whether or not events will be supressed for the current
 320          * slide operation
 321          * @property _silent
 322          * @type boolean
 323          * @private
 324          */
 325         this._silent = false;
 326
 327         /**
 328          * Saved offset used to protect against NaN problems when slider is
 329          * set to display:none
 330          * @property lastOffset
 331          * @type [int, int]
 332          */
 333         this.lastOffset = [0,0];
 334     },
 335
 336     /**
 337      * Initializes the slider's thumb. Executed in the constructor.
 338      * @method initThumb
 339      * @param {YAHOO.widget.SliderThumb} t the slider thumb
 340      */
 341     initThumb: function(t) {
 342
 343         var self = this;
 344
 345         /**
 346          * A YAHOO.widget.SliderThumb instance that we will use to
 347          * reposition the thumb when the background is clicked
 348          * @property thumb
 349          * @type YAHOO.widget.SliderThumb
 350          */
 351         this.thumb = t;
 352
 353         t.cacheBetweenDrags = true;
 354
 355         if (t._isHoriz && t.xTicks && t.xTicks.length) {
 356             this.tickPause = Math.round(360 / t.xTicks.length);
 357         } else if (t.yTicks && t.yTicks.length) {
 358             this.tickPause = Math.round(360 / t.yTicks.length);
 359         }
 360
 361         this.logger.log("tickPause: " + this.tickPause);
 362
 363         // delegate thumb methods
 364         t.onAvailable = function() {
 365                 return self.setStartSliderState();
 366             };
 367         t.onMouseDown = function () {
 368                 self._mouseDown = true;
 369                 self.logger.log('thumb mousedown');
 370                 return self.focus();
 371             };
 372         t.startDrag = function() {
 373                 self.logger.log('thumb startDrag');
 374                 self._slideStart();
 375             };
 376         t.onDrag = function() {
 377                 self.logger.log('thumb drag');
 378                 self.fireEvents(true);
 379             };
 380         t.onMouseUp = function() {
 381                 self.thumbMouseUp();
 382             };
 383
 384     },
 385
 386     /**
 387      * Executed when the slider element is available
 388      * @method onAvailable
 389      */
 390     onAvailable: function() {
 391         this._bindKeyEvents();
 392     },
 393
 394     /**
 395      * Sets up the listeners for keydown and key press events.
 396      *
 397      * @method _bindKeyEvents
 398      * @protected
 399      */
 400     _bindKeyEvents : function () {
 401         Event.on(this.id, "keydown",  this.handleKeyDown,  this, true);
 402         Event.on(this.id, "keypress", this.handleKeyPress, this, true);
 403     },
 404
 405     /**
 406      * Executed when a keypress event happens with the control focused.
 407      * Prevents the default behavior for navigation keys.  The actual
 408      * logic for moving the slider thumb in response to a key event
 409      * happens in handleKeyDown.
 410      * @param {Event} e the keypress event
 411      */
 412     handleKeyPress: function(e) {
 413         if (this.enableKeys) {
 414             var kc = Event.getCharCode(e);
 415
 416             switch (kc) {
 417                 case 0x25: // left
 418                 case 0x26: // up
 419                 case 0x27: // right
 420                 case 0x28: // down
 421                 case 0x24: // home
 422                 case 0x23: // end
 423                     Event.preventDefault(e);
 424                     break;
 425                 default:
 426             }
 427         }
 428     },
 429
 430     /**
 431      * Executed when a keydown event happens with the control focused.
 432      * Updates the slider value and display when the keypress is an
 433      * arrow key, home, or end as long as enableKeys is set to true.
 434      * @param {Event} e the keydown event
 435      */
 436     handleKeyDown: function(e) {
 437         if (this.enableKeys) {
 438             var kc = Event.getCharCode(e),
 439                 t  = this.thumb,
 440                 h  = this.getXValue(),
 441                 v  = this.getYValue(),
 442                 changeValue = true;
 443
 444             switch (kc) {
 445
 446                 // left
 447                 case 0x25: h -= this.keyIncrement; break;
 448
 449                 // up
 450                 case 0x26: v -= this.keyIncrement; break;
 451
 452                 // right
 453                 case 0x27: h += this.keyIncrement; break;
 454
 455                 // down
 456                 case 0x28: v += this.keyIncrement; break;
 457
 458                 // home
 459                 case 0x24: h = t.leftConstraint;
 460                            v = t.topConstraint;
 461                            break;
 462
 463                 // end
 464                 case 0x23: h = t.rightConstraint;
 465                            v = t.bottomConstraint;
 466                            break;
 467
 468                 default:   changeValue = false;
 469             }
 470
 471             if (changeValue) {
 472                 if (t._isRegion) {
 473                     this._setRegionValue(Slider.SOURCE_KEY_EVENT, h, v, true);
 474                 } else {
 475                     this._setValue(Slider.SOURCE_KEY_EVENT,
 476                         (t._isHoriz ? h : v), true);
 477                 }
 478                 Event.stopEvent(e);
 479             }
 480
 481         }
 482     },
 483
 484     /**
 485      * Initialization that sets up the value offsets once the elements are ready
 486      * @method setStartSliderState
 487      */
 488     setStartSliderState: function() {
 489
 490         this.logger.log("Fixing state");
 491
 492         this.setThumbCenterPoint();
 493
 494         /**
 495          * The basline position of the background element, used
 496          * to determine if the background has moved since the last
 497          * operation.
 498          * @property baselinePos
 499          * @type [int, int]
 500          */
 501         this.baselinePos = getXY(this.getEl());
 502
 503         this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos);
 504
 505         if (this.thumb._isRegion) {
 506             if (this.deferredSetRegionValue) {
 507                 this._setRegionValue.apply(this, this.deferredSetRegionValue);
 508                 this.deferredSetRegionValue = null;
 509             } else {
 510                 this.setRegionValue(0, 0, true, true, true);
 511             }
 512         } else {
 513             if (this.deferredSetValue) {
 514                 this._setValue.apply(this, this.deferredSetValue);
 515                 this.deferredSetValue = null;
 516             } else {
 517                 this.setValue(0, true, true, true);
 518             }
 519         }
 520     },
 521
 522     /**
 523      * When the thumb is available, we cache the centerpoint of the element so
 524      * we can position the element correctly when the background is clicked
 525      * @method setThumbCenterPoint
 526      */
 527     setThumbCenterPoint: function() {
 528
 529         var el = this.thumb.getEl();
 530
 531         if (el) {
 532             /**
 533              * The center of the slider element is stored so we can
 534              * place it in the correct position when the background is clicked.
 535              * @property thumbCenterPoint
 536              * @type {"x": int, "y": int}
 537              */
 538             this.thumbCenterPoint = {
 539                     x: parseInt(el.offsetWidth/2, 10),
 540                     y: parseInt(el.offsetHeight/2, 10)
 541             };
 542         }
 543
 544     },
 545
 546     /**
 547      * Locks the slider, overrides YAHOO.util.DragDrop
 548      * @method lock
 549      */
 550     lock: function() {
 551         this.logger.log("locking");
 552         this.thumb.lock();
 553         this.locked = true;
 554     },
 555
 556     /**
 557      * Unlocks the slider, overrides YAHOO.util.DragDrop
 558      * @method unlock
 559      */
 560     unlock: function() {
 561         this.logger.log("unlocking");
 562         this.thumb.unlock();
 563         this.locked = false;
 564     },
 565
 566     /**
 567      * Handles mouseup event on the thumb
 568      * @method thumbMouseUp
 569      * @private
 570      */
 571     thumbMouseUp: function() {
 572         this._mouseDown = false;
 573         this.logger.log("thumb mouseup");
 574         if (!this.isLocked()) {
 575             this.endMove();
 576         }
 577
 578     },
 579
 580     onMouseUp: function() {
 581         this._mouseDown = false;
 582         this.logger.log("background mouseup");
 583         if (this.backgroundEnabled && !this.isLocked()) {
 584             this.endMove();
 585         }
 586     },
 587
 588     /**
 589      * Returns a reference to this slider's thumb
 590      * @method getThumb
 591      * @return {SliderThumb} this slider's thumb
 592      */
 593     getThumb: function() {
 594         return this.thumb;
 595     },
 596
 597     /**
 598      * Try to focus the element when clicked so we can add
 599      * accessibility features
 600      * @method focus
 601      * @private
 602      */
 603     focus: function() {
 604         this.logger.log("focus");
 605         this.valueChangeSource = Slider.SOURCE_UI_EVENT;
 606
 607         // Focus the background element if possible
 608         var el = this.getEl();
 609
 610         if (el.focus) {
 611             try {
 612                 el.focus();
 613             } catch(e) {
 614                 // Prevent permission denied unhandled exception in FF that can
 615                 // happen when setting focus while another element is handling
 616                 // the blur.  @TODO this is still writing to the error log
 617                 // (unhandled error) in FF1.5 with strict error checking on.
 618             }
 619         }
 620
 621         this.verifyOffset();
 622
 623         return !this.isLocked();
 624     },
 625
 626     /**
 627      * Event that fires when the value of the slider has changed
 628      * @method onChange
 629      * @param {int} firstOffset the number of pixels the thumb has moved
 630      * from its start position. Normal horizontal and vertical sliders will only
 631      * have the firstOffset.  Regions will have both, the first is the horizontal
 632      * offset, the second the vertical.
 633      * @param {int} secondOffset the y offset for region sliders
 634      * @deprecated use instance.subscribe("change") instead
 635      */
 636     onChange: function (firstOffset, secondOffset) {
 637         /* override me */
 638         this.logger.log("onChange: " + firstOffset + ", " + secondOffset);
 639     },
 640
 641     /**
 642      * Event that fires when the at the beginning of the slider thumb move
 643      * @method onSlideStart
 644      * @deprecated use instance.subscribe("slideStart") instead
 645      */
 646     onSlideStart: function () {
 647         /* override me */
 648         this.logger.log("onSlideStart");
 649     },
 650
 651     /**
 652      * Event that fires at the end of a slider thumb move
 653      * @method onSliderEnd
 654      * @deprecated use instance.subscribe("slideEnd") instead
 655      */
 656     onSlideEnd: function () {
 657         /* override me */
 658         this.logger.log("onSlideEnd");
 659     },
 660
 661     /**
 662      * Returns the slider's thumb offset from the start position
 663      * @method getValue
 664      * @return {int} the current value
 665      */
 666     getValue: function () {
 667         return this.thumb.getValue();
 668     },
 669
 670     /**
 671      * Returns the slider's thumb X offset from the start position
 672      * @method getXValue
 673      * @return {int} the current horizontal offset
 674      */
 675     getXValue: function () {
 676         return this.thumb.getXValue();
 677     },
 678
 679     /**
 680      * Returns the slider's thumb Y offset from the start position
 681      * @method getYValue
 682      * @return {int} the current vertical offset
 683      */
 684     getYValue: function () {
 685         return this.thumb.getYValue();
 686     },
 687
 688     /**
 689      * Provides a way to set the value of the slider in code.
 690      *
 691      * @method setValue
 692      * @param {int} newOffset the number of pixels the thumb should be
 693      * positioned away from the initial start point
 694      * @param {boolean} skipAnim set to true to disable the animation
 695      * for this move action (but not others).
 696      * @param {boolean} force ignore the locked setting and set value anyway
 697      * @param {boolean} silent when true, do not fire events
 698      * @return {boolean} true if the move was performed, false if it failed
 699      */
 700     setValue: function() {
 701         var args = _AS.call(arguments);
 702         args.unshift(Slider.SOURCE_SET_VALUE);
 703         return this._setValue.apply(this,args);
 704     },
 705
 706     /**
 707      * Worker function to execute the value set operation.  Accepts type of
 708      * set operation in addition to the usual setValue params.
 709      *
 710      * @method _setValue
 711      * @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
 712      * @param {int} newOffset the number of pixels the thumb should be
 713      * positioned away from the initial start point
 714      * @param {boolean} skipAnim set to true to disable the animation
 715      * for this move action (but not others).
 716      * @param {boolean} force ignore the locked setting and set value anyway
 717      * @param {boolean} silent when true, do not fire events
 718      * @return {boolean} true if the move was performed, false if it failed
 719      * @protected
 720      */
 721     _setValue: function(source, newOffset, skipAnim, force, silent) {
 722         var t = this.thumb, newX, newY;
 723
 724         if (!t.available) {
 725             this.logger.log("defer setValue until after onAvailble");
 726             this.deferredSetValue = arguments;
 727             return false;
 728         }
 729
 730         if (this.isLocked() && !force) {
 731             this.logger.log("Can't set the value, the control is locked");
 732             return false;
 733         }
 734
 735         if ( isNaN(newOffset) ) {
 736             this.logger.log("setValue, Illegal argument: " + newOffset);
 737             return false;
 738         }
 739
 740         if (t._isRegion) {
 741             this.logger.log("Call to setValue for region Slider ignored. Use setRegionValue","warn");
 742             return false;
 743         }
 744
 745         this.logger.log("setValue " + newOffset);
 746
 747         this._silent = silent;
 748         this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
 749
 750         t.lastOffset = [newOffset, newOffset];
 751         this.verifyOffset();
 752
 753         this._slideStart();
 754
 755         if (t._isHoriz) {
 756             newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 757             this.moveThumb(newX, t.initPageY, skipAnim);
 758         } else {
 759             newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
 760             this.moveThumb(t.initPageX, newY, skipAnim);
 761         }
 762
 763         return true;
 764     },
 765
 766     /**
 767      * Provides a way to set the value of the region slider in code.
 768      * @method setRegionValue
 769      * @param {int} newOffset the number of pixels the thumb should be
 770      * positioned away from the initial start point (x axis for region)
 771      * @param {int} newOffset2 the number of pixels the thumb should be
 772      * positioned away from the initial start point (y axis for region)
 773      * @param {boolean} skipAnim set to true to disable the animation
 774      * for this move action (but not others).
 775      * @param {boolean} force ignore the locked setting and set value anyway
 776      * @param {boolean} silent when true, do not fire events
 777      * @return {boolean} true if the move was performed, false if it failed
 778      */
 779     setRegionValue : function () {
 780         var args = _AS.call(arguments);
 781         args.unshift(Slider.SOURCE_SET_VALUE);
 782         return this._setRegionValue.apply(this,args);
 783     },
 784
 785     /**
 786      * Worker function to execute the value set operation.  Accepts type of
 787      * set operation in addition to the usual setValue params.
 788      *
 789      * @method _setRegionValue
 790      * @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
 791      * @param {int} newOffset the number of pixels the thumb should be
 792      * positioned away from the initial start point (x axis for region)
 793      * @param {int} newOffset2 the number of pixels the thumb should be
 794      * positioned away from the initial start point (y axis for region)
 795      * @param {boolean} skipAnim set to true to disable the animation
 796      * for this move action (but not others).
 797      * @param {boolean} force ignore the locked setting and set value anyway
 798      * @param {boolean} silent when true, do not fire events
 799      * @return {boolean} true if the move was performed, false if it failed
 800      * @protected
 801      */
 802     _setRegionValue: function(source, newOffset, newOffset2, skipAnim, force, silent) {
 803         var t = this.thumb, newX, newY;
 804
 805         if (!t.available) {
 806             this.logger.log("defer setRegionValue until after onAvailble");
 807             this.deferredSetRegionValue = arguments;
 808             return false;
 809         }
 810
 811         if (this.isLocked() && !force) {
 812             this.logger.log("Can't set the value, the control is locked");
 813             return false;
 814         }
 815
 816         if ( isNaN(newOffset) ) {
 817             this.logger.log("setRegionValue, Illegal argument: " + newOffset);
 818             return false;
 819         }
 820
 821         if (!t._isRegion) {
 822             this.logger.log("Call to setRegionValue for non-region Slider ignored. Use setValue","warn");
 823             return false;
 824         }
 825
 826         this._silent = silent;
 827
 828         this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
 829
 830         t.lastOffset = [newOffset, newOffset2];
 831         this.verifyOffset();
 832
 833         this._slideStart();
 834
 835         newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 836         newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
 837         this.moveThumb(newX, newY, skipAnim);
 838
 839         return true;
 840     },
 841
 842     /**
 843      * Checks the background position element position.  If it has moved from the
 844      * baseline position, the constraints for the thumb are reset
 845      * @method verifyOffset
 846      * @return {boolean} True if the offset is the same as the baseline.
 847      */
 848     verifyOffset: function() {
 849
 850         var xy = getXY(this.getEl()),
 851             t  = this.thumb;
 852
 853         if (!this.thumbCenterPoint || !this.thumbCenterPoint.x) {
 854             this.setThumbCenterPoint();
 855         }
 856
 857         if (xy) {
 858
 859             this.logger.log("newPos: " + xy);
 860
 861             if (xy[0] != this.baselinePos[0] || xy[1] != this.baselinePos[1]) {
 862                 this.logger.log("background moved, resetting constraints");
 863
 864                 // Reset background
 865                 this.setInitPosition();
 866                 this.baselinePos = xy;
 867
 868                 // Reset thumb
 869                 t.initPageX = this.initPageX + t.startOffset[0];
 870                 t.initPageY = this.initPageY + t.startOffset[1];
 871                 t.deltaSetXY = null;
 872                 this.resetThumbConstraints();
 873
 874                 return false;
 875             }
 876         }
 877
 878         return true;
 879     },
 880
 881     /**
 882      * Move the associated slider moved to a timeout to try to get around the
 883      * mousedown stealing moz does when I move the slider element between the
 884      * cursor and the background during the mouseup event
 885      * @method moveThumb
 886      * @param {int} x the X coordinate of the click
 887      * @param {int} y the Y coordinate of the click
 888      * @param {boolean} skipAnim don't animate if the move happend onDrag
 889      * @param {boolean} midMove set to true if this is not terminating
 890      * the slider movement
 891      * @private
 892      */
 893     moveThumb: function(x, y, skipAnim, midMove) {
 894
 895         var t = this.thumb,
 896             self = this,
 897             p,_p,anim;
 898
 899         if (!t.available) {
 900             this.logger.log("thumb is not available yet, aborting move");
 901             return;
 902         }
 903
 904         this.logger.log("move thumb, x: "  + x + ", y: " + y);
 905
 906         t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
 907
 908         _p = t.getTargetCoord(x, y);
 909         p = [Math.round(_p.x), Math.round(_p.y)];
 910
 911         if (this.animate && t._graduated && !skipAnim) {
 912             this.logger.log("graduated");
 913             this.lock();
 914
 915             // cache the current thumb pos
 916             this.curCoord = getXY(this.thumb.getEl());
 917             this.curCoord = [Math.round(this.curCoord[0]), Math.round(this.curCoord[1])];
 918
 919             setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
 920
 921         } else if (this.animate && Slider.ANIM_AVAIL && !skipAnim) {
 922             this.logger.log("animating to " + p);
 923
 924             this.lock();
 925
 926             anim = new YAHOO.util.Motion(
 927                     t.id, { points: { to: p } },
 928                     this.animationDuration,
 929                     YAHOO.util.Easing.easeOut );
 930
 931             anim.onComplete.subscribe( function() {
 932                     self.logger.log("Animation completed _mouseDown:" + self._mouseDown);
 933                     self.unlock();
 934                     if (!self._mouseDown) {
 935                         self.endMove();
 936                     }
 937                 });
 938             anim.animate();
 939
 940         } else {
 941             t.setDragElPos(x, y);
 942             if (!midMove && !this._mouseDown) {
 943                 this.endMove();
 944             }
 945         }
 946     },
 947
 948     _slideStart: function() {
 949         if (!this._sliding) {
 950             if (!this._silent) {
 951                 this.onSlideStart();
 952                 this.fireEvent("slideStart");
 953             }
 954             this._sliding = true;
 955             this.moveComplete = false; // for backward compatibility. Deprecated
 956         }
 957     },
 958
 959     _slideEnd: function() {
 960         if (this._sliding) {
 961             // Reset state before firing slideEnd
 962             var silent = this._silent;
 963             this._sliding = false;
 964             this.moveComplete = true; // for backward compatibility. Deprecated
 965             this._silent = false;
 966             if (!silent) {
 967                 this.onSlideEnd();
 968                 this.fireEvent("slideEnd");
 969             }
 970         }
 971     },
 972
 973     /**
 974      * Move the slider one tick mark towards its final coordinate.  Used
 975      * for the animation when tick marks are defined
 976      * @method moveOneTick
 977      * @param {int[]} the destination coordinate
 978      * @private
 979      */
 980     moveOneTick: function(finalCoord) {
 981
 982         var t = this.thumb,
 983             self = this,
 984             nextCoord = null,
 985             tmpX, tmpY;
 986
 987         if (t._isRegion) {
 988             nextCoord = this._getNextX(this.curCoord, finalCoord);
 989             tmpX = (nextCoord !== null) ? nextCoord[0] : this.curCoord[0];
 990             nextCoord = this._getNextY(this.curCoord, finalCoord);
 991             tmpY = (nextCoord !== null) ? nextCoord[1] : this.curCoord[1];
 992
 993             nextCoord = tmpX !== this.curCoord[0] || tmpY !== this.curCoord[1] ?
 994                 [ tmpX, tmpY ] : null;
 995         } else if (t._isHoriz) {
 996             nextCoord = this._getNextX(this.curCoord, finalCoord);
 997         } else {
 998             nextCoord = this._getNextY(this.curCoord, finalCoord);
 999         }
1000
1001         this.logger.log("moveOneTick: " +
1002                 " finalCoord: " + finalCoord +
1003                 " this.curCoord: " + this.curCoord +
1004                 " nextCoord: " + nextCoord);
1005
1006         if (nextCoord) {
1007
1008             // cache the position
1009             this.curCoord = nextCoord;
1010
1011             // move to the next coord
1012             this.thumb.alignElWithMouse(t.getEl(), nextCoord[0] + this.thumbCenterPoint.x, nextCoord[1] + this.thumbCenterPoint.y);
1013
1014             // check if we are in the final position, if not make a recursive call
1015             if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) {
1016                 setTimeout(function() { self.moveOneTick(finalCoord); },
1017                         this.tickPause);
1018             } else {
1019                 this.unlock();
1020                 if (!this._mouseDown) {
1021                     this.endMove();
1022                 }
1023             }
1024         } else {
1025             this.unlock();
1026             if (!this._mouseDown) {
1027                 this.endMove();
1028             }
1029         }
1030     },
1031
1032     /**
1033      * Returns the next X tick value based on the current coord and the target coord.
1034      * @method _getNextX
1035      * @private
1036      */
1037     _getNextX: function(curCoord, finalCoord) {
1038         this.logger.log("getNextX: " + curCoord + ", " + finalCoord);
1039         var t = this.thumb,
1040             thresh,
1041             tmp = [],
1042             nextCoord = null;
1043
1044         if (curCoord[0] > finalCoord[0]) {
1045             thresh = t.tickSize - this.thumbCenterPoint.x;
1046             tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] );
1047             nextCoord = [tmp.x, tmp.y];
1048         } else if (curCoord[0] < finalCoord[0]) {
1049             thresh = t.tickSize + this.thumbCenterPoint.x;
1050             tmp = t.getTargetCoord( curCoord[0] + thresh, curCoord[1] );
1051             nextCoord = [tmp.x, tmp.y];
1052         } else {
1053             // equal, do nothing
1054         }
1055
1056         return nextCoord;
1057     },
1058
1059     /**
1060      * Returns the next Y tick value based on the current coord and the target coord.
1061      * @method _getNextY
1062      * @private
1063      */
1064     _getNextY: function(curCoord, finalCoord) {
1065         var t = this.thumb,
1066             thresh,
1067             tmp = [],
1068             nextCoord = null;
1069
1070         if (curCoord[1] > finalCoord[1]) {
1071             thresh = t.tickSize - this.thumbCenterPoint.y;
1072             tmp = t.getTargetCoord( curCoord[0], curCoord[1] - thresh );
1073             nextCoord = [tmp.x, tmp.y];
1074         } else if (curCoord[1] < finalCoord[1]) {
1075             thresh = t.tickSize + this.thumbCenterPoint.y;
1076             tmp = t.getTargetCoord( curCoord[0], curCoord[1] + thresh );
1077             nextCoord = [tmp.x, tmp.y];
1078         } else {
1079             // equal, do nothing
1080         }
1081
1082         return nextCoord;
1083     },
1084
1085     /**
1086      * Resets the constraints before moving the thumb.
1087      * @method b4MouseDown
1088      * @private
1089      */
1090     b4MouseDown: function(e) {
1091         if (!this.backgroundEnabled) {
1092             return false;
1093         }
1094
1095         this.thumb.autoOffset();
1096         this.baselinePos = [];
1097     },
1098
1099     /**
1100      * Handles the mousedown event for the slider background
1101      * @method onMouseDown
1102      * @private
1103      */
1104     onMouseDown: function(e) {
1105         if (!this.backgroundEnabled || this.isLocked()) {
1106             return false;
1107         }
1108
1109         this._mouseDown = true;
1110
1111         var x = Event.getPageX(e),
1112             y = Event.getPageY(e);
1113
1114         this.logger.log("bg mousedown: " + x + "," + y);
1115
1116         this.focus();
1117         this._slideStart();
1118         this.moveThumb(x, y);
1119     },
1120
1121     /**
1122      * Handles the onDrag event for the slider background
1123      * @method onDrag
1124      * @private
1125      */
1126     onDrag: function(e) {
1127         this.logger.log("background drag");
1128         if (this.backgroundEnabled && !this.isLocked()) {
1129             var x = Event.getPageX(e),
1130                 y = Event.getPageY(e);
1131             this.moveThumb(x, y, true, true);
1132             this.fireEvents();
1133         }
1134     },
1135
1136     /**
1137      * Fired when the slider movement ends
1138      * @method endMove
1139      * @private
1140      */
1141     endMove: function () {
1142         this.logger.log("endMove");
1143         this.unlock();
1144         this.fireEvents();
1145         this._slideEnd();
1146     },
1147
1148     /**
1149      * Resets the X and Y contraints for the thumb.  Used in lieu of the thumb
1150      * instance's inherited resetConstraints because some logic was not
1151      * applicable.
1152      * @method resetThumbConstraints
1153      * @protected
1154      */
1155     resetThumbConstraints: function () {
1156         var t = this.thumb;
1157
1158         t.setXConstraint(t.leftConstraint, t.rightConstraint, t.xTickSize);
1159         t.setYConstraint(t.topConstraint, t.bottomConstraint, t.xTickSize);
1160     },
1161
1162     /**
1163      * Fires the change event if the value has been changed.  Ignored if we are in
1164      * the middle of an animation as the event will fire when the animation is
1165      * complete
1166      * @method fireEvents
1167      * @param {boolean} thumbEvent set to true if this event is fired from an event
1168      *                  that occurred on the thumb.  If it is, the state of the
1169      *                  thumb dd object should be correct.  Otherwise, the event
1170      *                  originated on the background, so the thumb state needs to
1171      *                  be refreshed before proceeding.
1172      * @private
1173      */
1174     fireEvents: function (thumbEvent) {
1175
1176         var t = this.thumb, newX, newY, newVal;
1177
1178         if (!thumbEvent) {
1179             t.cachePosition();
1180         }
1181
1182         if (! this.isLocked()) {
1183             if (t._isRegion) {
1184                 newX = t.getXValue();
1185                 newY = t.getYValue();
1186
1187                 if (newX != this.previousX || newY != this.previousY) {
1188                     if (!this._silent) {
1189                         this.onChange(newX, newY);
1190                         this.fireEvent("change", { x: newX, y: newY });
1191                     }
1192                 }
1193
1194                 this.previousX = newX;
1195                 this.previousY = newY;
1196
1197             } else {
1198                 newVal = t.getValue();
1199                 if (newVal != this.previousVal) {
1200                     this.logger.log("Firing onchange: " + newVal);
1201                     if (!this._silent) {
1202                         this.onChange( newVal );
1203                         this.fireEvent("change", newVal);
1204                     }
1205                 }
1206                 this.previousVal = newVal;
1207             }
1208
1209         }
1210     },
1211
1212     /**
1213      * Slider toString
1214      * @method toString
1215      * @return {string} string representation of the instance
1216      */
1217     toString: function () {
1218         return ("Slider (" + this.type +") " + this.id);
1219     }
1220
1221 });
1222
1223 YAHOO.lang.augmentProto(Slider, YAHOO.util.EventProvider);
1224
1225 YAHOO.widget.Slider = Slider;
1226 })();
1227 /**
1228  * A drag and drop implementation to be used as the thumb of a slider.
1229  * @class SliderThumb
1230  * @extends YAHOO.util.DD
1231  * @constructor
1232  * @param {String} id the id of the slider html element
1233  * @param {String} sGroup the group of related DragDrop items
1234  * @param {int} iLeft the number of pixels the element can move left
1235  * @param {int} iRight the number of pixels the element can move right
1236  * @param {int} iUp the number of pixels the element can move up
1237  * @param {int} iDown the number of pixels the element can move down
1238  * @param {int} iTickSize optional parameter for specifying that the element
1239  * should move a certain number pixels at a time.
1240  */
1241 YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
1242
1243     if (id) {
1244         YAHOO.widget.SliderThumb.superclass.constructor.call(this, id, sGroup);
1245
1246         /**
1247          * The id of the thumbs parent HTML element (the slider background
1248          * element).
1249          * @property parentElId
1250          * @type string
1251          */
1252         this.parentElId = sGroup;
1253     }
1254
1255
1256     this.logger = new YAHOO.widget.LogWriter(this.toString());
1257
1258     /**
1259      * Overrides the isTarget property in YAHOO.util.DragDrop
1260      * @property isTarget
1261      * @private
1262      */
1263     this.isTarget = false;
1264
1265     /**
1266      * The tick size for this slider
1267      * @property tickSize
1268      * @type int
1269      * @private
1270      */
1271     this.tickSize = iTickSize;
1272
1273     /**
1274      * Informs the drag and drop util that the offsets should remain when
1275      * resetting the constraints.  This preserves the slider value when
1276      * the constraints are reset
1277      * @property maintainOffset
1278      * @type boolean
1279      * @private
1280      */
1281     this.maintainOffset = true;
1282
1283     this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
1284
1285     /**
1286      * Turns off the autoscroll feature in drag and drop
1287      * @property scroll
1288      * @private
1289      */
1290     this.scroll = false;
1291
1292 };
1293
1294 YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD, {
1295
1296     /**
1297      * The (X and Y) difference between the thumb location and its parent
1298      * (the slider background) when the control is instantiated.
1299      * @property startOffset
1300      * @type [int, int]
1301      */
1302     startOffset: null,
1303
1304     /**
1305      * Override the default setting of dragOnly to true.
1306      * @property dragOnly
1307      * @type boolean
1308      * @default true
1309      */
1310     dragOnly : true,
1311
1312     /**
1313      * Flag used to figure out if this is a horizontal or vertical slider
1314      * @property _isHoriz
1315      * @type boolean
1316      * @private
1317      */
1318     _isHoriz: false,
1319
1320     /**
1321      * Cache the last value so we can check for change
1322      * @property _prevVal
1323      * @type int
1324      * @private
1325      */
1326     _prevVal: 0,
1327
1328     /**
1329      * The slider is _graduated if there is a tick interval defined
1330      * @property _graduated
1331      * @type boolean
1332      * @private
1333      */
1334     _graduated: false,
1335
1336
1337     /**
1338      * Returns the difference between the location of the thumb and its parent.
1339      * @method getOffsetFromParent
1340      * @param {[int, int]} parentPos Optionally accepts the position of the parent
1341      * @type [int, int]
1342      */
1343     getOffsetFromParent0: function(parentPos) {
1344         var myPos = YAHOO.util.Dom.getXY(this.getEl()),
1345             ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1346
1347         return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1348     },
1349
1350     getOffsetFromParent: function(parentPos) {
1351
1352         var el = this.getEl(), newOffset,
1353             myPos,ppos,l,t,deltaX,deltaY,newLeft,newTop;
1354
1355         if (!this.deltaOffset) {
1356
1357             myPos = YAHOO.util.Dom.getXY(el);
1358             ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1359
1360             newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1361
1362             l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1363             t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1364
1365             deltaX = l - newOffset[0];
1366             deltaY = t - newOffset[1];
1367
1368             if (isNaN(deltaX) || isNaN(deltaY)) {
1369                 this.logger.log("element does not have a position style def yet");
1370             } else {
1371                 this.deltaOffset = [deltaX, deltaY];
1372             }
1373
1374         } else {
1375             newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1376             newTop  = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1377
1378             newOffset  = [newLeft + this.deltaOffset[0], newTop + this.deltaOffset[1]];
1379         }
1380
1381         return newOffset;
1382     },
1383
1384     /**
1385      * Set up the slider, must be called in the constructor of all subclasses
1386      * @method initSlider
1387      * @param {int} iLeft the number of pixels the element can move left
1388      * @param {int} iRight the number of pixels the element can move right
1389      * @param {int} iUp the number of pixels the element can move up
1390      * @param {int} iDown the number of pixels the element can move down
1391      * @param {int} iTickSize the width of the tick interval.
1392      */
1393     initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) {
1394         this.initLeft = iLeft;
1395         this.initRight = iRight;
1396         this.initUp = iUp;
1397         this.initDown = iDown;
1398
1399         this.setXConstraint(iLeft, iRight, iTickSize);
1400         this.setYConstraint(iUp, iDown, iTickSize);
1401
1402         if (iTickSize && iTickSize > 1) {
1403             this._graduated = true;
1404         }
1405
1406         this._isHoriz  = (iLeft || iRight);
1407         this._isVert   = (iUp   || iDown);
1408         this._isRegion = (this._isHoriz && this._isVert);
1409
1410     },
1411
1412     /**
1413      * Clear's the slider's ticks
1414      * @method clearTicks
1415      */
1416     clearTicks: function () {
1417         YAHOO.widget.SliderThumb.superclass.clearTicks.call(this);
1418         this.tickSize = 0;
1419         this._graduated = false;
1420     },
1421
1422
1423     /**
1424      * Gets the current offset from the element's start position in
1425      * pixels.
1426      * @method getValue
1427      * @return {int} the number of pixels (positive or negative) the
1428      * slider has moved from the start position.
1429      */
1430     getValue: function () {
1431         return (this._isHoriz) ? this.getXValue() : this.getYValue();
1432     },
1433
1434     /**
1435      * Gets the current X offset from the element's start position in
1436      * pixels.
1437      * @method getXValue
1438      * @return {int} the number of pixels (positive or negative) the
1439      * slider has moved horizontally from the start position.
1440      */
1441     getXValue: function () {
1442         if (!this.available) {
1443             return 0;
1444         }
1445         var newOffset = this.getOffsetFromParent();
1446         if (YAHOO.lang.isNumber(newOffset[0])) {
1447             this.lastOffset = newOffset;
1448             return (newOffset[0] - this.startOffset[0]);
1449         } else {
1450             this.logger.log("can't get offset, using old value: " +
1451                 this.lastOffset[0]);
1452             return (this.lastOffset[0] - this.startOffset[0]);
1453         }
1454     },
1455
1456     /**
1457      * Gets the current Y offset from the element's start position in
1458      * pixels.
1459      * @method getYValue
1460      * @return {int} the number of pixels (positive or negative) the
1461      * slider has moved vertically from the start position.
1462      */
1463     getYValue: function () {
1464         if (!this.available) {
1465             return 0;
1466         }
1467         var newOffset = this.getOffsetFromParent();
1468         if (YAHOO.lang.isNumber(newOffset[1])) {
1469             this.lastOffset = newOffset;
1470             return (newOffset[1] - this.startOffset[1]);
1471         } else {
1472             this.logger.log("can't get offset, using old value: " +
1473                 this.lastOffset[1]);
1474             return (this.lastOffset[1] - this.startOffset[1]);
1475         }
1476     },
1477
1478     /**
1479      * Thumb toString
1480      * @method toString
1481      * @return {string} string representation of the instance
1482      */
1483     toString: function () {
1484         return "SliderThumb " + this.id;
1485     },
1486
1487     /**
1488      * The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
1489      * instance it belongs to.
1490      * @method onChange
1491      * @private
1492      */
1493     onChange: function (x, y) {
1494     }
1495
1496 });
1497 /**
1498  * A slider with two thumbs, one that represents the min value and
1499  * the other the max.  Actually a composition of two sliders, both with
1500  * the same background.  The constraints for each slider are adjusted
1501  * dynamically so that the min value of the max slider is equal or greater
1502  * to the current value of the min slider, and the max value of the min
1503  * slider is the current value of the max slider.
1504  * Constructor assumes both thumbs are positioned absolutely at the 0 mark on
1505  * the background.
1506  *
1507  * @namespace YAHOO.widget
1508  * @class DualSlider
1509  * @uses YAHOO.util.EventProvider
1510  * @constructor
1511  * @param {Slider} minSlider The Slider instance used for the min value thumb
1512  * @param {Slider} maxSlider The Slider instance used for the max value thumb
1513  * @param {int}    range The number of pixels the thumbs may move within
1514  * @param {Array}  initVals (optional) [min,max] Initial thumb placement
1515  */
1516 (function () {
1517
1518 var Event = YAHOO.util.Event,
1519     YW = YAHOO.widget;
1520
1521 function DualSlider(minSlider, maxSlider, range, initVals) {
1522
1523     var self  = this,
1524         ready = { min : false, max : false },
1525         minThumbOnMouseDown, maxThumbOnMouseDown;
1526
1527     /**
1528      * A slider instance that keeps track of the lower value of the range.
1529      * <strong>read only</strong>
1530      * @property minSlider
1531      * @type Slider
1532      */
1533     this.minSlider = minSlider;
1534
1535     /**
1536      * A slider instance that keeps track of the upper value of the range.
1537      * <strong>read only</strong>
1538      * @property maxSlider
1539      * @type Slider
1540      */
1541     this.maxSlider = maxSlider;
1542
1543     /**
1544      * The currently active slider (min or max). <strong>read only</strong>
1545      * @property activeSlider
1546      * @type Slider
1547      */
1548     this.activeSlider = minSlider;
1549
1550     /**
1551      * Is the DualSlider oriented horizontally or vertically?
1552      * <strong>read only</strong>
1553      * @property isHoriz
1554      * @type boolean
1555      */
1556     this.isHoriz = minSlider.thumb._isHoriz;
1557
1558     //FIXME: this is horrible
1559     minThumbOnMouseDown = this.minSlider.thumb.onMouseDown;
1560     maxThumbOnMouseDown = this.maxSlider.thumb.onMouseDown;
1561     this.minSlider.thumb.onMouseDown = function() {
1562         self.activeSlider = self.minSlider;
1563         minThumbOnMouseDown.apply(this,arguments);
1564     };
1565     this.maxSlider.thumb.onMouseDown = function () {
1566         self.activeSlider = self.maxSlider;
1567         maxThumbOnMouseDown.apply(this,arguments);
1568     };
1569
1570     this.minSlider.thumb.onAvailable = function () {
1571         minSlider.setStartSliderState();
1572         ready.min = true;
1573         if (ready.max) {
1574             self.fireEvent('ready',self);
1575         }
1576     };
1577     this.maxSlider.thumb.onAvailable = function () {
1578         maxSlider.setStartSliderState();
1579         ready.max = true;
1580         if (ready.min) {
1581             self.fireEvent('ready',self);
1582         }
1583     };
1584
1585     // dispatch mousedowns to the active slider
1586     minSlider.onMouseDown =
1587     maxSlider.onMouseDown = function(e) {
1588         return this.backgroundEnabled && self._handleMouseDown(e);
1589     };
1590
1591     // Fix the drag behavior so that only the active slider
1592     // follows the drag
1593     minSlider.onDrag =
1594     maxSlider.onDrag = function(e) {
1595         self._handleDrag(e);
1596     };
1597
1598     // Likely only the minSlider's onMouseUp will be executed, but both are
1599     // overridden just to be safe
1600     minSlider.onMouseUp =
1601     maxSlider.onMouseUp = function (e) {
1602         self._handleMouseUp(e);
1603     };
1604
1605     // Replace the _bindKeyEvents for the minSlider and remove that for the
1606     // maxSlider since they share the same bg element.
1607     minSlider._bindKeyEvents = function () {
1608         self._bindKeyEvents(this);
1609     };
1610     maxSlider._bindKeyEvents = function () {};
1611
1612     // The core events for each slider are handled so we can expose a single
1613     // event for when the event happens on either slider
1614     minSlider.subscribe("change", this._handleMinChange, minSlider, this);
1615     minSlider.subscribe("slideStart", this._handleSlideStart, minSlider, this);
1616     minSlider.subscribe("slideEnd", this._handleSlideEnd, minSlider, this);
1617
1618     maxSlider.subscribe("change", this._handleMaxChange, maxSlider, this);
1619     maxSlider.subscribe("slideStart", this._handleSlideStart, maxSlider, this);
1620     maxSlider.subscribe("slideEnd", this._handleSlideEnd, maxSlider, this);
1621
1622     /**
1623      * Event that fires when the slider is finished setting up
1624      * @event ready
1625      * @param {DualSlider} dualslider the DualSlider instance
1626      */
1627     this.createEvent("ready", this);
1628
1629     /**
1630      * Event that fires when either the min or max value changes
1631      * @event change
1632      * @param {DualSlider} dualslider the DualSlider instance
1633      */
1634     this.createEvent("change", this);
1635
1636     /**
1637      * Event that fires when one of the thumbs begins to move
1638      * @event slideStart
1639      * @param {Slider} activeSlider the moving slider
1640      */
1641     this.createEvent("slideStart", this);
1642
1643     /**
1644      * Event that fires when one of the thumbs finishes moving
1645      * @event slideEnd
1646      * @param {Slider} activeSlider the moving slider
1647      */
1648     this.createEvent("slideEnd", this);
1649
1650     // Validate initial values
1651     initVals = YAHOO.lang.isArray(initVals) ? initVals : [0,range];
1652     initVals[0] = Math.min(Math.max(parseInt(initVals[0],10)|0,0),range);
1653     initVals[1] = Math.max(Math.min(parseInt(initVals[1],10)|0,range),0);
1654     // Swap initVals if min > max
1655     if (initVals[0] > initVals[1]) {
1656         initVals.splice(0,2,initVals[1],initVals[0]);
1657     }
1658     this.minVal = initVals[0];
1659     this.maxVal = initVals[1];
1660
1661     // Set values so initial assignment when the slider thumbs are ready will
1662     // use these values
1663     this.minSlider.setValue(this.minVal,true,true,true);
1664     this.maxSlider.setValue(this.maxVal,true,true,true);
1665
1666     YAHOO.log("Setting initial values " + this.minVal + ", " + this.maxVal,"info","DualSlider");
1667 }
1668
1669 DualSlider.prototype = {
1670
1671     /**
1672      * The current value of the min thumb. <strong>read only</strong>.
1673      * @property minVal
1674      * @type int
1675      */
1676     minVal : -1,
1677
1678     /**
1679      * The current value of the max thumb. <strong>read only</strong>.
1680      * @property maxVal
1681      * @type int
1682      */
1683     maxVal : -1,
1684
1685     /**
1686      * Pixel distance to maintain between thumbs.
1687      * @property minRange
1688      * @type int
1689      * @default 0
1690      */
1691     minRange : 0,
1692
1693     /**
1694      * Executed when one of the sliders fires the slideStart event
1695      * @method _handleSlideStart
1696      * @private
1697      */
1698     _handleSlideStart: function(data, slider) {
1699         this.fireEvent("slideStart", slider);
1700     },
1701
1702     /**
1703      * Executed when one of the sliders fires the slideEnd event
1704      * @method _handleSlideEnd
1705      * @private
1706      */
1707     _handleSlideEnd: function(data, slider) {
1708         this.fireEvent("slideEnd", slider);
1709     },
1710
1711     /**
1712      * Overrides the onDrag method for both sliders
1713      * @method _handleDrag
1714      * @private
1715      */
1716     _handleDrag: function(e) {
1717         YW.Slider.prototype.onDrag.call(this.activeSlider, e);
1718     },
1719
1720     /**
1721      * Executed when the min slider fires the change event
1722      * @method _handleMinChange
1723      * @private
1724      */
1725     _handleMinChange: function() {
1726         this.activeSlider = this.minSlider;
1727         this.updateValue();
1728     },
1729
1730     /**
1731      * Executed when the max slider fires the change event
1732      * @method _handleMaxChange
1733      * @private
1734      */
1735     _handleMaxChange: function() {
1736         this.activeSlider = this.maxSlider;
1737         this.updateValue();
1738     },
1739
1740     /**
1741      * Set up the listeners for the keydown and keypress events.
1742      *
1743      * @method _bindKeyEvents
1744      * @protected
1745      */
1746     _bindKeyEvents : function (slider) {
1747         Event.on(slider.id,'keydown', this._handleKeyDown, this,true);
1748         Event.on(slider.id,'keypress',this._handleKeyPress,this,true);
1749     },
1750
1751     /**
1752      * Delegate event handling to the active Slider.  See Slider.handleKeyDown.
1753      *
1754      * @method _handleKeyDown
1755      * @param e {Event} the mousedown DOM event
1756      * @protected
1757      */
1758     _handleKeyDown : function (e) {
1759         this.activeSlider.handleKeyDown.apply(this.activeSlider,arguments);
1760     },
1761
1762     /**
1763      * Delegate event handling to the active Slider.  See Slider.handleKeyPress.
1764      *
1765      * @method _handleKeyPress
1766      * @param e {Event} the mousedown DOM event
1767      * @protected
1768      */
1769     _handleKeyPress : function (e) {
1770         this.activeSlider.handleKeyPress.apply(this.activeSlider,arguments);
1771     },
1772
1773     /**
1774      * Sets the min and max thumbs to new values.
1775      * @method setValues
1776      * @param min {int} Pixel offset to assign to the min thumb
1777      * @param max {int} Pixel offset to assign to the max thumb
1778      * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
1779      * Default false
1780      * @param force {boolean} (optional) ignore the locked setting and set
1781      * value anyway. Default false
1782      * @param silent {boolean} (optional) Set to true to skip firing change
1783      * events.  Default false
1784      */
1785     setValues : function (min, max, skipAnim, force, silent) {
1786         var mins = this.minSlider,
1787             maxs = this.maxSlider,
1788             mint = mins.thumb,
1789             maxt = maxs.thumb,
1790             self = this,
1791             done = { min : false, max : false };
1792
1793         // Clear constraints to prevent animated thumbs from prematurely
1794         // stopping when hitting a constraint that's moving with the other
1795         // thumb.
1796         if (mint._isHoriz) {
1797             mint.setXConstraint(mint.leftConstraint,maxt.rightConstraint,mint.tickSize);
1798             maxt.setXConstraint(mint.leftConstraint,maxt.rightConstraint,maxt.tickSize);
1799         } else {
1800             mint.setYConstraint(mint.topConstraint,maxt.bottomConstraint,mint.tickSize);
1801             maxt.setYConstraint(mint.topConstraint,maxt.bottomConstraint,maxt.tickSize);
1802         }
1803
1804         // Set up one-time slideEnd callbacks to call updateValue when both
1805         // thumbs have been set
1806         this._oneTimeCallback(mins,'slideEnd',function () {
1807             done.min = true;
1808             if (done.max) {
1809                 self.updateValue(silent);
1810                 // Clean the slider's slideEnd events on a timeout since this
1811                 // will be executed from inside the event's fire
1812                 setTimeout(function () {
1813                     self._cleanEvent(mins,'slideEnd');
1814                     self._cleanEvent(maxs,'slideEnd');
1815                 },0);
1816             }
1817         });
1818
1819         this._oneTimeCallback(maxs,'slideEnd',function () {
1820             done.max = true;
1821             if (done.min) {
1822                 self.updateValue(silent);
1823                 // Clean both sliders' slideEnd events on a timeout since this
1824                 // will be executed from inside one of the event's fire
1825                 setTimeout(function () {
1826                     self._cleanEvent(mins,'slideEnd');
1827                     self._cleanEvent(maxs,'slideEnd');
1828                 },0);
1829             }
1830         });
1831
1832         // Must emit Slider slideEnd event to propagate to updateValue
1833         mins.setValue(min,skipAnim,force,false);
1834         maxs.setValue(max,skipAnim,force,false);
1835     },
1836
1837     /**
1838      * Set the min thumb position to a new value.
1839      * @method setMinValue
1840      * @param min {int} Pixel offset for min thumb
1841      * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
1842      * Default false
1843      * @param force {boolean} (optional) ignore the locked setting and set
1844      * value anyway. Default false
1845      * @param silent {boolean} (optional) Set to true to skip firing change
1846      * events.  Default false
1847      */
1848     setMinValue : function (min, skipAnim, force, silent) {
1849         var mins = this.minSlider,
1850             self = this;
1851
1852         this.activeSlider = mins;
1853
1854         // Use a one-time event callback to delay the updateValue call
1855         // until after the slide operation is done
1856         self = this;
1857         this._oneTimeCallback(mins,'slideEnd',function () {
1858             self.updateValue(silent);
1859             // Clean the slideEnd event on a timeout since this
1860             // will be executed from inside the event's fire
1861             setTimeout(function () { self._cleanEvent(mins,'slideEnd'); }, 0);
1862         });
1863
1864         mins.setValue(min, skipAnim, force);
1865     },
1866
1867     /**
1868      * Set the max thumb position to a new value.
1869      * @method setMaxValue
1870      * @param max {int} Pixel offset for max thumb
1871      * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
1872      * Default false
1873      * @param force {boolean} (optional) ignore the locked setting and set
1874      * value anyway. Default false
1875      * @param silent {boolean} (optional) Set to true to skip firing change
1876      * events.  Default false
1877      */
1878     setMaxValue : function (max, skipAnim, force, silent) {
1879         var maxs = this.maxSlider,
1880             self = this;
1881
1882         this.activeSlider = maxs;
1883
1884         // Use a one-time event callback to delay the updateValue call
1885         // until after the slide operation is done
1886         this._oneTimeCallback(maxs,'slideEnd',function () {
1887             self.updateValue(silent);
1888             // Clean the slideEnd event on a timeout since this
1889             // will be executed from inside the event's fire
1890             setTimeout(function () { self._cleanEvent(maxs,'slideEnd'); }, 0);
1891         });
1892
1893         maxs.setValue(max, skipAnim, force);
1894     },
1895
1896     /**
1897      * Executed when one of the sliders is moved
1898      * @method updateValue
1899      * @param silent {boolean} (optional) Set to true to skip firing change
1900      * events.  Default false
1901      * @private
1902      */
1903     updateValue: function(silent) {
1904         var min     = this.minSlider.getValue(),
1905             max     = this.maxSlider.getValue(),
1906             changed = false,
1907             mint,maxt,dim,minConstraint,maxConstraint,thumbInnerWidth;
1908
1909         if (min != this.minVal || max != this.maxVal) {
1910             changed = true;
1911
1912             mint = this.minSlider.thumb;
1913             maxt = this.maxSlider.thumb;
1914             dim  = this.isHoriz ? 'x' : 'y';
1915
1916             thumbInnerWidth = this.minSlider.thumbCenterPoint[dim] +
1917                               this.maxSlider.thumbCenterPoint[dim];
1918
1919             // Establish barriers within the respective other thumb's edge, less
1920             // the minRange.  Limit to the Slider's range in the case of
1921             // negative minRanges.
1922             minConstraint = Math.max(max-thumbInnerWidth-this.minRange,0);
1923             maxConstraint = Math.min(-min-thumbInnerWidth-this.minRange,0);
1924
1925             if (this.isHoriz) {
1926                 minConstraint = Math.min(minConstraint,maxt.rightConstraint);
1927
1928                 mint.setXConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
1929
1930                 maxt.setXConstraint(maxConstraint,maxt.rightConstraint, maxt.tickSize);
1931             } else {
1932                 minConstraint = Math.min(minConstraint,maxt.bottomConstraint);
1933                 mint.setYConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
1934
1935                 maxt.setYConstraint(maxConstraint,maxt.bottomConstraint, maxt.tickSize);
1936             }
1937         }
1938
1939         this.minVal = min;
1940         this.maxVal = max;
1941
1942         if (changed && !silent) {
1943             this.fireEvent("change", this);
1944         }
1945     },
1946
1947     /**
1948      * A background click will move the slider thumb nearest to the click.
1949      * Override if you need different behavior.
1950      * @method selectActiveSlider
1951      * @param e {Event} the mousedown event
1952      * @private
1953      */
1954     selectActiveSlider: function(e) {
1955         var min = this.minSlider,
1956             max = this.maxSlider,
1957             minLocked = min.isLocked() || !min.backgroundEnabled,
1958             maxLocked = max.isLocked() || !min.backgroundEnabled,
1959             Ev  = YAHOO.util.Event,
1960             d;
1961
1962         if (minLocked || maxLocked) {
1963             this.activeSlider = minLocked ? max : min;
1964         } else {
1965             if (this.isHoriz) {
1966                 d = Ev.getPageX(e)-min.thumb.initPageX-min.thumbCenterPoint.x;
1967             } else {
1968                 d = Ev.getPageY(e)-min.thumb.initPageY-min.thumbCenterPoint.y;
1969             }
1970
1971             this.activeSlider = d*2 > max.getValue()+min.getValue() ? max : min;
1972         }
1973     },
1974
1975     /**
1976      * Delegates the onMouseDown to the appropriate Slider
1977      *
1978      * @method _handleMouseDown
1979      * @param e {Event} mouseup event
1980      * @protected
1981      */
1982     _handleMouseDown: function(e) {
1983         if (!e._handled && !this.minSlider._sliding && !this.maxSlider._sliding) {
1984             e._handled = true;
1985             this.selectActiveSlider(e);
1986             return YW.Slider.prototype.onMouseDown.call(this.activeSlider, e);
1987         } else {
1988             return false;
1989         }
1990     },
1991
1992     /**
1993      * Delegates the onMouseUp to the active Slider
1994      *
1995      * @method _handleMouseUp
1996      * @param e {Event} mouseup event
1997      * @protected
1998      */
1999     _handleMouseUp : function (e) {
2000         YW.Slider.prototype.onMouseUp.apply(
2001             this.activeSlider, arguments);
2002     },
2003
2004     /**
2005      * Schedule an event callback that will execute once, then unsubscribe
2006      * itself.
2007      * @method _oneTimeCallback
2008      * @param o {EventProvider} Object to attach the event to
2009      * @param evt {string} Name of the event
2010      * @param fn {Function} function to execute once
2011      * @private
2012      */
2013     _oneTimeCallback : function (o,evt,fn) {
2014         var sub = function () {
2015             // Unsubscribe myself
2016             o.unsubscribe(evt, sub);
2017             // Pass the event handler arguments to the one time callback
2018             fn.apply({},arguments);
2019         };
2020         o.subscribe(evt,sub);
2021     },
2022
2023     /**
2024      * Clean up the slideEnd event subscribers array, since each one-time
2025      * callback will be replaced in the event's subscribers property with
2026      * null.  This will cause memory bloat and loss of performance.
2027      * @method _cleanEvent
2028      * @param o {EventProvider} object housing the CustomEvent
2029      * @param evt {string} name of the CustomEvent
2030      * @private
2031      */
2032     _cleanEvent : function (o,evt) {
2033         var ce,i,len,j,subs,newSubs;
2034
2035         if (o.__yui_events && o.events[evt]) {
2036             for (i = o.__yui_events.length; i >= 0; --i) {
2037                 if (o.__yui_events[i].type === evt) {
2038                     ce = o.__yui_events[i];
2039                     break;
2040                 }
2041             }
2042             if (ce) {
2043                 subs    = ce.subscribers;
2044                 newSubs = [];
2045                 j = 0;
2046                 for (i = 0, len = subs.length; i < len; ++i) {
2047                     if (subs[i]) {
2048                         newSubs[j++] = subs[i];
2049                     }
2050                 }
2051                 ce.subscribers = newSubs;
2052             }
2053         }
2054     }
2055
2056 };
2057
2058 YAHOO.lang.augmentProto(DualSlider, YAHOO.util.EventProvider);
2059
2060
2061 /**
2062  * Factory method for creating a horizontal dual-thumb slider
2063  * @for YAHOO.widget.Slider
2064  * @method YAHOO.widget.Slider.getHorizDualSlider
2065  * @static
2066  * @param {String} bg the id of the slider's background element
2067  * @param {String} minthumb the id of the min thumb
2068  * @param {String} maxthumb the id of the thumb thumb
2069  * @param {int} range the number of pixels the thumbs can move within
2070  * @param {int} iTickSize (optional) the element should move this many pixels
2071  * at a time
2072  * @param {Array}  initVals (optional) [min,max] Initial thumb placement
2073  * @return {DualSlider} a horizontal dual-thumb slider control
2074  */
2075 YW.Slider.getHorizDualSlider =
2076     function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
2077         var mint = new YW.SliderThumb(minthumb, bg, 0, range, 0, 0, iTickSize),
2078             maxt = new YW.SliderThumb(maxthumb, bg, 0, range, 0, 0, iTickSize);
2079
2080         return new DualSlider(
2081                     new YW.Slider(bg, bg, mint, "horiz"),
2082                     new YW.Slider(bg, bg, maxt, "horiz"),
2083                     range, initVals);
2084 };
2085
2086 /**
2087  * Factory method for creating a vertical dual-thumb slider.
2088  * @for YAHOO.widget.Slider
2089  * @method YAHOO.widget.Slider.getVertDualSlider
2090  * @static
2091  * @param {String} bg the id of the slider's background element
2092  * @param {String} minthumb the id of the min thumb
2093  * @param {String} maxthumb the id of the thumb thumb
2094  * @param {int} range the number of pixels the thumbs can move within
2095  * @param {int} iTickSize (optional) the element should move this many pixels
2096  * at a time
2097  * @param {Array}  initVals (optional) [min,max] Initial thumb placement
2098  * @return {DualSlider} a vertical dual-thumb slider control
2099  */
2100 YW.Slider.getVertDualSlider =
2101     function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
2102         var mint = new YW.SliderThumb(minthumb, bg, 0, 0, 0, range, iTickSize),
2103             maxt = new YW.SliderThumb(maxthumb, bg, 0, 0, 0, range, iTickSize);
2104
2105         return new YW.DualSlider(
2106                     new YW.Slider(bg, bg, mint, "vert"),
2107                     new YW.Slider(bg, bg, maxt, "vert"),
2108                     range, initVals);
2109 };
2110
2111 YAHOO.widget.DualSlider = DualSlider;
2112
2113 })();
2114 YAHOO.register("slider", YAHOO.widget.Slider, {version: "2.8.0r4", build: "2449"});