/*
Slideshow Design information and design considerations.
The main script used by the web page, thumbpg.html, to produce an automatic photo viewer, usually termed a slide-show, is slideshow.js.. Other script used is global.js. The web page, thumbpg.html, is supplemented by a set of extra web pages, photointro/largepic0.html, photointro/largepic1.html, etc. There is one web page per enlarged image. These extra web pages are needed to display the enlarged images using HTML but are utilised by the slide show presentation too, because this saves duplicating the job of adding titles to the images, when these already exist on the HTML pages..
 
The basic photo section on 'thumbpg.html', contains a set of small photographs (thumbnails). When any thumbnail is clicked on, HTML is used to load a web page, which contains an enlargement of the thumbnail together with some information about the photograph, such as its whereabouts and walk leader. For example if the third thumbnail is clicked on, the web page largepic3.html in the folder 'photointro' is loaded. Using HTML, there has to be as many of these 'largepic' web pages as there are photos.

The basic principle behind the 'slide-show' is to use javascript (slideShow.js) to load these web pages successively into an iframe, which has been added to the web page, thumbpg.html, containing the thumbnails. With suitably designed HTML pages, the title, etc. on them can be used directly. This involves placing all navigation buttons at the bottom. of the page. These buttons can then be obscured from view, when the page is loaded into the iframe from the top, by  adjusting the height of the iframe. (If a form was used to pass the photo details, as in some slide-show designs, each set of information would have to be copied and made an <option> within in a <select> tag in the form. This can be a chore, when the photos are replaced on a regular basis.) The slide-show set-up allows the user to step forwards or backwards through the set of photographs by clicking on a 'NEXT' button or a 'BACK' button. Using the |<< and >>| buttons will switch the image to the first or last image in the list, respectively. The automatic photo viewer only steps forwards through the photograpghs. The 'Next' and 'Back' buttons can override the time a picture is viewed, when in automatic mode. 

Because load times for a series of large photographs can be unreasonably long, images are being pre-loaded as soon as the page is opened.  Because the images can be viewed in reverse order using the 'BACK' button, the images are not loaded in sequence from number 1 upwards. Instead the order is: first, last, second, last -1, and so on. If the requested image to be downloaded is not found or is timed out by the browser, then an error message is displayed and the previous image continues to be displayed.  Another feature is automatic adjustment of the width of the iframe so that a wide image can be viewed without its ends being clipped or having to scroll the image. This is done in the background. While viewing one image in an iframe, the next image is loaded into a second iframe, which has been reduced to zero size and so is invisible.  The width of the new image is measured and the width of the second iframe is then resized accordingly before being switched with the first iframe. The process continues with the first iframe now being the invisible one. The height of the images seen by the viewer is kept constant, unless the image width reaches a certain maximum after which the width is held constant and the height is reduced to keep the aspect ratio unchanged.

Pressing quickly the 'NEXT' (or 'BACK') buttons in succession, whether viewing manually or using the slideshow would cause an attempt to display images before they are downloaded. This is not advisable until all the images have been preloaded. After this clicking through the pictures can be much quicker.

The viewing times of the pictures displayed in the slideshow can be changed by altering the  settings 'Less Time' or 'More Time' by the the viewer. Reducing these viewing times, and hence download times, too much, has been prevented by limiting the minimum viewing time allowed.  Slow connections can only exacerbate the problem, so that the allotted time for uploading an image may be overrun. Hence a check is made to see if the image has been downloaded before an attempt is made to display it.  An array 'imgTag' keeps track of the loading of the images. Each member of this array refers to an image and  takes on values 0, 1 or 2. The value 0 indicates that loading the image has not started or is incomplete. Value 1 indicates that an error has occured during the load attempt. and value 2 that loading has been successful. 

The method of getting the content of the iframes depends on the browser. The preferred method is to use the Document Object Model or DOM method, i.e. IframeElement.contentDocument, which is implemented by the latest versions of the browsers Opera, Mozilla and Netscape but not the latest versions of IE, which uses iframeElement.contentWindow.document, while IE 5 uses iframeElement.document. As mentioned above, two iframes are used in the slideshow display. Both are contained in the same <div> tag. If both are full size then one is clearly below the other. However by having only the visible one full size and the invisible one zero size, the change in position when switching from one to the other is nil. 

To help the viewer identify where a photograph is located in the slideshow, its number is displayed.

Switching between images during a slideshow  needs careful timing. The timing of the various stages involved in the change is contolled by the use of a number of timers, setTimeout(), unless the fade facility is selected, when a setInterval() timer is also used. (See later.) 

The time between picture changes in the slide show is given by 'rotateDelay', again using a timer, setTimeout. . This is initially set to the value of 'initialRotateDelay'.  When loading images into the cache for the first time, the next picture to be viewed may be being preloaded, so it is necessary to allow sufficient time for this picture to be loaded into the browser's cache.  A value of 10 seconds has been allowed for this. This is a compromise between ensuring sufficient time to download an image on a slow connection and getting bored waiting for the next picture. The value of initialRotateDelay is set to 10000 (1000 = 1 second) and with this setting the viewer can adjust the value of rotateDelay to be between 5 seconds and 20 seconds. If an attempt to view an image is made and it has not already been fully downloaded an extra 4 seconds is added to the download time before an error message appears saying the 'photo' has been timed out.  If reliable high speed connections are not the norm, the value of rotateDelay can increased using the 'More Time' button.

A facility to fade-out one picture and fade-in the next is available. In this fading process, changing opacity in incremental steps is obtained by calling a function 'doFade'. This incorporates a timer, setTimeout(), which recalls the function 'doFade' after a period 'fade.milliseconds'. After each step the setTimeout() timer is cleared using clearTimeout()..The process continues until the required opacity is reached. The method uses only one setTimeout timer, unlike some methods, which have several setTimeout timers running in parallel..
  Because it is not possible to alter the style 'opacity' of the images in the content of each iframe, an 'overlay' div has been applied over these images and the opacity of the div altered in the reverse direction instead.  (The content of an iframe can be read but not written to)..  Swapping the iframes with their images is now carried out at the time that the 'overlay' div is fully opaque.
  The progress of the fading process is indicated by the variable 'fade.direction'. If it is 0, fading is inactive and the swapping of images both manually and / or automatically is allowed. Once the fade process is in progress, further initiation, is blocked whether from a manual or automatic source.
The CSS3 opacity attribute,(in the range 0 to 1 in intervals of 0.01), using  'object.style.opacity=(opacity);' , is supported by the Opera and Firefox browser.  IE provides an alternative through its IE specific filter attribute, namely, 'object.style.filter="alpha(opacity=" + opacity +")" '.. In this case corresponding values range from 0 to 100, with no decimal points.
 Clearly the fading process is smoother the smaller the changes in opacity. This depends on the size of the div or image, whose opacity is to be changed, on the type of browser and on the speed of the computer in use. With the 'overlay' div involved, Opera was found to be about 4 times faster than  Mozilla Firefox with IE somewhere in between. Rather than set fixed times for all browsers, Opera and IE have been programmed to run at faster rates than Mozilla Firefox.
The fade time and step times (in millisecs) for Mozilla Firefox are set at 3000 and 60 respectively giving 50 equal steps over a 3 second interval. IE is set to the maximum 100 equal steps over this interval while Opera does the100 steps over a 2 second interval. Hopefully these setting are conservative enough to allow the process to operate on computers with fairly low computer speeds and could in time be improved on.
. The function 'fade.setOpac' is used to set the opacity of an element with a given id. The function 'fade.changeOpacity' calculates the necessary values of opacity to be sent to fade.setOpac, based on a starting opacity, final opacity, a time between changes in opacity and the overall time for the fading to occur.
The NEXT,  BACK, |<< and >>| buttons are disabled, while any image change is occuring. So is the automatic image change during a slideshow, if a button has been used manually to change an image and that change is still occuring.  During a fade cycle, this disablement prevents excessive flickering and possible malfunction of the slideshow, caused by the timers, (setTimeout) getting out of synch.
*/

