/*  Cool Javascript Slideshow
	Version: 1.2
	Written By: Jeff Baker	Copyright April 13, 2009
	Website: www.seabreezecomputers.com/slideshow

	PHP generation of photo file names and random start point added
	by Pete Skan, April 2010.
		
	Description: This Javascript will display a slideshow with
	crossfade transitions and more, including photo effects.
	It shows all the photos present in a specified folder.
	
	Copy and paste the following in your HTML document where you 
	want the slideshow to appear:
	<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="coolslide.js"></SCRIPT>
*/

// You may edit the variables below:

// PHOTO FOLDER IS NOW SPECIFIED IN PHP: SEE loadpics()!

// var folder = 'gallery1/slides/'; // if your photos are in a different folder specify it here
// example: var folder = 'images/'; 
// or same folder as js file then: var folder = '';
var phwidth = 385; // pictureholder width
var phheight = 289; // pictureholder height
// pictureholder DIV also has the class 'pictureholder' so you can add CSS border etc.
//KL var photowidth = 434; // width to show photos at
// Scale photos to fill the full height of the pictureholder. 4x3 landscape
// fits exactly; 3x2 landscape is clipped on left and right, portrait shots
// have side borders.
var photowidth = 0; // width to show photos at (0 for no limit)
var photoheight = phheight; // height to show photos at (0 for no limit)
// Valid sizes are: 32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800
var seconds = 5; // switch photos n seconds
var randomize_photos = 0; // 0 = Do not randomize photos; 1 = Randomize photos
var display_caption = 0; // 0 = No caption; 1 = Display Picasa Description below photo
var caption_height = 50; // How many pixels high for caption box if on
var caption_border = 1; // Caption border pixels
// captionholder DIV has the class 'captionholder' so you can add CSS
var pan_zoom = 1.3;  // how many times to zoom before panning
var trans = "random"; // default transition between photos
//var trans = "crossfade"; // default transition between photos
var effect = "none"; // default effect on photos
/* 	The trans variable stands for transitions.  The following trans are possible:
	none, random, crossfade, zoom(from), wipe(from), slide(from)
	from = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
	(*slide does not support center)
	(**wipe supports left, right, center, top and bottom)
*/
/*	The effect variable is for photo effects.  Possible options are:
	none, random, zoomin(to), zoomout(to), pan(to)
	to = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
	(*pan does not support center)
*/
var cur_pic = 0; // which photo to start with. 0 is first photo in album.
var random_start = 1; // 0 = start at cur_pic; 1 = start at random photo
var trans_amount = 20; // amount of steps for transitions
var effect_amount = 100; // amount of steps for effects
var testing_mode = 0; // 0 = off; 1 = on; testing mode creates a DIV with ID testing to display testing info
/* 	The following time variables are in milliseconds.
	If you see a flicker of a background photo after
	a transition then you may want to increase the
	flicker time.  You can also play with the other
	time variables if animation is not smooth. */
var flicker_time = 300; // ms between photo operations
var opacity_time = 50; // ms between opacity
var trans_time = 32; // ms between transition steps
var effect_time = 45; // ms between effect steps


/* DO NOT CHANGE ANY VARIABLES BELOW */
var pictures = new Array(); // will hold an array of all the pics
var ie = (document.all) // ie 5 or higher
var picture = "picture";
var picture2 = "picture2";  // Needed so Firefox and Netscape don't have javascript console errors
var pwidth;
var pheight;
var zwidth;
var zheight;
var ztimer; // timer for zoom effect
var zxstep; // zoom effect xstep
var zystep; // zoom effect ystep
var zleft = 0;
var ztop = 0;
var cleft = 0;  // to center photo
var ctop = 0; // to center photo

//testingbox = document.getElementById('testing');


function none(amount, none)
{
	// just a silly function to prevent an error for having effect none
	if (none == '1') // Means no transition
		setTimeout('changepic();', pictures[cur_pic].time);
} // end function none(amount)



function toHTML (myString)
{
    htmlString = myString.split("&lt;").join("<");
    htmlString = htmlString.split("&gt;").join(">");
    htmlString = htmlString.split("&quot;").join("\"");
    htmlString = htmlString.split("&apos;").join("\'");
    return htmlString;
} // end function toHTML(myString)


