var folder = 'wp/wp-content/uploads/slide/'; 
var phwidth = 640; 
var phheight = 480; 
var photosize = 640; 
var seconds = 4; 
var randomize_photos = 0; 
var display_caption = 0; 
var caption_height = 0; 
var caption_border = 0; 
var pan_zoom = 1.3;  
var trans = "crossfade"; 
var effect = "none"; 
var cur_pic = 0; 
var trans_amount = 20; 
var effect_amount = 100; 
var testing_mode = 0; 
var flicker_time = 500; 
var opacity_time = 100; 
var trans_time = 90; 
var effect_time = 90; 


/* Create an invisible textarea in your HTML document
like the one below with
the filename of each picture on a separate line:

<textarea id="piclist" style="visibility:hidden"> 
image1.jpg
image2.jpg
image3.gif
image4.png
</textarea>

*/

/*	You may also specify transitions, effects, and time in the TEXTAREA.
 	If you specify these then they override the default settings
	above.  The format is similar to a combination of HTML and Javascript.
	Just add the code after each image filename and that photo will
	be effected by the code. Separate the filename and the code with ##
	Examples:
<textarea id="piclist" style="visibility:hidden"> 
image1.jpg##<time=5> <trans=slide(right)> <effect=zoomin(center)> This is a caption.
image2.jpg##This is a photo of the <b>beach</b> nearby
image3.gif##Beautiful Sunset <time=6> <trans=crossfade> <effect=zoomout(upperleft)>
image4.png
</textarea>
	
	time is the amount of seconds to display a photo.  Anything else you
	have in the description including HTML markups will display in the
	caption box if you have captions turned on above.
*/

/* 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();
	var pic_list = document.getElementById('piclist').innerHTML;
	var pic_list_length = pic_list.length;
	var temp = new Array();
	var temp2 = 'hi';
	var file; 
	
	// Remove all CRs (13) from IE's textarea
	pic_list = pic_list.replace(/\r/gi, "");
	// first remove first carriage return if there is one
	// IE = CRLF (1310)
	// Firefox + Netscape = LF (10)
	// Safari = LFLF (1010)
	// So the first if statement is for IE and Safari
	// to check for LF on the second character
	if (pic_list.charAt(1) == '\n')
		pic_list = pic_list.substr(1);
	if (pic_list.charAt(0) == '\n')
		pic_list = pic_list.substr(1);
	// now remove carriage return from the end of string if there is one
	// first if needed for Safari
	// second if needed for netscape and firefox
	if (pic_list.charAt(pic_list_length-3) == '\n')
		pic_list = pic_list.substr(0, pic_list_length-3);
	if (pic_list.charAt(pic_list_length-2) == '\n')
		pic_list = pic_list.substr(0, pic_list_length-2);
	if (pic_list.charAt(pic_list_length-1) == '\n')
		pic_list = pic_list.substr(0, pic_list_length-1);
	
	// Note: IE will only split a TEXTAREA by \n. It will not
	// work with a DIV
	pic_array = pic_list.split('\n');
	
	for (i = 0; i < pic_array.length; i++)
	{
		temp = pic_array[i].split('##');
		file = folder+temp[0]; // folder and filename of photo
		if (typeof(temp[1]) != 'string') // sometimes there is no description
			temp[1] = '';

		temp[1] = toHTML(temp[1]); // convert textarea info to HTML
		temp2 = temp[1];  // temp2 = description after ##
		
		//temp2 = temp2.replace(/&lt;/
		//temp2 = temp2.replace(/effect/gi, "");
		temp2 = temp2.replace(/<trans[^>]*>/gi, "");
		temp2 = temp2.replace(/<effect[^>]*>/gi, "");
		temp2 = temp2.replace(/<title[^>]*>/gi, "");
		temp2 = temp2.replace(/<time[^>]*>/gi, "");
  		
		pictures[i] = {	photo: new Image,
		  				description: temp[1],
						caption: temp2,
						trans: '',
						effect: '',
						time: '',
						title: ''};
						
  	 	pictures[i].photo.src = file;

		//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+"'>;");
	}
	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 width of the photo
	// if it is bigger than photosize
	if (cwidth > photosize)
	{
		//alert(cwidth+", "+cheight);
		perc = cwidth / photosize; // 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