hex slider

lib/WebGUI/Form/HexSlider.pm

@@ -0,0 +1,131 @@
+package WebGUI::Form::HexSlider;
+
+=head1 LEGAL
+
+ -------------------------------------------------------------------
+  WebGUI is Copyright 2001-2006 Plain Black Corporation.
+ -------------------------------------------------------------------
+  Please read the legal notices (docs/legal.txt) and the license
+  (docs/license.txt) that came with this distribution before using
+  this software.
+ -------------------------------------------------------------------
+  http://www.plainblack.com                     info@plainblack.com
+ -------------------------------------------------------------------
+
+=cut
+
+use strict;
+use base 'WebGUI::Form::Control';
+use WebGUI::International;
+
+=head1 NAME
+
+Package WebGUI::Form::HexSlider
+
+=head1 DESCRIPTION
+
+Creates a slider control that controls hex values, as in the red, gree, blue values for HTML colors.
+
+=head1 SEE ALSO
+
+This is a subclass of WebGUI::Form::Control.
+
+=head1 METHODS 
+
+The following methods are specifically available from this class. Check the superclass for additional methods.
+
+=cut
+
+#-------------------------------------------------------------------
+
+=head2 definition ( [ additionalTerms ] )
+
+See the super class for additional details.
+
+=head3 additionalTerms
+
+The following additional parameters have been added via this sub class.
+
+=head4 maximum
+
+Defaults to "ff". The maximum that the slider can go to.
+
+=head4 minimum
+
+Defaults to "00". The minimum value that the slider can go to.
+
+=head4 profileEnabled
+
+Flag that tells the User Profile system that this is a valid form element in a User Profile
+
+=cut
+
+sub definition {
+	my $class = shift;
+	my $session = shift;
+	my $definition = shift || [];
+	my $i18n = WebGUI::International->new($session);
+	push(@{$definition}, {
+		formName=>{
+			defaultValue=> $i18n->get("475")
+			},
+		maximum=>{
+			defaultValue=> "ff",
+			},
+		minimum=>{
+			defaultValue=> "00",
+			},
+		profileEnabled=>{
+			defaultValue=>1
+			},
+		});
+        return $class->SUPER::definition($session, $definition);
+}
+
+#-------------------------------------------------------------------
+
+=head2 getValueFromPost ( )
+
+Retrieves a value from a form GET or POST and returns it. If the value comes back as undef, this method will return the defaultValue instead.  Strip newlines/carriage returns from the value.
+
+=cut
+
+sub getValueFromPost {
+	my $self = shift;
+	my $formValue = $self->session->form->param($self->get("name")) if ($self->session->request);
+	if (defined $formValue && $formValue =~ m/^[a-f0-9]{2}$/) {
+		return $formValue;
+	} else {
+		return $self->{defaultValue};
+	}
+}
+
+#-------------------------------------------------------------------
+
+=head2 toHtml ( )
+
+Renders an input tag of type text.
+
+=cut
+
+sub toHtml {
+	my $self = shift;
+	$self->session->style->setScript($self->session->url->extras("slider/js/range.js"), {type=>"text/javascript"});
+	$self->session->style->setScript($self->session->url->extras("slider/js/timer.js"), {type=>"text/javascript"});
+	$self->session->style->setScript($self->session->url->extras("slider/js/slider.js"), {type=>"text/javascript"});
+	$self->session->style->setLink($self->session->url->extras("slider/css/bluecurve/bluecurve.css"), {rel=>"stylesheet", type=>"text/css"});
+	my $output = '<div class="slider" id="'.$self->get('id').'" '.$self->get("extras").' tabindex="1">
+   <input class="slider-input" id="'.$self->get('id').'-input" name="'.$self->get("name").'" value="'.$self->get("value").'" />
+</div><script type="text/javascript">
+var sliderEl = document.getElementById ?  document.getElementById("'.$self->get('id').'") : null;
+var inputEl = document.forms[0]["'.$self->get('id').'-input"];
+var s = new Slider(sliderEl, inputEl);
+/* s.setMaximum('.$self->get("maximum").');
+s.setMinimum('.$self->get("minimum").');
+s.setValue('.$self->get("value").'); */
+</script>';
+	return $output;
+}
+
+1;
+

www/extras/slider/css/bluecurve/bluecurve.css