function loadpics()
{
	var pic_array = new Array();

	// The following few photos are shown when this file is run from the
	// local machine to permit limited testing. When the file is on the server,
	// PHP will replace them with whatever is in the photo directory. Note
	// that this only works if the photos are numbered sequentially starting
	// with "001.jpg".
	// ** Pete 31/1/12: omit 002 and 005 since currently excluded from gallery
	pic_array[0] = 'pages/gallery/2011/slides/001.jpg';
	pic_array[1] = 'pages/gallery/2011/slides/003.jpg';
	pic_array[2] = 'pages/gallery/2011/slides/004.jpg';
	pic_array[3] = 'pages/gallery/2011/slides/006.jpg';
	pic_array[4] = 'pages/gallery/2011/slides/007.jpg';

	pic_array[0]="pages/gallery/2011/slides/022.jpg";pic_array[1]="pages/gallery/2011/slides/290.JPG";pic_array[2]="pages/gallery/2011/slides/214.JPG";pic_array[3]="pages/gallery/2011/slides/058.JPG";pic_array[4]="pages/gallery/2011/slides/080.JPG";pic_array[5]="pages/gallery/2011/slides/240.JPG";pic_array[6]="pages/gallery/2011/slides/177.jpg";pic_array[7]="pages/gallery/2011/slides/017.JPG";pic_array[8]="pages/gallery/2011/slides/218.JPG";pic_array[9]="pages/gallery/2011/slides/262.JPG";pic_array[10]="pages/gallery/2011/slides/291.jpg";pic_array[11]="pages/gallery/2011/slides/150.JPG";pic_array[12]="pages/gallery/2011/slides/045.JPG";pic_array[13]="pages/gallery/2011/slides/122.JPG";pic_array[14]="pages/gallery/2011/slides/055.JPG";pic_array[15]="pages/gallery/2011/slides/144.JPG";pic_array[16]="pages/gallery/2011/slides/078.JPG";pic_array[17]="pages/gallery/2011/slides/185.jpg";pic_array[18]="pages/gallery/2011/slides/143.JPG";pic_array[19]="pages/gallery/2011/slides/204.jpg";pic_array[20]="pages/gallery/2011/slides/040.JPG";pic_array[21]="pages/gallery/2011/slides/288.JPG";pic_array[22]="pages/gallery/2011/slides/147.JPG";pic_array[23]="pages/gallery/2011/slides/160.jpg";pic_array[24]="pages/gallery/2011/slides/093.jpg";pic_array[25]="pages/gallery/2011/slides/188.jpg";pic_array[26]="pages/gallery/2011/slides/133.JPG";pic_array[27]="pages/gallery/2011/slides/253.JPG";pic_array[28]="pages/gallery/2011/slides/138.JPG";pic_array[29]="pages/gallery/2011/slides/276.JPG";pic_array[30]="pages/gallery/2011/slides/279.JPG";pic_array[31]="pages/gallery/2011/slides/277.JPG";pic_array[32]="pages/gallery/2011/slides/130.JPG";pic_array[33]="pages/gallery/2011/slides/091.jpg";pic_array[34]="pages/gallery/2011/slides/190.JPG";pic_array[35]="pages/gallery/2011/slides/014.JPG";pic_array[36]="pages/gallery/2011/slides/220.JPG";pic_array[37]="pages/gallery/2011/slides/300.JPG";pic_array[38]="pages/gallery/2011/slides/157.JPG";pic_array[39]="pages/gallery/2011/slides/178.jpg";pic_array[40]="pages/gallery/2011/slides/260.JPG";pic_array[41]="pages/gallery/2011/slides/131.jpg";pic_array[42]="pages/gallery/2011/slides/120.JPG";pic_array[43]="pages/gallery/2011/slides/254.jpg";pic_array[44]="pages/gallery/2011/slides/228.JPG";pic_array[45]="pages/gallery/2011/slides/230.JPG";pic_array[46]="pages/gallery/2011/slides/025.JPG";pic_array[47]="pages/gallery/2011/slides/278.JPG";pic_array[48]="pages/gallery/2011/slides/032.JPG";pic_array[49]="pages/gallery/2011/slides/107.JPG";pic_array[50]="pages/gallery/2011/slides/008.JPG";pic_array[51]="pages/gallery/2011/slides/270.jpg";pic_array[52]="pages/gallery/2011/slides/182.jpg";pic_array[53]="pages/gallery/2011/slides/163.JPG";pic_array[54]="pages/gallery/2011/slides/210.JPG";pic_array[55]="pages/gallery/2011/slides/257.JPG";pic_array[56]="pages/gallery/2011/slides/183.jpg";pic_array[57]="pages/gallery/2011/slides/200.jpg";pic_array[58]="pages/gallery/2011/slides/118.JPG";pic_array[59]="pages/gallery/2011/slides/179.jpg";pic_array[60]="pages/gallery/2011/slides/158.JPG";pic_array[61]="pages/gallery/2011/slides/059.JPG";pic_array[62]="pages/gallery/2011/slides/125.JPG";pic_array[63]="pages/gallery/2011/slides/026.JPG";pic_array[64]="pages/gallery/2011/slides/006.JPG";pic_array[65]="pages/gallery/2011/slides/241.JPG";pic_array[66]="pages/gallery/2011/slides/151.JPG";pic_array[67]="pages/gallery/2011/slides/056.JPG";pic_array[68]="pages/gallery/2011/slides/041.JPG";pic_array[69]="pages/gallery/2011/slides/139.JPG";pic_array[70]="pages/gallery/2011/slides/274.jpg";pic_array[71]="pages/gallery/2011/slides/167.JPG";pic_array[72]="pages/gallery/2011/slides/226.JPG";pic_array[73]="pages/gallery/2011/slides/259.JPG";pic_array[74]="pages/gallery/2011/slides/283.jpg";pic_array[75]="pages/gallery/2011/slides/164.jpg";pic_array[76]="pages/gallery/2011/slides/060.JPG";pic_array[77]="pages/gallery/2011/slides/180.jpg";pic_array[78]="pages/gallery/2011/slides/256.JPG";pic_array[79]="pages/gallery/2011/slides/066.JPG";pic_array[80]="pages/gallery/2011/slides/074.JPG";pic_array[81]="pages/gallery/2011/slides/155.JPG";pic_array[82]="pages/gallery/2011/slides/046.JPG";pic_array[83]="pages/gallery/2011/slides/004.JPG";pic_array[84]="pages/gallery/2011/slides/154.JPG";pic_array[85]="pages/gallery/2011/slides/272.jpg";pic_array[86]="pages/gallery/2011/slides/114.JPG";pic_array[87]="pages/gallery/2011/slides/149.JPG";pic_array[88]="pages/gallery/2011/slides/219.JPG";pic_array[89]="pages/gallery/2011/slides/245.JPG";pic_array[90]="pages/gallery/2011/slides/065.JPG";pic_array[91]="pages/gallery/2011/slides/018.JPG";pic_array[92]="pages/gallery/2011/slides/039.JPG";pic_array[93]="pages/gallery/2011/slides/250.JPG";pic_array[94]="pages/gallery/2011/slides/192.JPG";pic_array[95]="pages/gallery/2011/slides/015.JPG";pic_array[96]="pages/gallery/2011/slides/003.JPG";pic_array[97]="pages/gallery/2011/slides/098.jpg";pic_array[98]="pages/gallery/2011/slides/224.JPG";pic_array[99]="pages/gallery/2011/slides/162.JPG";pic_array[100]="pages/gallery/2011/slides/237.JPG";pic_array[101]="pages/gallery/2011/slides/170.JPG";pic_array[102]="pages/gallery/2011/slides/119.JPG";pic_array[103]="pages/gallery/2011/slides/072.JPG";pic_array[104]="pages/gallery/2011/slides/172.JPG";pic_array[105]="pages/gallery/2011/slides/246.JPG";pic_array[106]="pages/gallery/2011/slides/097.jpg";pic_array[107]="pages/gallery/2011/slides/105.JPG";pic_array[108]="pages/gallery/2011/slides/108.JPG";pic_array[109]="pages/gallery/2011/slides/061.JPG";pic_array[110]="pages/gallery/2011/slides/301.jpg";pic_array[111]="pages/gallery/2011/slides/292.jpg";pic_array[112]="pages/gallery/2011/slides/053.JPG";pic_array[113]="pages/gallery/2011/slides/168.jpg";pic_array[114]="pages/gallery/2011/slides/202.jpg";pic_array[115]="pages/gallery/2011/slides/038.JPG";pic_array[116]="pages/gallery/2011/slides/128.JPG";pic_array[117]="pages/gallery/2011/slides/281.JPG";pic_array[118]="pages/gallery/2011/slides/009.JPG";pic_array[119]="pages/gallery/2011/slides/267.JPG";pic_array[120]="pages/gallery/2011/slides/085.JPG";pic_array[121]="pages/gallery/2011/slides/029.JPG";pic_array[122]="pages/gallery/2011/slides/084.JPG";pic_array[123]="pages/gallery/2011/slides/148.JPG";pic_array[124]="pages/gallery/2011/slides/247.JPG";pic_array[125]="pages/gallery/2011/slides/129.JPG";pic_array[126]="pages/gallery/2011/slides/075.JPG";pic_array[127]="pages/gallery/2011/slides/208.JPG";pic_array[128]="pages/gallery/2011/slides/165.JPG";pic_array[129]="pages/gallery/2011/slides/043.jpg";pic_array[130]="pages/gallery/2011/slides/013.JPG";pic_array[131]="pages/gallery/2011/slides/081.JPG";pic_array[132]="pages/gallery/2011/slides/024.JPG";pic_array[133]="pages/gallery/2011/slides/127.JPG";pic_array[134]="pages/gallery/2011/slides/284.jpg";pic_array[135]="pages/gallery/2011/slides/011.JPG";pic_array[136]="pages/gallery/2011/slides/187.jpg";pic_array[137]="pages/gallery/2011/slides/083.JPG";pic_array[138]="pages/gallery/2011/slides/273.JPG";pic_array[139]="pages/gallery/2011/slides/095.jpg";pic_array[140]="pages/gallery/2011/slides/115.JPG";pic_array[141]="pages/gallery/2011/slides/077.JPG";pic_array[142]="pages/gallery/2011/slides/137.JPG";pic_array[143]="pages/gallery/2011/slides/176.jpg";pic_array[144]="pages/gallery/2011/slides/109.JPG";pic_array[145]="pages/gallery/2011/slides/031.JPG";pic_array[146]="pages/gallery/2011/slides/069.JPG";pic_array[147]="pages/gallery/2011/slides/280.JPG";pic_array[148]="pages/gallery/2011/slides/242.JPG";pic_array[149]="pages/gallery/2011/slides/073.JPG";pic_array[150]="pages/gallery/2011/slides/057.JPG";pic_array[151]="pages/gallery/2011/slides/196.JPG";pic_array[152]="pages/gallery/2011/slides/135.jpg";pic_array[153]="pages/gallery/2011/slides/036.JPG";pic_array[154]="pages/gallery/2011/slides/255.JPG";pic_array[155]="pages/gallery/2011/slides/229.JPG";pic_array[156]="pages/gallery/2011/slides/225.JPG";pic_array[157]="pages/gallery/2011/slides/082.JPG";pic_array[158]="pages/gallery/2011/slides/141.JPG";pic_array[159]="pages/gallery/2011/slides/079.JPG";pic_array[160]="pages/gallery/2011/slides/062.JPG";pic_array[161]="pages/gallery/2011/slides/181.jpg";pic_array[162]="pages/gallery/2011/slides/174.jpg";pic_array[163]="pages/gallery/2011/slides/191.JPG";pic_array[164]="pages/gallery/2011/slides/248.jpg";pic_array[165]="pages/gallery/2011/slides/213.JPG";pic_array[166]="pages/gallery/2011/slides/222.JPG";pic_array[167]="pages/gallery/2011/slides/047.JPG";pic_array[168]="pages/gallery/2011/slides/124.JPG";pic_array[169]="pages/gallery/2011/slides/159.jpg";pic_array[170]="pages/gallery/2011/slides/113.jpg";pic_array[171]="pages/gallery/2011/slides/244.JPG";pic_array[172]="pages/gallery/2011/slides/201.jpg";pic_array[173]="pages/gallery/2011/slides/203.jpg";pic_array[174]="pages/gallery/2011/slides/112.JPG";pic_array[175]="pages/gallery/2011/slides/049.JPG";pic_array[176]="pages/gallery/2011/slides/028.JPG";pic_array[177]="pages/gallery/2011/slides/298.JPG";pic_array[178]="pages/gallery/2011/slides/268.JPG";pic_array[179]="pages/gallery/2011/slides/087.JPG";pic_array[180]="pages/gallery/2011/slides/068.JPG";pic_array[181]="pages/gallery/2011/slides/050.JPG";pic_array[182]="pages/gallery/2011/slides/239.JPG";pic_array[183]="pages/gallery/2011/slides/104.JPG";pic_array[184]="pages/gallery/2011/slides/110.JPG";pic_array[185]="pages/gallery/2011/slides/134.jpg";pic_array[186]="pages/gallery/2011/slides/258.JPG";pic_array[187]="pages/gallery/2011/slides/016.JPG";pic_array[188]="pages/gallery/2011/slides/265.JPG";pic_array[189]="pages/gallery/2011/slides/021.jpg";pic_array[190]="pages/gallery/2011/slides/090.JPG";pic_array[191]="pages/gallery/2011/slides/088.jpg";pic_array[192]="pages/gallery/2011/slides/100.jpg";pic_array[193]="pages/gallery/2011/slides/096.jpg";pic_array[194]="pages/gallery/2011/slides/052.JPG";pic_array[195]="pages/gallery/2011/slides/156.JPG";pic_array[196]="pages/gallery/2011/slides/261.jpg";pic_array[197]="pages/gallery/2011/slides/217.JPG";pic_array[198]="pages/gallery/2011/slides/117.JPG";pic_array[199]="pages/gallery/2011/slides/209.JPG";pic_array[200]="pages/gallery/2011/slides/132.jpg";pic_array[201]="pages/gallery/2011/slides/223.JPG";pic_array[202]="pages/gallery/2011/slides/197.JPG";pic_array[203]="pages/gallery/2011/slides/020.jpg";pic_array[204]="pages/gallery/2011/slides/027.JPG";pic_array[205]="pages/gallery/2011/slides/238.JPG";pic_array[206]="pages/gallery/2011/slides/186.jpg";pic_array[207]="pages/gallery/2011/slides/303.jpg";pic_array[208]="pages/gallery/2011/slides/302.jpg";pic_array[209]="pages/gallery/2011/slides/199.JPG";pic_array[210]="pages/gallery/2011/slides/266.jpg";pic_array[211]="pages/gallery/2011/slides/116.JPG";pic_array[212]="pages/gallery/2011/slides/295.JPG";pic_array[213]="pages/gallery/2011/slides/175.JPG";pic_array[214]="pages/gallery/2011/slides/121.JPG";pic_array[215]="pages/gallery/2011/slides/146.JPG";pic_array[216]="pages/gallery/2011/slides/216.JPG";pic_array[217]="pages/gallery/2011/slides/251.jpg";pic_array[218]="pages/gallery/2011/slides/211.JPG";pic_array[219]="pages/gallery/2011/slides/103.JPG";pic_array[220]="pages/gallery/2011/slides/086.JPG";pic_array[221]="pages/gallery/2011/slides/123.JPG";pic_array[222]="pages/gallery/2011/slides/106.JPG";pic_array[223]="pages/gallery/2011/slides/221.JPG";pic_array[224]="pages/gallery/2011/slides/064.JPG";pic_array[225]="pages/gallery/2011/slides/297.JPG";pic_array[226]="pages/gallery/2011/slides/037.JPG";pic_array[227]="pages/gallery/2011/slides/042.JPG";pic_array[228]="pages/gallery/2011/slides/051.JPG";pic_array[229]="pages/gallery/2011/slides/034.JPG";pic_array[230]="pages/gallery/2011/slides/304.jpg";pic_array[231]="pages/gallery/2011/slides/299.JPG";pic_array[232]="pages/gallery/2011/slides/044.jpg";pic_array[233]="pages/gallery/2011/slides/166.JPG";pic_array[234]="pages/gallery/2011/slides/092.jpg";pic_array[235]="pages/gallery/2011/slides/171.JPG";pic_array[236]="pages/gallery/2011/slides/287.JPG";pic_array[237]="pages/gallery/2011/slides/285.JPG";pic_array[238]="pages/gallery/2011/slides/161.JPG";pic_array[239]="pages/gallery/2011/slides/252.JPG";pic_array[240]="pages/gallery/2011/slides/070.JPG";pic_array[241]="pages/gallery/2011/slides/063.JPG";pic_array[242]="pages/gallery/2011/slides/001.JPG";pic_array[243]="pages/gallery/2011/slides/286.JPG";pic_array[244]="pages/gallery/2011/slides/076.JPG";pic_array[245]="pages/gallery/2011/slides/030.JPG";pic_array[246]="pages/gallery/2011/slides/007.JPG";pic_array[247]="pages/gallery/2011/slides/142.JPG";pic_array[248]="pages/gallery/2011/slides/243.JPG";pic_array[249]="pages/gallery/2011/slides/071.JPG";pic_array[250]="pages/gallery/2011/slides/101.jpg";pic_array[251]="pages/gallery/2011/slides/094.jpg";pic_array[252]="pages/gallery/2011/slides/198.JPG";pic_array[253]="pages/gallery/2011/slides/010.JPG";pic_array[254]="pages/gallery/2011/slides/035.JPG";pic_array[255]="pages/gallery/2011/slides/153.JPG";pic_array[256]="pages/gallery/2011/slides/293.jpg";pic_array[257]="pages/gallery/2011/slides/023.JPG";pic_array[258]="pages/gallery/2011/slides/234.JPG";pic_array[259]="pages/gallery/2011/slides/212.JPG";pic_array[260]="pages/gallery/2011/slides/152.JPG";pic_array[261]="pages/gallery/2011/slides/173.JPG";pic_array[262]="pages/gallery/2011/slides/232.JPG";pic_array[263]="pages/gallery/2011/slides/102.JPG";pic_array[264]="pages/gallery/2011/slides/048.JPG";pic_array[265]="pages/gallery/2011/slides/189.JPG";pic_array[266]="pages/gallery/2011/slides/264.JPG";pic_array[267]="pages/gallery/2011/slides/227.JPG";pic_array[268]="pages/gallery/2011/slides/169.jpg";pic_array[269]="pages/gallery/2011/slides/305.JPG";pic_array[270]="pages/gallery/2011/slides/271.jpg";pic_array[271]="pages/gallery/2011/slides/140.JPG";pic_array[272]="pages/gallery/2011/slides/275.jpg";pic_array[273]="pages/gallery/2011/slides/236.JPG";pic_array[274]="pages/gallery/2011/slides/019.JPG";pic_array[275]="pages/gallery/2011/slides/249.JPG";pic_array[276]="pages/gallery/2011/slides/067.JPG";pic_array[277]="pages/gallery/2011/slides/054.JPG";pic_array[278]="pages/gallery/2011/slides/294.jpg";pic_array[279]="pages/gallery/2011/slides/033.JPG";pic_array[280]="pages/gallery/2011/slides/099.jpg";pic_array[281]="pages/gallery/2011/slides/145.JPG";pic_array[282]="pages/gallery/2011/slides/233.JPG";pic_array[283]="pages/gallery/2011/slides/269.jpg";pic_array[284]="pages/gallery/2011/slides/184.jpg";pic_array[285]="pages/gallery/2011/slides/207.JPG";pic_array[286]="pages/gallery/2011/slides/089.JPG";pic_array[287]="pages/gallery/2011/slides/296.JPG";pic_array[288]="pages/gallery/2011/slides/012.JPG";pic_array[289]="pages/gallery/2011/slides/206.JPG";pic_array[290]="pages/gallery/2011/slides/136.jpg";pic_array[291]="pages/gallery/2011/slides/205.JPG";pic_array[292]="pages/gallery/2011/slides/111.JPG";pic_array[293]="pages/gallery/2011/slides/215.JPG"; 

	if (random_start == 1)
		cur_pic = Math.floor(Math.random() * pic_array.length);
	
	for (i = 0; i < pic_array.length; i++)
	{
		pictures[i] = {	photo: new Image,
		  				description: '',
						caption: '',
						trans: '',
						effect: '',
						time: '',
						title: ''};
						
		// PS: put the first pics to be shown at the beginning of the array.
		// This seems to be essential for fast startup.
		if (cur_pic >= pic_array.length)
			cur_pic = 0;

		pictures[i].photo.src = pic_array[cur_pic++];

		//document.write(temp2);
		//document.getElementById('testing').innerHTML = i+". "+pictures[i].photo.width+", "+pictures[i].photo.height+"<BR>";
		//document.write(pictures[i].width+", "+pictures[i].height+"<BR>");
		//document.write("<IMG SRC='"+pictures[i].photosrc+"'>;");
	}

	cur_pic = 0;

	if (randomize_photos == 1)
		shuffle_photos(); // shuffle or randomize photos

	setup_functions();
		
	init_show();

}  // function loadpics()


