// code to drag the image scroller
//document.write('<div id="info">...</div>');
    var doc = document;
    var xx, x0, p0, spx=0;
    var clockstarted = 0;
    var clocktd = '<a href="Javascript:void(0);" onClick="startclock();"><canvas id="c1" class="CoolClock:swissRail:50:::::index12.JPG"></canvas></a>';
	function updateInfo(s) {
		//document.getElementById('info').innerHTML = s;
	}

//-------------

	function startclock() {
	    clockstarted = 1 - clockstarted;
	    //alert(clockstarted);
	    var c1 = doc.getElementById('td12');
	    if (c1) {
	        var swap = c1.innerHTML;
	        c1.innerHTML = clocktd;
	        clocktd = swap;
	    }
	    if (clockstarted == 1) CoolClock.findAndCreateClocks();
	}

	function begin (element, x, y) {
		p0 = rmem;
		xx = x;
		var s = '#' + element.id + ' (begin drag)' + ' x:' + (x-xx) + ', spx=' + spx;
		updateInfo(s);
	}

	function drag (element, x, y) {
		var s = '#' + element.id + ' (dragging)' + ' x:' + (x-xx) + ', spx=' + spx;
		updateInfo(s);
		moveslider(x-xx);
		xx=x;
	}

	function end (element, x, y) {
		var s = '#' + element.id + ' (end drag)' + ' x:' + (x-xx) + ', spx=' + spx;
		updateInfo(s);
		fixscrollbar(1)
	}

	
// script to build table containing images with mouse-over effects ==========================================================
		var sliderid='slider';
		var ww=100;
		var hh=100;
		
		var href=window.location.href;
		var aa=href.lastIndexOf('/');
		var root=href.substr(0,aa+1);
		
		var idir=root+'images/gallery/';
// the 100x100 folder contains thumbnails with 2px white border
		var tdir=idir + '100x100/';
		var zatt='zatt';
				
		var rr;
		var cc;
//		var ctext = '<font color=#00FF00><b>(c)</b> mark rosenberg</font>';
		var pg = 5;
		// image data
		var tn=new Array();
		var ax=new Array();
		var txt=new Array();
		// index links
		var nxx=new Array();
		var ntxt=new Array();
		var i=0;
		var j=0;
		// 01 ---
		i++; 	tn[i]='';	ax[i]='init()';
		i++; 	tn[i]='';	ax[i]='startclock()';
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';
		// 06 ---
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';
		i++; 	tn[i]='';	ax[i]='';

		var rra=i+1;
		// 11 ---
			j++; nxx[j]=i+1;	ntxt[j]='flowers';
		i++; 	tn[i]='IMG_2843';	txt[i]='';
		i++; 	tn[i]='IMG_2865';	txt[i]='Pink Rosebud in the rain';
		i++; 	tn[i]='IMG_2407';	txt[i]='';
		i++; 	tn[i]='IMG_2524';	txt[i]='';
			j++; nxx[j]=i+1;	ntxt[j]='insects'; 
		i++; 	tn[i]='IMG_2417';	txt[i]='Bee';
		i++; 	tn[i]='IMG_2652';	txt[i]='Stick Insect';
		i++; 	tn[i]='IMG_2653';	txt[i]='';
		i++; 	tn[i]='IMG_2667';	txt[i]='';
		i++; 	tn[i]='IMG_3017-1';	txt[i]='Dragonfly';
			j++; nxx[j]=i+1;	ntxt[j]='marine life';
		i++; 	tn[i]='IMG_2869b';	txt[i]='Pretty nudibranch with golden gills';
		i++; 	tn[i]='IMG_3428';	txt[i]='Hermit crab, night dive in Fiji';
		i++; 	tn[i]='KM_WhaleTail';	txt[i]='Photo by Karen Mason';
		i++; 	tn[i]='IMG_3426';	txt[i]='';
			j++; nxx[j]=i+1;	ntxt[j]='spiders';
		i++; 	tn[i]='IMG_2827';	txt[i]='';
		i++; 	tn[i]='IMG_2786';	txt[i]='Small spider on the bathroom wall .. one leg missing!';
		i++; 	tn[i]='IMG_2423';	txt[i]='Friendly neighborhood flycatcher';
		i++; 	tn[i]='IMG_2548';	txt[i]='';
		i++; 	tn[i]='IMG_2482';	txt[i]='Flower spider having lunch';
		i++; 	tn[i]='IMG_2538';	txt[i]='Jumping spider (1)';
		i++; 	tn[i]='IMG_2557z';	txt[i]='Jumping spider (2)';
		i++; 	tn[i]='R0010642';	txt[i]='Darth Spider - jumping spider from the dark side';
		i++; 	tn[i]='R0010621';	txt[i]='Different eye arrangement to jumping spider?';
		i++; 	tn[i]='IMG_2770';	txt[i]='Tiny spider on the clothes-line';
			j++; nxx[j]=i+1;	ntxt[j]='sunny';
		i++; 	tn[i]='IMG_0858';	txt[i]='';
		i++; 	tn[i]='IMG_1309';	txt[i]='';
		i++; 	tn[i]='IMG_1328';	txt[i]='';
		i++; 	tn[i]='IMG_1331';	txt[i]='';
			j++; nxx[j]=i+1;	ntxt[j]='moon';
		i++; 	tn[i]='IMG_1434';	txt[i]='';
		i++; 	tn[i]='IMG_3207';	txt[i]='';
		i++; 	tn[i]='IMG_3713';	txt[i]='';
		i++; 	tn[i]='IMG_3352';	txt[i]='';
			j++; nxx[j]=i+1;	ntxt[j]='sunset';
		i++; 	tn[i]='IMG_1872';	txt[i]='';
		i++; 	tn[i]='IMG_1451';	txt[i]='';
		i++; 	tn[i]='IMG_2040';	txt[i]='';
		i++; 	tn[i]='IMG_2636';	txt[i]='';
		i++; 	tn[i]='KM_IMG_1920';	txt[i]='Night dive at the jetty (by Karen)';
			j++; nxx[j]=i+1;	ntxt[j]='water drops';
		i++; 	tn[i]='R0010673';	txt[i]='';
		i++; 	tn[i]='IMG_2811';	txt[i]='';
		i++; 	tn[i]='IMG_2807';	txt[i]='';
		i++; 	tn[i]='R0010679';	txt[i]='';
		i++; 	tn[i]='R0010671';	txt[i]='';
		i++; 	tn[i]='R0010667';	txt[i]='';
		i++; 	tn[i]='IMG_2852';	txt[i]='';
		i++; 	tn[i]='IMG_2471z';	txt[i]='';
		i++; 	tn[i]='IMG_2472z';	txt[i]='';
		// ------ 49 ------
		var rrz=i;
