// Javascript for JU Photo Library SlideShow 
//****** juss.js *************
//for version 6 of fieldhead.net
//© J. Uttley May 2009

// uses frame5 for image size 720 x 360 (2:1)
// uses frame4 for image size 720 x 480 (1.5:1)
// uses frame3 for image size 480 x 480 (1:1)
// uses frame2 for image size 400 x 480 (0.83:1)
// uses frame1 for image size 320 x 480 (0.67:1)

// functions:
// 1)  init()                             .................... initialises, preloads graphics and sets up dropdown list
// ANIMATION =================================================================================
// 2)  autoscroll()                       .................... scrolls thumbnail panel
// 2a) scrleftpanel(step)                 .................... subfunction of autoscroll
// 3)  setframepos()                            .................... moves thumbnail frame to target
// 4)  animate(j)                         .................... animates thumbnail frame
// 4a) shrinkframe()                      .................... subfunction of animate
// 4b) growframe()                        .................... subfunction of animate
// HOUSEKEEPING ==============================================================================
// 5)  function getref(i)                 .................... get picture reference from file name
// 6)  function getmask(sz)               .................... load mask depending on size
// MOUSE ROLLOVERS ===========================================================================
// 7)  mouse rollover events              .................... playbtnover()   /   playbtnout()
//                                                             changebtnover() /   changebtnout()
//                                                             printbtnover()  /   printbtnout()
//                                                             homebtnover()   /   homebtnout
// LOAD IMAGES ===============================================================================
// 8) loadimage(fname)                    .................... changes slide during play
// 8a) imageloaded()                      .................... on image loaded event for loadimage()
// 9) loadchimage(fname)                  .................... changes slide during change sequence
// 9a) chimageloaded()                    .................... on image loaded event for loadchimage()
// 10) loadthimage(fname)                 .................... changes slides when navigation from thumbnail
// 10a) thimageloaded()                   .................... on image loaded event for loadthimage()
// MOUSE CLICKS ===============================================================================
// 11) stopgo()                          .................... Click Play/Pause button
// 11a) run()                            .................... fires on timer t0
// 12) changebtnclick()                  .................... Click Change button
// 12a) blendchange(imagefile)           ....................
// 12b) function changeOpac(opacity, id) .................... Change Opacity for different browsers
// 13) fromlist()                        .................... Make a selection from the dropdown list
// 14) showimg(i)                        .................... Make a thumbnail selection
// 15) printbtnclick()                   .................... Click print button
//============================================================================================


var playing;
var curidx;

//......1)
function init(){
	img1= new Image(124,84);img1.src= grafik[1];//frame
	img2= new Image(725,483);img2.src=grafik[2];//frame 5
	img3= new Image(725,483);img3.src=grafik[3];//frame 4
	img4= new Image(725,483);img4.src=grafik[4];//frame 3
	img5= new Image(725,483);img5.src=grafik[5];//frame 2
	img6= new Image(725,483);img6.src=grafik[6];//frame 1
	img7= new Image(40,67);img7.src=grafik[7];//icon
	img8= new Image(25,25);img8.src=grafik[8];//loader
	img9= new Image(32,32);img9.src=grafik[9];//home
	img10= new Image(32,32);img10.src=grafik[10];//home over
	img11= new Image(32,32);img11.src=grafik[11];//print
	img12= new Image(32,32);img12.src=grafik[12];//print over
	img13= new Image(32,32);img13.src=grafik[13];//play
	img14= new Image(32,32);img14.src=grafik[14];//play over
	img15= new Image(32,32);img15src=grafik[15];//pause
	img16= new Image(32,32);img16.src=grafik[16];//pause over
	img17= new Image(32,32);img17.src=grafik[17];//forward
	img18= new Image(32,32);img18.src=grafik[18];//forward over
	img19= new Image(32,32);img19.src=grafik[19];//backward
	img20= new Image(32,32);img20.src=grafik[20];//backward over
	img21= new Image(20,20);img21.src=grafik[21];//ledlo
	img22= new Image(20,20);img22.src=grafik[22];//ledhi
	
	

	
	playing = false;
	idx = 1;
	old = 'false';
	
	document.getElementById('dlist').options.length = 0;
 	for (var i = 0; i < nslides; i++) {
    	document.getElementById("dlist").options[i] = new Option();
    	document.getElementById("dlist").options[i].text = cpt[i+1];
		document.getElementById("wait").style.visibility = "hidden";
  		};
	document.getElementById('dlist').height = nslides; 	
 	showimg(idx);
}