function init_show()
{
	// Create a loading progress bar in pictureholder
	document.getElementById('pictureholder').innerHTML = '<div style="text-align: center;'+
		'position: absolute; vertical-align: middle; font-size: 1.5em; width: 100%;">' +
		'LOADING'+
		'<span id="bar"></span></div>';
	// load 5 photos complete or pictures.length complete,  whichever is smaller
	for (i = 0; i < pictures.length && i < 5; i++)
	{	
		pcomplete = pictures[i].photo.complete;
		if (pcomplete)
		document.getElementById('bar').innerHTML = '<hr width="'
			+((phwidth/5)*i)+'" size="12" noshade="noshade" />'; 
	}

	if (!pcomplete)
	{
		setTimeout("init_show()", 10);
		return;
	}
	
	// Now create the IMG picture and picture2 inside the pictureholder DIV
	document.getElementById('pictureholder').innerHTML='<img id="picture" class="picture"'+
		' style="top: 0px; left: 0px; overflow:hidden; position:absolute;">'+
		'<img id="picture2" class="picture"'+
		' style="top: 0px; left: 0px; overflow:hidden; position:absolute;">';
		
	// make sure picture is 100% opaque
	set_opacity('picture', 0);

	// set opacity of picture2 to invisible
	set_opacity('picture2',0);
	
	document.getElementById('picture2').src = pictures[cur_pic].photo.src;
		document.getElementById('picture2').width = pictures[cur_pic].photo.width;
			document.getElementById('picture2').height = pictures[cur_pic].photo.height;
				document.getElementById('picture2').style.left = 0 + 'px';
					document.getElementById('picture2').style.top = 0 + 'px';
	center_image('picture2');
	
	// Call effectsetup for first photo
	effectsetup();
	
	// call function transition in duration 'seconds'
	setTimeout(pictures[cur_pic].trans, 0);
	
	//changepic();
		
} // end function init_show()