//		var rmem=rrz-pg+1;
		var rmem=nxx[ Math.floor(Math.random()*(j-1))+1 ];
		
		var img = new Image();
		var lnk = new Object();

		var ix=0, xrr=0, xcc=0;
		var lx=0;
		function findimage(lnk) {
			getImageById( 'img'+lnk.id.substr(3) );
		}
		function findimg(arow,acol) {
			getImageById( 'img'+arow.toString()+acol.toString() );
		}
		function getImageById(idname) {
			updateInfo( 'Looking for image ' + idname );
			var fx;
			var tmp='';
			ix=-1;
			for (fx=0; fx<document.images.length; fx++) {
			    tmp=tmp+fx.toString()+':'+document.images[fx].id+'; ';
				if (document.images[fx].id==idname) {
					ix=fx;
					updateInfo( 'Found ' + idname );
				}
			}
			if (ix>=0) {
			   img=document.images[ix];
			} else {
				alert('Failed to find img ' + idname );
				alert( tmp );
			}
		}
		function getLinkById(idname) {
			var fx;
			lx=-1;
			for (fx=0; fx<document.links.length; fx++) {
				if (document.links[fx].id==idname) lx=fx;
			}
			lnk=document.links[lx];
		}
		function findlnk(arow,acol) {
			var fx;
			xrr=arow;
			xcc=acol;
			var id='img'+arow.toString()+acol.toString();
//			alert(id);
			for (fx=0; fx<document.links.length; fx++) {
				if (document.links[fx].id==id) {
					lx=fx;
					//alert('OK');
				}
			}
		}
		function B1( lnk ) {
		    findimage(lnk);
			img=document.images[ix];
			img.border=2;
			img.width=ww-4;
			img.height=hh-4;
		}
		function B0( lnk ) {
		    findimage(lnk);
			img=document.images[ix];
			img.border=0; 
			img.width=ww; 
			img.height=hh;
		}
		function B21( lnk ) {
		    findimage(lnk);
			img=document.images[ix];
			img.border=2;
			img.width=ww-4;
			img.height=hh-4;
			img.src=idir+tn[xrr*10+xcc]+'.JPG';
		}
		function B20( lnk ) {
		    findimage(lnk);
			img=document.images[ix];
			img.border=0;
			img.width=ww;
			img.height=hh;
			img.src='index'+(xrr*10+xcc).toString()+'.JPG';
		}
		function fixscrollbar(redraw) {
			var xwz=500-16-16;
			var x1,x2,x3;
			var xwi=rrz-rra+1;
			var pw=xwz/xwi;
			x1=Math.floor((rmem-rra)*pw);
			x3=Math.floor((rrz-rmem-pg+1)*pw);
			x2=xwz-x1-x3;
			if (redraw==1) {
				getImageById('img01');
				img.width=x1;
				getImageById(sliderid);
				img.width=x2-6;
				getImageById('img03');
				img.width=x3;
			}
			p0=rmem;
			x0=x1;
		}
		function moveslider(mx) {
			var xwz=500-16-16;
			var x1,x2,x3;
			var xwi=rrz-rra+1;
			var pw=xwz/xwi;
			getImageById('img01');
			x1=img.width+mx;
			if (x1<0) x1=0;
			if (x1>(xwz-slider.width-6)) x1=(xwz-slider.width-6);
			img.width=x1;
			getImageById('img03');
			x3=img.width-mx;
			if (x3<0) x3=0;
			if (x3>(xwz-slider.width-6)) x3=(xwz-slider.width-6);
			img.width=x3;
			// scroll to nearest row?
			//spx = Math.round( (x1-x0)/(slider.width+6) );
			// scroll to nearest image?
			spx = Math.round( (x1-x0)/pw );
			if (spx!==0) ScrollPg(spx,0);
			updateInfo( 'rmem='+rmem.toString()+', spx='+spx.toString());
		}
		function ScrollPg(rm,redraw) {
			//findimg(0,9);
			rmem=rmem+rm;
			if (rmem<rra) {rmem=rra;}
			if ((rmem+pg-1)>rrz) {rmem=rrz-pg+1;}
			getImageById('img00');
			updateInfo( 'Found ' + img.id );
			if (rmem==rra) {
				img.src='left0.jpg';
			} else {
				img.src='left1.jpg';
			}
			getImageById('img09');
			if ((rmem+pg-1)==rrz) {
				img.src='right0.jpg';
			} else {
				img.src='right1.jpg';
			}
		    var cx;
			var rc;
			for (cx=1; cx<6; cx++) {
				rc = rmem+cx-1;
				getImageById('img3'+cx.toString())
				img.src=tdir+tn[rc]+'.JPG';
				getLinkById('lnk3'+cx.toString())
				lnk.setAttribute(zatt, idir+tn[rc]+'.JPG');
				lnk.setAttribute('title', '<font color=#8F8F8F>'+(rc-10).toString() + ')</font> <a href="' + idir + tn[rc] + '.JPG" target="_blank"><font color=#8F8F8F>' + tn[rc]+'</font></a> - ' + txt[rc]);
				lnk.href = 'Javascript:void(0); //' + (rc-10).toString();
				lnk.alt=tn[rc];
			}
			updateInfo( 'rmem='+rmem.toString());
			fixscrollbar(redraw);
		}
		
		var rc;
