Javascript-форум - Помогите разобраться с галереей на JS

Всем привет!
Имеется следующий код (простенькая галерея)

<script type="text/javascript">
var count = 1;
var pic=new Array('1a.jpg','1b.jpg','1c.jpg','2a.jpg','2b.jpg' ,'2c.jpg','3a.jpg','3b.jpg','3c.jpg');
//где а-большой рисунок; b-маленький цветной рисунок; c-маленький черно-белый рисунок.

i=0; colpic=3;j=0;
function change(i)
{
j=(count+i-1)%colpic;
document.all.main.src=pic[j*colpic];
}
function change1(i)
{
j=(count+i-1)%colpic;
event.srcElement.src=pic[j*colpic+1];
}
function change2(i)
{
j=(count+i-1)%colpic;
event.srcElement.src=pic[j*colpic+2];
}

var count = 0;

var imgslide =new Array('1c.jpg','2c.jpg','3c.jpg');

function dem(flag) {
if(flag) {
count++;
if(count > colpic-1) count = 0;
} else {
count--;
if(count <= 0) count = colpic-1;
}

document.all.img1.src = imgslide[count%colpic];
document.all.img2.src = imgslide[(count+1)%colpic];
document.all.img3.src = imgslide[(count+2)%colpic];
}
</script>
</head>
<body>
<div align="center">
<img src="1a.jpg" id="main"> <br>
<img src="left.png" onClick="dem(false)">
<img src="1c.jpg" Id="img1" border="1" onclick="change(1)" onmouseover="change1(1)" onmouseout="change2(1)">
<img src="2c.jpg" Id="img2" border="1" onclick="change(2)" onmouseover="change1(2)" onmouseout="change2(2)">
<img src="3c.jpg" Id="img3" border="1" onclick="change(3)" onmouseover="change1(3)" onmouseout="change2(3)">
<img src="right.png" onClick="dem(true)">
</div>

Никак не могу добавить туда свое кол-во картинок (например 7), чтобы они листались.
Помогите пожалуйста.