//set up global variables
var initialRotateDelay = 12000;
var rotateDelay =initialRotateDelay;
var current=0; //number of image being displayed
var nextPic=0;
var nPhotos=0;
var pic=1;//number of image displayed
var nextIframe=0;// This is set initially so that when it is re-set at start of function 'setNewIframe', its value is correct
var extraDelay=false;
var delayT=700; //delay used to ensure the various steps in the change from one image to the next occurs in the correct order
var fadeTime=0; // value is fade.time if fading is selected otherwise 0.
var iframeChange=false; // value is set to true, during time iframes are swapped
var scrnW=0;
var ImgNo=0;
var alternateOrder = new Array();// stores image numbers working from both ends of list
var loaded=false; //this is true if an image is downloaded successfully
var erred=false; //this is true if an error occurs during downloading an image
var newImage = new Array();

 var fade ={ //set up global OBJECT fade
 id: "overlay",
 firstStep: false, //true after first step of fading process in each direction
 selected: false, // true if the fading has been selected
 time: 3000, // overall time in milliseconds allowed for fading to take place. This value is set for Firefox
 milliseconds: 60, // time between step-changes in opacity. This value is set for Firefox
 end: false, // set true when opacity reaches required value
 process: false, // true if fading in progress 
 newOpac: 0,  //value of opacity assigned to 'overlay' div
 direction: 0, // values -1, 0, 1 indicate opacity of overlay div is decreasing, static or increasing respectively 
 
 // FADE.CHANGEOPACITY//
 changeOpacity: function(startOpac, endOpac,fadeTime){
var fadeNoSteps= Math.round(fadeTime/fade.milliseconds);// where fade.milliseconds is the time between step changes in opacity in milliseconds.
var incOpac=Math.abs((startOpac-endOpac)/fadeNoSteps); //absolute value of incremental changes in opacity
 
//Determine the direction of fading, If start and end are the same nothing happens
	fade.direction =0;
	if(startOpac > endOpac) { fade.direction=-1;} // opacity to be decreased or transparency increased
	if(startOpac < endOpac) { fade.direction=1;} // opacity to be increased or transparency decreased
	fade.newOpac=startOpac;// fade.newOpac is global variable
	if(fade.direction!=0){  //if 1
   fade.end=false;
	fade.firstStep=false;
	doFade(endOpac,incOpac);
	}
 },  //eof fade.changeOpacity

//FADE.SETOPAC///
setOpac :function(opacity) {
el=document.getElementById(fade.id);
if(document.all){
IEopacity=100*opacity;
 el.style.filter="alpha(opacity=" + IEopacity +")"; // for IE browsers
}else{
el.style.opacity=opacity; // opacity format adopted by latest browsers other than IE
}
return false;
} // eof fade.setOpac

}; //end of FADE object 


