colormatch/trunk/slider.js

/*----------------------------------------------------------------------------\
|                                Slider 1.0                                   |
|-----------------------------------------------------------------------------|
|                         Created by Erik Arvidsson                           |
|                  (http://webfx.eae.net/contact.html#erik)                   |
|                      For WebFX (http://webfx.eae.net/)                      |
|-----------------------------------------------------------------------------|
| A slider control that degrades to an input control for non supported        |
| browsers.                                                                   |
|-----------------------------------------------------------------------------|
|                  Copyright (c) 1999 - 2002 Erik Arvidsson                   |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including  but not limited  to the warranties of  merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or  copyright  holders be  liable for any claim,  damages or  other |
| liability, whether  in an  action of  contract, tort  or otherwise, arising |
| from,  out of  or in  connection with  the software or  the  use  or  other |
| dealings in the software.                                                   |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This  software is  available under the  three different licenses  mentioned |
| below.  To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
| Permits  anyone the right to use the  software in a  non-commercial context |
| free of charge.                                                             |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license           http://webfx.eae.net/commercial.html |
| Permits the  license holder the right to use  the software in a  commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of  implementations of the licensed software.                    |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper  credits are given  and the original  and modified source |
| code are included. Requires  that the final product, software derivate from |
| the original  source or any  software  utilizing a GPL  component, such  as |
| this, is also licensed under the GPL license.                               |
|-----------------------------------------------------------------------------|
| 2002-10-14 | Original version released                                      |
|-----------------------------------------------------------------------------|
| Dependencies: timer.js - an OO abstraction of timers                        |
|               range.js - provides the data model for the slider             |
|               winclassic.css or any other css file describing the look      |
|-----------------------------------------------------------------------------|
| Created 2002-10-14 | All changes are in the log above. | Updated 2002-10-14 |
\----------------------------------------------------------------------------*/


Slider.isSupported = typeof document.createElement != "undefined" &&
        typeof document.documentElement != "undefined" &&
        typeof document.documentElement.offsetWidth == "number";


function Slider(oElement, oInput, sOrientation) {

        this._orientation = sOrientation || "horizontal";
        this._range = new Range();
        this._range.setExtent(0);
        this._blockIncrement = 10;
        this._unitIncrement = 1;
        this._timer = new Timer(100);
        
        
        if (Slider.isSupported && oElement) {
                
                this.document = oElement.ownerDocument || oElement.document;
                
                this.element = oElement;
                this.element.slider = this;
                this.element.unselectable = "on";

                // add class name tag to class name
                this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;

                // create line
                this.line = this.document.createElement("DIV");
                this.line.className = "line";
                this.line.unselectable = "on";
                this.line.appendChild(this.document.createElement("DIV"));
                this.element.appendChild(this.line);
                
                // create handle
                this.handle = this.document.createElement("DIV");
                this.handle.className = "handle";
                this.handle.unselectable = "on";
                this.handle.appendChild(this.document.createElement("DIV"));
                this.handle.firstChild.appendChild(
                        this.document.createTextNode(String.fromCharCode(160)));
                this.element.appendChild(this.handle);
        }
        
        this.input = oInput;

        // events
        var oThis = this;
        this._range.onchange = function () {
                oThis.recalculate();
                if (typeof oThis.onchange == "function")
                        oThis.onchange();
        };      
        
        if (Slider.isSupported && oElement) {
                this.element.onfocus            = Slider.eventHandlers.onfocus;
                this.element.onblur                     = Slider.eventHandlers.onblur;
                this.element.onmousedown        = Slider.eventHandlers.onmousedown;
                this.element.onmouseover        = Slider.eventHandlers.onmouseover;
                this.element.onmouseout         = Slider.eventHandlers.onmouseout;
                this.element.onkeydown          = Slider.eventHandlers.onkeydown;
                this.element.onkeypress         = Slider.eventHandlers.onkeypress;
                this.element.onmousewheel       = Slider.eventHandlers.onmousewheel;
                this.handle.onselectstart       =
                this.element.onselectstart      = function () { return false; };
                
                this._timer.ontimer = function () {
                        oThis.ontimer();
                };
                
                // extra recalculate for ie
                window.setTimeout(function() {
                        oThis.recalculate();
                }, 1);
        }
        else {
                this.input.onchange = function (e) {
                        oThis.setValue(oThis.input.value);
                };
        }
}