@@ -0,0 +1,80 @@
+/*
+	back:	rgb(230,230,230)
+	dark:	rgb(90,97,90)
+	medium	rgb(189,190,189)
+	*/
+
+.dynamic-slider-control {
+	position:			relative;
+	background-color:	rgb(230,230,230);
+	-moz-user-focus:	normal;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.horizontal {
+	width:				200px;
+	height:				27px;
+}
+
+.vertical {
+	width:				29px;
+	height:				200px;
+}
+
+.dynamic-slider-control input {
+	display:	none;
+}
+
+.dynamic-slider-control .handle {
+	position:			absolute;	
+	font-size:			1px;
+	overflow:			hidden;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+	width:				31px;
+	height:				14px;
+	background-image:	url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {}
+
+.dynamic-slider-control.vertical .handle {
+	width:				15px;
+	height:				31px;
+	background-image:	url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+	position:			absolute;
+	font-size:			0.01mm;
+	overflow:			hidden;
+	border:				1px solid rgb(90,97,90);
+	background:			rgb(189,190,189);
+	
+	behavior:			url("css/boxsizing.htc"); /* ie path bug */
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+}
+.dynamic-slider-control.vertical .line {
+	width:				3px;
+}
+
+.dynamic-slider-control.horizontal .line {
+	height:				3px;
+}
+
+.dynamic-slider-control .line div {
+	width:		1px;
+	height:		1px;
+	
+	border:				1px solid;
+	border-color:		rgb(230,230,230) rgb(189,190,189)
+						rgb(189,190,189) rgb(230,230,230);
+}

www/extras/slider/css/boxsizing.htc

@@ -0,0 +1,157 @@
+<component lightWeight="true">
+<attach event="onpropertychange" onevent="checkPropertyChange()" />
+<attach event="ondetach" onevent="restore()" />
+<script>
+//<![CDATA[
+
+var doc = element.document;
+
+function init() {
+	updateBorderBoxWidth();
+	updateBorderBoxHeight();
+}
+
+function restore() {
+	element.runtimeStyle.width = "";
+	element.runtimeStyle.height = "";
+}
+
+/* border width getters */
+function getBorderWidth(sSide) {
+	if (element.currentStyle["border" + sSide + "Style"] == "none")
+		return 0;
+	var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
+	return n || 0;
+}
+
+function getBorderLeftWidth() { return getBorderWidth("Left"); }
+function getBorderRightWidth() { return getBorderWidth("Right"); }
+function getBorderTopWidth() { return getBorderWidth("Top"); }
+function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
+/* end border width getters */
+
+/* padding getters */
+function getPadding(sSide) {
+	var n = parseInt(element.currentStyle["padding" + sSide]);
+	return n || 0;
+}
+
+function getPaddingLeft() { return getPadding("Left"); }
+function getPaddingRight() { return getPadding("Right"); }
+function getPaddingTop() { return getPadding("Top"); }
+function getPaddingBottom() { return getPadding("Bottom"); }
+/* end padding getters */
+
+function getBoxSizing() {
+	var s = element.style;
+	var cs = element.currentStyle
+
+	if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
+		return s.boxSizing;
+	if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
+		return s["box-sizing"];
+	if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
+		return cs.boxSizing;
+	if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
+		return cs["box-sizing"];
+	return getDocumentBoxSizing();
+}
+
+function getDocumentBoxSizing() {
+	if (doc.compatMode == null || doc.compatMode == "BackCompat")
+		return "border-box";
+	return "content-box"
+}
+
+/* width and height setters */
+function setBorderBoxWidth(n) {
+	element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
+		getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
+}
+
+function setBorderBoxHeight(n) {
+	element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
+		getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
+}
+
+function setContentBoxWidth(n) {
+	element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
+		getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
+}
+
+function setContentBoxHeight(n) {
+	element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
+		getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
+}
+/* end width and height setters */
+
+function updateBorderBoxWidth() {
+	element.runtimeStyle.width = "";
+	if (getDocumentBoxSizing() == getBoxSizing())
+		return;
+	var csw = element.currentStyle.width;
+	if (csw != "auto" && csw.indexOf("px") != -1) {
+		if (getBoxSizing() == "border-box")
+			setBorderBoxWidth(parseInt(csw));
+		else
+			setContentBoxWidth(parseInt(csw));
+	}
+}
+
+function updateBorderBoxHeight() {
+	element.runtimeStyle.height = "";	
+	if (getDocumentBoxSizing() == getBoxSizing())
+		return;
+	var csh = element.currentStyle.height;
+	if (csh != "auto" && csh.indexOf("px") != -1) {
+		if (getBoxSizing() == "border-box")
+			setBorderBoxHeight(parseInt(csh));
+		else
+			setContentBoxHeight(parseInt(csh));
+	}
+}
+
+function checkPropertyChange() {
+	var pn = event.propertyName;
+	var undef;
+
+	if (pn == "style.boxSizing" && element.style.boxSizing == "") {
+		element.style.removeAttribute("boxSizing");
+		element.runtimeStyle.boxSizing = undef;		
+	}
+
+
+	switch (pn) {
+		case "style.width":
+		case "style.borderLeftWidth":
+		case "style.borderLeftStyle":
+		case "style.borderRightWidth":
+		case "style.borderRightStyle":
+		case "style.paddingLeft":
+		case "style.paddingRight":
+			updateBorderBoxWidth();
+			break;
+		
+		case "style.height":
+		case "style.borderTopWidth":
+		case "style.borderTopStyle":
+		case "style.borderBottomWidth":
+		case "style.borderBottomStyle":
+		case "style.paddingTop":
+		case "style.paddingBottom":
+			updateBorderBoxHeight();
+			break;
+		
+		case "className":
+		case "style.boxSizing":
+			updateBorderBoxWidth();
+			updateBorderBoxHeight();
+			break;
+	}
+}
+
+init();
+
+//]]>
+</script>
+</component>

www/extras/slider/css/luna/luna.css

@@ -0,0 +1,75 @@
+.dynamic-slider-control {
+	position:			relative;
+	background-color:	ThreeDFace;
+	-moz-user-focus:	normal;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.horizontal {
+	width:				200px;
+	height:				27px;
+}
+
+.vertical {
+	width:				29px;
+	height:				200px;
+}
+
+.dynamic-slider-control input {
+	display:	none;
+}
+
+.dynamic-slider-control .handle {
+	position:			absolute;	
+	font-size:			1px;
+	overflow:			hidden;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+	width:				11px;
+	height:				21px;
+	background-image:	url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {
+	background-image:	url("handle.horizontal.hover.png");
+}
+
+.dynamic-slider-control.vertical .handle {
+	width:				25px;
+	height:				13px;
+	background-image:	url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {
+	background-image:	url("handle.vertical.hover.png");
+}
+
+.dynamic-slider-control .line {
+	position:			absolute;
+	font-size:			0.01mm;
+	overflow:			hidden;
+	border:				1px solid;
+	border-color:		ThreeDShadow ThreeDHighlight
+						ThreeDHighlight ThreeDShadow;
+	-moz-border-radius:	50%;
+	
+	behavior:			url("css/boxsizing.htc"); /* ie path bug */
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+}
+.dynamic-slider-control.vertical .line {
+	width:				2px;
+}
+
+.dynamic-slider-control.horizontal .line {
+	height:				2px;
+}
+
+.dynamic-slider-control .line div {
+	display:	none;
+}

www/extras/slider/css/swing/swing.css

@@ -0,0 +1,82 @@
+/*
+	dark rgb(102,102,102)
+	medium	rgb(152,153,153)
+	gray:	rgb(204,204,204)
+	bright: white;
+	*/
+
+.dynamic-slider-control {
+	position:			relative;
+	background-color:	rgb(204,204,204);
+	-moz-user-focus:	normal;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.horizontal {
+	width:				200px;
+	height:				27px;
+}
+
+.vertical {
+	width:				29px;
+	height:				200px;
+}
+
+.dynamic-slider-control input {
+	display:	none;
+}
+
+.dynamic-slider-control .handle {
+	position:			absolute;	
+	font-size:			1px;
+	overflow:			hidden;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+	width:				15px;
+	height:				16px;
+	background-image:	url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {}
+
+.dynamic-slider-control.vertical .handle {
+	width:				16px;
+	height:				15px;
+	background-image:	url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+	position:			absolute;
+	font-size:			0.01mm;
+	overflow:			hidden;
+	border:				1px solid;
+	border-color:		rgb(102,102,102) white
+						white rgb(102,102,102);
+	
+	behavior:			url("css/boxsizing.htc"); /* ie path bug */
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+}
+.dynamic-slider-control.vertical .line {
+	width:				4px;
+}
+
+.dynamic-slider-control.horizontal .line {
+	height:				4px;
+}
+
+.dynamic-slider-control .line div {
+	width:		2px;
+	height:		2px;
+	
+	border:				1px solid;
+	border-color:		rgb(152,153,153) rgb(102,102,102)
+						rgb(102,102,102) rgb(152,153,153);
+}

www/extras/slider/css/winclassic.css

@@ -0,0 +1,99 @@
+.dynamic-slider-control {
+	position:			relative;
+	background-color:	ThreeDFace;
+	-moz-user-focus:	normal;
+	-moz-user-select:	none;
+	cursor:				default;
+}
+
+.horizontal {
+	width:				200px;
+	height:				29px;
+}
+
+.vertical {
+	width:				29px;
+	height:				200px;
+}
+
+.dynamic-slider-control input {
+	display:	none;
+}
+
+.dynamic-slider-control .handle {
+	position:			absolute;
+	-moz-user-select:	none;
+	cursor:				default;
+	background:			ThreeDFace;
+	border:				1px solid;
+	border-color:		ThreeDHighlight ThreeDDarkShadow
+						ThreeDDarkShadow ThreeDHighlight;
+}
+
+/* inner border */
+.dynamic-slider-control .handle div {
+	font-size:			1px;
+	border:				1px solid;
+	border-color:		ThreeDLightShadow ThreeDShadow
+						ThreeDShadow ThreeDLightShadow;	
+
+	behavior:			url("css/boxsizing.htc");	/* ie path bug */
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+}
+
+/*	inner sets size
+.dynamic-slider-control.horizontal .handle {
+	width:				12px;
+	height:				22px;
+}
+*/
+
+.dynamic-slider-control.horizontal .handle div {
+	width:				8px;
+	height:				18px;
+}
+
+.dynamic-slider-control.horizontal .handle.hover {}
+
+/* inner sets size
+.dynamic-slider-control.vertical .handle {
+	width:				22px;
+	height:				12px;
+}
+*/
+
+.dynamic-slider-control.vertical .handle div {
+	width:				18px;
+	height:				8px;
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+	
+	behavior:			url("css/boxsizing.htc"); /* ie path bug */
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+		
+	position:			absolute;
+	font-size:			0.01mm;
+	overflow:			hidden;
+	border:				1px solid;
+	border-color:		ThreeDShadow ThreeDHighlight
+						ThreeDHighlight ThreeDShadow;
+	background:			ThreeDDarkShadow;
+}
+
+.dynamic-slider-control.vertical .line {
+	width:				1px;
+	
+}
+
+.dynamic-slider-control.horizontal .line {
+	height:				1px;
+}
+
+.dynamic-slider-control .line div {
+	display:	none;
+}

www/extras/slider/demo.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html>
+<head>
+<title>Slider Demo (WebFX)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<!--
+<link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
+-->
+<style type="text/css">
+
+
+body {
+	font:		MessageBox;	
+	font:		Message-Box;
+}
+
+
+input {
+	width:				50px;
+	text-align:			right;
+	padding:			1px;
+	margin-right:		15px;
+}
+
+input, select, button {
+	vertical-align:		middle;
+}
+
+#slider-1 {
+	margin:	10px;
+	width:	auto;
+}
+
+#slider-2 {
+	margin:	10px;
+}
+
+#color-picker {
+	border:		0; /*1px solid rgb(90,97,90);*/
+	width:		350px;
+	height:		80px;
+}
+
+</style>
+<script type="text/javascript">
+//<![CDATA[
+
+function getQueryString( sProp ) {
+	var re = new RegExp( sProp + "=([^\\&]*)", "i" );
+	var a = re.exec( document.location.search );
+	if ( a == null )
+		return "";
+	return a[1];
+};
+
+function changeCssFile( sCssFile ) {
+	var loc = String(document.location);
+	var search = document.location.search;
+	if ( search != "" )
+		loc = loc.replace( search, "" );
+	loc = loc + "?css=" + sCssFile;
+	document.location.replace( loc );
+}
+
+var cssFile = getQueryString( "css" );
+if ( cssFile == "" )
+	cssFile = "css/bluecurve/bluecurve.css";
+
+document.write("<link type=\"text/css\" rel=\"StyleSheet\" href=\"" + cssFile + "\" />" );
+
+//]]>
+</script>
+<!--
+<link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
+-->
+
+<script type="text/javascript" src="js/range.js"></script>
+<script type="text/javascript" src="js/timer.js"></script>
+<script type="text/javascript" src="js/slider.js"></script>
+</head>
+<body>
+
+<p>Horizontal</p>
+<div class="slider" id="slider-1" tabIndex="1">
+	<input class="slider-input" id="slider-input-1"/>
+</div>
+
+<p>
+Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
+Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
+Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
+</p>
+
+<p>Vertical</p>
+<div class="slider" id="slider-2" tabIndex="1">
+	<input class="slider-input" id="slider-input-2"/>
+</div>
+
+<script type="text/javascript">
+
+var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
+var s2 = new Slider(document.getElementById("slider-2"), document.getElementById("slider-input-2"), "vertical");
+s.onchange = function () {
+	document.getElementById("h-value").value = s.getValue();
+	document.getElementById("h-min").value = s.getMinimum();
+	document.getElementById("h-max").value = s.getMaximum();
+	s2.setValue(s.getValue());
+	s2.setMinimum(s.getMinimum());
+	s2.setMaximum(s.getMaximum());
+};
+s.setValue(50);
+
+window.onresize = function () {
+	s.recalculate();
+};
+
+</script>
+
+<p>
+<select id="css-select">
+	<option value="css/winclassic.css">Windows Classic</option>
+	<option value="css/luna/luna.css">Windows XP Luna</option>
+	<option value="css/swing/swing.css">Java Swing</option>
+	<option value="css/bluecurve/bluecurve.css">Blue Curve</option>
+</select>
+<script type="text/javascript">
+document.getElementById('css-select').value = cssFile;
+</script>
+&nbsp;
+<button onclick="changeCssFile( document.getElementById('css-select').value )">Change</button>
+</p>
+<p>
+<iframe name="color-picker" id="color-picker" src="rgbdemo.html" frameborder="0"></iframe><br />
+Color: <span id="color-picker-out">&nbsp;</span></p>
+
+<script type="text/javascript">
+
+var f = window.frames["color-picker"];
+f.onchange = function () {
+	var rgb = f.getRgb();
+	var out = document.getElementById("color-picker-out");
+	out.firstChild.data = "rgb(" + rgb.r + ", " +
+							rgb.g + ", " +
+							rgb.b + ")";
+};
+
+</script>
+
+</body>
+</html>

www/extras/slider/implementation.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html>
+<head>
+<title>Slider (WebFX)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<script type="text/javascript" src="local/webfxlayout.js"></script>
+
+<script type="text/javascript" src="js/range.js"></script>
+<script type="text/javascript" src="js/timer.js"></script>
+<script type="text/javascript" src="js/slider.js"></script>
+<link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
+
+</head>
+<body>
+<!-- WebFX Layout Include -->
+<script type="text/javascript">
+
+var articleMenu= new WebFXMenu;
+articleMenu.left  = 384;
+articleMenu.top   = 86;
+articleMenu.width = 140;
+articleMenu.add(new WebFXMenuItem("Slider", "slider.html"));
+articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
+articleMenu.add(new WebFXMenuItem("API", "api.html"));
+articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
+articleMenu.add(new WebFXMenuSeparator);
+articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip"));
+webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
+
+webfxLayout.writeTitle("Slider");
+webfxLayout.writeMenu();
+webfxLayout.writeDesignedByEdger();
+
+</script>
+<div class="webfx-main-body">
+<!-- end WebFX Layout Includes -->
+
+<h2>Implementation</h2>
+
+<p>The slider implementation mostly consists of lots of event handlers that
+sets the value depending on the event arguments.</p>
+
+<h3>Range</h3>
+
+<p>The data model is handled by a class called Range (also known as BoundedRangeModel).
+This class has a few properties that fits perfectly with sliders, scrollbars and
+progress bars. A range has a minimum value, a value, an extent and a maximum value.
+The following is always true for a range object.</p>
+
+<pre>
+minimum &lt; value &lt; value + extent &lt; maximum
+</pre>
+
+<p>In the case of a slider the extent is always zero. Using a range for the data
+model allows the implementation of the slider to concentrate on other things than
+ensuring that the data model is valid.</p>
+
+<h3>Timer</h3>
+
+<p>For this implementation of the slider I decided to use an object oriented
+abstraction of <code>window.setTimeout</code>. A timer from the <code>Timer</code>
+class can be started and stopped and it fires a pseudo event called <code>ontimer</code>
+a certain amount of milliseconds after the timer is started.</p>
+
+<pre>
+Timer.prototype.start = function () {
+   if (this.isStarted())
+      this.stop();
+   var oThis = this;
+   this._timer = window.setTimeout(function () {
+      if (typeof oThis.ontimer == "function")
+         oThis.ontimer();
+   }, this._pauseTime);
+   this._isStarted = false;
+};
+
+Timer.prototype.stop = function () {
+   if (this._timer != null)
+      window.clearTimeout(this._timer);
+   this._isStarted = false;
+};
+</pre>
+
+<h3>Slider</h3>
+
+<p>The slider consists of a line element and a handle element. The line is only
+there for the visual effect. The handle on the other hand can be dragged and
+thereby changing the value. When dragging the handle the position of the mouse
+is used to calculate a new value for the data model. Once the value is changed
+the layout for the slider is recalculated.</p>
+
+<p>When the user holds down the mouse on the slider, but not on the handle, a
+timer is started and every time the timer triggers the <code>timer</code> event
+the value is changed by the <code>blockIncrement</code> towards the mouse
+pointer.</p>
+
+<p>The slider also allows the user to use the keyboard to change the value. This
+is done by listening to the <code>keydown</code> (and <code>keypress</code>)
+events. In the <code>keydown</code> handler the key is checked and the value for
+the data model is updated accordingly. The reason for the <code>keypress</code>
+handler is to disable the default actions in the browser.</p>
+
+<p>
+<a href="slider.html">Slider</a><br />
+<a href="implementation.html">Implementation</a><br />
+<a href="api.html">API</a><br />
+<a href="demo.html">Demo</a><br />
+<a href="http://webfx.eae.net/download/slider102.zip">Download</a>
+</p>
+
+<p class="author">Author: Erik Arvidsson</p>
+
+<!-- end webfx-main-body -->
+</div>
+
+</body>
+</html>

www/extras/slider/js/range.js

@@ -0,0 +1,147 @@
+/*----------------------------------------------------------------------------\
+|                                Range Class                                  |
+|-----------------------------------------------------------------------------|
+|                         Created by Erik Arvidsson                           |
+|                  (http://webfx.eae.net/contact.html#erik)                   |
+|                      For WebFX (http://webfx.eae.net/)                      |
+|-----------------------------------------------------------------------------|
+| Used to model the data used when working with sliders, scrollbars and       |
+| progress bars. Based on the ideas of the javax.swing.BoundedRangeModel      |
+| interface defined by Sun for Java. http://java.sun.com/products/jfc/        |
+| swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html                |                                                              |
+|-----------------------------------------------------------------------------|
+|                  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                                      |
+|-----------------------------------------------------------------------------|
+| Created 2002-10-14 | All changes are in the log above. | Updated 2002-10-14 |
+\----------------------------------------------------------------------------*/
+
+
+function Range() {
+	this._value = 0;
+	this._minimum = 0;
+	this._maximum = 100;
+	this._extent = 0;
+	
+	this._isChanging = false;
+}
+
+Range.prototype.setValue = function (value) {
+	value = parseInt(value);
+	if (isNaN(value)) return;
+	if (this._value != value) {
+		if (value + this._extent > this._maximum)
+			this._value = this._maximum - this._extent;
+		else if (value < this._minimum)
+			this._value = this._minimum;
+		else
+			this._value = value;
+		if (!this._isChanging && typeof this.onchange == "function")
+			 this.onchange();
+	}
+};
+
+Range.prototype.getValue = function () {
+	return this._value;
+};
+
+Range.prototype.setExtent = function (extent) {
+	if (this._extent != extent) {
+		if (extent < 0)
+			this._extent = 0;
+		else if (this._value + extent > this._maximum)
+			this._extent = this._maximum - this._value;
+		else
+			this._extent = extent;
+		if (!this._isChanging && typeof this.onchange == "function")
+			this.onchange();
+	}
+};
+
+Range.prototype.getExtent = function () {
+	return this._extent;
+};
+
+Range.prototype.setMinimum = function (minimum) {
+	if (this._minimum != minimum) {
+		var oldIsChanging = this._isChanging;
+		this._isChanging = true;
+
+		this._minimum = minimum;
+		
+		if (minimum > this._value)
+			this.setValue(minimum);
+		if (minimum > this._maximum) {
+			this._extent = 0;
+			this.setMaximum(minimum);
+			this.setValue(minimum)
+		}
+		if (minimum + this._extent > this._maximum)
+			this._extent = this._maximum - this._minimum;
+
+		this._isChanging = oldIsChanging;
+		if (!this._isChanging && typeof this.onchange == "function")
+			this.onchange();
+	}
+};
+
+Range.prototype.getMinimum = function () {
+	return this._minimum;
+};
+
+Range.prototype.setMaximum = function (maximum) {
+	if (this._maximum != maximum) {
+		var oldIsChanging = this._isChanging;
+		this._isChanging = true;
+
+		this._maximum = maximum;		
+		
+		if (maximum < this._value)
+			this.setValue(maximum - this._extent);
+		if (maximum < this._minimum) {
+			this._extent = 0;
+			this.setMinimum(maximum);
+			this.setValue(this._maximum);
+		}		
+		if (maximum < this._minimum + this._extent)
+			this._extent = this._maximum - this._minimum;
+		if (maximum < this._value + this._extent)
+			this._extent = this._maximum - this._value;
+		
+		this._isChanging = oldIsChanging;
+		if (!this._isChanging && typeof this.onchange == "function")
+			this.onchange();
+	}
+};
+
+Range.prototype.getMaximum = function () {
+	return this._maximum;
+};

www/extras/slider/js/slider.js

@@ -0,0 +1,506 @@
+/*----------------------------------------------------------------------------\
+|                                Slider 1.02                                  |
+|-----------------------------------------------------------------------------|
+|                         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                                      |
+| 2003-03-27 | Added a test in the constructor for missing oElement arg       |
+| 2003-11-27 | Only use mousewheel when focused                               |
+|-----------------------------------------------------------------------------|
+| 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 2003-1-27 |
+\----------------------------------------------------------------------------*/
+
+
+Slider.isSupported = typeof document.createElement != "undefined" &&
+	typeof document.documentElement != "undefined" &&
+	typeof document.documentElement.offsetWidth == "number";
+
+
+function Slider(oElement, oInput, sOrientation) {
+	if (!oElement) return;
+	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;
+		if (s._focused) {
+			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();
+};

www/extras/slider/js/timer.js

@@ -0,0 +1,78 @@
+/*----------------------------------------------------------------------------\
+|                                 Timer Class                                 |
+|-----------------------------------------------------------------------------|
+|                         Created by Erik Arvidsson                           |
+|                  (http://webfx.eae.net/contact.html#erik)                   |
+|                      For WebFX (http://webfx.eae.net/)                      |
+|-----------------------------------------------------------------------------|
+| Object Oriented Encapsulation of setTimeout fires ontimer when the timer    |
+| is triggered. Does not work in IE5.00                                       |                     
+|-----------------------------------------------------------------------------|
+|                  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                                      |
+|-----------------------------------------------------------------------------|
+| Created 2002-10-14 | All changes are in the log above. | Updated 2002-10-14 |
+\----------------------------------------------------------------------------*/
+
+function Timer(nPauseTime) {
+	this._pauseTime = typeof nPauseTime == "undefined" ? 1000 : nPauseTime;
+	this._timer = null;
+	this._isStarted = false;
+}
+
+Timer.prototype.start = function () {
+	if (this.isStarted())
+		this.stop();
+	var oThis = this;
+	this._timer = window.setTimeout(function () {
+		if (typeof oThis.ontimer == "function")
+			oThis.ontimer();
+	}, this._pauseTime);
+	this._isStarted = false;
+};
+
+Timer.prototype.stop = function () {
+	if (this._timer != null)
+		window.clearTimeout(this._timer);
+	this._isStarted = false;
+};
+
+Timer.prototype.isStarted = function () {
+	return this._isStarted;
+};
+
+Timer.prototype.getPauseTime = function () {
+	return this._pauseTime;
+};
+
+Timer.prototype.setPauseTime = function (nPauseTime) {
+	this._pauseTime = nPauseTime;
+};

www/extras/slider/local/helptip.css

@@ -0,0 +1,38 @@
+/*
+	Notice that IE has a display problem if the help link is on
+	the last line of a container with no padding. If this is the
+	case increase the padding bottom to at least 1px
+*/
+
+a.helpLink {
+	color:				Green;
+	text-decoration:	none;
+	border-bottom:		1px dashed Green;
+	cursor:				help;
+}
+
+a.helpLink:hover {
+	color:				Red;
+	text-decoration:	none;
+	border-bottom:		1px dashed Red;
+}
+
+.help-tooltip {
+	position:	absolute;
+	width:		250px;
+	border:		1px Solid WindowFrame;
+	background:	Infobackground;
+	color:		InfoText;
+	font:		StatusBar;
+	font:		Status-Bar;
+	padding:	3px;
+	filter:		progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3);
+	z-index:	10000;
+}
+
+
+.help-tooltip a,
+.help-tooltip a:hover {
+	color:		blue !important;
+	background:	none;
+}

www/extras/slider/local/helptip.js

@@ -0,0 +1,215 @@
+/*----------------------------------------------------------------------------\
+|                               Help Tip 1.1                                  |
+|-----------------------------------------------------------------------------|
+|                         Created by Erik Arvidsson                           |
+|                  (http://webfx.eae.net/contact.html#erik)                   |
+|                      For WebFX (http://webfx.eae.net/)                      |
+|-----------------------------------------------------------------------------|
+|           A tool tip like script that can be used for context help          |
+|-----------------------------------------------------------------------------|
+|                  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-09-27 |                                                                |
+| 2001-11-25 | Added a resize to the tooltip if the document width is too     |
+|            | small.                                                         |
+| 2002-05-19 | IE50 did not recognise the JS keyword undefined so the test    |
+|            | for scroll support was updated to be IE50 friendly.            |
+| 2002-07-06 | Added flag to hide selects for IE                              |
+| 2002-10-04 | (1.1) Restructured and made code more IE garbage collector     |
+|            | friendly. This solved the most nasty memory leaks. Also added  |
+|            | support for hiding the tooltip if ESC is pressed.              |
+|-----------------------------------------------------------------------------|
+| Dependencies: helptip.css (To set up the CSS of the help-tooltip class)     |
+|-----------------------------------------------------------------------------|
+| Usage:                                                                      |
+|                                                                             |
+|   <script type="text/javascript" src="helptip.js"></script>                 |
+|   <link type="text/css" rel="StyleSheet" href="helptip.css" />              |
+|                                                                             |
+|   <a class="helpLink" href="?" onclick="showHelp(event, 'String to show');  |
+|      return false">Help</a>                                                 |
+|-----------------------------------------------------------------------------|
+| Created 2001-09-27 | All changes are in the log above. | Updated 2002-10-04 |
+\----------------------------------------------------------------------------*/
+
+function showHelpTip(e, sHtml, bHideSelects) {
+
+	// find anchor element
+	var el = e.target || e.srcElement;
+	while (el.tagName != "A")
+		el = el.parentNode;
+	
+	// is there already a tooltip? If so, remove it
+	if (el._helpTip) {
+		helpTipHandler.hideHelpTip(el);
+	}
+
+	helpTipHandler.hideSelects = Boolean(bHideSelects);
+
+	// create element and insert last into the body
+	helpTipHandler.createHelpTip(el, sHtml);
+	
+	// position tooltip
+	helpTipHandler.positionToolTip(e);
+
+	// add a listener to the blur event.
+	// When blurred remove tooltip and restore anchor
+	el.onblur = helpTipHandler.anchorBlur;
+	el.onkeydown = helpTipHandler.anchorKeyDown;
+}
+
+var helpTipHandler = {
+	hideSelects:	false,
+	
+	helpTip:		null,
+	
+	showSelects:	function (bVisible) {
+		if (!this.hideSelects) return;
+		// only IE actually do something in here
+		var selects = [];
+		if (document.all)
+			selects = document.all.tags("SELECT");
+		var l = selects.length;
+		for	(var i = 0; i < l; i++)
+			selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden";	
+	},
+	
+	create:	function () {
+		var d = document.createElement("DIV");
+		d.className = "help-tooltip";
+		d.onmousedown = this.helpTipMouseDown;
+		d.onmouseup = this.helpTipMouseUp;
+		document.body.appendChild(d);		
+		this.helpTip = d;
+	},
+	
+	createHelpTip:	function (el, sHtml) {
+		if (this.helpTip == null) {
+			this.create();
+		}
+
+		var d = this.helpTip;
+		d.innerHTML = sHtml;
+		d._boundAnchor = el;
+		el._helpTip = d;
+		return d;
+	},
+	
+	// Allow clicks on A elements inside tooltip
+	helpTipMouseDown:	function (e) {
+		var d = this;
+		var el = d._boundAnchor;
+		
+		if (!e) e = event;
+		var t = e.target || e.srcElement;
+		while (t.tagName != "A" && t != d)
+			t = t.parentNode;
+		if (t == d) return;
+		
+		el._onblur = el.onblur;
+		el.onblur = null;
+	},
+	
+	helpTipMouseUp:	function () {
+		var d = this;
+		var el = d._boundAnchor;
+		el.onblur = el._onblur;
+		el._onblur = null;
+		el.focus();
+	},	
+	
+	anchorBlur:	function (e) {
+		var el = this;
+		helpTipHandler.hideHelpTip(el);
+	},
+	
+	anchorKeyDown:	function (e) {
+		if (!e) e = window.event
+		if (e.keyCode == 27) {	// ESC
+			helpTipHandler.hideHelpTip(this);
+		}
+	},
+	
+	removeHelpTip:	function (d) {
+		d._boundAnchor = null;
+		d.style.filter = "none";
+		d.innerHTML = "";
+		d.onmousedown = null;
+		d.onmouseup = null;
+		d.parentNode.removeChild(d);
+		//d.style.display = "none";
+	},
+	
+	hideHelpTip:	function (el) {
+		var d = el._helpTip;
+		d.style.visibility = "hidden";
+		d.style.top = - el.offsetHeight - 100 + "px"
+		d._boundAnchor = null;
+
+		el.onblur = null;
+		el._onblur = null;
+		el._helpTip = null;
+		el.onkeydown = null;
+		
+		this.showSelects(true);
+	},
+	
+	positionToolTip:	function (e) {
+		this.showSelects(false);		
+		var scroll = this.getScroll();
+		var d = this.helpTip;
+		
+		var dw = (window.innerWidth || document.documentElement.offsetWidth) - 25;
		
+		if (d.offsetWidth >= dw)
+			d.style.width = dw - 10 + "px";
		else
+			d.style.width = "";
		
+		if (e.clientX > dw - d.offsetWidth)
+			d.style.left = dw - d.offsetWidth + scroll.x + "px";
+		else
+			d.style.left = e.clientX - 2 + scroll.x + "px";
+		d.style.top = e.clientY + 18 + scroll.y + "px";
+		
+		d.style.visibility = "visible";
+	},
+	
+	// returns the scroll left and top for the browser viewport.
+	getScroll:	function () {
+		if (document.all && typeof document.body.scrollTop != "undefined") {	// IE model
+			var ieBox = document.compatMode != "CSS1Compat";
+			var cont = ieBox ? document.body : document.documentElement;
+			return {x : cont.scrollLeft, y : cont.scrollTop};
+		}
+		else {
+			return {x : window.pageXOffset, y : window.pageYOffset};
+		}
+		
+	}
+
+};

www/extras/slider/local/webfxapi.css

@@ -0,0 +1,41 @@
+/* This style sheet is used for WebFX Api pages */

a.helpLink,
+a.helpLink:hover {
+	color:				rgb(0,66,174);
+	border-bottom-color:rgb(0,66,174);
+}
+
+.help-tooltip {
+	width:	auto;
+}
+
+.help-tooltip h4,
+.help-tooltip table,
+.help-tooltip p {
+	width:	auto;
+}
+
+.methodContainer {
+	display:	none;
+}
+
+.methodInfo h4,
+.methodInfo thead td {
+	font-size:		13px;
+	background:		none;
+	border-bottom:	0;
+}
+
+.methodInfo h4,
+.methodInfo p, 
+.methodInfo table {
+	margin:		5px;
+	padding:	0;
+}
+
+td {
+	vertical-align:	top;
+}
+
+td code {
+	white-space:	nowrap;
+}

www/extras/slider/local/webfxapi.js

@@ -0,0 +1,20 @@
+/*
+ *	This script is used for WebFX Api pages
+ *
+ *	It defines one funtion and includes helptip.js, helptip.css and webfxapi.css
+ */
+
+document.write( "<script type='text/javascript' src='local/helptip.js'><\/script>" );
+document.write( "<link type='text/css' rel='stylesheet' href='local/helptip.css' />" );
+document.write( "<link type='text/css' rel='stylesheet' href='local/webfxapi.css' />" );
+
+function toggleMethodArguments( e, a ) {
+	if ( a && a.nextSibling &&
+		typeof a.nextSibling.innerHTML != "undefined" &&
+		typeof showHelpTip != "undefined" ) {
+	
+		showHelpTip( e, a.nextSibling.innerHTML );
+		
+	}
+}
+  

www/extras/slider/local/webfxlayout.css

@@ -0,0 +1 @@
+
/*

bright: rgb(234,242,255);
normal: rgb(120,172,255);
dark:	rgb(0,66,174);

*/

/* import menu css */
@import "dhtml/xmenu/xmenu.css";

#webfx-about {
	position:		absolute;
	background:		white;
	top:			102px;
	right:			10px;
	width:			20px;
	writing-mode:	tb-rl;
	filter:			flipH() flipV() alpha(opacity=50);
}

/* headers css */

#webfx-title {
	position:		absolute;
	left:			90px;
	top:			-5px;
	color:			black;
	background:		transparent;
	border:			0;
	
	padding:		0;
	margin:			0;
	
	font-family:	Arial Black, Verdana, Helvetica, Sans-Serif;
	font-weight:	bold;
	font-style:		italic;
	font-size:		45px;
	letter-spacing:	-5px;
}

#webfx-title-background {
	width:					100%;
	height:					67px;
	background:				white no-repeat;/*rgb(100,100,100) no-repeat;*/
	background-image:		url("title-background.png");
	background-position:	0 0;
}

#webfx-sub-title {
	position:		absolute;
	left:			96px;
	top:			45px;
	color:			black;
	background:		transparent;
	
	padding:		0;
	margin:			0;
	border:			0;
	
	font-family:	Verdana, Helvetica, Sans-Serif;
	font-size:		11px;
}