function center_image(obj)
{	
	// since we have to make absolute positioned images
	// in order to display images on top of each other
	// for transition effects, we need to find a way
	// to place the next image on the center of
	// pictureholder
	cwidth = parseFloat(pictures[cur_pic].photo.width);
	cheight = parseFloat(pictures[cur_pic].photo.height);
	// first we need to shrink the photo
	// if it is bigger than photowidth or photoheight
	if (photowidth && cwidth > photowidth)
	{
		//alert(cwidth+", "+cheight);
		perc = cwidth / photowidth; // this preserves aspect ratio
		cwidth = Math.floor(cwidth / perc);
		cheight = Math.floor(cheight / perc);
	}
	if (photoheight && cheight > photoheight)
	{
		//alert(cwidth+", "+cheight);
		perc = cheight / photoheight; // this preserves aspect ratio
		cwidth = Math.floor(cwidth / perc);
		cheight = Math.floor(cheight / perc);
	}
	// Now center photo
	cleft = (phwidth - cwidth) / 2;
	ctop = (phheight - cheight) / 2;

	document.getElementById(obj).style.left = cleft + 'px';

	document.getElementById(obj).style.top = ctop + 'px';	
	
	document.getElementById(obj).width = cwidth;
	
	document.getElementById(obj).height = cheight;
	
	//testingbox.innerHTML = cwidth+", "+cheight;

} // end function center_image()


function shuffle_photos()
{
	pictures.sort(function() 
	{
	return 0.5 - Math.random()
	}) //Array elements now scrambled
	
}  // end function shuffle()


function randomize_trans(i)
{
	rand = Math.floor(Math.random()*4) // 0 to 3
	
	if (rand == 0)
		ftype = "crossfade";
	if (rand == 1)
		ftype = "wipe";
	if (rand == 2)
		ftype = "slide";
	if (rand == 3)
		ftype = "zoom";	
		
	if (ftype == "wipe")
	 	rand = Math.floor(Math.random()*5) // 0 to 4
	else
		rand = Math.floor(Math.random()*9) // 0 to 8
	
	if (rand == 0)
		foption = "left";
	if (rand == 1)
		foption = "right";		
	if (rand == 2)
		foption = "top";
	if (rand == 3)
		foption = "bottom";
	if (rand == 4)
		foption = "center";
	if (rand == 5)
		foption = "upperright";
	if (rand == 6)
		foption = "lowerleft";
	if (rand == 7)
		foption = "lowerright";
	if (rand == 8)
		foption = "upperleft";	
		
	if (ftype == "slide" && rand == 4) // can't slide from the center
		foption = "left";

	if (ftype == "crossfade")
		pictures[i].trans = "crossfade(0);";
	else	
		pictures[i].trans = ftype+"(0, '"+foption+"')"; // slide(0, 'left');	
	
				
} // end function randomize_trans(i)