Slider.eventHandlers = {
        
        // helpers to make events a bit easier
        getEvent:       function (e, el) {
                if (!e) {
                        if (el)
                                e = el.document.parentWindow.event;
                        else
                                e = window.event;
                }
                if (!e.srcElement) {
                        var el = e.target;
                        while (el != null && el.nodeType != 1)
                                el = el.parentNode;
                        e.srcElement = el;
                }
                if (typeof e.offsetX == "undefined") {
                        e.offsetX = e.layerX;
                        e.offsetY = e.layerY;
                }
                
                return e;
        },
        
        getDocument:    function (e) {
                if (e.target)
                        return e.target.ownerDocument;
                return e.srcElement.document;
        },
        
        getSlider:      function (e) {
                var el = e.target || e.srcElement;
                while (el != null && el.slider == null) {
                        el = el.parentNode;
                }
                if (el)         
                        return el.slider;
                return null;
        },
        
        getLine:        function (e) {
                var el = e.target || e.srcElement;
                while (el != null && el.className != "line")    {
                        el = el.parentNode;
                }                       
                return el;
        },
        
        getHandle:      function (e) {
                var el = e.target || e.srcElement;
                var re = /handle/;
                while (el != null && !re.test(el.className))    {
                        el = el.parentNode;
                }                       
                return el;
        },
        // end helpers
        
        onfocus:        function (e) {
                var s = this.slider;
                s._focused = true;
                s.handle.className = "handle hover";
        },
        
        onblur: function (e) {
                var s = this.slider
                s._focused = false;
                s.handle.className = "handle";
        },
        
        onmouseover:    function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var s = this.slider;
                if (e.srcElement == s.handle)
                        s.handle.className = "handle hover";
        },
        
        onmouseout:     function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var s = this.slider;
                if (e.srcElement == s.handle && !s._focused)
                        s.handle.className = "handle";
        },

        onmousedown:    function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var s = this.slider;
                if (s.element.focus)
                        s.element.focus();
                
                Slider._currentInstance = s;
                var doc = s.document;
                
                if (doc.addEventListener) {
                        doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
                        doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
                }
                else if (doc.attachEvent) {
                        doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
                        doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
                        doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
                        s.element.setCapture();
                }
                
                if (Slider.eventHandlers.getHandle(e)) {        // start drag
                        Slider._sliderDragData = {
                                screenX:        e.screenX,
                                screenY:        e.screenY,
                                dx:                     e.screenX - s.handle.offsetLeft,
                                dy:                     e.screenY - s.handle.offsetTop,
                                startValue:     s.getValue(),
                                slider:         s
                        };
                }
                else {
                        var lineEl = Slider.eventHandlers.getLine(e);
                        s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
                        s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
                        s._increasing = null;
                        s.ontimer();
                }
        },
        
        onmousemove:    function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                
                if (Slider._sliderDragData) {   // drag
                        var s = Slider._sliderDragData.slider;

                        var boundSize = s.getMaximum() - s.getMinimum();
                        var size, pos, reset;

                        if (s._orientation == "horizontal") {
                                size = s.element.offsetWidth - s.handle.offsetWidth;
                                pos = e.screenX - Slider._sliderDragData.dx;
                                reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
                        }
                        else {
                                size = s.element.offsetHeight - s.handle.offsetHeight;
                                pos = s.element.offsetHeight - s.handle.offsetHeight -
                                        (e.screenY - Slider._sliderDragData.dy);
                                reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
                        }
                        s.setValue(reset ? Slider._sliderDragData.startValue : 
                                                s.getMinimum() + boundSize * pos / size);
                        return false;
                }
                else {
                        var s = Slider._currentInstance;
                        if (s != null) {
                                var lineEl = Slider.eventHandlers.getLine(e);
                                s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
                                s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
                        }
                }
                
        },
        
        onmouseup:      function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var s = Slider._currentInstance;
                var doc = s.document;
                if (doc.removeEventListener) {
                        doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
                        doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
                }
                else if (doc.detachEvent) {
                        doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
                        doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
                        doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
                        s.element.releaseCapture();
                }
                
                if (Slider._sliderDragData) {   // end drag
                        Slider._sliderDragData = null;
                }
                else {
                        s._timer.stop();
                        s._increasing = null;
                }
                Slider._currentInstance = null;
        },
        
        onkeydown:      function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                //var s = Slider.eventHandlers.getSlider(e);
                var s = this.slider;
                var kc = e.keyCode;
                switch (kc) {
                        case 33:        // page up
                                s.setValue(s.getValue() + s.getBlockIncrement());
                                break;
                        case 34:        // page down
                                s.setValue(s.getValue() - s.getBlockIncrement());
                                break;
                        case 35:        // end
                                s.setValue(s.getOrientation() == "horizontal" ?
                                        s.getMaximum() :
                                        s.getMinimum());
                                break;
                        case 36:        // home
                                s.setValue(s.getOrientation() == "horizontal" ?
                                        s.getMinimum() :
                                        s.getMaximum());
                                break;
                        case 38:        // up
                        case 39:        // right
                                s.setValue(s.getValue() + s.getUnitIncrement());
                                break;
                        
                        case 37:        // left
                        case 40:        // down
                                s.setValue(s.getValue() - s.getUnitIncrement());
                                break;
                }
                
                if (kc >= 33 && kc <= 40) {
                        return false;
                }
        },
        
        onkeypress:     function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var kc = e.keyCode;
                if (kc >= 33 && kc <= 40) {
                        return false;
                }
        },
        
        onmousewheel:   function (e) {
                e = Slider.eventHandlers.getEvent(e, this);
                var s = this.slider;
                s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
                // windows inverts this on horizontal sliders. That does not
                // make sense to me
                return false;
        }
};


