/****************************************************************
 * 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] );
 *   
 *  Defining Methods
 *    slider.writeSlider( [x, y] );
 * 
 *  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.position = "relative";
 *    slider.border = 1; 
 *    slider.railWidth = 300;
 *    slider.railHeight = 28;
 *    slider.railSize = 1;
 *    slider.captionIndent = 2;
 *    slider.buttonWidth = 40;
 *    slider.buttonHeight;
 *    slider.buttonLabel = "";
 *    slider.buttonHiliteLabel = "";
 *    slider.caption = "";
 *    slider.displaySize = 0;
 *    slider.displayIndent = 10;
 *    slider.displayTop = 0;
 *    slider.displayDecimals = NaN;
 *    slider.handleBorder = 2;
 *    slider.handleWidth = 20;
 *    slider.fontSize = 14;
 *    slider.fontWeight = "plain";
 *    slider.fontFamily = "arial,helvetica,espy,sans-serif";
 *    slider.fontColor = "#222222";
 *    slider.fontColorHilite = "#000000";
 *    slider.fontSizeCaption = 16;
 *    slider.fontWeightCaption;
 *    slider.fontFamilyCaption;
 *    slider.fontColorCaption = "#000000";
 *    slider.bgColor = "#c0c0c0";
 *    slider.liteBgColor;
 *    slider.shadeBgColor;
 *    slider.hiliteBgColor;
 *    slider.railBgColor;
 *    slider.railLiteBgColor;
 *    slider.railShadeBgColor;
 *    slider.railRuleBgColor;
 *    slider.orientation = "h";
 *    slider.valuePos = "bottom";
 *    slider.captionPos = "bottom";
 *    slider.noTable = false;
 *
 ****************************************************************
 */

function Slider(name) {
    this.leftValue = 0;
    this.rightValue = 1;
    this.defaultValue = 0;
    this.position = "relative";
    this.border = 1;
    this.railWidth = 300;
    this.railHeight = 28;
    this.railSize = 1;
    this.buttonWidth = 40;
    this.buttonHeight = NaN;
    this.buttonLabel = "";
    this.buttonHiliteLabel = "";
    this.caption = "";
    this.handleBorder = 2;
    this.handleWidth = 20;
    this.captionIndent = 2;
    this.displaySize = 0;
    this.displayIndent = 10;
    this.displayTop = 0;
    this.displayDecimals = NaN;
    this.fontFamily = "arial,helvetica,espy,sans-serif";
    this.fontSize = 14;
    this.fontWeight = "plain";
    this.fontColor = "#222222";
    this.fontColorHilite = "#000000";
    this.fontFamilyCaption = "";
    this.fontSizeCaption = 16;
    this.fontWeightCaption = "";
    this.fontColorCaption = "#000000";
    this.bgColor = "#c0c0c0";
    this.railBgColor = "";
    this.railLiteBgColor = "";
    this.railShadeBgColor = "";
    this.railRuleBgColor = "";
    this.liteBgColor = "";
    this.shadeBgColor = "";
    this.hiliteBgColor = "#cccccc";
    this.orientation = "h";
    
    this.writeSlider = Slider.writeSlider;
    this.makeEventHandler = Slider.makeEventHandler;
    this.relColor = relColor;
    this.calcWidth = Slider.calcWidth;
    this.calcHeight = Slider.calcHeight;
    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;

    this.captionPos = "bottom";
    this.valuePos = "bottom";
    this.noTables = false;

    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();
}