function randomize_effect(i)
{
	rand = Math.floor(Math.random()*4) // 0 to 3
	
	if (rand == 0)
		ftype = "none";
	if (rand == 1)
		ftype = "zoomin";
	if (rand == 2)
		ftype = "zoomout";
	if (rand == 3)
		ftype = "pan";	
		
	//ftype = "pan";
	
	if (ftype == "pan")
	 	rand = Math.floor(Math.random()*8) // 0 to 7 (no center for pan)
	else
		rand = Math.floor(Math.random()*9) // 0 to 8
	
	if (rand == 0)
		foption = "left";
	if (rand == 1)
		foption = "right";		
	if (rand == 2)
		foption = "top";
	if (rand == 3)
		foption = "bottom";
	if (rand == 4)
		foption = "upperleft";
	if (rand == 5)
		foption = "upperright";
	if (rand == 6)
		foption = "lowerleft";
	if (rand == 7)
		foption = "lowerright";
	if (rand == 8)
		foption = "center";	
		

	if (ftype == "none")
		pictures[i].effect = ftype;
	else	
		pictures[i].effect = ftype+"(0, '"+foption+"')"; // zoomin(0, 'left');		
				
} // end function randomize_effect(i)



function setup_functions()
{
	
	if (trans == "none")
		trans = "none(1)";
	
	// first go through and fill effects and transitions with default
	for (i = 0; i < pictures.length; i++)
	{
		// TRANSITIONS
		if (trans == "random")
			randomize_trans(i);
		else	
		{
		ftype = trans.replace(/['">)']/gi, ""); // ex: slide(left
		foption = ftype.split('('); // ex: slide     /    left
		// Check to see if the user put a real function in trans
		if (eval('typeof('+foption[0]+')') == 'function')
			pictures[i].trans = foption[0]+"(0, '"+foption[1]+"');"; // slide(0, 'left');
		else 
			pictures[i].trans = 'crossfade(0)';  // else just put crossfade for trans
		}
		// EFFECTS
		if (effect == "random")
			randomize_effect(i);
		else
		{
		ftype = effect.replace(/['">)']/gi, ""); // ex: slide(left
		foption = ftype.split('('); // ex: slide     /    left
		// Check to see if the user put a real function in effect
		if (eval('typeof('+foption[0]+')') == 'function')
			pictures[i].effect = foption[0]+"(0, '"+foption[1]+"');";
		else 
			pictures[i].effect = 'none(0)';  // else just put none effect
		}
		pictures[i].time = seconds*1000; // convert seconds into milliseconds
		pictures[i].title = ''; // Blank the title
		
	}
	
	// Now fill in effects and transitions from descriptions
	for (i = 0; i < pictures.length; i++) 
	{
		if (pictures[i].description)
		{
		functions = pictures[i].description.split('<'); // ex: <trans="slide('left')>
		for (f = 0; f < functions.length; f++)
		{
			functions[f] = functions[f].replace(/ = /gi, "="); // v. 1.1 4/12/09 Bug in my code
			functions[f] = functions[f].toLowerCase();
			ftype = functions[f].split('='); // ex: trans    /   "slide('left')>
			if (ftype[1])
			{
			ftype[1] = ftype[1].replace(/['")']/gi, ""); // ex: slide(left>
			ftype[1] = ftype[1].replace(/>[\s\S]*/gi, "");
			//ftype[1] = ftype[1].replace(/>/gi, "");
			foption = ftype[1].split('('); // ex: slide     /    left
			if (ftype[0] == "trans")
			{
			// v. 1.12 4/13/09 added random to trans
			if (foption[0] == 'random') 
				randomize_trans(i);
			// Check to see if the user put a real function in trans
			// v. 1.11 4/13/09 switch from if (eval('typeof('+foption[0]+')') == 'function')
			if ((foption[0] == 'none' || foption[0] == 'crossfade' 
					|| foption[0] == 'zoom' || foption[0] == 'wipe' || foption[0] == 'slide')
					&& (foption[1] == 'upperleft' || foption[1] == 'top' || foption[1] == 'upperright'
					|| foption[1] == 'left' || foption[1] == 'center' || foption[1] == 'right'
					|| foption[1] == 'lowerleft' || foption[1] == 'bottom' || foption[1] == 'lowerright'))
				pictures[i].trans = foption[0]+"(0, '"+foption[1]+"')"; // slide(0, 'left');
			}	
			else if (ftype[0] == "effect")
			{	
			// v. 1.12 4/13/09 added random to effect
			if (foption[0] == 'random') 
				randomize_effect(i);
			// Check to see if the user put a real function in trans
			// v. 1.11 4/13/09 switch from if (eval('typeof('+foption[0]+')') == 'function'
			if ((foption[0] == 'none' || foption[0] == 'zoomin' 
					|| foption[0] == 'zoomout' || foption[0] == 'pan')
					&& (foption[1] == 'upperleft' || foption[1] == 'top' || foption[1] == 'upperright'
					|| foption[1] == 'left' || foption[1] == 'center' || foption[1] == 'right'
					|| foption[1] == 'lowerleft' || foption[1] == 'bottom' || foption[1] == 'lowerright'))
				pictures[i].effect = foption[0]+"(0, '"+foption[1]+"')";
			}
			else if (ftype[0] == "time")
			{	
				// convert seconds into milliseconds
				pictures[i].time = parseFloat(foption[0])*1000;
			}
			else if (ftype[0] == "title")
			{	
				pictures[i].title = ftype[0];
			}
			} // end if (ftype[1])
		} // end for
		} // end if pictures[i].description
	}	
	
	// Print to screen
	//for (i = 0; i < pictures.length; i++) 
		//document.write(i+". Transition: "+pictures[i].trans+". Effect: "+pictures[i].effect+"<BR>");
				

} // end function setup_functions()



function set_opacity(object, level)
{
	// The "object" is usally picture, picture2
	// or photo or photo2
	// the level is 0 (transparent) to 100 (opaque)
	if(ie)
	{
        // first create a filter
		document.getElementById(object).style.filter="alpha(opacity="+level+")";
		// then set the opacity
		//document.getElementById(object).filters.alpha.opacity = level;
    }
    else  // mozilla or netscape
	{
		// Netscape has a bug where it flickers at 100% opacity
		// so we will change 100 to 99.999%
		if (level == 100)
			level = 99.999;
		// set the opacity for firefox and netscape
		document.getElementById(object).style.MozOpacity = level/100;
    	// set the opacity for safari prior to 1.2
    	document.getElementById(object).style.KHTMLOpacity = level/100;
		// set the opacity for safari 1.2 and higher and newer firefox
		document.getElementById(object).style.opacity = level/100;
	}

} // end function set_opacity


function crossfade(opacity) 
{

  	
  if (document.getElementById) 
  {

	if (opacity <= 100) 
	{
      set_opacity('picture2', opacity);
      set_opacity('picture', 100 - opacity);
      opacity += 10;
      window.setTimeout("crossfade("+opacity+")", trans_time);
    
	}
    else
    {
    	// I had to put half the seconds here and load the image
    	// early in order to prevent a flicker in IE when
    	// on a web server
		//center_image('picture2');
		//document.getElementById('picture').src = pictures[cur_pic].photo.src;
		setTimeout('changepic();', trans_time);

    }
  }
} // end function crossfade(objID, opacity)