#webfx-menu-bar-1,
#webfx-menu-bar-2,
#webfx-menu-bar-3,
#webfx-menu-bar-4,
#webfx-menu-bar-5 {
	height:			2px;
	font-size:		0;
	overflow:		hidden;
	background:		rgb(120,172,255);/*#ff8800;*/

	padding:		0;
}

#webfx-menu-bar-1 {
	background:		rgb(0,66,174);/*rgb(120,172,255);/*black;/*rgb(234,242,255);*/
	height:			1px;
}

#webfx-menu-bar-2 {
	background:		rgb(120,172,255);/*#ff8800;*/
	height:			1px;
}

#webfx-menu-bar-3 {
	background:		rgb(120,172,255);/*#ff8800;*/
	height:			1px;
}

#webfx-menu-bar-4 {
	background:		rgb(0,66,174);
	height:			1px;
}

#webfx-menu-bar-5 {
	background:		#dddddd;
	height:			3px;
}

/* headers css end */


html, body {
	height:		100%;
	margin:		0;
	padding:	0;
	background:	url("background-shadow.gif") repeat-y white;
	color:		black;
	
	font-size:	13px;
	font-family:	"Verdana", "Tahoma", "Helvetica", "Sans-Serif";
}

.webfx-main-body {
	margin-left:	100px;
	border-left:	1px solid rgb(120,172,255);
	/*border-right:	1px solid rgb(120,172,255);*/
}