Slider.writeSlider = function (x,y) {
    x = x || 0;
    y = y || 0;
    var proto = this.prototype || this;
    proto.railBgColor = proto.railBgColor || proto.relColor(proto.bgColor,-15) || "#b1b1b1";
    proto.railLiteBgColor = proto.railLiteBgColor || proto.relColor(proto.railBgColor,50) || "#d9d9d9";
    proto.railShadeBgColor = proto.railShadeBgColor || proto.relColor(proto.railBgColor,-90) || "#575757";
    proto.railRuleBgColor = proto.railRuleBgColor || proto.relColor(proto.railBgColor,-100) || "#4d4d4d";
    proto.liteBgColor = proto.liteBgColor || proto.relColor(proto.bgColor,50) || "#e8e8e8";
    proto.shadeBgColor = proto.shadeBgColor || proto.relColor(proto.bgColor,-90) || "#666666";
    proto.hiliteBgColor = proto.hiliteBgColor || proto.bgColor;
    proto.fontFamilyCaption = proto.fontFamilyCaption || proto.fontFamily;
    proto.fontSizeCaption = proto.fontSizeCaption || proto.fontSize;
    proto.fontWeightCaption = proto.fontWeightCaption || proto.fontWeight;
    proto.fontColorCaption = proto.fontColorCaption || proto.fontColor;
    if (proto.orientation == "v" && (proto.valuePos == "bottom" || proto.valuePos == "top"))
        proto.valuePos = "right";
    proto.buttonWidth = proto.buttonWidth || proto.railWidth - 2 * proto.border;
    proto.buttonHeight = proto.buttonHeight || proto.railHeight - 2 * proto.border;
    proto.sliderHeight = Math.max(proto.railHeight, proto.buttonHeight + 2 * proto.border);
    proto.sliderWidth = Math.max(proto.railWidth, proto.buttonWidth + 2 * proto.border);
    this.buttonHiliteLabel = this.buttonHiliteLabel || this.buttonLabel;
    if ((this.buttonLabel.indexOf(".gif") != -1 || this.buttonLabel.indexOf(".jpg") != -1) && this.buttonLabel.toUpperCase().indexOf("<IMG") == -1) 
        this.buttonLabel = '<IMG SRC="'+ this.buttonLabel +'">';
    if ((this.buttonHiliteLabel.indexOf(".gif") != -1 || this.buttonLabel.indexOf(".jpg") != -1) && this.buttonHiliteLabel.toUpperCase().indexOf("<IMG") == -1) 
        this.buttonHiliteLabel = '<IMG SRC="'+ this.buttonHiliteLabel +'">';
    if ((this.caption.indexOf(".gif") != -1 || this.caption.indexOf(".jpg") != -1) && this.caption.toUpperCase().indexOf("<IMG") == -1) 
        this.caption = '<IMG SRC="'+ this.caption +'">';
    this.offset = proto.border;
    this.orientation = proto.orientation;
    this.bgColor = proto.bgColor;
    this.hiliteBgColor = proto.hiliteBgColor;
    if (proto.handleWidth > 0) {
        var loHandleProps = '; width:'+ proto.handleWidth +'; border-width:'+ proto.handleBorder +'; border-style:outset; padding:0; border-color:'+ proto.bgColor;
        var hiHandleProps = '; width:'+ proto.handleWidth +'; border-width:'+ proto.handleBorder +'; border-style:inset; padding:0; border-color:'+ proto.hiliteBgColor;
    } else {
        var loHandleProps = '';
        var hiHandleProps = '';
    }
    if (document.layers) {
        var fontSizeName = 'fontSize';
        var bgColorName = 'layer-background-color';
     } else {
        var fontSizeName = 'font-size';
        var bgColorName = 'background-color';
   }
    var captionProps = 'font-family:'+ proto.fontFamilyCaption +'; color:'+ proto.fontColorCaption +'; '+ fontSizeName +':'+ proto.fontSizeCaption +'; font-weight:'+ proto.fontWeightCaption;
    if (proto.orientation == "v") {
        var top = 0;
        var left = (proto.railWidth - proto.railSize)/2 - proto.border;
        var ruleWidth = proto.railSize;
        var ruleHeight = proto.railHeight - 2 * proto.border;
    } else {
        var top = (proto.railHeight - proto.railSize)/2 - proto.border;
        var left = 0;
        var ruleWidth = proto.railWidth - 2 * proto.border;
        var ruleHeight = proto.railSize;
    }

    var railStyle = '#'+this.name+'Rail {position:absolute; display:block; visibility:inherit; '+
         'left:'+ (proto.sliderWidth-proto.railWidth)/2 +'; top:'+ (proto.sliderHeight-proto.railHeight)/2 +'; '+
         'width:'+ proto.railWidth +'; height:'+ proto.railHeight +'; z-index:0; '+
         bgColorName +':'+ proto.railShadeBgColor +';}\n' +
        '#'+this.name+'RailLite {position:absolute; display:block; visibility:inherit; '+
         'left:'+ proto.border +'; top:'+ proto.border +'; '+
         'width:'+ (proto.railWidth-proto.border) +'; height:'+ (proto.railHeight-proto.border) +'; z-index:1; '+ 
         bgColorName +':'+ proto.railLiteBgColor +';}\n' +
        '#'+this.name+'RailBg {position:absolute; display:block; visibility:inherit; '+
         'left:0; top:0; width:'+ (proto.railWidth-2*proto.border) +'; height:'+ (proto.railHeight-2*proto.border) +'; '+
         ' z-index:2; '+ bgColorName +':'+ proto.railBgColor +';}\n' +
        '#'+this.name+'RailRule {visibility:inherit; position:absolute; '+
         'left:'+ left +'; top:'+ top +'; width:'+ ruleWidth +'; height:'+ ruleHeight +'; '+
         'z-index:3; '+ bgColorName +':'+ proto.railRuleBgColor +'}\n';

    var railHTML = '<DIV ID="'+this.name+'Rail">\n' +
        '  <DIV ID="'+this.name+'RailLite">\n    <DIV ID="'+this.name+'RailBg">\n' +
        '      <DIV ID="'+this.name+'RailRule"></DIV>\n    </DIV>\n  </DIV>\n</DIV>\n';

    var buttonStyle = '#'+this.name+'Button {position:absolute; display:block; visibility:inherit; '+
         'left:'+ proto.border +'; top:'+ proto.border +'; '+
         'width:'+ proto.buttonWidth +'; height:'+ proto.buttonHeight +'; z-index:4; '+ 
         bgColorName +':'+ proto.liteBgColor +';}\n' +
        '#'+this.name+'ButtonShade {position:absolute; display:block; visibility:inherit; '+
         'left:'+ proto.border +'; top:'+ proto.border +'; '+
         'width:'+ (proto.buttonWidth-proto.border) +'; height:'+ (proto.buttonHeight-proto.border) +'; '+
         'z-index:5; '+ bgColorName +':'+ proto.shadeBgColor +';}\n' +
        '#'+this.name+'LabelBg {position:absolute; display:block; visibility:inherit; '+
         'left:0; top:0; width:'+ (proto.buttonWidth-2*proto.border) +'; height:'+ (proto.buttonHeight-2*proto.border) +'; '+
         'z-index:6; '+ bgColorName +':'+ proto.bgColor +'; '+
         'font-family:' + proto.fontFamily +'; font-weight:' + proto.fontWeight + '; '+fontSizeName+':' + proto.fontSize + ';}\n' +
        '#'+this.name+'LoLabel {position:absolute; display:block; visibility:inherit; '+
         'left:0; top:0; z-index:7; color:'+ proto.fontColor + loHandleProps +';}\n' +
        '#'+this.name+'HiLabel {position:absolute; visibility:hidden; '+
         'left:0; top:0; z-index:8; color:'+ this.fontColorHilite + hiHandleProps +';}\n';

    var buttonHTML =
        '<DIV ID="'+this.name+'Button">\n  <DIV ID="'+this.name+'ButtonShade">\n' +
        '    <DIV ID="'+this.name+'LabelBg">\n' +
        '      <DIV ID="'+this.name+'LoLabel">'+ this.buttonLabel +'</DIV>\n' +
        '      <DIV ID="'+this.name+'HiLabel">'+ this.buttonHiliteLabel +'</DIV>\n    </DIV>\n  </DIV>\n</DIV>\n';

    if (proto.valuePos) {
        top = (proto.orientation == "v" || proto.valuePos == "top")?  0 : proto.sliderHeight + proto.captionIndent;
        left = (proto.orientation == "h" || proto.valuePos == "left")?  0 : proto.sliderWidth + proto.captionIndent;
        var align = (proto.valuePos == "left")? 'right' : 'left';
        var valueStyle = '#'+this.name+'LeftValue {position:absolute; display:block; visibility:inherit; '+
             'left:'+ left +'; top:'+ top +'; width:'+ this.leftValue.toString().length +'em; '+
             'z-index:0; '+ captionProps +'; text-align:'+ align +';}\n';
        align = (proto.valuePos == "right")? 'left' : 'right';
        valueStyle += '#'+this.name+'RightValue {position:absolute; display:block; visibility:inherit; '+
             'left:'+ left +'; top:'+ top +'; width:'+ this.rightValue.toString().length +'em; '+
             'z-index:0; '+ captionProps +'; text-align:'+ align +';}\n';

        var valueHTML = '<DIV ID="'+this.name+'LeftValue">\n' + this.leftValue +'</DIV>\n' +
            '<DIV ID="'+this.name+'RightValue">' + this.rightValue +'</DIV>\n';
    }

    if (proto.captionPos && this.caption) {
        top = (proto.captionPos == "top")?  0 : proto.sliderHeight + proto.captionIndent;
        var captionStyle = '#'+this.name+'Caption {position:absolute; display:block; visibility:inherit; '+
             'left:0; top:'+ top +'; z-index:0; '+ captionProps +'; text-align:center;}\n';
        var captionHTML = '<DIV ID="'+this.name+'Caption">\n<NOBR>'+ this.caption +'</NOBR></DIV>\n';
    }

    if (proto.displaySize > 0) {
        var displayStyle = '#'+this.name+'Display {position:absolute; visibility:inherit; '+
             'left:'+ (proto.sliderWidth+proto.displayIndent) +'; top:'+ proto.displayTop +'; '+
             'z-index:0; '+ captionProps +';}\n';
        var displayHTML = '<DIV ID="'+this.name+'Display">\n' +
            '<FORM NAME="'+this.name+'DisplayForm" onSubmit="this.slider.setValue(this.display.value,true); return false">' +
            '<INPUT NAME="display" TYPE="text" SIZE="'+proto.displaySize+'"></FORM>\n</DIV>\n';
    }

    var sliderStyle = '<STYLE TYPE="text/css"><!--\n' +
        '#'+this.name+'Slider {position:'+ this.position +'; display:block; visibility:hidden; '+
         'left:'+x+'; top:'+y+'; width:'+ proto.railWidth +'; height:'+ proto.sliderHeight +';}\n' + 
        railStyle + (valueStyle || '') + (captionStyle || '') + (displayStyle || '') + buttonStyle + '--></STYLE>';
    var sliderHTML = '<SPAN ID="'+this.name+'Slider">\n' + 
        railHTML + (valueHTML || '') + (captionHTML || '') + (displayHTML || '') + buttonHTML +'</SPAN>';

    if (proto.position == "relative") {
        if (this.noTable == "cell" || !this.noTable) {
            var tableHeight = proto.sliderHeight + y;
            if (this.caption && proto.captionPos != proto.valuePos)  tableHeight += proto.fontSizeCaption + 3;
            if (proto.valuePos && proto.orientation == "h")  tableHeight += proto.fontSizeCaption + 3;
            var tableWidth = proto.sliderWidth + Math.max(x,4);
            if (proto.valuePos && proto.orientation == "v")  tableWidth += 0.7 * proto.fontSizeCaption * Math.max(this.leftValue.toString().length,this.rightValue.toString().length) + 4;
            if (proto.displaySize > 0)  tableWidth += 7 * proto.displaySize + 12 + proto.displayIndent;
            sliderHTML = '<TD VALIGN="top" WIDTH="'+ tableWidth +'" HEIGHT="'+ tableHeight +'">\n'+ sliderHTML +'</TD>';
        }
        if (!this.noTable && this.noTable != "cell") {
            sliderHTML = '<TABLE CELLPADDING=0 CELLSPACING=0><TR>'+ sliderHTML +'</TR></TABLE>\n';
        }
    }

    document.writeln(sliderStyle);
    document.writeln(sliderHTML);

    if (document.layers) {
        this.sliderLayer = document.layers[this.name+"Slider"];
        this.rail = this.sliderLayer.layers[this.name+"Rail"];
        this.button = this.sliderLayer.layers[this.name+"Button"];
        this.labelBg = this.button.layers[0].layers[0];
        this.loLabel = this.labelBg.layers[0];
        this.hiLabel = this.labelBg.layers[1];
        if (proto.captionPos && this.caption)
            this.captionLayer = this.sliderLayer.document.layers[this.name+"Caption"];
        if (proto.valuePos) {
            this.leftValueLayer = this.sliderLayer.document.layers[this.name+"LeftValue"];
            this.rightValueLayer = this.sliderLayer.document.layers[this.name+"RightValue"];
        }
        
        this.sliderLayer.clip.width = proto.sliderWidth;
        this.sliderLayer.clip.height = proto.sliderHeight;
        with (this.rail) {
            clip.width = proto.railWidth;
            clip.height = proto.railHeight;
            with (layers[0]) {
                clip.width = proto.railWidth - proto.border;
                clip.height = proto.railHeight - proto.border;
                with (layers[0]) {
                    clip.width = proto.railWidth - 2 * proto.border;
                    clip.height = proto.railHeight - 2 * proto.border;
                    layers[0].clip.width = (proto.orientation == "v")? proto.railSize : proto.railWidth - 2 * proto.border;
                    layers[0].clip.height = (proto.orientation == "v")? proto.railHeight - 2 * proto.border : proto.railSize;
                }
            }
        }
        with (this.button) {
            clip.width = proto.buttonWidth;
            clip.height = proto.buttonHeight;
            with (layers[0]) {
              clip.width = proto.buttonWidth - proto.border;
              clip.height = proto.buttonHeight - proto.border;
            }
        }
        this.labelBg.clip.width = proto.buttonWidth - 2 * proto.border;
        this.labelBg.clip.height = proto.buttonHeight - 2 * proto.border;
        with (this.loLabel) {
            left = (proto.buttonWidth - document.width)/2 - proto.border;
            top = (proto.buttonHeight - document.height)/2 - proto.border;
            clip.width = document.width;
            clip.height = document.height;
        }
        with (this.hiLabel) {
            left = (proto.buttonWidth - document.width)/2 - proto.border;
            top = (proto.buttonHeight - document.height)/2 - proto.border;
            clip.width = document.width;
            clip.height = document.height;
        }
        var valueWidth = 0;
        if (proto.valuePos) {
            if (proto.orientation == "v") {
                valueWidth = Math.max(this.leftValueLayer.document.width,this.leftValueLayer.document.width) + proto.captionIndent;
                this.rightValueLayer.top = proto.sliderHeight - this.rightValueLayer.document.height;
                this.sliderLayer.clip.width += valueWidth;
                if (proto.valuePos == "left") {
                    this.rail.left += valueWidth;
                    this.button.left += valueWidth;
                    if (proto.captionPos && this.caption)  this.captionLayer.left += valueWidth;
                }
            } else {
                var valueHeight = Math.max(this.leftValueLayer.document.height,this.leftValueLayer.document.height);
                this.rightValueLayer.left = proto.sliderWidth - this.rightValueLayer.document.width;
                if (proto.valuePos == "top") {
                    this.rail.top += valueHeight;
                    this.button.top += valueHeight;
                    if (this.caption && proto.captionPos == "bottom")
                        this.captionLayer.top += valueHeight;
                }
                if (!this.caption || proto.captionPos != proto.valuePos)  this.sliderLayer.clip.height += valueHeight;
            }
        }
        if (proto.captionPos && this.caption) {
            this.sliderLayer.clip.height += this.captionLayer.document.height + proto.captionIndent;
            if (this.captionLayer.document.width != proto.sliderWidth) {
                var delta = parseInt((this.captionLayer.document.width - proto.sliderWidth)/2);
                this.captionLayer.left -= delta;
                this.sliderLayer.clip.left = Math.min(0, (proto.orientation == "v" && proto.valuePos == "left")? valueWidth-delta : -delta);
                this.sliderLayer.clip.width += Math.max(0, (proto.orientation == "v" && proto.valuePos == "right")? delta-valueWidth : delta);
            }
            if (proto.captionPos == "top" && proto.valuePos != "top") {
                this.rail.top += this.captionLayer.document.height + proto.captionIndent;
                this.button.top += this.captionLayer.document.height + proto.captionIndent;
                if (proto.valuePos) {
                    this.leftValueLayer.top += this.captionLayer.document.height + proto.captionIndent;
                    this.rightValueLayer.top += this.captionLayer.document.height + proto.captionIndent;
                }
                if (proto.orientation == "v")
                    this.offset += this.captionLayer.document.height + proto.captionIndent;
            }
        }
        if (proto.displaySize > 0) {
            this.displayLayer = this.sliderLayer.document.layers[this.name+"Display"];
            this.valueDisplay = this.displayLayer.document.forms[this.name+"DisplayForm"].display;
            this.displayLayer.document.forms[0].slider = this;
            this.sliderLayer.clip.width += proto.displayIndent + this.displayLayer.document.width;
        }
        if (proto.orientation == "h") {
            this.offset = this.rail.left + proto.border;
            this.maxSlide = this.rail.clip.width - this.button.clip.width - 2 * proto.border;
        } else {
            this.offset = this.rail.top + proto.border;
            this.maxSlide = this.rail.clip.height - this.button.clip.height - 2 * proto.border;
        }
        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) { 
        this.sliderLayer = document.all[this.name+"Slider"];
        this.rail = document.all[this.name+"Rail"];
        this.button = document.all[this.name+"Button"];
        this.labelBg = document.all[this.name+"LabelBg"];
        this.loLabel = document.all[this.name+"LoLabel"];
        this.hiLabel = document.all[this.name+"HiLabel"];
        if (proto.captionPos && this.caption)
            this.captionLayer = document.all[this.name+"Caption"];
        if (proto.valuePos) {
            this.leftValueLayer = document.all[this.name+"LeftValue"];
            this.rightValueLayer = document.all[this.name+"RightValue"];
        }
        
        document.all[this.name+"RailLite"].style.backgroundColor = proto.railLiteBgColor;
        document.all[this.name+"RailBg"].style.backgroundColor = proto.railBgColor;
        this.sliderLayer.style.pixelWidth = proto.sliderWidth;
        this.sliderLayer.style.pixelHeight = proto.sliderHeight;
        this.rail.style.pixelWidth = this.railWidth;
        this.rail.style.pixelHeight = this.railHeight;
        if (proto.orientation == "v") {
            width = proto.railSize;
            height = proto.railHeight - 2 * proto.border;
        } else {
            width = proto.railWidth - 2 * proto.border;
            height = proto.railSize;
        }
        document.all[this.name+"RailRule"].style.pixelWidth = width;
        document.all[this.name+"RailRule"].style.pixelHeight = height;
        document.all[this.name+"RailRule"].style.clip = 'rect(0 '+width+' '+height+' 0)';

        this.button.style.pixelWidth = proto.buttonWidth;
        this.button.style.pixelHeight = proto.buttonHeight;
        document.all[this.name+"ButtonShade"].style.pixelWidth = proto.buttonWidth - proto.border;
        document.all[this.name+"ButtonShade"].style.pixelHeight = proto.buttonHeight - proto.border;
        this.labelBg.style.pixelWidth = proto.buttonWidth - 2 * proto.border;
        this.labelBg.style.pixelHeight = proto.buttonHeight - 2 * proto.border;
        with (this.loLabel) {
            style.pixelWidth = offsetWidth || this.labelBg.offsetWidth;
            style.pixelHeight = offsetHeight || this.labelBg.offsetHeight;
            style.pixelLeft = (proto.buttonWidth - offsetWidth)/2 - proto.border;
            style.pixelTop = (proto.buttonHeight - offsetHeight)/2 - proto.border;
        }
        with (this.hiLabel) {
            style.pixelWidth = offsetWidth || this.labelBg.offsetWidth;
            style.pixelHeight = offsetHeight || this.labelBg.offsetHeight;
            style.pixelLeft = (proto.buttonWidth - offsetWidth)/2 - proto.border;
            style.pixelTop = (proto.buttonHeight - offsetHeight)/2 - proto.border;
        }
        var valueWidth = 0;
        if (proto.valuePos) {
            if (proto.orientation == "v") {
                valueWidth = Math.max(this.leftValueLayer.offsetWidth,this.rightValueLayer.offsetWidth) + proto.captionIndent;
                this.rightValueLayer.style.pixelTop = proto.sliderHeight - this.rightValueLayer.offsetHeight;
                this.sliderLayer.style.pixelWidth = this.sliderLayer.offsetWidth + this.sliderLayer.offsetLeft + valueWidth;
                if (proto.valuePos == "left") {
                    this.rail.style.pixelLeft = this.rail.offsetLeft + valueWidth;
                    this.button.style.pixelLeft = this.button.offsetLeft + valueWidth;
                    if (proto.captionPos && this.caption)  this.captionLayer.style.pixelLeft = this.captionLayer.offsetLeft + valueWidth;
                }
            } else {
                var valueHeight = Math.max(this.leftValueLayer.offsetHeight,this.rightValueLayer.offsetHeight);
                this.rightValueLayer.style.pixelLeft = proto.sliderWidth - this.rightValueLayer.offsetWidth;
                if (proto.valuePos == "top") {
                    this.rail.style.pixelTop = this.rail.offsetTop + valueHeight;
                    this.button.style.pixelTop = this.button.offsetTop + valueHeight;
                    if (this.caption && proto.captionPos == "bottom")  this.captionLayer.style.pixelTop = this.captionLayer.offsetTop + valueHeight;
                }
                if (!this.caption || proto.captionPos != proto.valuePos)  this.sliderLayer.style.pixelHeight = this.sliderLayer.offsetTop + valueHeight;
            }
        }
        if (proto.captionPos && this.caption) {
            this.sliderLayer.style.pixelHeight = this.sliderLayer.offsetHeight + this.captionLayer.offsetHeight + proto.captionIndent;
            if (this.captionLayer.offsetWidth != proto.sliderWidth) {
                var delta = (this.captionLayer.offsetWidth - proto.sliderWidth)/2;
                this.captionLayer.style.pixelLeft = this.captionLayer.offsetLeft - delta;
                left = Math.min(0, (proto.valuePos == "left")? valueWidth-delta : -delta);
                width = Math.min(0, (proto.valuePos == "right")? delta-valueWidth : delta);
                this.sliderLayer.style.clip = 'rect(0 '+ (this.sliderLayer.offsetWidth+width) +' '+ this.sliderLayer.offsetHeight +' '+ left +')';
            }
            if (proto.captionPos == "top" && proto.valuePos != "top") {
                this.rail.style.pixelTop = this.rail.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent;
                this.button.style.pixelTop = this.button.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent;
                if (proto.valuePos) {
                    this.leftValueLayer.style.pixelTop = this.leftValueLayer.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent;
                    this.rightValueLayer.style.pixelTop = this.rightValueLayer.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent;
                }
            }
        }
        if (proto.displaySize > 0) {
            this.displayLayer = document.all[this.name+"Display"];
            this.displayLayer.style.pixelWidth = proto.displaySize * 7 + 12;
            this.valueDisplay = document.forms[this.name+"DisplayForm"].display;
            this.sliderLayer.style.pixelWidth = this.sliderLayer.offsetWidth + proto.displayIndent + this.displayLayer.offsetWidth;
            if (proto.orientation == "v" && proto.valuePos) 
                this.displayLayer.style.pixelLeft = this.displayLayer.offsetLeft + valueWidth;
        }
        if (proto.orientation == "h") {
            this.offset = this.rail.offsetLeft + proto.border;
            this.maxSlide = this.rail.style.pixelWidth - this.button.style.pixelWidth - 2 * proto.border;
        } else {
            this.offset = this.rail.offsetTop + proto.border;
            this.maxSlide = this.rail.style.pixelHeight - this.button.style.pixelHeight - 2 * proto.border;
        }
        this.button.onmousedown = this.MouseDown;
        this.button.onmouseout = this.MouseOut;
        this.button.onmouseover = this.MouseOver;
    } else if (document.getElementById) { 
        this.sliderLayer = document.getElementById(this.name+"Slider");
        this.rail = document.getElementById(this.name+"Rail");
        this.button = document.getElementById(this.name+"Button");
        this.labelBg = document.getElementById(this.name+"LabelBg");
        this.loLabel = document.getElementById(this.name+"LoLabel");
        this.hiLabel = document.getElementById(this.name+"HiLabel");
        if (proto.captionPos && this.caption)
            this.captionLayer = document.getElementById(this.name+"Caption");
        if (proto.valuePos) {
            this.leftValueLayer = document.getElementById(this.name+"LeftValue");
            this.rightValueLayer = document.getElementById(this.name+"RightValue");
        }
        
        document.getElementById(this.name+"RailLite").style.backgroundColor = proto.railLiteBgColor;
        document.getElementById(this.name+"RailBg").style.backgroundColor = proto.railBgColor;
        this.sliderLayer.style.width = proto.sliderWidth +"px";
        this.sliderLayer.style.height = proto.sliderHeight +"px";
        if (proto.orientation == "v") {
            width = proto.railSize;
            height = proto.railHeight - 2 * proto.border;
        } else {
            width = proto.railWidth - 2 * proto.border;
            height = proto.railSize;
        }
        document.getElementById(this.name+"RailRule").style.width = width +"px";
        document.getElementById(this.name+"RailRule").style.height = height +"px";
        document.getElementById(this.name+"RailRule").style.clip = 'rect(0 '+width+' '+height+' 0)';

        this.button.style.width = proto.buttonWidth +"px";
        this.button.style.height = proto.buttonHeight +"px";
        this.button.style.left = this.button.offsetLeft +"px";
        this.button.style.top = this.button.offsetTop +"px";
        document.getElementById(this.name+"ButtonShade").style.width = proto.buttonWidth - proto.border +"px";
        document.getElementById(this.name+"ButtonShade").style.height = proto.buttonHeight - proto.border +"px";
        this.labelBg.style.width = proto.buttonWidth - 2 * proto.border;
        this.labelBg.style.height = proto.buttonHeight - 2 * proto.border;
 
        with (this.loLabel) {
            style.width = (offsetWidth || this.labelBg.offsetHeight) +"px";
            style.height = (offsetHeight || this.labelBg.offsetHeight) +"px";
            style.left = parseInt((proto.buttonWidth - offsetWidth)/2 - proto.border) +"px";
            style.top = parseInt((proto.buttonHeight - offsetHeight)/2 - proto.border) +"px";
        }
        with (this.hiLabel) {
            style.width = (offsetWidth || this.labelBg.offsetHeight) +"px";
            style.height = (offsetHeight || this.labelBg.offsetHeight) +"px";
            style.left = parseInt((proto.buttonWidth - offsetWidth)/2) - proto.border +"px";
            style.top = parseInt((proto.buttonHeight - offsetHeight)/2) - proto.border +"px";
        }
        var valueWidth = 0;
        if (proto.valuePos) {
            if (proto.orientation == "v") {
                valueWidth = Math.max(this.leftValueLayer.offsetWidth,this.rightValueLayer.offsetWidth) + proto.captionIndent;
                this.rightValueLayer.style.top = proto.sliderHeight - this.rightValueLayer.offsetHeight +"px";
                this.sliderLayer.style.width = parseInt(this.sliderLayer.width) + valueWidth +"px";
                if (proto.valuePos == "left") {
                    this.rail.style.left = this.rail.offsetLeft + valueWidth +"px";
                    this.button.style.left = this.button.offsetLeft + valueWidth +"px";
                    if (proto.captionPos && this.caption)  this.captionLayer.style.left = this.captionLayer.offsetLeft + valueWidth +"px";
                }
            } else {
                var valueHeight = Math.max(this.leftValueLayer.offsetHeight,this.rightValueLayer.offsetHeight);
                this.rightValueLayer.style.left = proto.sliderWidth - this.rightValueLayer.offsetWidth +"px";
                if (proto.valuePos == "top") {
                    this.rail.style.top = this.rail.offsetTop + valueHeight +"px";
                    this.button.style.top = this.button.offsetTop + valueHeight +"px";
                    if (this.caption && proto.captionPos == "bottom")  this.captionLayer.style.top = this.captionLayer.offsetTop + valueHeight +"px";
                }
                if (!this.caption || proto.captionPos != proto.valuePos)  this.sliderLayer.height = this.sliderLayer.offsetHeight + valueHeight +"px";
            }
        }
        if (proto.captionPos && this.caption) {
            this.sliderLayer.height = this.sliderLayer.offsetHeight + this.captionLayer.offsetHeight + proto.captionIndent +"px";
            if (this.captionLayer.offsetWidth != proto.sliderWidth) {
                var delta = parseInt((this.captionLayer.offsetWidth - proto.sliderWidth)/2);

                this.captionLayer.style.left = this.captionLayer.offsetLeft - delta +"px";
                left = Math.min(0, (proto.valuePos == "left")? valueWidth-delta : -delta);
                width = Math.min(0, (proto.valuePos == "right")? delta-valueWidth : delta);
                this.sliderLayer.clip = 'rect(0 '+ (this.sliderLayer.offsetWidth+width) +' '+ this.sliderLayer.offsetHeight +' '+ left +')';
            }
            if (proto.captionPos == "top" && proto.valuePos != "top") {
                this.rail.style.top = this.rail.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent +"px";
                this.button.style.top = this.button.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent + "px";
                if (proto.valuePos) {
                    this.leftValueLayer.style.top = this.leftValueLayer.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent + "px";
                    this.rightValueLayer.style.top = this.rightValueLayer.offsetTop + this.captionLayer.offsetHeight + proto.captionIndent + "px";
                }
            }
        }
        if (proto.displaySize > 0) {
            this.displayLayer = document.getElementById(this.name+"Display");
            this.displayLayer.style.width = proto.displaySize * 7 + 12 +"px";
            this.valueDisplay = document.forms[this.name+"DisplayForm"].display;
            this.sliderLayer.style.width = this.sliderLayer.offsetWidth + proto.displayIndent + this.displayLayer.offsetWidth +"px";
            if (proto.orientation == "v" && proto.valuePos) 
                this.displayLayer.style.left = this.displayLayer.offsetLeft + valueWidth +"px";
        }
        if (proto.orientation == "h") {
            this.offset = this.rail.offsetLeft + proto.border;
            this.maxSlide = this.rail.offsetWidth - this.button.offsetWidth - 2 * proto.border;
        } else {
            this.offset = this.rail.offsetTop + proto.border;
            this.maxSlide = this.rail.offsetHeight - this.button.offsetHeight - 2 * proto.border;
        }
        this.button.addEventListener("mousedown",this.MouseDown,false);
        this.button.addEventListener("mouseout", this.MouseOut,false);
        this.button.addEventListener("mouseover",this.MouseOver,false);
    }
    this.button.slider = this;
    if (proto.displaySize > 0 || this.valueDisplay ) {
        if (typeof(this.onchange) == "function") {
            var fstr = this.onchange.toString();
            this.onchange = fstr.substring(fstr.indexOf('{'));
        }
        this.onchange = "this.valueDisplay.value = toDecimals(this.getValue(),this.displayDecimals); "+ (this.onchange || "");
    }
    if (document.all || document.getElementById) {
        this.sliderLayer = this.sliderLayer.style;
        this.rail = this.rail.style;
        this.button = this.button.style;
        this.loLabel = this.loLabel.style;
        this.hiLabel = this.hiLabel.style;
        this.labelBg = this.labelBg.style;
    }
    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);
    this.setValue(this.defaultValue,true);
    this.sliderLayer.visibility = "visible";
}