///INITIALISE///
 //Find number of thumbnail photos and start preloading their equivalent larger images in the order: 1, last, 2, last-1, etc.
function initialise(){
//Get overlay Image
overlayDiv=document.getElementById("overlay");

overlayDiv.style.height=795 +"px";
if(document.all && !window.opera){overlayDiv.style.height=805;}  // IE needs deeper overlay because content of iframe is lower

//Calculate a suitable width for overlay and locate its left side
if(screen.availWidth){
scrnW=screen.availWidth;
}else{
scrnW=screen.width;}
overlayW=scrnW-400;
if(overlayW<1170){overlayW=1170;}
overlayDiv.style.width= overlayW +"px"; 
overlayDiv.style.left=5+"px"; // this is 5 less than the position of iframe it has to cover
overlayDiv.style.zindex="40";
overlayDiv.style.backgroundColor = "#fff";
fade.setOpac(0,"overlay");
thumbTablElem1 = document.getElementById("thumbsTable1");
var thumbImages1=thumbTablElem1.getElementsByTagName("img");
 nPhotos =thumbImages1.length;
// myImgSet =new Array(nPhotos);
 imgTag =new Array(nPhotos+1);
 for(var i=1; i<nPhotos+1; i++){
 imgTag[i] = 0; // 0 indicates preload not started or timed out by browser. 1 indicates error, such as image not found, 2 indicates image download completed
 }
 imgTag[0]=2; //refers to initial image before start of slide show
 getAlternateOrder();
 load(1);
 //reset fade time and step time for Opera and IE.
 if(document.addEventListener && window.opera){ // Corrections for Opera)
 fade.time=2000; fade.millisecs=20;}
 if(document.all){fade.time=3000; fade.millisecs=30;}
 } //eof initialise