/* h1 only used in header */			
h2,h3,h4,h5,h6 {
	margin-left:	10px;
	margin-right:	10px;
	padding:		2px 10px 2px 10px;
	background:		rgb(234,242,255);
	border-bottom:	1px solid rgb(120,172,255);
	width:			480px;
	width:			expression(500);
}

h1,h2 {
	font-weight:	normal;
}

h3,h4,h5,h6 {
	font-weight:	bold;
}

h1 {
	font-size:		50px;
}

h2 {
	font-size:		20px;
}

h3 {
	font-size:		15px;
}

p {
	margin:			10px;
	font-size:		13px;
	color:			black;
	width:			500px;
}

td {
	font-size:		13px;
	font-family:	"Verdana", "Tahoma", "Helvetica", "Sans-Serif";
}

pre {
	margin:			20px;
	background:		#eeeeee;
	padding:		10px;
	border:			1px solid #dddddd;
	color:			black;
	width:			470px;
	width:			expression(490);
}

code {
	background:		#eeeeee;
	border:			1px solid #dddddd;
	color:			black;
}

a {
	text-decoration:underline;
	color:			rgb(0,66,174);
}

a:hover {/*rgb(0,66,174)*/
	color:			rgb(0,66,174);
	background:		rgb(234,242,255);
}

