var minVal = ""
var maxVal = ""
var inc = ""
var incBig = ""

function fillTextareas(){

label = document.forms['frmSliderGen'].txtsliderlabel.value;
minVal = document.forms['frmSliderGen'].txtlowestsliderValId.value;
maxVal =  document.forms['frmSliderGen'].txthighestsliderva.value;
inc =  document.forms['frmSliderGen'].txtsliderincrement.value;
incBig =  document.forms['frmSliderGen'].txtsliderlargein.value;
var labelCondensed = label.replace(/ /g,"").toLowerCase();
var sliderRailId = "slider_" + labelCondensed + "_Rail";
var sliderValId = "slider_" + labelCondensed + "_Value";
var sliderThumbId = "slider_" + labelCondensed + "_Thumb";

var strJS="";

strJS+="\/\/globals\n";
strJS+="var gDragging = '';\n";
strJS+="var gDragOffset = 0;\n";
strJS+="function $(id) {\n";
strJS+="return document.getElementById(id);\n";
strJS+="}\n";
strJS+="\/\/get the ratio between the slider length and the slider\'s value maximum\n";
strJS+="function calibrate(target) {\n";
strJS+="var rail = target.parentNode;\n";
strJS+="var sliderLength = rail.clientWidth - target.clientWidth ;\n";
strJS+="var max = parseInt(target.getAttribute(\'aria-valuemax\'));\n";
strJS+="return sliderLength \/ max;\n";
strJS+="}\n";
strJS+="\/\/get the left offset of the rail, needed for conversion of mouse coordinates\n";
strJS+="function getHOffset(elem) {\n";
strJS+="var node = elem;\n";
strJS+="var offset = node.offsetLeft;\n";
strJS+="while(node.offsetParent) {\n";
strJS+="node = node.offsetParent;\n";
strJS+="if (node.nodeName.toLowerCase() != 'html') {	\n";
strJS+="offset += node.offsetLeft;\n";
strJS+="}\n";
strJS+="}\n";
strJS+="return offset;\n";
strJS+="}\n";
strJS+="function getHScrollOffset() {\n";
strJS+="var scrollOffset\n";
strJS+="if (window.pageLeft !== undefined) {\n";
strJS+="scrollOffset = window.pageLeft;\n";
strJS+="}\n";
strJS+="else if (document.documentElement && document.documentElement.scrollLeft !== undefined) {\n";
strJS+="scrollOffset = document.documentElement.scrollLeft;\n";
strJS+="} \n";
strJS+="else if (document.body.scrollLeft !== undefined) {\n";
strJS+="scrollOffset = document.body.scrollLeft;\n";
strJS+="}\n";
strJS+="return scrollOffset;\n";
strJS+="}\n";
strJS+="function handleKeyDown(event) {\n";
strJS+="var event = event || window.event;\n";
strJS+="var keyCode = event.keyCode || event.charCode;\n";
strJS+="var target = event.target || event.srcElement; \n";
strJS+="switch (keyCode) {\n";
strJS+="case 37: \/\/ left arrow\n";
strJS+="decrement(target, false);\n";
strJS+="break;\n";
strJS+="case 39: \/\/right arrow\n";
strJS+="increment(target, false);\n";
strJS+="break;\n";
strJS+="case 33: \/\/ page up\n";
strJS+="increment(target, true);\n";
strJS+="break;\n";
strJS+="case 34: \/\/ page down\n";
strJS+="decrement(target, true);\n";
strJS+="break;\n";
strJS+="case 36: \/\/ home\n";
strJS+="changeValue(target, 0);\n";
strJS+="break;		\n";
strJS+="case 35: \/\/ end\n";
strJS+="changeValue(target, 100);\n";
strJS+="break;		\n";
strJS+="case 27: \/\/ escape\n";
strJS+="target.blur();\n";
strJS+="break;\n";
strJS+="default:\n";
strJS+="passThrough = true;\n";
strJS+="break;\n";
strJS+="}\n";
strJS+="}\n";
strJS+="function handleRailMouseDown(event) {\n";
strJS+="event = event || window.event;\n";
strJS+="var target = event.target || event.srcElement;\n";
strJS+="var thumb = $(target.id.replace(\/Rail\/, \'Thumb\'));\n";
strJS+="var newPos = event.clientX - getHOffset(target)+ getHScrollOffset() - (thumb.clientWidth \/ 2);\n";
strJS+="changeValue(thumb, mapPositionToValue(thumb, newPos));\n";
strJS+="if (!document.activeElement || !document.activeElement !== thumb) {\n";
strJS+="thumb.focus();\n";
strJS+="}\n";
strJS+="return false;\n";
strJS+="}\n";
strJS+="function handleThumbMouseDown(event) {\n";
strJS+="event = event || window.event;\n";
strJS+="var target = event.target || event.srcElement;\n";
strJS+="gDragging = target.id;\n";
strJS+="gDragOffset = event.clientX - getHOffset(target.parentNode) - target.offsetLeft + getHScrollOffset();\n";
strJS+="document.onmousemove = handleDrag;\n";
strJS+="document.onmouseup = stopDrag;\n";
strJS+="if (!document.activeElement || document.activeElement !== target) {\n";
strJS+="target.focus();\n";
strJS+="}\n";
strJS+="cancelEvent(event);\n";
strJS+="return false;\n";
strJS+="}\n";
strJS+="function handleDrag(event) {\n";
strJS+="event = event || window.event;\n";
strJS+="if (gDragging === '') {\n";
strJS+="return;\n";
strJS+="}\n";
strJS+="else {\n";
strJS+="var target = $(gDragging);\n";
strJS+="var newPos = event.clientX - getHOffset(target.parentNode) + getHScrollOffset() - gDragOffset;\n";
strJS+="changeValue(target, mapPositionToValue(target, newPos));\n";
strJS+="}\n";
strJS+="}\n";
strJS+="this.stopDrag = \n";
strJS+="function (event) {\n";
strJS+="gDragging = '';\n";
strJS+="gDragOffset = 0;\n";
strJS+="document.onmousemove = null;\n";
strJS+="document.onmouseup = null;\n";
strJS+="}\n";
strJS+="function mapPositionToValue(target, pos) {\n";
strJS+="return Math.round(pos \/ calibrate(target));\n";
strJS+="}\n";
strJS+="function increment(target, byChunk) {\n";
strJS+="var newValue = parseInt(target.getAttribute(\'aria-valuenow\')) + (byChunk ? " + incBig + " : " + inc + "); \n";
strJS+="changeValue(target, newValue);	\n";
strJS+="}\n";
strJS+="function decrement(target, byChunk) {\n";
strJS+="var newValue = parseInt(target.getAttribute(\'aria-valuenow\')) - (byChunk ? " + incBig + " : " + inc + "); \n";
strJS+="changeValue(target, newValue);	\n";
strJS+="}\n";
strJS+="function changeValue(target, value) {\n";
strJS+="var ratio = calibrate(target);\n";
strJS+="var min = parseInt(target.getAttribute(\'aria-valuemin\'));\n";
strJS+="var max = parseInt(target.getAttribute(\'aria-valuemax\'));\n";
strJS+="var newValue = Math.min(Math.max(value, min), max);\n";
strJS+="var newPos = Math.round(newValue * ratio) ;		\n";
strJS+="target.style.left = newPos + 'px';\n";
strJS+="target.setAttribute(\'aria-valuenow\', newValue);\n";
strJS+="target.setAttribute(\'aria-valuetext\', newValue + '%');			\n";
strJS+="updateValueIndicator(target.id.replace(\/Thumb\/, \'Value\'), newValue + '%');\n";
strJS+="}\n";
strJS+="function updateValueIndicator(id, value) {\n";
strJS+="var elem = $(id);\n";
strJS+="elem.replaceChild(document.createTextNode(value), elem.firstChild);\n";
strJS+="}\n";
strJS+="function setHandlers(slider) {\n";

strJS+="slider.setAttribute('aria-labelledby','" + sliderRailId + "');\n";
strJS+="slider.setAttribute('aria-valuemin','" + minVal + "');\n";
strJS+="slider.setAttribute('aria-valuemax','" + maxVal + "');\n";
strJS+="slider.setAttribute('aria-valuenow','" + minVal + "');\n";
strJS+="slider.setAttribute('aria-valuetext','" + minVal + "');\n";
strJS+="slider.setAttribute('role','slider');\n";

strJS+="slider.parentNode.onmousedown 	= handleRailMouseDown;\n";
strJS+="slider.onmousedown 	= handleThumbMouseDown;\n";
strJS+="slider.onkeydown 	= handleKeyDown;\n";
strJS+="slider.parentNode.onfocus = \n";
strJS+="function (event) { \/\/temp IE fix\n";
strJS+="event = event || window.event;\n";
strJS+="var target = event.target || event.srcElement;\n";
strJS+="var thumb = $(target.id.replace(\/Rail\/, \'Thumb\'));\n";
strJS+="if (thumb)\n";
strJS+="thumb.focus();	\n";
strJS+="}\n";
strJS+="}\n";
strJS+="function cancelEvent(event) {\n";
strJS+="if (typeof event.stopPropagation == 'function') {\n";
strJS+="event.stopPropagation();\n";
strJS+="}\n";
strJS+="else if (typeof event.cancelBubble != 'undefined') {\n";
strJS+="event.cancelBubble = true;	\n";
strJS+="}\n";
strJS+="if (event.preventDefault) {\n";
strJS+="event.preventDefault();\n";
strJS+="}\n";
strJS+="return false;\n";
strJS+="}\n";
strJS+="function init() {\n";
strJS+="setHandlers($(\'" + sliderThumbId + "\'));\n";
strJS+="}\n";
strJS+="window.onload = init;\n";

var strCSS='';

strCSS+='.sliderRail {\n';
strCSS+='width: 200px;\n';
strCSS+='height: 16px;\n';
strCSS+='border: 1px solid #999999;\n';
strCSS+='position: relative;\n';
strCSS+='margin: 0px 3px 0px 3px;\n';
strCSS+='}\n';
strCSS+='.sliderThumb:focus{\n';
strCSS+='border: 1px solid #000;\n';
strCSS+='background-color: #00CCCC;\n';
strCSS+='}\n';
strCSS+='.sliderThumb {\n';
strCSS+='margin: 0px;\n';
strCSS+='padding: 0px;\n';
strCSS+='width: 16px; \n';
strCSS+='height: 16px;\n';
strCSS+='background: #EEEEEE;\n';
strCSS+='border: 1px solid #999999;\n';
strCSS+='position: absolute;\n';
strCSS+='}\n';
strCSS+='.floatLeft {\n';
strCSS+='float:left;\n';
strCSS+='}\n';
strCSS+='\/* clearfix *\/\n';
strCSS+='.clearfix:after {\n';
strCSS+='content: ".";\n';
strCSS+='display: block;\n';
strCSS+='clear: both;\n';
strCSS+='visibility: hidden;\n';
strCSS+='line-height: 0;\n';
strCSS+='height: 0;\n';
strCSS+='}\n';
strCSS+='.clearfix {\n';
strCSS+='display: inline-block;\n';
strCSS+='}\n';
strCSS+='html[xmlns] .clearfix {\n';
strCSS+='display: block;\n';
strCSS+='}\n';
strCSS+='* html .clearfix {\n';
strCSS+='height: 1%;\n';
strCSS+='}\n';

var strHTML='';

strHTML+='<div class="clearfix">\n';
strHTML+='<span id="sliderLabel" class="floatLeft">' + label + ':<\/span>\n';
strHTML+='<div id="' + sliderRailId + '" class="sliderRail floatLeft">\n';
strHTML+='<button class="sliderThumb" id="' + sliderThumbId + '"><\/button>\n';
strHTML+='<\/div>\n';
strHTML+='<span id="' + sliderValId + '" class="floatLeft">' + minVal + '<\/span>\n';
strHTML+='<\/div>\n';

strHTML+='<h2>Keyboard controls<\/h2>\n';
strHTML+='<ul>\n';
strHTML+='<li>Use left and right arrows to change the value by ' + inc + '.<\/li>\n';
strHTML+='<li>Use page up and page down to change the value by ' + incBig + '.<\/li>\n';
strHTML+='<li>Use home and end to move to the first and last value.<\/li>\n';
strHTML+='<\/ul>\n';

var strNewDoc='';
strNewDoc+='<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" ';
strNewDoc+='"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">';
strNewDoc+='<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">';
strNewDoc+='<head>';
strNewDoc+='<meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1" \/>';
strNewDoc+='<title>Slider example<\/title>';
strNewDoc+='<script>';
strNewDoc+=strJS;
strNewDoc+='<\/script>';
strNewDoc+='<style>';
strNewDoc+=strCSS;
strNewDoc+='<\/style>';
strNewDoc+='<\/head>';
strNewDoc+='<body>';
strNewDoc+=strHTML;
strNewDoc+='<\/body>';
strNewDoc+='<\/html>';

document.forms['frmSliderGen'].textareaJS.value=strJS;
document.forms['frmSliderGen'].textareaCSS.value=strCSS;
document.forms['frmSliderGen'].textareaHTML.value=strHTML;
document.forms['frmSliderGen'].textareaAll.value=strNewDoc;
$("#results").slideDown('fast');
}
function initSliderBuilder()
{
document.getElementById("gen").onclick = fillTextareas;
}
$(document).ready(function(){
	initSliderBuilder();
	$("#results").hide();
});