<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='powderblue' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

	Slider color mixer example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

	Isomorphic SmartClient SDK

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>

function num2hex(num) {
	var lowWord = num%16,
		highWord = (num-lowWord)/16;
	return num2hexdigit(highWord)+""+num2hexdigit(lowWord);
}

function num2hexdigit(num) {
	if (num == 10) return "A";
	else if (num == 11) return "B";
	else if (num == 12) return "C";
	else if (num == 13) return "D";
	else if (num == 14) return "E";
	else if (num == 15) return "F";
	else return ""+num;
}

var colorBox = Canvas.newInstance({
	left:400,
	top:115,
	width:200,
	height:200,
	red:"77",
	green:"77",
	blue:"77",
	backgroundColor:"777777",
	sliderMove:function(event,slider){
		var newColor = num2hex(Math.round(slider.value));
		if (slider.ID == "sliderRed") this.red = newColor;
		else if (slider.ID == "sliderGreen") this.green = newColor;
		else if (slider.ID == "sliderBlue") this.blue = newColor;
		this.setBackgroundColor(this.red+""+this.green+""+this.blue);
		return false;
	}
});

Slider.newInstance({
	ID:"sliderRed",
	title:"Red",
	left:60,
	top:90,
	sliderTarget:colorBox,
	value:128,
	minValue:0,
	maxValue:255
});


Slider.newInstance({
	ID:"sliderGreen",
	title:"Green",
	left:155,
	top:90,
	//sliderTarget:colorBox,
	value:128,
	minValue:0,
	maxValue:255
});


Slider.newInstance({
	ID:"sliderBlue",
	title:"Blue",
	left:250,
	top:90,
	//sliderTarget:colorBox,
	value:128,
	minValue:0,
	maxValue:255
});


Slider.newInstance({
	ID:"sliderSize",
	title:"Size",
	left:350,
	top:330,
	vertical:false,
	value:200,
	minValue:20,
	minValueLabel:"Small",
	maxValue:200,
	maxValueLabel:"Big",
	numValues:10
});


//colorBox.observe(sliderRed, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderGreen, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderBlue, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderSize, "valueChanged", "observer.resizeTo(observed.value,observed.value)");

</SCRIPT>
</BODY>
</HTML>