//======================== ANIMATION =========================================
//......2)
function autoscroll(){
	var timer1 = 0;
	step = 4;
	
	y0 = document.getElementById('leftpanel').scrollTop;
	y1 = (idx-7) * 86-2;
	if (y1 < 0){y1 = 0;};
	
	if (y1 != y0){
	if (y1 > y0){
		for(i = y0; i <= y1; i = i+step) {
			setTimeout("scrleftpanel(step)",10);
			timer1++;
			};
		};
		
	if (y1 < y0){
		for(i = y1; i <= y0; i = i+step) {
			setTimeout("scrleftpanel(-step)",10);
			timer1++;
			};
		};
	};
}
//......2a)
// subfunction of autoscroll 
function scrleftpanel(step){
	document.getElementById('leftpanel').scrollTop = document.getElementById('leftpanel').scrollTop + step;
}
//----------------------------------------------------------------------------
//......3)
//move thumbnail frame to target 
function setframepos(){
	document.getElementById("frame").style.visibility = "hidden";
	y = (idx) * 86 + 21 - document.getElementById('leftpanel').scrollTop;
	if ((y > 0) && (y < 709)){
		document.getElementById("thframe").vspace = y;
		document.getElementById("frame").style.visibility = "visible";};
}
//----------------------------------------------------------------------------
//......4)
//animate thumbnail frame 
function animate(j){
	if (j ==0){
		document.getElementById("thframe").width = 120;
		document.getElementById("thframe").height = 80;
		changeOpac(100, "fslide");
		t2 = setInterval(shrinkframe, 18);};
	if (j ==1){
		document.getElementById("thframe").width = 10;
		document.getElementById("thframe").height = 8;
		changeOpac(0, "fslide");
		t1 = setInterval(growframe, 15);};
}
//----------------------------------------------------------------------------
//......4a)
function shrinkframe(){
	document.getElementById("thframe").width = document.getElementById("thframe").width - 6; 
	document.getElementById("thframe").height = document.getElementById("thframe").height - 4;
	changeOpac(document.getElementById("thframe").width, "fslide");
	if (document.getElementById("thframe").width<8){
		changeOpac(0, "fslide");
		clearInterval(t2);};
}
//----------------------------------------------------------------------------
//......4b)
function growframe(){
	document.getElementById("thframe").width = document.getElementById("thframe").width + 6;
	document.getElementById("thframe").height = document.getElementById("thframe").height + 4;
	changeOpac(document.getElementById("thframe").width, "fslide");
	if (document.getElementById("thframe").width>119){
		changeOpac(100, "fslide");
		clearInterval(t1);};
}
//=================HOUSEKEEPING===========================================================================
//......5)
function getref(i){
	   str = sl[i];
	   s = str.lastIndexOf("/");
	   f = str.lastIndexOf(".");
	   str = str.substring(s+1,f);
	   return str;
   }