function wipe(amount, from)
{
	pwidth = document.getElementById('picture2').width;
	pheight = document.getElementById('picture2').height;
	xstep = pwidth / trans_amount * amount;
	ystep = pheight / trans_amount * amount;
	 
	
	if (from == "left")
	{
		// clip by rect(top, right, bottom, left)
		document.getElementById('picture2').style.clip = 'rect(' +
		'0px, ' + 
		Math.round(0+xstep) + 'px, ' +
		pheight + 'px, ' + 
		'0px)';
	}
	else if (from == "right")
	{
		// clip by rect(top, right, bottom, left)
		document.getElementById('picture2').style.clip = 'rect(' +
		'0px, ' + 
		pwidth + 'px, ' +
		pheight + 'px, ' + 
		Math.round(pwidth-xstep) + 'px)';
	}
	else if (from == "top")
	{
		// clip by rect(top, right, bottom, left)
		document.getElementById('picture2').style.clip = 'rect(' +
		'0px, ' + 
		pwidth + 'px, ' +
		Math.round(ystep) + 'px, ' + 
		'0px)';
	}
	else if (from == "bottom")
	{
		// clip by rect(top, right, bottom, left)
		document.getElementById('picture2').style.clip = 'rect(' +
		Math.round(pheight-ystep) + 'px, ' + 
		pwidth + 'px, ' +
		pheight + 'px, ' + 
		'0px)';
	}
	else  // if center or none specified
	{
		xcenter = pwidth / 2; // so 640 / 2 = 320
		ycenter = pheight / 2; // so 480 / 2 = 240
		xstep = xcenter / trans_amount * amount;
		ystep = ycenter / trans_amount * amount;
		
		// clip by rect(top, right, bottom, left)
		document.getElementById('picture2').style.clip = 'rect(' +
		Math.round(ycenter-ystep) + 'px, ' + 
		Math.round(xcenter+xstep) + 'px, ' +
		Math.round(ycenter+ystep) + 'px, ' + 
		Math.round(xcenter-xstep) + 'px)';
	}
	
	if (amount == 1)
		set_opacity('picture2', 100);
	
	amount++;
	
	if (amount < trans_amount)
		window.setTimeout("wipe("+amount+", '"+from+"');", trans_time);
	else
    {
    	// reset clip
    	document.getElementById('picture2').style.clip = 'rect(auto, auto, auto, auto)';
		// I had to put half the seconds here and load the image
    	// early in order to prevent a flicker in IE when
    	// on a web server
		//document.getElementById('picture').src = pictures[cur_pic].photo.src;
    	setTimeout('changepic();', trans_time);

    }

} // end function wipe(amount, from)


function zoomin(amount, to) // this function is a photo effect
{
	
	if (amount == 0)
	{
		zwidth = document.getElementById('picture').width;
		zheight = document.getElementById('picture').height;
		//testing.innerHTML = zwidth+", "+zheight;
		// Calculate slope.
		// Steps will be 1 each unless width is bigger than height
		// or height is bigger than width.  If that is the case
		// then the step for the bigger dimension will be the slope (ex: zwidth / zheight)
		// the 2 and the *2 is to make each step twice as big
		zxstep = 3;
		zystep = 3;
		if (zwidth > zheight)
			zxstep = (zwidth / zheight)*3;
		if (zheight > zwidth)
			zystep = (zheight / zwidth)*3;
	} 
	
	zwidth = zwidth + zxstep;
	zheight = zheight + zystep;
	
	//document.getElementById('testing').innerHTML = "xstep="+zxstep+", ystep="+zystep;
	

	document.getElementById('picture').width = zwidth;
	document.getElementById('picture').height = zheight;
	
	
	
	zzleft = parseFloat(document.getElementById('picture').style.left);
	zztop = parseFloat(document.getElementById('picture').style.top);
	
	//document.getElementById('testing').innerHTML = "left="+zleft+", top="+ztop;
	
	// Untouched is upperleft
	
	if (to == "upperright" || to == "right" || to == "lowerright")
		document.getElementById('picture').style.left = zzleft - zxstep + 'px';
	
	if (to == "top" || to == "bottom" || to == "center")
		document.getElementById('picture').style.left = zzleft - zxstep/2 + 'px';
	
	if (to == "lowerleft" || to == "bottom" || to == "lowerright")	
		document.getElementById('picture').style.top = zztop - zystep + 'px';
			
	if (to == "left" || to == "center" || to == "right")
		document.getElementById('picture').style.top = zztop - zystep/2 + 'px';
		
	amount++;
	
	//if (amount == 30) alert('hi');
	
	if (amount <= effect_amount)
		ztimer = window.setTimeout("zoomin("+amount+", '"+to+"');", effect_time);
	else
	{
		// reset left and top of picture
			//document.getElementById('picture').style.left = 0 + 'px';
			//document.getElementById('picture').style.top = 0 + 'px';
	}
	
} // end function zoomin(amount, to)



function effectsetup()
{
	
	//testing.innerHTML = document.getElementById('picture2').width+", "+
	//	document.getElementById('picture2').height;
	//testing.innerHTML += ". "+pictures[cur_pic].photo.width+", "+pictures[cur_pic].photo.height;
	
	ftype = pictures[cur_pic].effect.replace(/['">);']/gi, ""); // ex: slide(left
	foption = ftype.split('(0, '); // ex: slide     /    left
	
	if (foption[1])
		to = foption[1];
	else
		to = "";
	
	
	if (foption[0] == "zoomout")
	{
		document.getElementById('picture2').width = parseFloat(document.getElementById('picture2').width*2);
		document.getElementById('picture2').height = parseFloat(document.getElementById('picture2').height*2);
	
		// center enlarged image
		cwidth = parseFloat(document.getElementById('picture2').width*2);
		cheight = parseFloat(document.getElementById('picture2').height*2);
		ztop = 0;
		zleft = 0;
		
		// no to is upperleft
		
		if (to == "upperright" || to == "right" || to == "lowerright")
			zleft = (cwidth/4) * -1; // to get negative of the positive number
		
		if (to == "top" || to == "bottom" || to == "center")
			zleft = (cwidth/8) * -1;	
		
		if (to == "lowerleft" || to == "bottom" || to == "lowerright")
			ztop = (cheight/4) * -1;
		
		if (to == "left" || to == "center" || to == "right")	
			ztop = (cheight/8) * -1; 
			
			
		cleft = cleft + zleft;
		ctop = ctop + ztop;

		
		document.getElementById('picture2').style.top = ctop + 'px';
		document.getElementById('picture2').style.left = cleft + 'px';
		
		ztop = ctop;
		zleft = cleft;
		
	} // end if zoomout
	
	if (foption[0] == "pan")
	{
		document.getElementById('picture2').width = parseFloat(document.getElementById('picture2').width*pan_zoom);
		document.getElementById('picture2').height = parseFloat(document.getElementById('picture2').height*pan_zoom);
	
		// center enlarged image
		cwidth = parseFloat(document.getElementById('picture2').width*pan_zoom);
		cheight = parseFloat(document.getElementById('picture2').height*pan_zoom);
		ztop = 0;
		zleft = 0;

		// no to is upperleft
		
		if (to == "upperright" || to == "right" || to == "lowerright")
			zleft = (cwidth/4) * -1; // to get negative of the positive number
		
		if (to == "top" || to == "bottom" || to == "center")
			zleft = (cwidth/8) * -1;	
		
		if (to == "lowerleft" || to == "bottom" || to == "lowerright")
			ztop = (cheight/4) * -1;
		
		if (to == "left" || to == "center" || to == "right")	
			ztop = (cheight/8) * -1; 
			
			
		cleft = cleft + zleft;
		ctop = ctop + ztop;
		
		document.getElementById('picture2').style.top = ctop + 'px';
		document.getElementById('picture2').style.left = cleft + 'px';
		
		ztop = ctop;
		zleft = cleft;
		
	} // end if pan
	

} // end function effectsetup()


