/****************************************************************
* Slider
*
* Slider000118
* by Christiaan Hofman, January 2000
*
* You may use or modify this code provided that this copyright notice
* appears on all copies.
*
* Constructor:
* var slider = new Slider( [name] );
* (default: name = "slider0", "slider1", ...)
*
* Creating Methods
* slider.writeSlider();
* slider.placeSlider( [imgName, layer] );
* (default: imgName = name+"RailImg")
*
* Control Methods:
* slider.getValue();
* slider.setValue( [value] );
*
* Event Handlers:
* slider.onmouseover( e, slider );
* slider.onmouseout( e, slider );
* slider.onmousedown( e, slider );
* slider.onmouseup( e, slider );
* slider.onslide( e, slider );
* slider.onchange( e, slider );
* slider.onclick( e, slider );
*
* Default Initial Settings:
*
* slider.leftValue = 0;
* slider.rightValue = 1;
* slider.defaultValue = 0;
* slider.offsetX = 1;
* slider.offsetY = 1;
* slider.maxSlide = 258;
* slider.buttonWidth = 40;
* slider.buttonHeight = 28;
* slider.buttonImg = "sliderbutton.gif";
* slider.buttonHiliteImg = "sliderhibutton.gif";
* slider.imgPath = "";
* slider.orientation = "h";
*
****************************************************************
* EXAMPLE:
*
*
*
*
*
*
*
* 
*
*
*
****************************************************************
*/
// Constructor
function Slider(name) {
this.leftValue = 0;
this.rightValue = 1;
this.defaultValue = 0;
this.offsetX = 1;
this.offsetY = 1;
this.maxSlide = 258;
this.buttonWidth = 40;
this.buttonHeight = 28;
this.buttonImg = "sliderbutton.gif";
this.buttonHiliteImg = "sliderhibutton.gif";
this.buttonHoverImg = null;
this.imgPath = "";
this.orientation = "h";
this.writeSlider = Slider.writeSlider;
this.placeSlider = Slider.placeSlider;
this.makeEventHandler = Slider.makeEventHandler;
this.isPrototype = Slider.isPrototype;
this.getValue = Slider.getValue;
this.setValue = Slider.setValue;
this.MouseOver = Slider.MouseOver;
this.MouseOut = Slider.MouseOut;
this.MouseDown = Slider.MouseDown;
this.MouseUp = Slider.MouseUp;
this.MouseSlide = Slider.MouseSlide;
this.onmouseover = null;
this.onmouseout = null;
this.onmousedown = null;
this.onmouseup = null;
this.onslide = null;
this.onchange = null;
this.onclick = null;
if (!window.sliders) window.sliders = new Array();
this.name = name || "slider"+window.sliders.length;
window.sliders[window.sliders.length] = this;
window.sliders[this.name] = this;
if (!window.sliderDrag) window.sliderDrag = new Object();
}
// method write the button DIV
Slider.writeSlider = function () {
var proto = this.prototype || this;
// create images for the prototype, if not already set
if (!proto.loImg) {
proto.loImg = new Image(proto.buttonWidth,proto.buttonHeight);
proto.loImg.src = proto.imgPath + proto.buttonImg;
if (proto.buttonHiliteImg) {
proto.hiImg = new Image(proto.buttonWidth,proto.buttonHeight);
proto.hiImg.src = proto.imgPath + (proto.buttonHiliteImg || proto.buttonImg);
}
if (proto.buttonHoverImg) {
proto.hoImg = new Image(proto.buttonWidth,proto.buttonHeight);
proto.hoImg.src = proto.imgPath + proto.buttonHoverImg;
}
}
// set the properties according to the prototype
if (proto != this) {
this.loImg = proto.loImg;
if (proto.hiImg) this.hiImg = proto.hiImg;
if (proto.hoImg) this.hoImg = proto.hoImg;
this.orientation = proto.orientation;
this.maxSlide = proto.maxSlide;
}
// style for the slider button
var style = '';
// html for the button div
var content = '';
// write the button style and content in the document
if (document.getElementById || document.layers || document.all) {
document.writeln(style);
document.writeln(content);
}
// set button properties and mouse event handlers
if (document.layers) {
// NS4 code
this.button = document.layers[this.name+"Button"];
this.button.img = this.button.document.images[0];
this.button.clip.width = proto.buttonWidth;
this.button.clip.height = proto.buttonHeight;
this.button.captureEvents(Event.MOUSEOVER|Event.MOUSEDOWN|Event.MOUSEOUT);
this.button.onmousedown = this.MouseDown;
this.button.onmouseout = this.MouseOut;
this.button.onmouseover = this.MouseOver;
} else if (document.all) {
// IE code
this.button = document.all[this.name+"Button"];
this.button.img = document.all[this.name+"ButtonImg"];
this.button.style.pixelWidth = proto.buttonWidth;
this.button.style.pixelHeight = proto.buttonHeight;
this.button.onmousedown = this.MouseDown;
this.button.onmouseout = this.MouseOut;
this.button.onmouseover = this.MouseOver;
} else if (document.getElementById) {
// W3DOM code
this.button = document.getElementById(this.name+"Button");
this.button.img = document.getElementById(this.name+"ButtonImg");
this.button.style.width = proto.buttonWidth + 'px';
this.button.style.height = proto.buttonHeight + 'px';
this.button.addEventListener("mousedown",this.MouseDown,false);
this.button.addEventListener("mouseout",this.MouseOut,false);
this.button.addEventListener("mouseover",this.MouseOver,false);
}
// set event handlers as functions
this.onmouseover = this.makeEventHandler(this.onmouseover);
this.onmouseout = this.makeEventHandler(this.onmouseout);
this.onmousedown = this.makeEventHandler(this.onmousedown);
this.onmouseup = this.makeEventHandler(this.onmouseup);
this.onslide = this.makeEventHandler(this.onslide);
this.onchange = this.makeEventHandler(this.onchange);
this.onclick = this.makeEventHandler(this.onclick);
// tell button who we are
this.button.slider = this;
// from now on button refers to the style object in IE and W3DOM
if (document.all || document.getElementById) this.button = this.button.style;
}
// method to put the slider button in place
Slider.placeSlider = function (imgName,layer) {
var proto = this.prototype || this;
// for NS4 refer to document of layer containing slider rail
var doc = (document.layers && layer)? ((typeof(layer) == 'string')? document.layers[layer].document : layer.document) : document;
// set name or default name
imgName = imgName || this.name+'RailImg';
// find the rail image
this.rail = (typeof(imgName) == 'string')? doc.images[imgName] : imgName;
// offset w.r.t rail
var x = proto.offsetX;
var y = proto.offsetY;
// add global position of rail and parents in global document to the offset
if (this.rail.offsetParent) {
var parent = this.rail;
while (parent) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
// Fix for IE 5 for Mac
if (navigator.userAgent.indexOf("MSIE")+1 && navigator.userAgent.indexOf("Mac")+1) {
x += parseInt(document.body.currentStyle.marginLeft);
y += parseInt(document.body.currentStyle.marginTop);
}
} else {
x += (typeof(this.rail.pageX) == 'number')? this.rail.pageX : this.rail.x;
y += (typeof(this.rail.pageY) == 'number')? this.rail.pageY : this.rail.y;
if (layer && document.layers) {
x += layer.pageX;
y += layer.pageY;
}
}
// set position of button
if (document.layers) {
this.button.left = x;
this.button.top = y;
} else if (document.all || document.getElementById) {
this.button.left = x + 'px';
this.button.top = y + 'px';
}
// offset is remembered for later sliding
this.offset = (proto.orientation == "v")? y : x;
// put button in default position and make visible
this.setValue(this.defaultValue);
this.button.visibility = 'inherit';
}
// makes slider a prototype for all previously defined sliders
Slider.isPrototype = function () {
for (var i=0; i= this.leftValue)?
Math.min(Math.max(value,this.leftValue),this.rightValue) - this.leftValue :
Math.max(Math.min(value,this.leftValue),this.rightValue) - this.leftValue;
var pos = this.maxSlide * rangeValue / (this.rightValue-this.leftValue) + this.offset;
// move button to calculated position
if (document.layers) {
// NS4 code
if (this.orientation == "h") this.button.left = pos;
else this.button.top = pos;
} else if (document.all || document.getElementById) {
// IE and W3DOM code
if (this.orientation == "h") this.button.left = pos;
else this.button.top = pos;
}
// call slider event handler, unless ignore is true
if (this.onchange && (!ignore)) this.onchange(null);
}
// make an event handler, ensuring that it is a function
Slider.makeEventHandler = function (f) {
return (typeof(f) == 'string')? new Function('e',f) : ((typeof(f) == 'function')? f : null);
}
// return a value as a string with a fixed number of decimals
function toDecimals(val,n) {
if (isNaN(n)) return val;
for (var m=0; mn; m--) val *= 0.1;
val = Math.round(val);
if (val < 0) {
val = -val;
var sgn = "-";
} else {
var sgn = "";
}
var valstr = val.toString();
if (n>0) {
while (valstr.length<=n) valstr = "0"+valstr;
var len = valstr.length;
valstr = valstr.substring(0,len-n) +"."+ valstr.substring(len-n,len);
} else if (n<0) {
for (m=0; m>n; m--) valstr = valstr+"0";
}
return sgn+valstr;
}