//DOFADE///
function doFade(endOpac,incOpac){
if(fade.firstStep){clearTimeout(fading);}
fade.newOpac=parseFloat((fade.newOpac+ incOpac*fade.direction).toFixed(2)); // ensure opacity value is a number correct to 2 d.p.
if ((fade.newOpac-endOpac)*fade.direction>0){ //if 1
fade.newOpac=endOpac;
fade.end=true;
if(fade.direction==-1){ //if2
fade.direction=0;
iframeChange=false; //fading effect completed
} //end if 2
}  //end if 1
fade.setOpac(fade.newOpac);
if(fade.end)	{ //if 3
//clearTimeout(fading);
return false;
}//end if3
else{
fade.firstStep=true;
fading=setTimeout(function(){doFade(endOpac,incOpac);},fade.milliseconds); //Here are 2 ways of applying setTimeout
//fading=setTimeout("doFade("+ endOpac + "," +incOpac + ")",fade.milliseconds);
} //end else
} //eof doFade

/// FADER ////
function fader(txt) {
document.slideform.fadeButton.value = (txt == "USE FADE") ? "CUT FADE" : "USE FADE";
if (fade.selected){
fade.selected=false;
fadeTime=0;
}else{
fade.selected=true;
fadeTime= fade.time;
}
} // eof fader

///DOWN///
function down() {
if (rotateDelay > initialRotateDelay-5000) {rotateDelay = rotateDelay-1000;} //minimum period to view is about 5 seconds, if initialRotateDelay is10000 
} //eof down

/// UP ///
function up() {
if (rotateDelay<initialRotateDelay+10000) {rotateDelay = rotateDelay+1000;} //maximum period to view is about 20 seconds, if initialRotateDelay is 10000
} // eof up

//// NEXT ///
function next() {
nextPic=current +1;
if(nextPic>nPhotos){ 
nextPic=1;
}
 if(iframeChange) return false; 
current=nextPic;
setNewIframe(nextPic); 
} //eof next

/// PREVIOUS ///
function previous() {
nextPic = current -1;
if(nextPic<1){ 
nextPic=nPhotos;
} 
if(iframeChange) return false; 
current=nextPic;
setNewIframe(nextPic); 
} // eof previous

//// FIRST ////
function first() { //first already preloaded
nextPic=1; 
if(iframeChange) return false; 
current = 1; 
setNewIframe(nextPic);
} // eof first

/// LAST ////
function last() { //last already preloaded
nextPic=nPhotos;
if(iframeChange) return false; 
current=nPhotos;
setNewIframe(nextPic);
} // eof last

/// AUTOTXT ////
function autotxt(text) {
document.slideform.slideButton.value = (text == "Stop Slide Show") ? "Start Slide Show" : "Stop Slide Show";
rotate();
} // eof autotxt

/// ROTATE ///
function rotate() {
if (document.forms.slideform.slideButton.value == "Stop Slide Show") { // if 1. The slideshow is in operation.
nextPic = current+1;
if (nextPic>nPhotos){
nextPic=1;
//if(extraDelay==true){rotateDelay=rotateDelay-3000;}//reset rotateDelay
}
 // if((imgTag[nextPic]==0)&&(extraDelay==false)){ // try again after 'extraDelay'
 // extraDelay=true;
// rotateDelay=rotateDelay+3000;//increase rotateDelay by 3 secs
//timeRotate =setTimeout("rotate()", rotateDelay);
//}else{
//extraDelay=false;
current=nextPic;
if(!iframeChange) {setNewIframe(nextPic);} // only initiate a change of image, if image is not being changed (manually) at the time
viewTime=(fade.selected) ? rotateDelay+3*fadeTime: rotateDelay; //Total fading time must exceed fade-down + fade-up times (both = fadeTime)
 // apply rotate() after a delay (= viewTime), which shows next photo, as long as slidebutton shows "Stop Slide Show"
  timeRotate =setTimeout("rotate()", viewTime);
 // } //end else
 } //end if1
} // eof rotate