function zoomout(amount, to) // this function is a photo effect
{
		
	if (amount == 0)
	{
		//zwidth = document.getElementById('picture').width;
		//zheight = document.getElementById('picture').height;
		//zwidth = pictures[cur_pic].photo.width*2;
		//zheight = pictures[cur_pic].photo.height*2;
		
		// center enlarged image
		zwidth = parseFloat(document.getElementById('picture').width*2);
		zheight = parseFloat(document.getElementById('picture').height*2);

		
		//zleft = (phwidth - zwidth) / 2;
		//document.getElementById('picture').style.left = zleft;
		
		/*
		//if (to == "upperright" || to == "right" || to == "lowerright")
			zleft = (zwidth/2) * -1; // to get negative of the positive number
		
		if (to == "top" || to == "bottom" || to == "center")
			zleft = (zwidth/4) * -1;	
		
		//if (to == "lowerleft" || to == "bottom" || to == "lowerright")
			ztop = (zheight/2) * -1;
		
		if (to == "left" || to == "center" || to == "right")	
			ztop = (zheight/4) * -1;
		*/
	
		document.getElementById('picture').style.top = ztop + 'px';
		document.getElementById('picture').style.left = zleft + 'px'; 
		//ztop = ctop;
		//zleft = cleft;
		
		//	testingbox.innerHTML = zwidth+', '+zheight+", "+to;
		//document.getElementById('testing').innerHTML = "width="+zwidth+", height="+zheight;
		// Calculate slope.
		// Steps will be 3 each unless width is bigger than height
		// or height is bigger than width.  If that is the case
		// then the step for the bigger dimension will be the slope (ex: zwidth / zheight)*3
		// the 3 and the *3 is to make each step twice as big
		zxstep = 3;
		zystep = 3;
		if (zwidth > zheight)
			zxstep = (zwidth / zheight)*3;
		if (zheight > zwidth)
			zystep = (zheight / zwidth)*3;	
		//document.getElementById('picture').width = zwidth*2;
		//document.getElementById('picture').height = zheight*2;	
	} 
	
	zwidth = zwidth - zxstep;
	zheight = zheight - zystep;
	

	document.getElementById('picture').width = zwidth;
	document.getElementById('picture').height = zheight;

	zzleft = parseFloat(document.getElementById('picture').style.left);
	zztop = parseFloat(document.getElementById('picture').style.top);
	//testingbox.innerHTML = zzleft+', '+zztop;
	
	// Untouched is upperleft
	
	if (to == "upperright" || to == "right" || to == "lowerright")
		document.getElementById('picture').style.left = zzleft + zxstep + 'px';
	
	if (to == "top" || to == "bottom" || to == "center")
		document.getElementById('picture').style.left = zzleft + zxstep/2 + 'px';
	
	if (to == "lowerleft" || to == "bottom" || to == "lowerright")	
		document.getElementById('picture').style.top = zztop + zystep + 'px';
			
	if (to == "left" || to == "center" || to == "right")
		document.getElementById('picture').style.top = zztop + zystep/2 + 'px';
		
	amount++;
	
	
	//if (amount == 30) alert('hi');
	
	if (amount <= effect_amount)
		ztimer = window.setTimeout("zoomout("+amount+", '"+to+"');", effect_time);
	else
	{
		
		// reset left and top of picture
		//document.getElementById('picture').style.left = 0;
		//document.getElementById('picture').style.top = 0;
		//center_image('picture');
	}
	
} // end function zoomout(amount, to)


function pan(amount, to) // This is a photo effect
{
	if (amount == 0)
	{
		//zwidth = document.getElementById('picture').width;
		//zheight = document.getElementById('picture').height;
		//zwidth = pictures[cur_pic].photo.width*2;
		//zheight = pictures[cur_pic].photo.height*2;
		
		// center enlarged image
		zwidth = parseFloat(document.getElementById('picture').width*pan_zoom);
		zheight = parseFloat(document.getElementById('picture').height*pan_zoom);
		document.getElementById('picture').width = zwidth;
		document.getElementById('picture').height = zheight;
		
		//zleft = (phwidth - zwidth) / 2;
		//document.getElementById('picture').style.left = zleft;
		
		/*
		//if (to == "upperright" || to == "right" || to == "lowerright")
			zleft = (zwidth/2) * -1; // to get negative of the positive number
		
		if (to == "top" || to == "bottom" || to == "center")
			zleft = (zwidth/4) * -1;	
		
		//if (to == "lowerleft" || to == "bottom" || to == "lowerright")
			ztop = (zheight/2) * -1;
		
		if (to == "left" || to == "center" || to == "right")	
			ztop = (zheight/4) * -1;
		*/
	
		document.getElementById('picture').style.top = ztop + 'px';
		document.getElementById('picture').style.left = zleft + 'px'; 
		//ztop = ctop;
		//zleft = cleft;
		
			//testingbox.innerHTML = zwidth+', '+zheight+", "+to;
		//document.getElementById('testing').innerHTML = "width="+zwidth+", height="+zheight;
		// Calculate slope.
		// Steps will be 3 each unless width is bigger than height
		// or height is bigger than width.  If that is the case
		// then the step for the bigger dimension will be the slope (ex: zwidth / zheight)*3
		// the 2 and the *2 is to make each step twice as big
		zxstep = 1;
		zystep = 1;
		if (zwidth > zheight)
			zxstep = (zwidth / zheight);
		if (zheight > zwidth)
			zystep = (zheight / zwidth);	
		//document.getElementById('picture').width = zwidth*2;
		//document.getElementById('picture').height = zheight*2;	
	} 
	
	/*zwidth = zwidth - zxstep;
	zheight = zheight - zystep;
	 */

	zzleft = parseFloat(document.getElementById('picture').style.left);
	zztop = parseFloat(document.getElementById('picture').style.top);
	//testingbox.innerHTML = zzleft+', '+zztop;
	
	// There is no center in pan
	
	if (to == "upperright" || to == "right" || to == "lowerright")
		document.getElementById('picture').style.left = zzleft + zxstep + 'px';
	
	if (to == "upperleft" || to == "left" || to == "lowerleft")
		document.getElementById('picture').style.left = zzleft - zxstep + 'px';
	
	if (to == "lowerleft" || to == "bottom" || to == "lowerright")	
		document.getElementById('picture').style.top = zztop + zystep + 'px';
			
	if (to == "upperleft" || to == "top" || to == "upperright")
		document.getElementById('picture').style.top = zztop - zystep + 'px';
		
	amount++;
	
	
	//if (amount == 30) alert('hi');
	
	if (amount <= effect_amount)
		ztimer = window.setTimeout("pan("+amount+", '"+to+"');", effect_time);

} // end function pan(amount, from)


function zoom(amount, from) // This function is a transition
{

	pcomplete = document.getElementById('picture2').complete;
	// i need the if statement below for mozilla firefox
	// browsers and netscape browsers.  They don't know
	// the width of the height of an image until it 
	// completes loading, so I can't zoom in at the
	// correct size.  (It sets size to 24x24).  So I use
	// the .complete element to see if the photo has loaded.
	if (!pcomplete) // if photo hasn't finished loading
	{
		// call this function again in 100ms
		// to see if the photo completes loading
		setTimeout('zoom(0,"'+from+'")', 100);
		return; // exit this function
	}
	
	if (amount == 0)
	{
		pwidth = document.getElementById('picture2').width;
		pheight = document.getElementById('picture2').height;
		//pwidth = pictures[cur_pic].photo.width;
		//pheight = pictures[cur_pic].photo.height;
		set_opacity('picture2', 100);
	}	
	
	//document.getElementById('testing').innerHTML = "width="+pwidth+", height="+pheight;
	
	xstep = pwidth / trans_amount * amount;
	ystep = pheight / trans_amount * amount;
 		

	document.getElementById('picture2').width = xstep;
	document.getElementById('picture2').height = ystep;

	// uppperleft is not moving the top or left at all
	
	if (from == "left" || from == "center" || from == "right")
		document.getElementById('picture2').style.top = (pheight+ctop) / 2 - (ystep-ctop) / 2 + 'px';
	
	if (from == "top" || from == "center" || from =="bottom")
		document.getElementById('picture2').style.left = (pwidth+cleft) / 2 - (xstep-cleft) / 2 + 'px';
	
	if (from == "lowerleft" || from == "lowerright" || from=="bottom")
		document.getElementById('picture2').style.top = (pheight+ctop) - ystep + 'px';
		
	if (from == "upperright" || from == "lowerright" || from=="right")
		document.getElementById('picture2').style.left = (pwidth+cleft) - xstep + 'px';
		
	amount++;
	
	if (amount <= trans_amount)
		window.setTimeout("zoom("+amount+", '"+from+"');", trans_time);
	else
    {

		// I had to put half the seconds here and load the image
    	// early in order to prevent a flicker in IE when
    	// on a web server
		//center_image('picture');
		//document.getElementById('picture').src = pictures[cur_pic].photo.src;
		setTimeout('changepic();', trans_time);

    }
	
} // end function zoom(amount, from)