a:visited {
	color:			rgb(120,172,255);
}

a:visited:hover {
	color:			rgb(0,66,174);
}

hr {
	margin-left:		10px;
	margin-right:		10px;
	padding:			0;
	text-align:			left;
	width:				500px;
	height:				1px;
	color:				rgb(120,172,255);
	background-color:	rgb(120,172,255);
	border-bottom:		1px solid rgb(120,172,255);
	border:				0;
}

h2 a, h3 a {
	display:			block;
	text-decoration:	none;
	width:				expression("100%");
}

table {
	margin:			10px;
	font-size:		13px;
	color:			black;
	/*width:			500px;*/
}

thead td {
	background:		rgb(234,242,255);
	border-bottom:	1px solid rgb(120,172,255);
	font-weight:	bold;
}

.author {
	margin-top:		50px;
	font-style:		italic;
}

.date {
	color:			rgb(0,66,174);
}

.warning,
.warning a {
	color:			red;
}


.warning a:visited,
.warning a:hover {
	color:	red;
}

.warning a:hover {
	background:	rgb(255,230,230);
}



/* copied from xmenu.css */

.webfx-menu-bar {
	background:		rgb(120,172,255);/*rgb(255,128,0);*/

	padding:		2px;
	
	font-family:	Verdana, Helvetica, Sans-Serif;
	font-size:		11px;
	
}

