Scriptaculous slider setting track left: -100...

This is my code:

function init(){
	for(i=1;i<4;i++){
		Control[i]=[];
		Control[i].indicator=new Element('a',{
					id:'value'+i,
		});
		Control[i].handle=new Element('img',{
					id:'handle'+i,
					src:'../images/controls/sliderButton.png',
		});
		Control[i].track=new Element('div',{
					id:'track'+i,
		});
		Control[i].slider=new Control.Slider(Control[i].track,Control[i].handle,{
					id:'slider'+i,															 
					position:'relative',
					axis:'horizontal',
					minimum:1,
					maximum:100,
					alignX:50,
					sliderValue:50,
					disabled: false,
					onSlide:function(value){
					$('value'+i).innerHTML=value;
					}
		});
		$('controlSet').insert(Control[i].track);
		$(Control[i].track).insert(Control[i].handle);
		$('controlSet').insert(Control[i].indicator);
	}
	for(i=0;

Code (markup):

This is html from firebug inspector:

<div id="controlSet" class="Controls" align="center" style="top: 101.6px; left: 12.7px; width: 101.6px; height: 355.6px;">
<div id="track1" class="selected" style="left: -100px; position: relative;">
<img id="handle1" src="../images/controls/sliderButton.png"/>
</div>
<a id="value1"/>
<div id="track2" class="selected" style="left: -100px; position: relative;">
<img id="handle2" src="../images/controls/sliderButton.png"/>
</div>
<a id="value2"/>
<div id="track3" class="selected" style="left: -100px; position: relative;">
<img id="handle3" src="../images/controls/sliderButton.png"/>
</div>
<a id="value3"/>
</div>
</div>

HTML:

Why is scriptaculous setting left:-100 ???
Please examine this yourself-> http://orbzorbz.com

 

Your website isn't working for me right now