//----------------------------------------------------------------------------
//......6)
function getmask(sz){
	if (sz ==5){
		document.getElementById("fslide").width = 720;
		document.getElementById("fslide").height = 360;
		document.getElementById("fslide").vspace = 60;
		document.getElementById("fslide").hspace = 0;
		document.getElementById("mask").src = grafik[2];//frame 5
		document.getElementById("captlayer").style.left = 185 + 'px'; 
		document.getElementById("captlayer").style.top = 480 + 'px';
		document.getElementById("captlayer").style.width = 600 + 'px'; 
		};
	if (sz ==4){
		document.getElementById("fslide").width = 720;
		document.getElementById("fslide").height = 480;
		document.getElementById("fslide").vspace = 0;
		document.getElementById("fslide").hspace = 0;
		document.getElementById("mask").src = grafik[3];//frame 4
		document.getElementById("captlayer").style.left = 185 + 'px';
		document.getElementById("captlayer").style.top = 540 + 'px';
		document.getElementById("captlayer").style.width = 600 + 'px'; 
		};
	if (sz ==3){
		document.getElementById("fslide").width = 480;
		document.getElementById("fslide").height = 480;
		document.getElementById("fslide").vspace = 0;
		document.getElementById("fslide").hspace = 120;
		document.getElementById("mask").src = grafik[4];//frame 3
		document.getElementById("captlayer").style.left = 305 + 'px';
		document.getElementById("captlayer").style.top = 540 + 'px';
		document.getElementById("captlayer").style.width = 490 + 'px'; 
		};
	if (sz ==2){
		document.getElementById("fslide").width = 400;
		document.getElementById("fslide").height = 480;
		document.getElementById("fslide").vspace = 0;
		document.getElementById("fslide").hspace = 160;
		document.getElementById("mask").src = grafik[5];//frame 2
		document.getElementById("captlayer").style.left = 345 + 'px';
		document.getElementById("captlayer").style.top = 540 + 'px';
		document.getElementById("captlayer").style.width = 450 + 'px'; 
		};
	if (sz ==1){
		document.getElementById("fslide").width = 320;
		document.getElementById("fslide").height = 480;
		document.getElementById("fslide").vspace = 0;
		document.getElementById("fslide").hspace = 200;
		document.getElementById("mask").src = grafik[6];//frame 1
		document.getElementById("captlayer").style.left = 385 + 'px';
		document.getElementById("captlayer").style.top = 540 + 'px';
		document.getElementById("captlayer").style.width = 410 + 'px'; 
	};
}
//======================== MOUSE ROLLOVERS ===================================
//......7)
function playbtnover(){
if (playing == false){document.getElementById("playbtn").src = grafik[14];} else {document.getElementById("playbtn").src = grafik[16];};
}
function playbtnout(){
if (playing == false){document.getElementById("playbtn").src = grafik[13];} else {document.getElementById("playbtn").src = grafik[15];};
}
//----------------------------------------------------------------------------
function changebtnover(){
if (old == 'true'){document.getElementById("chbtn").src = grafik[20];} else {document.getElementById("chbtn").src = grafik[18];};
}
function changebtnout(){
if (old == 'true'){document.getElementById("chbtn").src = grafik[19];} else {document.getElementById("chbtn").src = grafik[17];};
}
//----------------------------------------------------------------------------
function printbtnover(){document.getElementById("printbtn").src = grafik[12];}
function printbtnout(){document.getElementById("printbtn").src = grafik[11];}
//----------------------------------------------------------------------------
function homebtnover(){document.getElementById("homebtn").src = grafik[10];}
function homebtnout(){document.getElementById("homebtn").src = grafik[9];}
	
//================================== LOAD IMAGES =============================
//......8)
function loadimage(fname){
	var image = new Image();
	document.getElementById("wait").style.visibility = "visible";
	image.onload = imageloaded;
	image.src = fname;
}
//----------------------------------------------------------------------------
//......8a)
function imageloaded(){
	clearInterval(t1);
	document.getElementById("wait").style.visibility = "hidden";
	getmask(sz[idx]);
	document.getElementById("fslide").src = sl[idx];
	document.getElementById("caption").innerHTML = cpt[idx] + ps[idx];
	document.getElementById("bye").innerHTML = bye[idx];
	document.getElementById("ref").innerHTML = " ref: " + getref(idx);
	document.getElementById("dlist").selectedIndex =idx-1;
	animate(1);
	autoscroll();
	setframepos();
	if (ptr[idx] > 0){
		document.getElementById("chbtn").src = grafik[17];
		document.getElementById("chbtn").style.visibility = "visible";};
	if (ptr[idx] == 0) {document.getElementById("chbtn").style.visibility = "hidden";};
}
//----------------------------------------------------------------------------
//......9)
function loadchimage(fname){
	var image = new Image();
	document.getElementById("wait").style.visibility = "visible";
	image.onload = chimageloaded;
	image.src = fname;
	document.getElementById("fslide").src = fname;
}
//----------------------------------------------------------------------------
//......9a)
function chimageloaded(){
	var speed = 10;//increase for slower blending
	var timer = 0;
	document.getElementById("wait").style.visibility = "hidden";
		
	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + "fslide" + "')",(timer * speed));
		timer++;
		}
	document.getElementById("caption").innerHTML = cpt[ptr[idx]] + ps[ptr[idx]];
	document.getElementById("bye").innerHTML = bye[ptr[idx]];
	document.getElementById("ref").innerHTML = " ref: " + getref(ptr[idx]);

	idx = ptr[idx];		
	if (ptr[idx] > nslides ){old = 'false';} else {old = 'true';};
	
	if (old == 'true'){
		document.getElementById("chbtn").title = "back";
		document.getElementById("chbtn").alt = "back";
		document.getElementById("chbtn").src = grafik[20];
		};
	if (old == 'false'){
		document.getElementById("chbtn").title = "more recent";
		document.getElementById("chbtn").alt = "more recent";
		document.getElementById("chbtn").src = grafik[18];
		};
}
//----------------------------------------------------------------------------
//......10)
function loadthimage(fname){
	var image = new Image();
	document.getElementById("wait").style.visibility = "visible";
	image.onload = thimageloaded;
	image.src = fname;
	document.getElementById("fslide").src = fname;
}
//----------------------------------------------------------------------------
//......10a)
function thimageloaded(){
	document.getElementById("wait").style.visibility = "hidden";
	document.getElementById("bslide").style.backgroundImage = "";
	animate(1);
	//from here
	getmask(sz[idx]);
		
	document.getElementById("fslide").src = sl[idx];
	document.getElementById("caption").innerHTML = cpt[idx] + ps[idx];
	document.getElementById("bye").innerHTML = bye[idx];
	document.getElementById("ref").innerHTML = " ref: " + getref(idx);
	document.getElementById("dlist").selectedIndex =idx-1;
		
	setframepos();
	
	if (ptr[idx] > 0){
		document.getElementById("chbtn").style.visibility = "visible";
		document.getElementById("chbtn").src = grafik[17];
		document.getElementById("chbtn").title = "more recent";
		document.getElementById("chbtn").alt = "more recent";
		};
	if (ptr[idx] == 0) {document.getElementById("chbtn").style.visibility = "hidden";};
	
	old = 'false';
}
//----------------------------------------------------------------------------
//======================== MOUSE CLICKS ======================================
//......11)
function stopgo(){
if (playing == false){document.getElementById("playbtn").src = grafik[15];} else {document.getElementById("playbtn").src = grafik[13];};
if (playing == false){playing = true;} else {playing = false;};

if (playing == true){
	clearInterval(t1);
	run();
	document.getElementById("led").src = grafik[22];
	document.getElementById("printbtn").style.visibility = "hidden";
	document.getElementById("playbtn").title = "Pause";
	document.getElementById("playbtn").alt = "Pause";
	t0 = setInterval(run, timeinterval);};
if (playing == false){
	document.getElementById("led").src = grafik[21];
	document.getElementById("printbtn").style.visibility = "visible";
	document.getElementById("playbtn").title = "Play";
	document.getElementById("playbtn").alt = "Play";
	clearInterval(t0);};
}
//----------------------------------------------------------------------------
//......11a)
function run(){
	document.getElementById("bslide").style.backgroundImage = "";
	if (idx > nslides){idx = curidx;};
	idx = idx + 1;
	if (idx > nslides){idx = 1;};
	
	loadimage(sl[idx]);
}
//----------------------------------------------------------------------------
//......12)
function changebtnclick(){
	if (idx<nslides + 1){curidx=idx};
	blendchange(sl[ptr[idx]]);
	}