Slider.isPrototype = function () {
    for (var i=0; i<window.sliders.length; i++)  
        window.sliders[i].prototype = window.sliders[i].prototype || this;
}

Slider.MouseOver = function (e) {
    if (this.slider.onmouseover)  this.slider.onmouseover(e);
}

Slider.MouseOut = function (e) {
    if (this.slider.onmouseout)  this.slider.onmouseout(e);
}

Slider.MouseDown = function (e) {
    var slider = this.slider;
    if (!slider) return;
    window.sliderDrag.dragLayer = this;
    window.sliderDrag.dragged = false;
    if (document.layers) {
        if (e.which > 1)  return true;
        window.sliderDrag.offX = e.pageX - this.left + slider.offset;
        window.sliderDrag.offY = e.pageY - this.top + slider.offset;
    } else if (document.all) {
        window.sliderDrag.offX  =  window.event.clientX - this.style.pixelLeft + slider.offset;
        window.sliderDrag.offY  =  window.event.clientY - this.style.pixelTop + slider.offset;
        window.event.cancelBubble = true;
    } else if (document.getElementById) {
        if (e.button > 0)  return true;
        window.sliderDrag.offX = e.pageX - parseInt(this.style.left) + slider.offset;
        window.sliderDrag.offY = e.pageY - parseInt(this.style.top) + slider.offset;
        if (e.cancelable) e.preventDefault();
        e.stopPropagation();
    }
    if (document.captureEvents)  document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    document.onmousemove = slider.MouseSlide;
    document.onmouseup = slider.MouseUp;
    if (document.layers)  slider.labelBg.document.bgColor = slider.hiliteBgColor;
    else if (document.all || document.getElementById)  slider.labelBg.backgroundColor = slider.hiliteBgColor;
    slider.hiLabel.visibility = "inherit";
    slider.loLabel.visibility = "hidden";
    if (slider.onmousedown)  slider.onmousedown(e);
    return false;
}

