function abc(picpath,ratio) {
	ww=window.innerWidth;
	hh=window.innerHeight;
	$("#xxx").attr("src",picpath);
	$("#bigdiv").show();
	$("#bigdiv").resizable({'aspectRatio':ratio});
	$('#bighndl').html( picpath);
	//xtop=parseInt($('#bigdiv').css('top'));
	//bigdiv must be position:absolute for top to work.
	//if (xtop<0) $('#bigdiv').css('top',0);
	
	newH=hh-10;
	newW=hh*ratio-10;
	
	if (newW>ww) {
		newH=ww/ratio;
		newW=ww;
	}
	leftpx=5+(ww-newW)/2;
}	

function def() {
	$("#bigdiv").animate({
        height:newH, width:newW, top:5, left:leftpx, opacity: 1
     }, 100, "linear" );
}


function disp(prm) {
	var numRows=pp.length;
	//alert(pp.length);
	var oldRow=rowNum; 
	switch (prm) {
		case 'first':rowNum=0;break;
		case 'back10':
			rowNum-=10;
			if (rowNum<0) {
				rowNum=0;
				flash(prm);
			}
			break;
		case 'prev':
			rowNum--;
			if (rowNum<0) {
				rowNum=0;
				flash(prm);
			}
			break;
		case 'next':
			rowNum++;
			if (rowNum>(numRows-1)) {
				rowNum=numRows-1;
				flash(prm);
			}
			break;
		case 'fwd10':
			rowNum+=10;
			if (rowNum>(numRows-1)) {
				rowNum=numRows-1;
				flash(prm);
			}
			break;
		case 'last':rowNum=numRows-1;break;
	}
	if (oldRow==rowNum) return false
	
	picpath=pp[rowNum];
	$("#mainpic").attr("src",picpath);
	
}

function flash(prm) {
	
	var btnClass="."+prm;
	//$("p").css({"background-color":"yellow","font-size":"200%"});
	oldcolour=$(btnClass).css("background-color");
	$(btnClass).css("background-color","red");
	window.setTimeout(flash2, 100, btnClass	, '');
}

function flash2(prm1) {
	$(prm1).css("background-color",oldcolour);
}