function ShowImage(id, total, area){
	
$('#arrowleft').hide();	$('#arrowright').hide()

total = total+1;

for (var i=1; i<total; i++) {

$('#slide'+area+i).fadeOut(300);

document.getElementById('thumb'+i+area).className = 'thumb';

}

setTimeout("$('#slide"+area+id+"').fadeIn(300);$('#arrowleft').show();$('#arrowright').show()", 300);
document.getElementById('thumb'+id+area).className = 'thumbSelect';

document.getElementById('currimg').innerHTML = id;


}

function PrevNext(dir ,total, area) {
	
	var currimg   = eval(document.getElementById('currimg').innerHTML);
	var scrollpos = eval(document.getElementById('scrollpos').innerHTML);
	var currpos   = eval(document.getElementById('currpos').innerHTML);
	
	if(dir=='next' && currimg<total) 	{ 
			var id = eval(currimg)+1; 
			ShowImage(id, total, area); 
			
	
	}
	if(dir=='prev' && currimg>1) 		{ 
			var id = eval(currimg)-1; 
			ShowImage(id, total, area); 
			
	}
	
	var currfirst= eval(document.getElementById('currfirst').innerHTML);
	var currlast = eval(document.getElementById('currlast').innerHTML);

	
	if(id>currlast || id<currfirst) {  ScrollTo('down', total,id); }
	
}



function Scroll(dir, total) {
	
	
	
	var scrollpos= eval(document.getElementById('scrollpos').innerHTML);
	var currpos= eval(document.getElementById('currpos').innerHTML);
	
	
	var currfirst= eval(document.getElementById('currfirst').innerHTML);
	var currlast = eval(document.getElementById('currlast').innerHTML);
	
	$('#arrowtop').hide();	$('#arrowbtm').hide();
	
	if(dir=='up')   { targetpos = ((scrollpos-2)*85); } else { targetpos = (scrollpos*85); }
	
		
	if(dir=='up')   {  
	
		if(scrollpos<0) { 
		scrollpos = eval(scrollpos -1);
		currpos = currpos +85;
		
		
		
		document.getElementById('currfirst').innerHTML	= currfirst-1;
		document.getElementById('currlast').innerHTML	= currlast-1;
		
		document.getElementById('scrollpos').innerHTML=scrollpos;
		document.getElementById('currpos').innerHTML=currpos;
		
		}
	
	}
	
	
	if(dir=='down') {  
	
	if(scrollpos>-(total-7)) {
	scrollpos = eval(scrollpos +1);
	currpos = currpos -85;
	
	
		document.getElementById('currfirst').innerHTML	= currfirst+1;
		document.getElementById('currlast').innerHTML	= currlast+1;
	
		document.getElementById('scrollpos').innerHTML	=scrollpos;
		document.getElementById('currpos').innerHTML	=currpos;
		
		
	
	}
	
	}
	

	alert(targetpos);
	$('#thumbnails').animate({top:'-'+targetpos+'px'}, 250, function() {  $('#arrowtop').show();	$('#arrowbtm').show(); });
	//$('#thumbnails').animate({marginTop:currpos+'px'}, 250, function() {  $('#arrowtop').show();	$('#arrowbtm').show(); });
	
	
}


function ScrollTo(dir, total, id) {
	
	
	var scrollpos= eval(document.getElementById('scrollpos').innerHTML);
	var currpos= eval(document.getElementById('currpos').innerHTML);
	
	
	var currfirst= eval(document.getElementById('currfirst').innerHTML);
	var currlast = eval(document.getElementById('currlast').innerHTML);
	
	if(id>7) {
		magicnumber = id-7;
		targetpos = (magicnumber*85); 
		document.getElementById('scrollpos').innerHTML	=id-6;
		
	} else if(id>0 && id<currfirst) { 
		targetpos = (id-1)*85; 
		document.getElementById('scrollpos').innerHTML	=id;
		
	} else if(id>0) {
		targetpos = 0; 
		document.getElementById('scrollpos').innerHTML	=1;
		
	} else {
		
	
	
	
	
	$('#arrowtop').hide();	$('#arrowbtm').hide();
	
			if(dir=='up' && scrollpos>1)   { 
	
			targetpos = ((scrollpos-2)*85); 
			document.getElementById('scrollpos').innerHTML	=scrollpos-1;
			document.getElementById('currfirst').innerHTML	=currfirst-1;
			document.getElementById('currlast').innerHTML	=currlast-1;
			
			} else if(dir=='down' && scrollpos<total-6) {
				
			targetpos = (scrollpos*85); 
			document.getElementById('scrollpos').innerHTML	=scrollpos+1;
			document.getElementById('currfirst').innerHTML	=currfirst+1;
			document.getElementById('currlast').innerHTML	=currlast+1;
			
			
			}
	

	
	}	
		
	$('#thumbnails').animate({top:'-'+targetpos+'px'}, 250, function() {  $('#arrowtop').show();	$('#arrowbtm').show(); });
	//$('#thumbnails').animate({marginTop:currpos+'px'}, 250, function() {  $('#arrowtop').show();	$('#arrowbtm').show(); });
	
	
}