Slider.MouseUp = function (e) {
    var slider = window.sliderDrag.dragLayer.slider;
    if (!slider) return; 
    document.onmousemove = null;
    document.onmouseup = null;
    if (document.releaseEvents)  document.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    if (e && e.stopPropagation) e.stopPropagation();
    window.sliderDrag.dragLayer = null;
    if (document.layers)  slider.labelBg.document.bgColor = slider.bgColor;
    else if (document.all || document.getElementById)  slider.labelBg.backgroundColor = slider.bgColor;
    slider.hiLabel.visibility = "hidden";
    slider.loLabel.visibility = "inherit";;
    if (slider.onchange)  slider.onchange(e);
    if (slider.onmouseup)  slider.onmouseup(e);
    if (!window.sliderDrag.dragged && slider.onclick) {
        slider.onclick(e);
        return true;
    }
    return false;
}

Slider.MouseSlide = function (e) {
    var l = window.sliderDrag.dragLayer;
    var slider = l.slider;
    if (!slider) return;
    window.sliderDrag.dragged = true;
    if (document.layers) {
        if (slider.orientation == "h")
            l.left = Math.max(Math.min(e.pageX - window.sliderDrag.offX,slider.maxSlide),0) + slider.offset;
        else  l.top = Math.max(Math.min(e.pageY - window.sliderDrag.offY,slider.maxSlide),0) + slider.offset;
    } else if (document.all) {
        if (slider.orientation == "h")
            l.style.pixelLeft = Math.max(Math.min(window.event.clientX - window.sliderDrag.offX,slider.maxSlide),0) + slider.offset
        else  l.style.pixelTop = Math.max(Math.min(window.event.clientY - window.sliderDrag.offY,slider.maxSlide),0) + slider.offset;
    } else if (document.getElementById) {
        if (slider.orientation == "h")
            l.style.left = Math.max(Math.min(e.pageX - window.sliderDrag.offX,slider.maxSlide),0) + slider.offset +"px";
        else  l.style.top = Math.max(Math.min(e.pageY - window.sliderDrag.offY,slider.maxSlide),0) + slider.offset +"px";
        if (e.cancelable) e.preventDefault();
        e.stopPropagation();
    }
    if (slider.onchange)  slider.onchange(e);
    if (slider.onslide)  slider.onslide(e);
    if (document.all) window.event.cancelBubble = true;
    return false;
}