.webfx-menu-bar a,
.webfx-menu-bar a:visited {
	color:				black;
	border:				1px solid rgb(120,172,255);/*rgb(255,128,0);*/
	
	text-decoration:	none;
	padding:			1px;
	padding-left:		5px;
	padding-right:		5px;
}

.webfx-menu-bar a:hover {
	color:			black;
	background:		rgb(120,172,255);
	border-left:	1px solid rgb(234,242,255);/*#ffcc88;*/
	border-right:	1px solid rgb(0,66,174);/*#884400;*/
	border-top:		1px solid rgb(234,242,255);/*#ffcc88;*/
	border-bottom:	1px solid rgb(0,66,174);/*#884400;*/
}

.webfx-menu-bar a .arrow {
	border:			0;
	float:			none;
/*
	float:			right;
	width:			6px;
	height:			16px;

	margin-right:	2px;
	background: red;
*/
}

.webfx-menu-bar a:active, .webfx-menu-bar a:focus {
	-moz-outline:	none;
	outline:		none;
}

/* end xmenu.css copy */

www/extras/slider/local/webfxlayout.js

@@ -0,0 +1,111 @@
+/* this is a dummy webfxlayout file to be used in download zip files */
+
+
+/* Do includes */
+
+if (window.pathToRoot == null)
+	pathToRoot = "./";
+
+document.write('<link type="text/css" rel="stylesheet" href="local/webfxlayout.css">');
+webfxMenuDefaultImagePath = pathToRoot + "images/";
+
+/* end includes */
+
+/* set up browser checks and add a simple emulation for IE4 */
+
+// check browsers
+var op = /opera 5|opera\/5/i.test(navigator.userAgent);
+var ie = !op && /msie/i.test(navigator.userAgent);	// preventing opera to be identified as ie
+var mz = !op && /mozilla\/5/i.test(navigator.userAgent);	// preventing opera to be identified as mz
+
+if (ie && document.getElementById == null) {	// ie4
+	document.getElementById = function(sId) {
+		return document.all[sId];
+	};
+}
+
+/* end browser checks */
+
+webfxLayout = {
+	writeTitle		:	function (s, s2) {
+		document.write("<div id='webfx-title-background'></div>");
+		if (op) {
+			document.write("<h1 id='webfx-title' style='top:9px;'>" + s + "</h1>");
+		}
+		else {
+			document.write("<h1 id='webfx-title'>" + s + "</h1>");
+		}
+
+		if (s2 == null)
+			s2 = "WebFX - What you never thought possible!";
+		
+		if (op) {
+			document.write("<span id='webfx-sub-title' style='top:46px;'>" + s2 + "</span>");
+		}
+		else {
+			document.write("<span id='webfx-sub-title'>" + s2 + "</span>");
+		}
+	},
+	writeMainTitle	:	function () {
+		this.writeTitle("WebFX", "What you never thought possible!");	
+	},
+	writeTopMenuBar		:	function () {
+		document.write("<div id='webfx-menu-bar-1'></div>");
+		if (op) {
+			document.write("<style>.webfx-menu-bar a {padding-top:3px;}</style>");
+			document.write("<div id='webfx-menu-bar-2' style='height:2px;'></div>");
+		}
+		else
+			document.write("<div id='webfx-menu-bar-2'></div>");
+		document.write("<div id='webfx-menu-bar'>");// div is closed in writeBottomMenuBar
+	},
+	writeBottomMenuBar	:	function () {
+		document.write("</div>");
+		if (op)
+			document.write("<div id='webfx-menu-bar-3' style='height:0px;'></div>");
+		else
+			document.write("<div id='webfx-menu-bar-3'></div>");
+		document.write("<div id='webfx-menu-bar-4'></div>");
+		document.write("<div id='webfx-menu-bar-5'></div>");
+	},
+	writeMenu			:	function () {
+		this.writeTopMenuBar();
+		//document.write(webfxMenuBar);
+		document.write("<div class='webfx-menu-bar'><a href='http://webfx.eae.net'>WebFX Home</a></div>");
+		this.writeBottomMenuBar();
+	},
+	writeDesignedByEdger	:	function () {
+		if (ie && document.body.currentStyle.writingMode != null)
+			document.write("<div id='webfx-about'>Page designed and maintained by " +
+					"<a href='mailto:erik@eae.net'>Erik Arvidsson</a> &amp; " +
+					"<a href='mailto:eae@eae.net'>Emil A Eklund</a>.</div>");
+	}
+};
+
+if (ie && window.attachEvent) {
+	window.attachEvent("onload", function () {
+		var scrollBorderColor	=	"rgb(120,172,255)";
+		var scrollFaceColor		=	"rgb(234,242,255)";
+		with (document.body.style) {
+			scrollbarDarkShadowColor	=	scrollBorderColor;
+			scrollbar3dLightColor		=	scrollBorderColor;
+			scrollbarArrowColor			=	"black";
+			scrollbarBaseColor			=	scrollFaceColor;
+			scrollbarFaceColor			=	scrollFaceColor;
+			scrollbarHighlightColor		=	scrollFaceColor;
+			scrollbarShadowColor		=	scrollFaceColor;
+			scrollbarTrackColor			=	"white";
+		}
+	});
+}
+
+/* we also need some dummy constructors */
+webfxMenuBar = {
+	add : function () {}
+};
+function WebFXMenu() {
+	this.add = function () {};
+}
+function WebFXMenuItem() {}
+function WebFXMenuSeparator() {}
+function WebFXMenuButton() {}

