Horizontal Image Scroller help

[JayStang]

Hey Guys,
I'm working on making a products section for a jewlery store that uses a horizontal scroller to sort through images of differnt products. I'm having an issue getting the scroller to sroll everything to the right. So far i only have the right working properly.

Example of scroller (http://staging.ctechnow.com/baribaultjewelers/HTML_Templates/products.html)

Here is the code that i'm using so far.


<script type="text/javascript">

var pic = new Array()

function ScrollItem(name, width){
this.name = name;
this.width = width;
}

pic[0] = new ScrollItem('images/products/1.jpg',92);
pic[1] = new ScrollItem('images/products/2.jpg',98);
pic[2] = new ScrollItem('images/products/3.jpg',103);
pic[3] = new ScrollItem('images/products/4.jpg',97);
pic[4] = new ScrollItem('images/products/5.jpg',85);
pic[5] = new ScrollItem('images/products/6.jpg',105);
pic[6] = new ScrollItem('images/products/7.jpg',68);
pic[7] = new ScrollItem('images/products/1.jpg',92);
pic[8] = new ScrollItem('images/products/2.jpg',98);
pic[9] = new ScrollItem('images/products/3.jpg',103);
pic[10] = new ScrollItem('images/products/4.jpg',97);
pic[11] = new ScrollItem('images/products/5.jpg',85);
pic[12] = new ScrollItem('images/products/6.jpg',105);
pic[13] = new ScrollItem('images/products/7.jpg',68);

var speed = 1;

var kk = pic.length;
var ii;
var hhh;
var nnn;
var myInterval;
var myPause;

var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image();
imgArray[ii].src = pic[ii].name;
imgArray[ii].width = pic[ii].width;

hhh=0;
for (nnn=0;nnn<ii;nnn++){
hhh=hhh+pic[nnn].width;
}
myLeft[ii] = hhh;
}


function leftScroll(){
for (ii=0;ii<kk;ii++){
myLeft[ii] = myLeft[ii] - 1;

if (myLeft[ii] == -(pic[ii].width)){
hhh = 0;
for (nnn=0;nnn<kk;nnn++){
if (nnn!=ii){
hhh = hhh + pic[nnn].width;
}
}
myLeft[ii] = hhh;
}

document.images[ii].style.left = myLeft[ii];
}
}

function rightScroll(){
/*

SCROLLING RIGHT CODE

*/
}

function leftStop(){
window.clearInterval(leftInterval);
}

function rightStop(){
window.clearInterval(rightInterval);
}

function leftGo(){
leftInterval = setInterval("leftScroll()",speed)

}

function rightGo(){
rightInterval = setInterval("rightScroll()",speed)
}

function showColor(image){
image.style.filter = '';
image.style.MozOpacity = '1';
}

function hideColor(image){
image.style.filter = 'Alpha(Opacity=50)';
image.style.MozOpacity = '0.3';
}

function clickColor(image){
hideAllColor();

image.style.filter = '';
image.style.MozOpacity = '1';
}

function hideAllColor(){

}

for (ii=0;ii<kk;ii++){
document.write('<img space="0" hspace="0" vspace="0" border="0" height="74" style="position:absolute;top:0;left:' + myLeft[ii] + '; Filter: Alpha(Opacity=50); -moz-opacity: 0.3;" src="' + pic[ii].name + '" id="ProductImage_' + ii +'" onMouseOver="showColor(this);" onMouseOut="hideColor(this);" onClick="clickColor(this);" >')
}
</script>



i'm not 100% confident with how this code works, which is why i'm having such a hard time writting the functionality to sroll right. If any one has any suggestions or advice let me know.

Thanks in advance,
~Jamie