/// SETNEWIFRAME  - main function - ////
function setNewIframe(picNo){ 
duoDigitPicNo=duoDigit(picNo);
spanElem=document.getElementById("loadMessage");
if(imgTag[picNo]==1){
spanElem.firstChild.nodeValue="Error for No " +duoDigitPicNo;
return false;
}
if(imgTag[picNo]==0){
spanElem.firstChild.nodeValue="No " +duoDigitPicNo + " timed out"
//return false;
}
var iframeElem0 =document.getElementById("slideShowWindow0");
var iframeElem1 =document.getElementById("slideShowWindow1");
presentIframe=nextIframe;// nextIframe is the iframe which is next to become visible - presentIframe is iframe which is still visible..
nextIframe=(nextIframe+1)%2;
 
// Assign next scr to opaque condensed iframe
var defaultDocWidth =1100;// this is 50 more than max photo width to allow for borders etc.
iframeHeight =804; // this height is the same as that set  in thumbpg.html for iframe containing image and title
var newSrcString = "photointro/largepic" + picNo + ".html";

//The set of operations which follow, need to be in the correct sequence. setTimeout has been used to enable this.
iframeChange=true;

//apply src to invisible iframe
if(nextIframe ==0){
    iframeElem0.setAttribute("src",newSrcString); // set src of iframe to new value, which initiates the download of the content of the URL 
   }else{
   iframeElem1.setAttribute("src",newSrcString);
}
var xtraT=fadeTime;

//If fade selected, increase opacity of overlay.div 
 if(fade.selected){
xtraT=fadeTime*2+1500;//time needed for extra computation when fading overlay -  time set for browsers, with slow opacity capability such as Firefox
 if(document.addEventListener && window.opera){ xtraT=fadeTime*1.2+500;}// Reduce time for Opera
 if(document.all){xtraT=fadeTime*1.5+1000;}  //reduce time fot IE
 fade.changeOpacity(0,1,fadeTime);} 

//Measure image-width of new content of hidden iframe and adjust iframe's width if necessary, allowing a small delay for content to be loaded.
 measureAdjustW =setTimeout("adjustIframeWidth(" + defaultDocWidth + ", " + iframeHeight + "," + picNo + "," + nextIframe + ")",delayT);
 
 //Make size changes to present visible iframe
 condenseVisible=setTimeout("condenseIframe(" + presentIframe + ")",delayT*1.1+xtraT); 
  
  //Swap iframe visibilities
  swap=setTimeout("swapOverIframes(" + presentIframe + ")",delayT*1.2+xtraT); 
  
  //Reset opacity of new visibleIframe and resize it
 resizeNewVisIframe=setTimeout("resizeIframe(" + nextIframe + ")",delayT*1.7+xtraT); 
 
  //Redraw border and give photo number. 
 newBorda =setTimeout("newBorderNo(" + nextIframe + ","+ picNo + ")",delayT*1.75+xtraT); 

	if(fade.direction==1){ 
fadeIn=setTimeout("fade.changeOpacity(" + 1 + "," + 0 + "," + fadeTime + ")",delayT*1.8 + xtraT);
}
 return false;
} //eof setNewIframe

//SWAPOVERIFRAMES//
function swapOverIframes(iframeNow){
clearTimeout(swap);

if(iframeNow==0){
 setDisplay(false,"slideShowWindow0"); 
 setTimeout("setDisplay(" + true + "," + '"slideShowWindow1"' +")", 30);
}else{
  setDisplay(false,"slideShowWindow1");
  setTimeout("setDisplay(" + true + "," + '"slideShowWindow0"' +")", 30);
 }
 
 return false;
} //eof swapOver

