function showImage(dir, image, title, target, width){

	//alert(document.getElementById("display_"+target));


	
	document.getElementById("display_"+target).style.display = "block";
	document.getElementById("display_"+target).innerHTML = "<a href='" + image + "' rel='lightbox["+target+"]'><img src='" + image + "' border='0px' width='" + width + "'></a><div class='enlarge'><a href='" + image + "' rel='lightbox'><img src='images/plusje.png' alt='vergroten' border='0'/></a></div>";
	
}


var currentOffset = 0;
var barOffset = 0;
var currentBorder = "";

function move(dir){
	 
	 //alert(barOffset+"\n"+(-1*totalImages));
	
	if(dir=="left"){
		if(currentOffset<0){
			currentOffset+=1;
			
			//check if we need to move the bar
			if(barOffset < 0){	
				if((-1*currentOffset)<totalImages-2){
					barOffset += 1;
				}
			}
		}else{
			//move to last image
			select(totalImages-1);
		}
			
	}else{
		if(currentOffset-1>-totalImages){
		
			currentOffset-=1;
			//check if we need to move the bar
			if((-1*barOffset) < (totalImages-8)){
				if((-1*currentOffset)>2){
					barOffset -= 1;
				}
			}
		}else{
			//move to first image	
			select(0);
		
		}
	}
	
	//alert(currentOffset);
	
	//set cursor
	if(currentBorder!=""){
		document.getElementById(currentBorder).style.border = "0px";
	}
	document.getElementById(filenameArray[(-1*currentOffset)]).style.border = "1px solid #1692b4";
	
	currentBorder = filenameArray[(-1*currentOffset)];
	
	
	
	
	
	var myOffset = barOffset*100;	
	document.getElementById('ImageContainer').style.margin="0px 0px 0px " + myOffset + "px";
	
		
	
	document.getElementById('mynum').innerHTML = (-1*currentOffset)+1;
	showImage("", filenameArray[(-1*currentOffset)], titleArray[(-1*currentOffset)]);
	
	
}

function select(num,target, totalImages, width){
	 
	 filenameArray = eval("filenameArray_"+target);
	 titleArray = eval("titleArray_"+target);
	 
	 //check offsetdelta
	var offsetdelta=currentOffset-(-1*num);
	
	
	//set new current
	currentOffset=-1*num;
	
	
	if(offsetdelta>0){
		if(currentOffset<0){
			//currentOffset+=1;
			
			//check if we need to move the bar
			if(barOffset < 0){	
				if((-1*currentOffset)<totalImages-2){
					barOffset += offsetdelta;
				}
			}
		}
	}else{
		if(currentOffset-1>-totalImages){
		
			//currentOffset-=1;
			//check if we need to move the bar
			if((-1*barOffset) < (totalImages-8)){
				if((-1*currentOffset)>2){
					barOffset += offsetdelta;
				}
			}
		}
	}
	
	
	//set active state
	
	for(var i = 0; i < totalImages; i++){
		document.getElementById('vid'+target+'_'+i+'_holder').className = 'imageholder';
		document.getElementById('vid'+target+'_'+i+'_arrow').className = 'arrow_normal';
	}
	
	document.getElementById('vid'+target+'_'+num+'_holder').className = 'imageholder_active';
	document.getElementById('vid'+target+'_'+num+'_arrow').className = 'arrow_active';
	
		//alert(filenameArray[(-1*currentOffset)]);
	
	showImage("", filenameArray[(-1*currentOffset)], titleArray[(-1*currentOffset)], target, width);
	
	
}


function mouseup(num,target, totalImages){
	
	//set active state
	if(document.getElementById('vid'+target+'_'+num+'_holder').className != 'imageholder_active'){
		document.getElementById('vid'+target+'_'+num+'_holder').className = 'imageholder_mo';
	}
}

function mousedown(num,target, totalImages){
	
	//set active state
	if(document.getElementById('vid'+target+'_'+num+'_holder').className != 'imageholder_active'){
		document.getElementById('vid'+target+'_'+num+'_holder').className = 'imageholder';
	}
}


function alertmsg(e){
	
	
	
	var evtobj=window.event? event : e
	var unicode=evtobj.keyCode;
	
	
	if(unicode == 37){
		
		move("left");
		
	}else if(unicode == 39){
		
		move("right");
		
	}

}
document.onkeydown=alertmsg;