function slide(amount, from)
{
	pwidth = document.getElementById('picture2').width;
	pheight = document.getElementById('picture2').height;
	

	if (from == null || from == 'undefined')
		from = 'left';
	
	//document.getElementById('testing').innerHTML = "Hi "+amount+", "+from;
	
	if (from == "left" || from == "lowerleft" || from == "upperleft")
	{
		xstep = Math.round((pwidth+cleft) / trans_amount * amount);
		xstep = pwidth - (pwidth*2) + xstep;
		//document.getElementById('testing').innerHTML = xstep;
		document.getElementById('picture2').style.left = xstep + 'px';
	}
	else if (from == "right" || from == "lowerright" || from == "upperright")
	{
		xstep = Math.round((pwidth-cleft) / trans_amount * amount);
		xstep = pwidth - xstep;
		//document.getElementById('testing').innerHTML = xstep;
		document.getElementById('picture2').style.left = xstep + 'px';
	}
	
	if (from == "top" || from == "upperleft" || from == "upperright")
	{
		ystep = Math.round((pheight+ctop) / trans_amount * amount);
		ystep = pheight - (pheight*2) + ystep;
		//document.getElementById('testing').innerHTML = ystep;
		document.getElementById('picture2').style.top = ystep + 'px';
	}
	else if (from == "bottom" || from == "lowerleft" || from == "lowerright")
	{
		ystep = Math.round((pheight-ctop) / trans_amount * amount);
		ystep = pheight - ystep;
		//document.getElementById('testing').innerHTML = ystep;
		document.getElementById('picture2').style.top = ystep + 'px';
	}
	
	if (amount == 0)
		set_opacity('picture2', 100);
	
	amount++;
	
	if (amount <= trans_amount)
		window.setTimeout("slide("+amount+", '"+from+"');", trans_time);
	else
    {
		// I had to put half the seconds here and load the image
    	// early in order to prevent a flicker in IE when
    	// on a web server
		//document.getElementById('picture').src = pictures[cur_pic].photo.src;
		setTimeout('changepic();', trans_time);

    }	

}  // end function slide(0, from)


function changepic()
{
	
	var pictures_length = pictures.length;
	
	if (testing_mode == 1)
	testingbox.innerHTML = cur_pic+". Transition: "+pictures[cur_pic].trans+". Effect: "+pictures[cur_pic].effect+
	". Time: "+pictures[cur_pic].time;
	". Width:"+document.getElementById('picture').width+", "+document.getElementById('picture').height;
	
	var milliseconds = pictures[cur_pic].time;

	if (display_caption == 1) // display Picasa Description for current photo
		document.getElementById('captionholder').innerHTML = pictures[cur_pic].caption;
		
	clearTimeout(ztimer);
	
		
	document.getElementById('picture').src = pictures[cur_pic].photo.src;
		document.getElementById('picture').width = pictures[cur_pic].photo.width;
			document.getElementById('picture').height = pictures[cur_pic].photo.height;
				document.getElementById('picture').style.left = 0 + 'px';
					document.getElementById('picture').style.top = 0 + 'px';

				
	center_image('picture');
	
	if (testing_mode == 1)
	testingbox.innerHTML += ". Width:"+document.getElementById('picture').width+
							", "+document.getElementById('picture').height;
	
	// make sure picture is 100% opaque
	setTimeout("set_opacity('picture',100);", opacity_time)  // this is what causes the flicker in IE

	// set opacity of picture2 to invisible
	setTimeout("set_opacity('picture2',0);", opacity_time)  // this is what causes the flicker in IE
	
	// Call effect function
	//testing.innerHTML = eval('(typeof('+pictures[cur_pic].effect+'));'); // != "undefined");');
	eval(pictures[cur_pic].effect);
	
	cur_pic++;  // advance to next picture		
	
	if (cur_pic == pictures_length)
	{
		cur_pic = 0;
		if (randomize_photos == 1)
			shuffle_photos();	
		//setup_functions(); // to randomize the transitions and effects again
	}
	// preload next image
	//  if (cur_pic < pictures_length)
	//	img.src = pictures[cur_pic].photo;
	//else
	//	img.src = pictures[0]; 
		
	// I had to put a settimeout here and load the image
    // later in order to prevent a flicker of the next photo 
    // in IE and sometimes firefox
	// put next photo in IMG with ID 'picture2' but it will be invisible
	
	
	
	setTimeout("document.getElementById('picture2').src = pictures["+cur_pic+"].photo.src;", flicker_time);
	setTimeout("document.getElementById('picture2').width = pictures["+cur_pic+"].photo.width;", flicker_time+20);
	setTimeout("document.getElementById('picture2').height = pictures["+cur_pic+"].photo.height;", flicker_time+20);
	setTimeout("document.getElementById('picture2').style.left = 0 + 'px';", flicker_time+20);
	setTimeout("document.getElementById('picture2').style.top = 0 + 'px';", flicker_time+20);
	
	setTimeout('center_image("picture2");', flicker_time+50);
	
	// testing for zoomout(0)
	setTimeout('effectsetup();', flicker_time+100);
				
	// call transition function in duration 'seconds'
	setTimeout(pictures[cur_pic].trans, milliseconds);  
	//window.setTimeout("zoom(0);", seconds);
	//window.setTimeout("zoom(0, 'upperright');", seconds);
	//window.setTimeout("wipe(0, 'bottom');", seconds);


	//window.setTimeout("slide(0, 'top');", seconds);

}  // end function changepic(direction)

	// first create a testing div to write messages
	if (testing_mode == 1)
	{
		document.write('<div id="testing">testing Mode</div>');
		testingbox = document.getElementById('testing');
	}
	/* both fore and back pictures have to be positioned absolute */
	/* inside a relative div */
	/* Both have classes, 'pictureholder' and 'picture' respectively */
	/* so you can create these classes and add borders or whatever */
	/* We create the relative IMG's in loadpics */
	
	// So first we create the relative DIV
	document.write('<div id="pictureholder" class="pictureholder"'+
		' style="width: '+phwidth+'px; height: '+phheight+'px; overflow: hidden; position: relative;">');
	// Close the pictureholder DIV
	document.write('</div>');
	// Make caption below pictureholder
	if (display_caption == 1)
	document.write('<div id="captionholder" class="captionholder"'+
		' style="width:'+phwidth+'px; height: '+caption_height+
		'px; border-width:'+caption_border+'px; border-style:solid;'+
		' margin-top: 5px; padding: 5px; text-align: center;"></div>');
	
// The line below starts the loadpics function
window.onload = loadpics; // get list of pics and put in pictures array