www/extras/slider/rgbdemo.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html>
+<head>
+<title></title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
+<style type="text/css">
+
+body, html {
+	overflow:	hidden;
+	margin:		0;
+	border:		0;
+	padding:	0;
+	width:		100%;
+	height:		100%;
+	background:	rgb(230,230,230);
+	font:		MessageBox;	
+	font:		Message-Box;
+}
+
+.color-picker {
+	background:	transparent;
+	width:		100%;
+	height:		100%;
+}
+
+.color-picker td {
+	padding:	1px;
+}
+
+.dynamic-slider-control {
+	width:		auto;
+	height:		20px;
+	margin:		0;
+}
+
+.color-picker input {
+	text-align:	right;
+	width:		30px;
+}
+.color-picker td,
+.color-picker input {
+	font:	Message-Box;
+	font:	MessageBox;
+}
+
+#color-result {
+	width:				60px;
+	border:				1px solid rgb(90,97,90);
+	background-color:	black;
+}
+
+</style>
+
+<script type="text/javascript" src="js/range.js"></script>
+<script type="text/javascript" src="js/timer.js"></script>
+<script type="text/javascript" src="js/slider.js"></script>
+</head>
+<body>
+
+<table class="color-picker" cellspacing="2" cellpadding="0" border="0">
+<col style="width: 40px" />
+<col style="" />
+<col style="width: 10px" />
+<col style="width: 50px" />
+<tr>
+	<td><label for="red-slider">Red:</label></td>
+	<td>
+		<div class="slider" id="red-slider" tabIndex="1">
+			<input class="slider-input" id="red-slider-input" />
+		</div>
+	</td>
+	<td><input id="red-input" maxlength="3" tabIndex="2" /></td>
+	<td rowspan="3" id="color-result"></td>
+</tr>
+<tr>
+	<td><label for="green-slider">Green:</label></td>
+	<td>
+		<div class="slider" id="green-slider" tabIndex="3">
+			<input class="slider-input" id="green-slider-input" />
+		</div>
+	</td>
+	<td><input id="green-input" maxlength="3" tabIndex="4" /></td>
+</tr>
+<tr>
+	<td><label for="blue-slider">Blue:</label></td>
+	<td>
+		<div class="slider" id="blue-slider" tabIndex="5">
+			<input class="slider-input" id="blue-slider-input" />
+		</div>
+	</td>
+	<td><input id="blue-input" maxlength="3" tabIndex="6" /></td>
+</tr>
+</table>
+
+
+
+
+
+
+
+
+<script type="text/javascript">
+
+// init code
+var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input"));
+r.setMaximum(255);
+var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input"));
+g.setMaximum(255);
+var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input"));
+b.setMaximum(255);
+
+var ri = document.getElementById("red-input");
+ri.onchange = function () {
+	r.setValue(parseInt(this.value));
+};
+
+var gi = document.getElementById("green-input");
+gi.onchange = function () {
+	g.setValue(parseInt(this.value));
+};
+
+var bi = document.getElementById("blue-input");
+bi.onchange = function () {
+	b.setValue(parseInt(this.value));
+};
+
+r.onchange = g.onchange = b.onchange = function () {
+	var cr = document.getElementById("color-result");
+	cr.style.backgroundColor = "rgb(" + r.getValue() + "," + 
+								g.getValue() + "," + 
+								b.getValue() + ")";
+	ri.value = r.getValue();
+	gi.value = g.getValue();
+	bi.value = b.getValue();
+	
+	if (typeof window.onchange == "function")
+		window.onchange();
+};
+
+r.setValue(128);
+g.setValue(128);
+b.setValue(128);
+
+// end init
+
+function setRgb(r, g, b) {
+	r.setValue(r);
+	g.setValue(g);
+	b.setValue(b);
+}
+
+function getRgb() {
+	return {
+		r:	r.getValue(),
+		g:	g.getValue(),
+		b:	b.getValue()
+	};
+}
+
+function fixSize() {
+	r.recalculate();
+	g.recalculate();
+	b.recalculate();
+}
+
+window.onresize = fixSize;
+
+fixSize();
+
+
+</script>
+
+
+</body>
+</html>