Slider.prototype.classNameTag = "dynamic-slider-control",
        
Slider.prototype.setValue = function (v) {
        this._range.setValue(v);
        this.input.value = this.getValue();
};

Slider.prototype.getValue = function () {
        return this._range.getValue();
};

Slider.prototype.setMinimum = function (v) {
        this._range.setMinimum(v);
        this.input.value = this.getValue();
};

Slider.prototype.getMinimum = function () {
        return this._range.getMinimum();
};

Slider.prototype.setMaximum = function (v) {
        this._range.setMaximum(v);
        this.input.value = this.getValue();
};

Slider.prototype.getMaximum = function () {
        return this._range.getMaximum();
};

Slider.prototype.setUnitIncrement = function (v) {
        this._unitIncrement = v;
};

Slider.prototype.getUnitIncrement = function () {
        return this._unitIncrement;
};

Slider.prototype.setBlockIncrement = function (v) {
        this._blockIncrement = v;
};

Slider.prototype.getBlockIncrement = function () {
        return this._blockIncrement;
};

Slider.prototype.getOrientation = function () {
        return this._orientation;
};

Slider.prototype.setOrientation = function (sOrientation) {
        if (sOrientation != this._orientation) {
                if (Slider.isSupported && this.element) {
                        // add class name tag to class name
                        this.element.className = this.element.className.replace(this._orientation,
                                                                        sOrientation);
                }
                this._orientation = sOrientation;
                this.recalculate();
                
        }
};

Slider.prototype.recalculate = function() {
        if (!Slider.isSupported || !this.element) return;
        
        var w = this.element.offsetWidth;
        var h = this.element.offsetHeight;
        var hw = this.handle.offsetWidth;
        var hh = this.handle.offsetHeight;
        var lw = this.line.offsetWidth;
        var lh = this.line.offsetHeight;
                
        // this assumes a border-box layout
        
        if (this._orientation == "horizontal") {
                this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
                        (this.getMaximum() - this.getMinimum()) + "px";
                this.handle.style.top = (h - hh) / 2 + "px";
                
                this.line.style.top = (h - lh) / 2 + "px";
                this.line.style.left = hw / 2 + "px";
                //this.line.style.right = hw / 2 + "px";
                this.line.style.width = Math.max(0, w - hw - 2)+ "px";
                this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
        }
        else {
                this.handle.style.left = (w - hw) / 2 + "px";
                this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
                        (this.getMaximum() - this.getMinimum()) + "px";
                        
                this.line.style.left = (w - lw) / 2 + "px";
                this.line.style.top = hh / 2 + "px";
                this.line.style.height = Math.max(0, h - hh - 2) + "px";        //hard coded border width
                //this.line.style.bottom = hh / 2 + "px";
                this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px";     //hard coded border width
        }
};

