function $X(element)
{
	element = document.getElementById(element);
	return element;
}

$(document).ready(function(){
	var scrollElements = [ "arrowColor", "trackColor", "faceColor", "highlightColor", "3dHighlightColor", "darkShadowColor", "shadowColor" ];
	
	jQuery.each(scrollElements, function() {
		$("#" + this).change(function () {
			boxUpdate();
		}).keyup(function () {
			boxUpdate();
		});
	});
	
	$('#arrowColor, #trackColor, #faceColor, #highlightColor, #3dHighlightColor, #darkShadowColor, #shadowColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			boxUpdate();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("boxUpdate();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
});

function boxUpdate()
{
	$X('scroll').style.scrollbarFaceColor = $("#faceColor").val();
	$X('scroll').style.scrollbarHighlightColor = $("#highlightColor").val();
	$X('scroll').style.scrollbar3dLightColor = $("#3dHighlightColor").val();
	$X('scroll').style.scrollbarShadowColor = $("#shadowColor").val();
	$X('scroll').style.scrollbarDarkShadowColor = $("#darkShadowColor").val();
	$X('scroll').style.scrollbarArrowColor = $("#arrowColor").val();
	$X('scroll').style.scrollbarTrackColor = $("#trackColor").val();
}