//----------------------------------------------------------------------------
//......12a)
function blendchange(imagefile) {
	//set the current image as background
	document.getElementById("bslide").style.backgroundImage = "url(" + document.getElementById("fslide").src + ")";
	
	//make image transparent
	changeOpac(50, "fslide");
	changeOpac(0, "fslide");
	
	//make new image
	loadchimage(imagefile);
}
//----------------------------------------------------------------------------
//......12b)
//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}
//----------------------------------------------------------------------------
//......13)
function fromlist(){
clearInterval(t1);
idx = document.getElementById("dlist").selectedIndex + 1;
autoscroll();
showimg(idx);
old = 'false';
}
//----------------------------------------------------------------------------
//......14)
//select thumbnail
function showimg(i){
	idx = i;
	loadthimage(sl[idx]);
}
//----------------------------------------------------------------------------
//......15)
function printbtnclick(){
    var mywindow;
	document.getElementById("printbtn").link = "prnt.htm?" + sl[idx] + "&" + sl[idx] +"&" + ttl;
    if (sz[idx] == 5) {
	printwindow = window.open(document.getElementById("printbtn").link,"printwindow", "width=600,height=380,resizable=no,scrollbars=no");};
	if (sz[idx] == 4) {
	printwindow = window.open(document.getElementById("printbtn").link,"printwindow", "width=500,height=380,resizable=no,scrollbars=no");};
	if (sz[idx] == 3) {
	printwindow = window.open(document.getElementById("printbtn").link,"printwindow", "width=400,height=380,resizable=no,scrollbars=no");};
	if (sz[idx] == 2) {
	printwindow = window.open(document.getElementById("printbtn").link,"printwindow", "width=360,height=380,resizable=no,scrollbars=no");};
	if (sz[idx] == 1) {
	printwindow = window.open(document.getElementById("printbtn").link,"printwindow", "width=310,height=380,resizable=no,scrollbars=no");};
	printwindow.moveTo(0,0);
	printwindow.focus();
}
//=============================================  END =========================================================================