dir=0; // 0 = left 1 = right
speed=2;
imageSize=0;  // % set to zero to use fixedWidth and fixedHeight values
fixedWidth=75; // set a fixed width
fixedHeight=60; // set a fixed height
spacerWidth=5; // space between images
largeImageSize = 230; //predefined large image size
popupLeft= 100; // pixels
popupTop= 100; // pixels

dynamicScrollImagesCount = 4; //number of images to be uploaded so automatic scrolling can happen

biggest=0;
ieBorder=0;
totalWidth=0;
hs3Timer=null;
var myImages = [];
preload=new Array();
var imagesInitialised = false;

function initImages(myImages){
    imagesInitialised = true;
   	for(var i=0;i<myImages.length-1;i++){
		preload[i]=new Image();
		preload[i].src=myImages[i][0];
	}
}

function initScrollingImagesIfExist()
{
    if(imagesInitialised)
    {
        initHS3()
    }
}

function initHS3(){
    if(preload[0]==null)
    {
    }
    else if(preload[1]==null)
    {
        var data = "<img src='"+ preload[0].src +"' width='"+largeImageSize+"px' height='"+largeImageSize+"px'>";
	    document.getElementById("largeImage").innerHTML = data;
	    document.getElementById("content_details").style.width = "320px";
    }
    else
    {
        document.getElementById("content_details").style.width = "320px";
        document.getElementById("js_container").style.height = "295px";
	    var data = "<img src='"+ preload[0].src +"' width='"+largeImageSize+"px' height='"+largeImageSize+"px'>";
	    document.getElementById("largeImage").innerHTML = data;
	    if(myImages[0][2]!="")
	    {
	        document.getElementById("imageDesc").innerHTML = myImages[0][2];
	    }
	    scroll1=document.getElementById("scroller1");
	    for(var j=0;j<myImages.length-1;j++){
		    scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+myImages[j][2]+'" title="'+myImages[j][2]+'" onmouseover="showBigPic('+j+','+largeImageSize+')">';
		    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).offsetHeight>biggest){
			    biggest=document.getElementById("pic"+j).offsetHeight;
		    }
		    //first image no margin
		    if(j!=0){
			    document.getElementById("pic"+j).style.marginLeft=spacerWidth+"px";
			    totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth;
		    }else{
			    document.getElementById("pic"+j).style.marginLeft=0+"px";
			    totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth;
		    }
	    }
	    totalWidth+=1;
	    for(var k=0;k<myImages.length-1;k++){ // vertically center images
		    document.getElementById("pic"+k).style.marginBottom = (biggest-document.getElementById("pic"+k).offsetHeight)/2+"px";
	    }
	    if(document.getElementById&&document.all){
		    ieBorder=parseInt(document.getElementById("scrollbox").style.borderTopWidth)*2;
	    }
	    document.getElementById("scrollbox").style.height=biggest+ieBorder+"px";
	    scroll1.style.width=totalWidth+"px";
	    scroll2=document.getElementById("scroller2");
	    scroll2.innerHTML=scroll1.innerHTML;
	    scroll2.style.left= (-scroll1.offsetWidth)+"px";
	    scroll2.style.top= -scroll1.offsetHeight+"px";
	    scroll2.style.width=totalWidth+"px";
	    if(dir==1){
		    speed= -speed;
	    }
	    scrollHS3(myImages);
    }
}


function scrollHS3(myImages){
	if(myImages.length > 4){
		//if(paused==1){
		//	return
		//}
		clearTimeout(hs3Timer);
		scroll1Pos=parseInt(scroll1.style.left);
		scroll2Pos=parseInt(scroll2.style.left);
		scroll1Pos-=speed;
		scroll2Pos-=speed;
		scroll1.style.left=scroll1Pos+"px";
		scroll2.style.left=scroll2Pos+"px";
		hs3Timer=setTimeout("scrollHS3(myImages)",50);
		if(dir==0){
			if(scroll1Pos< -scroll1.offsetWidth){
				scroll1.style.left=scroll1.offsetWidth+"px";
			}
			if(scroll2Pos< -scroll1.offsetWidth){
				scroll2.style.left=scroll1.offsetWidth+"px";
			}
		}	
		if(dir==1){
			if(scroll1Pos>parseInt(document.getElementById("scrollbox").style.width)){
				scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px";
			}
			if(scroll2Pos>parseInt(document.getElementById("scrollbox").style.width)){
				scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px";
			}
		}
	}
}

st=null;
function pause(){
	clearTimeout(hs3Timer);
	clearTimeout(st);
}

function reStartHS3(){
	clearTimeout(st);
	st=setTimeout("scrollHS3(myImages)",100);
}

paused=0;
picWin=null;

function showBigPic(p,largeImageSize){
	if(myImages[p][1]!=""){
		paused=1;
		if(picWin&&picWin.open&&!picWin.closed){
			picWin.close();
		} // if picWin exists close it
		if(myImages[p][1].indexOf("jpg")!=-1 || myImages[p][1].indexOf("gif")!=-1){
			data="<img src='"+ preload[p].src +"' width='"+largeImageSize+"px' height='"+largeImageSize+"px'>";
			document.getElementById("largeImage").innerHTML = data;
			if(myImages[p][2]!="")
			{
			    document.getElementById("imageDesc").innerHTML = myImages[p][2];
			}
		}
	}
}

window.onfocus=function(){
	paused=0;
	scrollHS3(myImages);
	}

onunload=function(){ // close the popup when leaving page
	if(picWin&&picWin.open&&!picWin.closed){
		picWin.close();
	}
}