www/extras/slider/slider.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html>
+<head>
+<title>Slider (WebFX)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<script type="text/javascript" src="local/webfxlayout.js"></script>
+
+<script type="text/javascript" src="js/range.js"></script>
+<script type="text/javascript" src="js/timer.js"></script>
+<script type="text/javascript" src="js/slider.js"></script>
+<link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
+
+</head>
+<body>
+<!-- WebFX Layout Include -->
+<script type="text/javascript">
+
+var articleMenu= new WebFXMenu;
+articleMenu.left  = 384;
+articleMenu.top   = 86;
+articleMenu.width = 140;
+articleMenu.add(new WebFXMenuItem("Slider", "slider.html"));
+articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
+articleMenu.add(new WebFXMenuItem("API", "api.html"));
+articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
+articleMenu.add(new WebFXMenuSeparator);
+articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip"));
+webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
+
+webfxLayout.writeTitle("Slider");
+webfxLayout.writeMenu();
+webfxLayout.writeDesignedByEdger();
+
+</script>
+<div class="webfx-main-body">
+<!-- end WebFX Layout Includes -->
+
+<p>
+<span class="date">2002-10-07</span>: First public version released
+</p>
+
+<h2>Introduction</h2>
+
+<p>Sliders are useful controls for choosing a value in a range of values.
+Common uses are volume controls, seekers for movie and sound files as well
+as color pickers. A few people have asked for an update to the old
+<a href="http://webfx.eae.net/dhtml/slidebar/slidebar.html">Slidebar</a>
+component to make it work in Mozilla and work better in IE. But since the
+original control was very basic and was not very usable I decided to
+create a new one.</p>
+
+<form onsubmit="return false;">
+<div class="slider" id="slider-1" tabIndex="1" style="width: auto; margin: 10px;">
+	<input class="slider-input" id="slider-input-1"/>
+</div>
+</form>
+
+<script type="text/javascript">
+
+var sliderEl = document.getElementById ? document.getElementById("slider-1") : null;
+var inputEl = document.forms[0]["slider-input-1"];
+var s = new Slider(sliderEl, inputEl);
+s.onchange = function () {
+	window.status = "Value: " + s.getValue();
+};
+s.setValue(50);
+
+</script>
+
+<p>When starting with the new slider a few main features where kept in mind:</p>
+
+<ul>
+	<li>Degrade gracefully for browser without the needed DOM support. This is
+		achieved by using a basic text input as the base for the control. In case
+		the browser does not support the needed features then the input can be used
+		in the normal way.</li>
+	<li>Full mouse support. Lots of slider controls does not support anything beyond dragging
+		the handle. The goal was to allow the user to be able to both drag the handle
+		and hold down the mouse anywhere on the slider to move the handle towards the
+		mouse.</li>
+	<li>Full keyboard support. Once the slider is focused the arrow keys and Page Up /
+		Page Down can be used to change the value.</li>
+	<li>Mouse wheel support where available.</li>
+	<li>Skinable using different CSS files.</li>
+</ul>
+
+<h2>Requirements</h2>
+
+<p>The slider works in <strong>any</strong> browser but the GUI component works in
+browsers with simple DOM level 1 support with one IE extended proprietary property.
+That property is <code>offsetWidth</code> (and <code>offsetHeight</code>) and this is
+known to be supported by IE5+, Mozilla 1.0+, Konqueror 3+ and it is assumed other future
+browsers will support this as well because it has become a de facto standard.</p>
+
+<h2>Usage</h2>
+
+<p>To use the slider we have to include a few JS files and a CSS file.</p>
+
+<pre>
+&lt;script type="text/javascript" src="<a href="js/range.js">js/range.js</a>"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="<a href="js/timer.js">js/timer.js</a>"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="<a href="js/slider.js">js/slider.js</a>"&gt;&lt;/script&gt;
+&lt;link type="text/css" rel="StyleSheet" href="<a href="css/winclassic.css">css/winclassic.css</a>" /&gt;
+</pre>
+
+<p>Then we need to define the HTML to use for the slider. Something like this:</p>
+
+<pre>
+&lt;div class="slider" id="slider-1" tabIndex="1"&gt;
+   &lt;input class="slider-input" id="slider-input-1"
+      name="slider-input-1"/&gt;
+&lt;/div&gt;
+</pre>
+
+<p>After this we have to create the JS object that handles the logic. If we only
+plan to use this in pages and applications that you know will support the dynamic
+slider control we can use the following script block. This should be placed directly
+after the slider div.</p>
+
+<pre>
+&lt;script type="text/javascript"&gt;
+
+var s = new Slider(document.getElementById("slider-1"),
+                   document.getElementById("slider-input-1"));
+
+&lt;/script&gt;
+</pre>
+
+<p>If we however cannot guarantee that all user uses browsers that support
+<code>document.getElementById</code> we should use <code>document.forms</code>
+to find the input and test whether <code>document.getElementById</code> is
+defined.</p>
+
+<pre>
+&lt;script type="text/javascript"&gt;
+
+var sliderEl = document.getElementById ?
+                  document.getElementById("slider-1") : null;
+var inputEl = document.forms[0]["slider-input-1"];
+var s = new Slider(sliderEl, inputEl);
+
+&lt;/script&gt;
+</pre>
+
+<p>
+<a href="slider.html">Slider</a><br />
+<a href="implementation.html">Implementation</a><br />
+<a href="api.html">API</a><br />
+<a href="demo.html">Demo</a><br />
+<a href="http://webfx.eae.net/download/slider102.zip">Download</a>
+</p>
+
+<p class="author">Author: Erik Arvidsson</p>
+
+<!-- end webfx-main-body -->
+</div>
+
+</body>
+</html>