Slider.prototype.ontimer = function () {
        var hw = this.handle.offsetWidth;
        var hh = this.handle.offsetHeight;
        var hl = this.handle.offsetLeft;
        var ht = this.handle.offsetTop;
        
        if (this._orientation == "horizontal") {
                if (this._mouseX > hl + hw &&
                        (this._increasing == null || this._increasing)) {
                        this.setValue(this.getValue() + this.getBlockIncrement());
                        this._increasing = true;
                }
                else if (this._mouseX < hl &&
                        (this._increasing == null || !this._increasing)) {
                        this.setValue(this.getValue() - this.getBlockIncrement());
                        this._increasing = false;
                }
        }
        else {
                if (this._mouseY > ht + hh &&
                        (this._increasing == null || !this._increasing)) {
                        this.setValue(this.getValue() - this.getBlockIncrement());
                        this._increasing = false;
                }
                else if (this._mouseY < ht &&
                        (this._increasing == null || this._increasing)) {
                        this.setValue(this.getValue() + this.getBlockIncrement());
                        this._increasing = true;
                }
        }
        
        this._timer.start();
};
1	dpavlin	1	/*----------------------------------------------------------------------------\
2			\| Slider 1.0 \|
3			\|-----------------------------------------------------------------------------\|
4			\| Created by Erik Arvidsson \|
5			\| (http://webfx.eae.net/contact.html#erik) \|
6			\| For WebFX (http://webfx.eae.net/) \|
7			\|-----------------------------------------------------------------------------\|
8			\| A slider control that degrades to an input control for non supported \|
9			\| browsers. \|
10			\|-----------------------------------------------------------------------------\|
11			\| Copyright (c) 1999 - 2002 Erik Arvidsson \|
12			\|-----------------------------------------------------------------------------\|
13			\| This software is provided "as is", without warranty of any kind, express or \|
14			\| implied, including but not limited to the warranties of merchantability, \|
15			\| fitness for a particular purpose and noninfringement. In no event shall the \|
16			\| authors or copyright holders be liable for any claim, damages or other \|
17			\| liability, whether in an action of contract, tort or otherwise, arising \|
18			\| from, out of or in connection with the software or the use or other \|
19			\| dealings in the software. \|
20			\| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \|
21			\| This software is available under the three different licenses mentioned \|
22			\| below. To use this software you must chose, and qualify, for one of those. \|
23			\| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \|
24			\| The WebFX Non-Commercial License http://webfx.eae.net/license.html \|
25			\| Permits anyone the right to use the software in a non-commercial context \|
26			\| free of charge. \|
27			\| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \|
28			\| The WebFX Commercial license http://webfx.eae.net/commercial.html \|
29			\| Permits the license holder the right to use the software in a commercial \|
30			\| context. Such license must be specifically obtained, however it's valid for \|
31			\| any number of implementations of the licensed software. \|
32			\| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \|
33			\| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt \|
34			\| Permits anyone the right to use and modify the software without limitations \|
35			\| as long as proper credits are given and the original and modified source \|
36			\| code are included. Requires that the final product, software derivate from \|
37			\| the original source or any software utilizing a GPL component, such as \|
38			\| this, is also licensed under the GPL license. \|
39			\|-----------------------------------------------------------------------------\|
40			\| 2002-10-14 \| Original version released \|
41			\|-----------------------------------------------------------------------------\|
42			\| Dependencies: timer.js - an OO abstraction of timers \|
43			\| range.js - provides the data model for the slider \|
44			\| winclassic.css or any other css file describing the look \|
45			\|-----------------------------------------------------------------------------\|
46			\| Created 2002-10-14 \| All changes are in the log above. \| Updated 2002-10-14 \|
47			\----------------------------------------------------------------------------*/
48
49
50			Slider.isSupported = typeof document.createElement != "undefined" &&
51			typeof document.documentElement != "undefined" &&
52			typeof document.documentElement.offsetWidth == "number";
53
54
55			function Slider(oElement, oInput, sOrientation) {
56
57			this._orientation = sOrientation \|\| "horizontal";
58			this._range = new Range();
59			this._range.setExtent(0);
60			this._blockIncrement = 10;
61			this._unitIncrement = 1;
62			this._timer = new Timer(100);
63
64
65			if (Slider.isSupported && oElement) {
66
67			this.document = oElement.ownerDocument \|\| oElement.document;
68
69			this.element = oElement;
70			this.element.slider = this;
71			this.element.unselectable = "on";
72
73			// add class name tag to class name
74			this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
75
76			// create line
77			this.line = this.document.createElement("DIV");
78			this.line.className = "line";
79			this.line.unselectable = "on";
80			this.line.appendChild(this.document.createElement("DIV"));
81			this.element.appendChild(this.line);
82
83			// create handle
84			this.handle = this.document.createElement("DIV");
85			this.handle.className = "handle";
86			this.handle.unselectable = "on";
87			this.handle.appendChild(this.document.createElement("DIV"));
88			this.handle.firstChild.appendChild(
89			this.document.createTextNode(String.fromCharCode(160)));
90			this.element.appendChild(this.handle);
91			}
92
93			this.input = oInput;
94
95			// events
96			var oThis = this;
97			this._range.onchange = function () {
98			oThis.recalculate();
99			if (typeof oThis.onchange == "function")
100			oThis.onchange();
101			};
102
103			if (Slider.isSupported && oElement) {
104			this.element.onfocus = Slider.eventHandlers.onfocus;
105			this.element.onblur = Slider.eventHandlers.onblur;
106			this.element.onmousedown = Slider.eventHandlers.onmousedown;
107			this.element.onmouseover = Slider.eventHandlers.onmouseover;
108			this.element.onmouseout = Slider.eventHandlers.onmouseout;
109			this.element.onkeydown = Slider.eventHandlers.onkeydown;
110			this.element.onkeypress = Slider.eventHandlers.onkeypress;
111			this.element.onmousewheel = Slider.eventHandlers.onmousewheel;
112			this.handle.onselectstart =
113			this.element.onselectstart = function () { return false; };
114
115			this._timer.ontimer = function () {
116			oThis.ontimer();
117			};
118
119			// extra recalculate for ie
120			window.setTimeout(function() {
121			oThis.recalculate();
122			}, 1);
123			}
124			else {
125			this.input.onchange = function (e) {
126			oThis.setValue(oThis.input.value);
127			};
128			}
129			}
130
131			Slider.eventHandlers = {
132
133			// helpers to make events a bit easier
134			getEvent: function (e, el) {
135			if (!e) {
136			if (el)
137			e = el.document.parentWindow.event;
138			else
139			e = window.event;
140			}
141			if (!e.srcElement) {
142			var el = e.target;
143			while (el != null && el.nodeType != 1)
144			el = el.parentNode;
145			e.srcElement = el;
146			}
147			if (typeof e.offsetX == "undefined") {
148			e.offsetX = e.layerX;
149			e.offsetY = e.layerY;
150			}
151
152			return e;
153			},
154
155			getDocument: function (e) {
156			if (e.target)
157			return e.target.ownerDocument;
158			return e.srcElement.document;
159			},
160
161			getSlider: function (e) {
162			var el = e.target \|\| e.srcElement;
163			while (el != null && el.slider == null) {
164			el = el.parentNode;
165			}
166			if (el)
167			return el.slider;
168			return null;
169			},
170
171			getLine: function (e) {
172			var el = e.target \|\| e.srcElement;
173			while (el != null && el.className != "line") {
174			el = el.parentNode;
175			}
176			return el;
177			},
178
179			getHandle: function (e) {
180			var el = e.target \|\| e.srcElement;
181			var re = /handle/;
182			while (el != null && !re.test(el.className)) {
183			el = el.parentNode;
184			}
185			return el;
186			},
187			// end helpers
188
189			onfocus: function (e) {
190			var s = this.slider;
191			s._focused = true;
192			s.handle.className = "handle hover";
193			},
194
195			onblur: function (e) {
196			var s = this.slider
197			s._focused = false;
198			s.handle.className = "handle";
199			},
200
201			onmouseover: function (e) {
202			e = Slider.eventHandlers.getEvent(e, this);
203			var s = this.slider;
204			if (e.srcElement == s.handle)
205			s.handle.className = "handle hover";
206			},
207
208			onmouseout: function (e) {
209			e = Slider.eventHandlers.getEvent(e, this);
210			var s = this.slider;
211			if (e.srcElement == s.handle && !s._focused)
212			s.handle.className = "handle";
213			},
214
215			onmousedown: function (e) {
216			e = Slider.eventHandlers.getEvent(e, this);
217			var s = this.slider;
218			if (s.element.focus)
219			s.element.focus();
220
221			Slider._currentInstance = s;
222			var doc = s.document;
223
224			if (doc.addEventListener) {
225			doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
226			doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
227			}
228			else if (doc.attachEvent) {
229			doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
230			doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
231			doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
232			s.element.setCapture();
233			}
234
235			if (Slider.eventHandlers.getHandle(e)) { // start drag
236			Slider._sliderDragData = {
237			screenX: e.screenX,
238			screenY: e.screenY,
239			dx: e.screenX - s.handle.offsetLeft,
240			dy: e.screenY - s.handle.offsetTop,
241			startValue: s.getValue(),
242			slider: s
243			};
244			}
245			else {
246			var lineEl = Slider.eventHandlers.getLine(e);
247			s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
248			s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
249			s._increasing = null;
250			s.ontimer();
251			}
252			},
253
254			onmousemove: function (e) {
255			e = Slider.eventHandlers.getEvent(e, this);
256
257			if (Slider._sliderDragData) { // drag
258			var s = Slider._sliderDragData.slider;
259
260			var boundSize = s.getMaximum() - s.getMinimum();
261			var size, pos, reset;
262
263			if (s._orientation == "horizontal") {
264			size = s.element.offsetWidth - s.handle.offsetWidth;
265			pos = e.screenX - Slider._sliderDragData.dx;
266			reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
267			}
268			else {
269			size = s.element.offsetHeight - s.handle.offsetHeight;
270			pos = s.element.offsetHeight - s.handle.offsetHeight -
271			(e.screenY - Slider._sliderDragData.dy);
272			reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
273			}
274			s.setValue(reset ? Slider._sliderDragData.startValue :
275			s.getMinimum() + boundSize * pos / size);
276			return false;
277			}
278			else {
279			var s = Slider._currentInstance;
280			if (s != null) {
281			var lineEl = Slider.eventHandlers.getLine(e);
282			s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
283			s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
284			}
285			}
286
287			},
288
289			onmouseup: function (e) {
290			e = Slider.eventHandlers.getEvent(e, this);
291			var s = Slider._currentInstance;
292			var doc = s.document;
293			if (doc.removeEventListener) {
294			doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
295			doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
296			}
297			else if (doc.detachEvent) {
298			doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
299			doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
300			doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
301			s.element.releaseCapture();
302			}
303
304			if (Slider._sliderDragData) { // end drag
305			Slider._sliderDragData = null;
306			}
307			else {
308			s._timer.stop();
309			s._increasing = null;
310			}
311			Slider._currentInstance = null;
312			},
313
314			onkeydown: function (e) {
315			e = Slider.eventHandlers.getEvent(e, this);
316			//var s = Slider.eventHandlers.getSlider(e);
317			var s = this.slider;
318			var kc = e.keyCode;
319			switch (kc) {
320			case 33: // page up
321			s.setValue(s.getValue() + s.getBlockIncrement());
322			break;
323			case 34: // page down
324			s.setValue(s.getValue() - s.getBlockIncrement());
325			break;
326			case 35: // end
327			s.setValue(s.getOrientation() == "horizontal" ?
328			s.getMaximum() :
329			s.getMinimum());
330			break;
331			case 36: // home
332			s.setValue(s.getOrientation() == "horizontal" ?
333			s.getMinimum() :
334			s.getMaximum());
335			break;
336			case 38: // up
337			case 39: // right
338			s.setValue(s.getValue() + s.getUnitIncrement());
339			break;
340
341			case 37: // left
342			case 40: // down
343			s.setValue(s.getValue() - s.getUnitIncrement());
344			break;
345			}
346
347			if (kc >= 33 && kc <= 40) {
348			return false;
349			}
350			},
351
352			onkeypress: function (e) {
353			e = Slider.eventHandlers.getEvent(e, this);
354			var kc = e.keyCode;
355			if (kc >= 33 && kc <= 40) {
356			return false;
357			}
358			},
359
360			onmousewheel: function (e) {
361			e = Slider.eventHandlers.getEvent(e, this);
362			var s = this.slider;
363			s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
364			// windows inverts this on horizontal sliders. That does not
365			// make sense to me
366			return false;
367			}
368			};
369
370
371
372			Slider.prototype.classNameTag = "dynamic-slider-control",
373
374			Slider.prototype.setValue = function (v) {
375			this._range.setValue(v);
376			this.input.value = this.getValue();
377			};
378
379			Slider.prototype.getValue = function () {
380			return this._range.getValue();
381			};
382
383			Slider.prototype.setMinimum = function (v) {
384			this._range.setMinimum(v);
385			this.input.value = this.getValue();
386			};
387
388			Slider.prototype.getMinimum = function () {
389			return this._range.getMinimum();
390			};
391
392			Slider.prototype.setMaximum = function (v) {
393			this._range.setMaximum(v);
394			this.input.value = this.getValue();
395			};
396
397			Slider.prototype.getMaximum = function () {
398			return this._range.getMaximum();
399			};
400
401			Slider.prototype.setUnitIncrement = function (v) {
402			this._unitIncrement = v;
403			};
404
405			Slider.prototype.getUnitIncrement = function () {
406			return this._unitIncrement;
407			};
408
409			Slider.prototype.setBlockIncrement = function (v) {
410			this._blockIncrement = v;
411			};
412
413			Slider.prototype.getBlockIncrement = function () {
414			return this._blockIncrement;
415			};
416
417			Slider.prototype.getOrientation = function () {
418			return this._orientation;
419			};
420
421			Slider.prototype.setOrientation = function (sOrientation) {
422			if (sOrientation != this._orientation) {
423			if (Slider.isSupported && this.element) {
424			// add class name tag to class name
425			this.element.className = this.element.className.replace(this._orientation,
426			sOrientation);
427			}
428			this._orientation = sOrientation;
429			this.recalculate();
430
431			}
432			};
433
434			Slider.prototype.recalculate = function() {
435			if (!Slider.isSupported \|\| !this.element) return;
436
437			var w = this.element.offsetWidth;
438			var h = this.element.offsetHeight;
439			var hw = this.handle.offsetWidth;
440			var hh = this.handle.offsetHeight;
441			var lw = this.line.offsetWidth;
442			var lh = this.line.offsetHeight;
443
444			// this assumes a border-box layout
445
446			if (this._orientation == "horizontal") {
447			this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
448			(this.getMaximum() - this.getMinimum()) + "px";
449			this.handle.style.top = (h - hh) / 2 + "px";
450
451			this.line.style.top = (h - lh) / 2 + "px";
452			this.line.style.left = hw / 2 + "px";
453			//this.line.style.right = hw / 2 + "px";
454			this.line.style.width = Math.max(0, w - hw - 2)+ "px";
455			this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
456			}
457			else {
458			this.handle.style.left = (w - hw) / 2 + "px";
459			this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
460			(this.getMaximum() - this.getMinimum()) + "px";
461
462			this.line.style.left = (w - lw) / 2 + "px";
463			this.line.style.top = hh / 2 + "px";
464			this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width
465			//this.line.style.bottom = hh / 2 + "px";
466			this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width
467			}
468			};
469
470			Slider.prototype.ontimer = function () {
471			var hw = this.handle.offsetWidth;
472			var hh = this.handle.offsetHeight;
473			var hl = this.handle.offsetLeft;
474			var ht = this.handle.offsetTop;
475
476			if (this._orientation == "horizontal") {
477			if (this._mouseX > hl + hw &&
478			(this._increasing == null \|\| this._increasing)) {
479			this.setValue(this.getValue() + this.getBlockIncrement());
480			this._increasing = true;
481			}
482			else if (this._mouseX < hl &&
483			(this._increasing == null \|\| !this._increasing)) {
484			this.setValue(this.getValue() - this.getBlockIncrement());
485			this._increasing = false;
486			}
487			}
488			else {
489			if (this._mouseY > ht + hh &&
490			(this._increasing == null \|\| !this._increasing)) {
491			this.setValue(this.getValue() - this.getBlockIncrement());
492			this._increasing = false;
493			}
494			else if (this._mouseY < ht &&
495			(this._increasing == null \|\| this._increasing)) {
496			this.setValue(this.getValue() + this.getBlockIncrement());
497			this._increasing = true;
498			}
499			}
500
501			this._timer.start();
502			};