Vertical Image Scroller 4

<HTML>
<HEAD>
<TITLE>Vertical Image Scroller 4</TITLE>

<script type="text/javascript">

vs4Arr=[

["pic01.jpg","pic01.jpg","Alt Text"],
["pic02.jpg","pic02.jpg","Alt Text"],
["pic03.jpg","pic03.jpg","Alt Text"],
["pic04.jpg","pic04.jpg","Alt Text"],
["pic05.jpg","pic05.jpg","Alt Text"]
/*
["pic06.jpg","pic06.jpg","Alt Text"],
["pic07.jpg","pic07.jpg","Alt Text"],
["pic08.jpg","pic08.jpg","Alt Text"],
["pic09.jpg","pic09.jpg","Alt Text"],
["pic10.jpg","pic10.jpg","Alt Text"]
*/

]

dir=0 // 0 = up 1 = down
speed=2
imageSize=50  // %
fixedWidth=100 // set a fixed width
fixedHeight=100 // set a fixed height

popupLeft= 100 // pixels
popupTop= 100 // pixels

biggest=0
ieBorder=0
sv4Timer=null

preload=new Array()
for(var i=0;i<vs4Arr.length;i++){
preload[i]=new Image()
preload[i].src=vs4Arr[i][0]
}

function initVS4(){
scroll1=document.getElementById("scroller1")

for(var j=0;j<vs4Arr.length;j++){

scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+vs4Arr[j][2]+'" onclick="showBigPic('+j+')"><br>'

if(imageSize!=0){ // use percentage size
newWidth=preload[j].width/100*imageSize
newHeight=preload[j].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}

document.getElementById("pic"+j).style.width=newWidth+"px"
document.getElementById("pic"+j).style.height=newHeight+"px"

if(document.getElementById("pic"+j).offsetWidth>biggest){
biggest=document.getElementById("pic"+j).offsetWidth
}

}

scrollBox=document.getElementById("scroll_box")

if(document.getElementById&&document.all&&document.compatMode!="CSS1Compat"){
ieBorder=parseInt(scrollBox.style.borderTopWidth)*2
}

scrollBox.style.width=biggest+ieBorder+"px"

scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.top=scroll1.offsetHeight+"px"

if(dir==0){
speed= -speed
}

scrollVS4()
}

function scrollVS4(){
if(paused==1){return}
clearTimeout(sv4Timer)

scroll1Pos=parseInt(scroll1.style.top)
scroll2Pos=parseInt(scroll2.style.top)

scroll1Pos+=speed
scroll2Pos+=speed

scroll1.style.top=scroll1Pos+"px"
scroll2.style.top=scroll2Pos+"px"

sv4Timer=setTimeout("scrollVS4()",60)

if(dir==0){
if(scroll1Pos< -scroll1.offsetHeight){
scroll1.style.top=scroll1.offsetHeight+"px"
}

if(scroll2Pos< -scroll1.offsetHeight){
scroll2.style.top=scroll1.offsetHeight+"px"
}
}

if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.height)){
scroll1.style.top=(scroll2Pos-scroll1.offsetHeight)+"px"
}

if(scroll2Pos>parseInt(scrollBox.style.height)){
scroll2.style.top=(scroll1Pos - scroll2.offsetHeight)+"px"
}
}

}

st=null
function pause(){
clearTimeout(sv4Timer)
clearTimeout(st)
}

function reStartVS4(){
clearTimeout(st)
st=setTimeout("scrollVS4()",100)
}

paused=0
picWin=null
chkTimer=null

function showBigPic(p){

if(vs4Arr[p][1]!=""){
paused=1

if(picWin&&picWin.open&&!picWin.closed){picWin.close()} // if picWin exists close it

if(vs4Arr[p][1].indexOf("htm")==-1){
bigImg=new Image()
bigImg.src=vs4Arr[p][1]

data="\n<center>\n<img src='"+bigImg.src+"'>\n<\/center>\n"

var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"

picWin=window.open("","win1",winProps)
picWin.document.write("<HTML>\n<HEAD>\n<TITLE><\/TITLE>\n")
picWin.document.write("<\/HEAD>\n")
picWin.document.write("<BODY style='backgground-color:black;margin-top:10px;margin-left10px'>\n")
picWin.document.write("<div id=\"display\">"+data+"<\/div>")
picWin.document.write("\n<\/BODY>\n<\/HTML>")
picWin.document.close()
}
else{
picWin=window.open(vs4Arr[p][1])
}

}
clearTimeout(chkTimer)
}

window.onfocus=function(){
/*
clearTimeout(chkTimer)
if(picWin&&picWin.open&&!picWin.closed){
chkTimer=setTimeout("picWin.close()",10000) // uncomment to have popup closed when blurred
}
*/
paused=0
scrollVS4()
}

// add onload="initVS4()" to the opening body tag

</script>

<style type="text/css">

#scroller1 img,#scroller2 img{
margin-top:5px;
margin-bottom:5px;
border:4px solid #7777aa;
}

</style>

</HEAD>
<BODY onload="initVS4()">
<h1>Vertical Image Scroller 4</h1>

<div id="scroller1" style="position:absolute;left:0px;top:0px;text-align:center"></div>
<div id="scroller2" style="position:absolute;left:0px;top:0px;text-align:center"></div>
</DIV>

</BODY>
</HTML>