// 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(){
    if (document.getElementById("thframe").width<120){
		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>120){
        clearInterval(t1);
		changeOpac(100, "fslide");};
}
//=================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 =========================================================================