//CONDENSEIFRAME//
function condenseIframe(iframe){
clearTimeout(condenseVisible);
 if(iframe==0){ 
 iframeElem0=document.getElementById("slideShowWindow0");
 shrinkIframe(iframeElem0);
  }else{
   iframeElem1=document.getElementById("slideShowWindow1");
 shrinkIframe(iframeElem1);
  } 
 return false;
} //eof condenseVisibleIframe

//SETDISPLAY//
function setDisplay(show,id){
var objectElement=document.getElementById(id);
if(show){
objectElement.style.display ="block";
}else{
objectElement.style.display="none";
} //end else
 return false;
} //eof  setDisplay

///DUODIGIT///
function duoDigit(picNo){
if(picNo<10){//if5
 duoDigitPicNo = "0" + picNo;
 } //end if5
 else{ //else1
 duoDigitPicNo = picNo;
 } //end else
 return  duoDigitPicNo
} // eof DuoDigit

///SHRINKIFRAME ///
function shrinkIframe (iframeElem){
  if(document.all&& !window.opera) { //needed for  IE 
    iframeElem.style.border='0px';
    iframeElem.style.width='0px';
    iframeElem.style.height='0px';
  } else {
     iframeElem.style.borderStyle="hidden"; // Preferred method, OK for Opera, Netscape,Mozilla
 iframeElem.setAttribute("width",0);
 iframeElem.setAttribute("height",0);
 }
  return false;
} //eof condenseIframe

/// RESIZEIFRAME ///
function resizeIframe(iframe){
clearTimeout(resizeNewVisIframe);
if(iframe==0){
var iframeElem=document.getElementById("slideShowWindow0");
}else{
var iframeElem=document.getElementById("slideShowWindow1");
}
if(document.all&&!window.opera){   // IE needs border, width and height styles resetting
iframeElem.style.border=0 + "px";
iframeElem.style.padding=0 + "px";
iframeElem.style.margin=0 + "px";
iframeElem.style.width= newWidth +"px";
iframeElem.style.height=iframeHeight +"px";
  }else { // use set Attribute method to set width and height of iframe to undo borderStyle="hidden" used by Opera, Mozilla and Netscape  
   iframeElem.setAttribute("width",newWidth);    
   iframeElem.setAttribute("height",iframeHeight);
  } //end of else
   return false;
} //eof resizeIframe

/// NEWBORDERNO ///
function newBorderNo(iframe,picNo) {
clearTimeout(newBorda);
if(iframe==0){
var ifrElem =document.getElementById("slideShowWindow0");
}else{
var ifrElem =document.getElementById("slideShowWindow1");
}
ifrElem.style.borderStyle="solid";
ifrElem.style.borderColor= "#fff"; //was #6a6 giving pale green
ifrElem.style.borderWidth=0 +"px";//was 2+"px" giving narrow border
ifrElem.style.padding=0 +"px";
ifrElem.style.margin=0 +"px";
 
 //Add photo number
 if(imgTag[picNo]==2) { // preload completed
 spanElem.firstChild.nodeValue="Photograph " +duoDigitPicNo;
 }
if(fade.direction==0){ // no fade being used
iframeChange=false; //swap completed
}
 return false;
} //eof newBorder