Slider.getValue = function () {
    var pos;
    if (document.layers) {
        pos = (this.orientation == "h")? this.button.left : this.button.top;
    } else if (document.all) {
        pos = (this.orientation == "h")? this.button.pixelLeft : this.button.pixelTop;
    } else if (document.getElementById) {
        pos = (this.orientation == "h")? parseInt(this.button.left) : parseInt(this.button.top);
    }
    return  this.leftValue + (this.rightValue-this.leftValue) * (pos-this.offset) / this.maxSlide;
}

Slider.setValue = function (value,ignore) {
    if (typeof(value) == "string")  value = parseFloat(value);
    if (isNaN(value))  value = this.defaultValue;
    var rangeValue = (this.rightValue >= 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 = parseInt(this.maxSlide * rangeValue / (this.rightValue-this.leftValue) + this.offset);
    if (document.layers) {
        if (this.orientation == "h")  this.button.left = pos;
        else  this.button.top = pos;
    } else if (document.all) {
        if (this.orientation == "h")  this.button.pixelLeft = pos;
        else  this.button.pixelTop = pos;
    } else if (document.getElementById) {
        if (this.orientation == "h") this.button.left = pos +"px";
        else  this.button.top = pos +"px";
    }
    if (this.onchange && (!ignore))  this.onchange(null);
}

Slider.makeEventHandler = function (f) {
    return (typeof(f) == "string")? new Function('e',f) : f;
}

Slider.calcWidth = function () {
    var proto = this.prototype || this;
    width = proto.sliderWidth;y
    if (proto.valuePos && proto.orientation == "v")  width += 0.7 * proto.fontSizeCaption * Math.max(this.leftValue.toString().length,this.rightValue.toString().length) + 4;
    if (proto.displaySize > 0)  tableWidth += 7 * proto.displaySize + 12 + proto.displayIndent;
}

Slider.calcHeight = function () {
    var proto = this.prototype || this;
    var height = proto.sliderHeight;
    if (this.caption && proto.captionPos != proto.valuePos)  height += proto.fontSizeCaption + 3;
    if (proto.valuePos && proto.orientation == "h")  height += proto.fontSizeCaption + 3;
}

function toHH(cc) {
    var HH = Math.min(Math.max(cc,0),255).toString(16);
    return (HH.length==1)? '0'+HH : HH;
}

function relColor(colval,dd) {
    if (colval.substring(0,1) == "#")  colval = colval.substring(1);
    if (colval.length != 6 || isNaN(parseInt(colval,16)))  return NaN;
    var rr = parseInt(colval.substring(0,2),16);
    var gg = parseInt(colval.substring(2,4),16);
    var bb = parseInt(colval.substring(4,6),16);
    return "#" + toHH(rr+dd) + toHH(gg+dd) + toHH(bb+dd);
}

function toDecimals(val,n) {
    if (isNaN(n)) return val;
    if (n<=0) return Math.round(val);
    for (var m=0; m<n; m++)  val *= 10;
    val = Math.round(val);
    valstr = val.toString();
    len = valstr.length;
    if (len>n) 
        valstr = valstr.substring(0,len-n) +"."+ valstr.substring(len-n,len);
    else {
        while (valstr.length<n) valstr = "0"+valstr;
        valstr = "0."+valstr;
    }
    return valstr;
}