//		doc.write('<table width="',ww*5 + 20,'" border="0" cellpadding="0" cellspacing="0">');
		doc.write('<table width="',ww*5,'" border="0" cellpadding="0" cellspacing="0">');
		for (rr=1; rr<3; rr++) {
//			doc.write('<tr><td></td>');
			doc.write('<tr>');
			for (cc=1; cc<6; cc++) {
				doc.write('<td id="td',rr,cc,'"><a');
				rc = (rr-1)*pg+cc;
				if (tn[rc]=='') {
					if (ax[rc]=='') {
					   doc.write(' href="Javascript:void(0)" rel="nozoom"');
					} else {
					   doc.write(' href="Javascript:void(0)" onClick="',ax[rc],'" rel="nozoom"');
					}
					doc.write(' onMouseOver="Javascript:B1( this )"');
					doc.write(' onMouseOut="Javascript:B0( this )"');
				} else {
					doc.write(' href="Javascript:void(0)"; ',zatt,'="',idir,"IMG_",tn[rc],'.JPG"');
				//	doc.write(' target="_new"');
					doc.write(' onMouseOver="Javascript:B21( this )"');
					doc.write(' onMouseOut="Javascript:B20( this )"');
				}
				doc.write(' id="lnk',rr,cc,'"');
				doc.write('>');
				doc.write('<img');
				doc.write(' src="index',rr,cc,'.JPG"');
				doc.write(' border="0"');
				doc.write(' width="',ww,'"');
				doc.write(' height="',hh,'"');
				doc.write(' alt=":-)"');
				doc.write(' id="img',rr,cc,'"');
				doc.write('>');
				doc.write('</a></td>');
			}
//			doc.write('<td></td></tr>');
			doc.write('</tr>');
		}
		
		doc.write('<tr>');
		lc=document.links.length-1;
		for (cc=1; cc<6; cc++) {
		    rc=rmem+cc-1;
			doc.write('<td><a');
			doc.write(' href="Javascript:void(0); //' + (rc-1).toString() + '"; ',zatt,'="',idir,tn[rc],'.JPG"');
			doc.write(' onMouseOver="Javascript:B1( this )"');
			doc.write(' onMouseOut="Javascript:B0( this )"');
			//doc.write(' target="_new"');
			doc.write(' id="lnk',3,cc,'"');
			doc.write(' title="',tn[rc],' - ',txt[rc],'"');
			doc.write('>');
			doc.write('<img');
			doc.write(' src="',tdir,tn[rc],'.JPG"');
			doc.write(' border="0"');
			doc.write(' width="',ww,'"');
			doc.write(' height="',hh,'"');
			doc.write(' alt="',tn[rc],'"');
			doc.write(' id="img',3,cc,'"');
			doc.write('>');
			doc.write('</a></td>');
		}
		doc.write('</tr>');
		
		var sbh=17;
		doc.write('<tr height="',sbh,'">');
		doc.write('<td colspan=5>');
		doc.write('<a href="Javascript:void(0)" id="lnk00" onClick="Javascript:ScrollPg(-1,1)" rel="nozoom"><img border=0 src="left1.jpg" width=16 height=',sbh,' id="img00" alt="<"></a>');
		doc.write('<a href="Javascript:void(0)" id="lnk01" onClick="Javascript:ScrollPg(0-pg,1)"><img src="img01.jpg" border="0" height="',sbh,'" width="312" id="img01" alt="<--"></a>');
		doc.write('<a href="Javascript:void(0)" id="sliderlink" rel="nozoom">');
		doc.write('<img src="img02l.jpg" border="0" height="',sbh,'" width="3" id="img02l" alt="">');
		doc.write('<img src="img02.jpg" border="0" height="',sbh,'" width="150" id="',sliderid,'" alt="<-->" style="POSITION: relative;">');
		doc.write('<img src="img02r.jpg" border="0" height="',sbh,'" width="3" id="img02r" alt="">');
		doc.write('</a>');
		doc.write('<a href="Javascript:void(0)" id="lnk03" onClick="Javascript:ScrollPg(pg,1)"><img src="img03.jpg" border="0" height="',sbh,'" width="0" id="img03" alt="-->"></a>');
		doc.write('<a href="Javascript:void(0)" id="lnk09" onClick="Javascript:ScrollPg(1,1)" rel="nozoom"><img border=0 src="right0.jpg" width=16 height=',sbh,' id="img09" alt=">"></a>');
		doc.write('</td>');
		doc.write('</tr>');
		
		// page links ----------
		var nixlnk1='';
		var nixlnk2='';
		
		function nixgoto(xx) {
		   rmem=xx;
		   ScrollPg(0,1);
		}
		
		doc.write('<tr>');
		doc.write('<td colspan=5 align="center">');
		for (cc=1; cc<nxx.length; cc++) {
			nixlnk1='<a href="javascript:void(0)" onclick="javascript:nixgoto(' + nxx[cc].toString() + ');">';
			nixlnk2='</a>';
			if (cc!==1) doc.write(' : ');
			doc.write(nixlnk1, '<font color="gray" size="-1"><i>', ntxt[cc], '</i></font>', nixlnk2 );
		}
		doc.write('</td>');
		doc.write('</tr>');
		//--------------------------
		
		doc.write('</table>');
		
		//- - -  setup dragable scrollbar image 
		var slider = new Image();
		getImageById(sliderid);
		slider = img;
		////slider.dragBegin = begin;
		////slider.drag = drag;
		////slider.dragEnd = end;
		
		var sliderlink = DragHandler.attach(document.getElementById('sliderlink'));
		sliderlink.dragBegin = begin;
		sliderlink.drag = drag;
		sliderlink.dragEnd = end;

		// - - - initialise scrollbar position and size 
		ScrollPg(0,1);
		
//----------------