/// ADJUSTIFRAMEWIDTH ///
function adjustIframeWidth(widthDoc,iframeHeight,picNo,iframe) {
clearTimeout(measureAdjustW);
if(iframe==0){
var iframeElem =document.getElementById("slideShowWindow1");
}else{
var iframeElem =document.getElementById("slideShowWindow0"); 
}

// Get content of iframe. Method depends on browser.
// The (preferred) DOM method uses 'contentDocument' to get the content of the iframe, OK with latest Opera, Mozilla + Netscape browsers
if(iframeElem.contentDocument){ 
var iframeContent=iframeElem.contentDocument;
}
 // Use 'contentWindow.document' for latest versions of IE
else if (iframeElem.contentWindow.document){
var iframeContent=iframeElem.contentWindow.document;
} //end else if
//Use '.document' for IE 5
else if (iframeElem.document){ 
var iframeContent=iframeElem.document;
} //end else if

/* (Having got iframeContent, the HTML of this content can be read using iframeContent.getElementsByTagName("body")[0].innerHTML). However we cannot write to the content of the iframe.
We measure image-width of iframeContent and if necessary adjust the iframe's width to display the image without clipping.
To cater for different content, the width of all images in the iframe are measured and the largest used. In this instance however, the content is largePic[picNo] and its first image, imgElem[0], has the greatest width.*/

var imgElem = iframeContent.getElementsByTagName("img"); // array of image elements in the content of the iframe.
var imgW=0;
var wString="";
var w=0;
for(var i=0; i<imgElem.length;i++){
wString=imgElem[i].getAttribute("width")
w=eval(wString);
if(imgW< w){ //if a
imgW=w;
var wideImgPosn=i;
}//end if a
} //end for
newWidth=widthDoc;
if(imgW>widthDoc -38){ // ifb   -38 allows for table borders etc.
newWidth = parseInt(imgW) + 38; //newWidth now greater than default value widthDoc
} //end ifb
  if(document.all){   // IE needs border, width and height styles resetting
iframeElem.style.border=0 + "px";
iframeElem.style.padding=0 + "px";
iframeElem.style.margin=0 + "px";
iframeElem.style.width= newWidth +"px";
iframeElem.style.height=iframeHeight +"px";
  } //end if
   else { // use set Attribute method to set width and height of iframe to undo borderStyle="hidden" used by Opera, Mozilla and Netscape  
   iframeElem.setAttribute("width",newWidth);    
   iframeElem.setAttribute("height",iframeHeight);
  } //end of else
    return false;
} //eof adjustIframeWidth

//GETALTERNATEORDER///
function getAlternateOrder(){

//change 1,2,3,4 etc to 1,nPhotos,2,nPhotos-1, etc..
for(i=1;i<nPhotos+1;i++){
if(i%2==0){
alternateOrder[i]=nPhotos-i/2+1;

}else{
alternateOrder[i]=i/2+0.5;

} //end else
} //end for

} //eof getAlternateOrder

//LOAD//
function load(imgNo){
if (imgNo>nPhotos+1){return false;}
newImgNo=alternateOrder[imgNo];


//alert("imgNo = " + imgNo);
loaded=false;
erred=false;

newImage[newImgNo]= document.createElement("img"); // create offscreen image

//First set up functions to detect a successful download or an error
newImage[newImgNo].onload =function(){
//newImage[newImgNo]=null;
loaded=true;
};
 newImage[newImgNo].onerror =function(){
// newImage[newImgNo]=null;
 erred=true;};


//Now download image from image source
newImage[newImgNo].src="photos/largepic"+newImgNo+".jpg";
checkLoading(newImgNo,imgNo,0);
} //eof load

//CHECKLOADING//
function checkLoading(newImgNo,imgNo,runTime){
runTime=runTime+100; //to check downloading every 50 msecs, run time needs to be incremented by 50 msecs, so that setTimeout() operates after 50, 100,150, 200 ... msecs
if((loaded)||(erred)||(newImage.complete)) {  //if1 
if(loaded){imgTag[newImgNo]=2;}
if(erred){imgTag[newImgNo]=1;}
//Note if newImage.complete is true and loaded is false, imgTag[newImgNo] remains at its original setting of 0, indicating loading was timed out

imgNo++;
if((imgNo<nPhotos+1)||(runTime>5000)){ //if2 Initiate next download, after 5 seconds, after this download is successful, in error or browser has completed (i.e. loading completed or timed out).
load(imgNo);
}//end if2
else{return;}
} //end if1
else{ //else2
//rerun=setTimeout("checkLoading(" + imgNo + "," + runTime + ")",runTime);
rerun=setTimeout("checkLoading(" +newImgNo + "," + imgNo + "," + runTime + ")",runTime);
}// end else2
}// eof checkLoading




addLoadEvent(initialise);