/**

 *	ImageFlowPlus 1.3

 *

 *    This provides an ImageFlow style gallery plus the following great features:

 *    - Lightbox pop-ups when linking to an image

 *    - Optional linking to an external url rather than an image

 *	- Supports multiple instances and avoid collisions with other scripts by using object-oriented code

 *

 *    Copyright Bev Stofko http://www.stofko.ca

 *

 *	Version 1.1 adds auto-rotation option (May 3, 2010)

 *	Version 1.2 adds startimg option, longdesc may be link or text description (May 13, 2010)

 *	Version 1.3 fixes bug when gallery has only one image

 *

 *    Resources ----------------------------------------------------

 *	[1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981, Michael L. Perry's Cover Flow

 *	[2] http://www.finnrudolph.de/, Finn Rudolph's imageflow, version 0.9 

 *	[3] http://reflection.corephp.co.uk/v2.php, Richard Daveys easyreflections in PHP

 *	[4] http://adomas.org/javascript-mouse-wheel, Adomas Paltanavicius JavaScript mouse wheel code

 *    --------------------------------------------------------------

 */



function imageflowplus(instance) {



/* Options */

this.defaults =

{

conf_autorotate:		'off',	// Sets auto-rotate option 'on' or 'off', default is 'off'

conf_autorotatepause: 	3000,		// Set the pause delay in the auto-rotation

conf_startimg:		1		// Starting focused image

};



/* Possible future options */

this.conf_reflection_p =	0.5;		// Sets the height of the reflection in % of the source image 

this.conf_focus =			4;		// Sets the numbers of images on each side of the focused one

this.conf_ifp_slider_width =	14;         // Sets the px width of the slider div

this.conf_ifp_images_cursor =	'pointer';  // Sets the cursor type for all images default is 'default'

this.conf_ifp_slider_cursor =	'default';  // Sets the slider cursor type: try "e-resize" default is 'default'



/* HTML div ids that we manipulate here */

this.ifp_imageflow2div =	'wpif2_imageflow_' + instance;

this.ifp_loadingdiv =		'wpif2_loading_' + instance;

this.ifp_imagesdiv =		'wpif2_images_' + instance;

this.ifp_captionsdiv =		'wpif2_captions_' + instance;

this.ifp_sliderdiv =		'wpif2_slider_' + instance;

this.ifp_scrollbardiv =		'wpif2_scrollbar_' + instance;

/* The overlay is shared among all instances */

this.ifp_overlaydiv =		'wpif2_overlay';

this.ifp_overlayclosediv =	'wpif2_overlayclose';

this.ifp_topboxdiv =		'wpif2_topbox';

this.ifp_topboximgdiv =		'wpif2_topboximg';

this.ifp_topboxcaptiondiv =	'wpif2_topboxcaption';

this.ifp_topboxprevdiv =	'wpif2_topboxprev';

this.ifp_topboxclosediv =	'wpif2_topboxclose';

this.ifp_topboxnextdiv =	'wpif2_topboxnext';



/* Define global variables */

this.image_id =		0;

this.new_image_id =	0;

this.current =		0;

this.target =		0;

this.mem_target =		0;

this.timer =		0;

this.array_images =	[];

this.new_slider_pos =	0;

this.dragging =		false;

this.dragobject =		null;

this.dragx =		0;

this.posx =			0;

this.new_posx =		0;

this.xstep =		150;

this.autorotate = 	'off';

this.rotatestarted = 	'false';



var thisObject = this;



/* initialize */

this.init = function(options)

{

	/* Evaluate options */

	var optionsArray = new Array('conf_autorotate', 'conf_autorotatepause', 'conf_startimg');

	var max = optionsArray.length;

	for (var i = 0; i < max; i++)

	{

		var name = optionsArray[i];

		this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : thisObject.defaults[name];

	}

};



/* show/hide element functions */

this.show = function(id)

{

	var element = document.getElementById(id);

	element.style.visibility = 'visible';

};

this.hide = function(id)

{

	var element = document.getElementById(id);

	element.style.visibility = 'hidden';

	element.style.display = 'none';

};



this.step = function() {

	if (thisObject.target < thisObject.current-1 || thisObject.target > thisObject.current+1) 

	{

		thisObject.moveTo(thisObject.current + (thisObject.target-thisObject.current)/3);

		setTimeout(thisObject.step, 50);

		thisObject.timer = 1;

	} else {

		thisObject.timer = 0;

	}

};



this.glideTo = function(new_image_id) {

	if (this.max == 1) return;

	var x = (-new_image_id * this.xstep);

	/* Animate gliding to new image */

	this.target = x;

	this.mem_target = x;

	if (this.timer == 0)

	{

		window.setTimeout(thisObject.step, 50);

		this.timer = 1;

	}

	

	/* Display new caption */

	this.image_id = new_image_id;

	var caption = this.img_div.childNodes.item(this.array_images[this.image_id]).getAttribute('alt').replace(/\+\+.*/,'');

	if (caption == '') { caption = '&nbsp;'; }

	this.caption_div.innerHTML = caption;



	/* Set scrollbar slider to new position */

	if (this.dragging === false)

	{

		this.new_slider_pos = (this.scrollbar_width * (-(x*100/((this.max-1)*this.xstep))) / 100) - this.new_posx;

		this.slider_div.style.marginLeft = (this.new_slider_pos - this.conf_ifp_slider_width) + 'px';

	}

};



this.rotate = function()

{

	/* Do nothing if autorotate has been turned off */

	if (thisObject.autorotate == "on") {

		if (thisObject.image_id >= thisObject.max-1) {

			thisObject.glideTo(0);

		} else {

			thisObject.glideTo(thisObject.image_id+1);

		}

	}



	if (thisObject.conf_autorotate == 'on') {

		/* Set up next auto-glide */

		window.setTimeout (thisObject.rotate, thisObject.conf_autorotatepause);

	}

}



this.moveTo = function(x)

{

	this.current = x;

	var zIndex = this.max;

	

	/* Main loop */

	for (var index = 0; index < this.max; index++)

	{

		var image = this.img_div.childNodes.item(this.array_images[index]);

		var current_image = index * -this.xstep;



		/* Don't display images that are not focused */

		if ((current_image+this.max_conf_focus) < this.mem_target || (current_image-this.max_conf_focus) > this.mem_target)

		{

			image.style.visibility = 'hidden';

			image.style.display = 'none';

		}

		else 

		{

			var z = Math.sqrt(10000 + x * x) + 100;

			var xs = x / z * this.size + this.size;



			/* Still hide images until they are processed, but set display style to block */

			image.style.display = 'block';

		

			/* Process new image height and image width */

			var new_img_h = Math.round((image.h / image.w * image.pc) / z * this.size);

			var new_img_w;

			if ( new_img_h <= this.max_height )

			{

				new_img_w = Math.round(image.pc / z * this.size);

			} else {

				new_img_h = this.max_height;

				new_img_w = Math.round(image.w * new_img_h / image.h);

			}



			var new_img_top = Math.round((this.images_width * 0.34 - new_img_h) + ((new_img_h / (this.conf_reflection_p + 1)) * this.conf_reflection_p));



			/* Set new image properties */

			image.style.left = Math.round(xs - (image.pc / 2) / z * this.size) + 'px';

			if(new_img_w && new_img_h)

			{ 

				image.style.height = new_img_h + 'px'; 

				image.style.width = new_img_w + 'px'; 

				image.style.top = new_img_top + 'px';

			}

			image.style.visibility = 'visible';



			/* Set image layer through zIndex */

			if ( x < 0 )

			{

				zIndex++;

			} else {

				zIndex = zIndex - 1;

			}

			

			/* Change zIndex and onclick function of the focused image */

			switch ( image.i == thisObject.image_id )

			{

				case false:

					image.onclick = function() { thisObject.autorotate = "off"; thisObject.glideTo(this.i); return false; };

					break;



				default:

					zIndex = zIndex + 1;

  					if (image.getAttribute("rel") && (image.getAttribute("rel") == 'wpif2_lightbox')) {

						image.setAttribute("title",image.getAttribute('alt').replace(/\+\+.*/,''));

						image.onclick = function () { thisObject.conf_autorotate = "off"; thisObject.showTop(this); return false; };

					} else {

						image.onclick = function() { window.open (this.url); return false; };

					}

					break;

			}

			image.style.zIndex = zIndex;

		}

		x += this.xstep;

	}

};



/* Main function */

this.refresh = function(onload)

{

	/* Cache document objects in global variables */

	this.imageflow2_div = document.getElementById(this.ifp_imageflow2div);

	this.img_div = document.getElementById(this.ifp_imagesdiv);

	this.scrollbar_div = document.getElementById(this.ifp_scrollbardiv);

	this.slider_div = document.getElementById(this.ifp_sliderdiv);

	this.caption_div = document.getElementById(this.ifp_captionsdiv);



	/* Cache global variables, that only change on refresh */

	this.images_width = this.img_div.offsetWidth;

	this.images_top = this.imageflow2_div.offsetTop;

	this.images_left = this.imageflow2_div.offsetLeft;



	this.max_conf_focus = this.conf_focus * this.xstep;

	this.size = this.images_width * 0.5;

	this.scrollbar_width = Math.round(this.images_width * 0.6);

	this.conf_ifp_slider_width = this.conf_ifp_slider_width * 0.5;

	this.max_height = Math.round(this.images_width * 0.51);



	/* Change imageflow2 div properties */

	this.imageflow2_div.onmouseover = function () { thisObject.autorotate = 'off'; return false; };

	this.imageflow2_div.onmouseout = function () { thisObject.autorotate = thisObject.conf_autorotate; return false; };

	this.imageflow2_div.style.height = this.max_height + 'px';



	/* Change images div properties */

	this.img_div.style.height = this.images_width * 0.338 + 'px';



	/* Change captions div properties */

	this.caption_div.style.width = this.images_width + 'px';

	this.caption_div.style.marginTop = this.images_width * 0.03 + 'px';



	/* Change scrollbar div properties */

	this.scrollbar_div.style.marginTop = this.images_width * 0.02 + 'px';

	this.scrollbar_div.style.marginLeft = this.images_width * 0.2 + 'px';

	this.scrollbar_div.style.width = this.scrollbar_width + 'px';

	

	/* Set slider attributes */

	this.slider_div.onmousedown = function () { thisObject.dragstart(this); return false; };

	this.slider_div.style.cursor = this.conf_ifp_slider_cursor;



	/* Cache EVERYTHING! */

	this.max = this.img_div.childNodes.length;

	var i = 0;

	for (var index = 0; index < this.max; index++)

	{ 

		var image = this.img_div.childNodes.item(index);

		if ((image.nodeType == 1) && (image.nodeName != "NOSCRIPT"))

		{

			this.array_images[i] = index;

			

			/* Set image onclick to glide to this image */

			image.onclick = function() { thisObject.conf_autorotate = "off"; thisObject.glideTo(this.i); return false; };

			image.x_pos = (-i * this.xstep);

			image.i = i;

			

			/* Add width and height as attributes ONLY once onload */

			if (onload === true)

			{

				image.w = image.width;

				image.h = image.height;

			}



			/* Check source image format. Get image height minus reflection height! */

			if ((image.w + 1) > (image.h / (this.conf_reflection_p + 1))) 

			{

				/* Landscape format */

				image.pc = 118;

			} else {

				/* Portrait and square format */

				image.pc = 100;

			}



			/* Set ondblclick event */

			image.url = image.getAttribute('longdesc');

			if (image.getAttribute("rel") && (image.getAttribute("rel") == 'wpif2_lightbox')) {

				image.setAttribute("title",image.getAttribute('alt').replace(/\+\+.*/,''));



				image.ondblclick = function () { thisObject.conf_autorotate = 'off'; thisObject.showTop(this);return false; }

			} else {

				image.ondblclick = function() { window.open (this.url); }

			}

			/* Set image cursor type */

			image.style.cursor = this.conf_ifp_images_cursor;



			i++;

		}

	}

	this.max = this.array_images.length;



	/* Display images in current order */

	if ((this.conf_startimg > 0) && (this.conf_startimg <= this.max))	{

		this.image_id = this.conf_startimg - 1;

		this.mem_target = (-this.image_id * this.xstep);

		this.current = this.mem_target;

	}

	this.moveTo(this.current);

	this.glideTo(this.image_id);



	/* If autorotate on, set up next glide */

	this.autorotate = this.conf_autorotate;

	if ((this.autorotate == "on") && (this.rotatestarted == "false")) {

		window.setTimeout (thisObject.rotate, thisObject.conf_autorotatepause);

		this.rotatestarted = 'true';

	}

};



this.loaded = function()

{

	if(document.getElementById(thisObject.ifp_imageflow2div))

	{

		if (document.getElementById(thisObject.ifp_overlaydiv) === null) {

			/* Append overlay divs to the page - the overlay is shared by all instances */

			var objBody = document.getElementsByTagName("body").item(0);



			/* -- overlay div */

			var objOverlay = document.createElement('div');

			objOverlay.setAttribute('id',thisObject.ifp_overlaydiv);

			objOverlay.onclick = function() { thisObject.closeTop(); return false; };

			objBody.appendChild(objOverlay);

			jQuery("#"+thisObject.ifp_overlaydiv).fadeTo("fast", .7);

	

			/* -- top box div */

			var objLightbox = document.createElement('div');

			objLightbox.setAttribute('id',thisObject.ifp_topboxdiv);

			objBody.appendChild(objLightbox);



			/* ---- image div */

			var objLightboxImage = document.createElement("img");

			//objLightboxImage.onclick = function() { thisObject.closeTop(); return false; };

			objLightboxImage.setAttribute('id',thisObject.ifp_topboximgdiv);

			objLightbox.appendChild(objLightboxImage);



			/* ---- prev link */

			var objPrev = document.createElement("a");

			objPrev.setAttribute('id',thisObject.ifp_topboxprevdiv);

			objPrev.setAttribute('href','#');

			objLightbox.appendChild(objPrev);



			/* ---- next link */

			var objNext = document.createElement("a");

			objNext.setAttribute('id',thisObject.ifp_topboxnextdiv);

			objNext.setAttribute('href','#');

			objLightbox.appendChild(objNext);



			/* ---- caption div */

			var objCaption = document.createElement("div");

			objCaption.setAttribute('id',thisObject.ifp_topboxcaptiondiv);

			objLightbox.appendChild(objCaption);



			/* ---- close link */

			var objClose = document.createElement("a");

			objClose.setAttribute('id',thisObject.ifp_topboxclosediv);

			objClose.setAttribute('href','#');

			objLightbox.appendChild(objClose);



			objClose.onclick = function () { thisObject.closeTop(); return false; };

			objClose.innerHTML = "Close";

		}



		/* hide loading bar, show content and initialize mouse event listening after loading */

		thisObject.hide(thisObject.ifp_loadingdiv);

		thisObject.refresh(true);

		thisObject.show(thisObject.ifp_imagesdiv);

		thisObject.show(thisObject.ifp_scrollbardiv);

		thisObject.initMouseWheel();

		thisObject.initMouseDrag();

	}

};



this.unloaded = function()

{

	/* Fixes the back button issue */

	document = null;

};



/* Handle the wheel angle change (delta) of the mouse wheel */

this.handle = function(delta)

{

	var change = false;

	if (delta > 0)

	{

		if(this.image_id >= 1)

		{

			this.target = this.target + this.xstep;

			this.new_image_id = this.image_id - 1;

			change = true;

		}

	} else {

		if(this.image_id < (this.max-1))

		{

			this.target = this.target - this.xstep;

			this.new_image_id = this.image_id + 1;

			change = true;

		}

	}



	/* Glide to next (mouse wheel down) / previous (mouse wheel up) image */

	if (change === true)

	{

		this.glideTo(this.new_image_id);

		this.autorotate = "off";

	}

};



/* Event handler for mouse wheel event */

this.wheel = function(event)

{

	var delta = 0;

	if (!event) event = window.event;

	if (event.wheelDelta)

	{

		delta = event.wheelDelta / 120;

	}

	else if (event.detail)

	{

		delta = -event.detail / 3;

	}

	if (delta) thisObject.handle(delta);

	if (event.preventDefault) event.preventDefault();

	event.returnValue = false;

};



/* Initialize mouse wheel event listener */

this.initMouseWheel = function()

{

	if(window.addEventListener) {

		this.imageflow2_div.addEventListener('DOMMouseScroll', this.wheel, false);

	}

	this.imageflow2_div.onmousewheel = this.wheel;

};



/* This function is called to drag an object (= slider div) */

this.dragstart = function(element)

{

	thisObject.dragobject = element;

	thisObject.dragx = thisObject.posx - thisObject.dragobject.offsetLeft + thisObject.new_slider_pos;



	thisObject.autorotate = "off";

};



/* This function is called to stop dragging an object */

this.dragstop = function()

{

	thisObject.dragobject = null;

	thisObject.dragging = false;

};



/* This function is called on mouse movement and moves an object (= slider div) on user action */

this.drag = function(e)

{

	thisObject.posx = document.all ? window.event.clientX : e.pageX;

	if(thisObject.dragobject != null)

	{

		thisObject.dragging = true;

		thisObject.new_posx = (thisObject.posx - thisObject.dragx) + thisObject.conf_ifp_slider_width;



		/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */

		if(thisObject.new_posx < ( - thisObject.new_slider_pos)) thisObject.new_posx = - thisObject.new_slider_pos;

		if(thisObject.new_posx > (thisObject.scrollbar_width - thisObject.new_slider_pos)) thisObject.new_posx = thisObject.scrollbar_width - thisObject.new_slider_pos;

		

		var slider_pos = (thisObject.new_posx + thisObject.new_slider_pos);

		var step_width = slider_pos / ((thisObject.scrollbar_width) / (thisObject.max-1));

		var image_number = Math.round(step_width);

		var new_target = (image_number) * -thisObject.xstep;

		var new_image_id = image_number;



		thisObject.dragobject.style.left = thisObject.new_posx + 'px';

		thisObject.glideTo(new_image_id);

	}

};



/* Initialize mouse event listener */

this.initMouseDrag = function()

{

	thisObject.imageflow2_div.onmousemove = thisObject.drag;

	thisObject.imageflow2_div.onmouseup = thisObject.dragstop;



	/* Avoid text and image selection while this.dragging  */

	document.onselectstart = function () 

	{

		if (thisObject.dragging === true)

		{

			return false;

		}

		else

		{

			return true;

		}

	}

};



this.getKeyCode = function(event)

{

	event = event || window.event;

	return event.keyCode;

};





this.getPageScroll = function(){

	var xScroll, yScroll;

	if (self.pageYOffset) {

		yScroll = self.pageYOffset;

		xScroll = self.pageXOffset;

	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict

		yScroll = document.documentElement.scrollTop;

		xScroll = document.documentElement.scrollLeft;

	} else if (document.body) {// all other Explorers

		yScroll = document.body.scrollTop;

		xScroll = document.body.scrollLeft;	

	}

	arrayPageScroll = new Array(xScroll,yScroll) 

	return arrayPageScroll;

};



this.getPageSize = function(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {	

		xScroll = window.innerWidth + window.scrollMaxX;

		yScroll = window.innerHeight + window.scrollMaxY;

	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

		xScroll = document.body.scrollWidth;

		yScroll = document.body.scrollHeight;

	} else if (document.documentElement.scrollHeight > document.body.offsetHeight){ // IE7, 6 standards compliant mode

		xScroll = document.documentElement.scrollWidth;

		yScroll = document.documentElement.scrollHeight;

	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

		xScroll = document.body.offsetWidth;

		yScroll = document.body.offsetHeight;

	}

	var windowWidth, windowHeight;

	if (self.innerHeight) {	// all except Explorer

		if(document.documentElement.clientWidth){

			windowWidth = document.documentElement.clientWidth; 

		} else {

			windowWidth = self.innerWidth;

		}

		windowHeight = self.innerHeight;

	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

		windowWidth = document.documentElement.clientWidth;

		windowHeight = document.documentElement.clientHeight;

	} else if (document.body) { // other Explorers

		windowWidth = document.body.clientWidth;

		windowHeight = document.body.clientHeight;

	}

	// for small pages with total height less then height of the viewport

	if(yScroll < windowHeight){

		pageHeight = windowHeight;

	} else { 

		pageHeight = yScroll;

	}

	// for small pages with total width less then width of the viewport

	if(xScroll < windowWidth){	

		pageWidth = xScroll;		

	} else {

		pageWidth = windowWidth;

	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

	return arrayPageSize;

};



this.showFlash = function(){

	var flashObjects = document.getElementsByTagName("object");

	for (i = 0; i < flashObjects.length; i++) {

		flashObjects[i].style.visibility = "visible";

	}

	var flashEmbeds = document.getElementsByTagName("embed");

	for (i = 0; i < flashEmbeds.length; i++) {

		flashEmbeds[i].style.visibility = "visible";

	}

};



this.hideFlash = function(){

	var flashObjects = document.getElementsByTagName("object");

	for (i = 0; i < flashObjects.length; i++) {

		flashObjects[i].style.visibility = "hidden";

	}

	var flashEmbeds = document.getElementsByTagName("embed");

	for (i = 0; i < flashEmbeds.length; i++) {

		flashEmbeds[i].style.visibility = "hidden";

	}

};



this.showTop = function(image)

{

	var topbox_div = document.getElementById(this.ifp_topboxdiv);

	var overlay_div = document.getElementById(this.ifp_overlaydiv);

	var topboximg_div = document.getElementById(this.ifp_topboximgdiv);



	// this.hide flash objects

	this.hideFlash();



	// this.show the background overlay ...

	var arrayPageSize = this.getPageSize();

	overlay_div.style.width = arrayPageSize[0] + "px";

	overlay_div.style.height = arrayPageSize[1] + "px";

	overlay_div.style.display = 'none';

	overlay_div.style.visibility = 'visible';

	jQuery("#"+this.ifp_overlaydiv).show();



	// Get the top box data set up first

	topboximg_div.src = image.url;

	document.getElementById(this.ifp_topboxcaptiondiv).innerHTML = image.getAttribute('title');



	// get the image actual size by preloading into 't'

	var t = new Image();

      t.onload = (function(){	thisObject.showImg(image, t.width, t.height); });

	t.src = image.url;



	// Now wait until 't' is loaded

};





this.showImg = function(image, img_width, img_height) 

{	

	// Do nothing if the overlay was closed in the meantime

	if (document.getElementById(this.ifp_overlaydiv).style.visibility == 'hidden') return;



	var topbox_div = document.getElementById(this.ifp_topboxdiv);

	var overlay_div = document.getElementById(this.ifp_overlaydiv);

	var topboximg_div = document.getElementById(this.ifp_topboximgdiv);

	var prev_div = document.getElementById(this.ifp_topboxprevdiv);

	var next_div = document.getElementById(this.ifp_topboxnextdiv);

	var caption_div = document.getElementById(this.ifp_topboxcaptiondiv);



	// The image should be preloaded at this point

	topboximg_div.src = image.url;



	// Find previous image that doesn't link to an url

	prev_div.style.visibility = 'hidden';

	if (image.i > 0) {

		for (index = image.i-1; index >= 0; index--) {

			prev_image = this.img_div.childNodes.item(this.array_images[index]);

			if (prev_image.getAttribute("rel") && (prev_image.getAttribute("rel") == 'wpif2_lightbox')) {

				// Found one - preload and set the previous link

				var p = new Image();

				p.src = prev_image.url;

				prev_div.onclick = (function(){ thisObject.showImg(prev_image, p.width, p.height); return false;});

				prev_div.style.visibility = 'visible';

				break;

			}

		} 

	}



	// Find next image that doesn't link to an url

	next_div.style.visibility = 'hidden';

	if (image.i < this.max-1) {

		for (index = image.i+1; index < this.max; index++) {

			next_image = this.img_div.childNodes.item(this.array_images[index]);

			if (next_image.getAttribute("rel") && (next_image.getAttribute("rel") == 'wpif2_lightbox')) {

				// Found one - preload and set the next link

				var n = new Image();

				n.src = next_image.url;

				next_div.onclick = (function(){ thisObject.showImg(next_image, n.width, n.height); return false;});

				next_div.style.visibility = 'visible';

				break;

			} 

		}

	}



	// Size the box to fit the image plus estimate caption height plus some space

	var boxWidth = img_width;

	var boxHeight = img_height + 30;



	topboximg_div.width = boxWidth;	



	// Add description and include its height in the calculations

	var description = image.getAttribute('alt').replace(/.*\+\+/,'');

	if (description != '') { description = '<p>' + description + '</p>'; }

	caption_div.innerHTML = image.getAttribute('title') + description;

	if (description != '') {

		jQuery('#'+this.ifp_topboxcaptiondiv).width(boxWidth);	// do this now to estimate the description height

		boxHeight += jQuery('#'+this.ifp_topboxcaptiondiv).height();

	}



	// scale the box if the image is larger than the screen

	var arrayPageSize = this.getPageSize();

	var screenWidth = arrayPageSize[2];

	var screenHeight = arrayPageSize[3];



	var arrayPageScroll = this.getPageScroll();



	if (boxWidth > screenWidth) {

		boxHeight = Math.floor(boxHeight * (screenWidth-100) / boxWidth);

		boxWidth = screenWidth - 100;

		topboximg_div.width = boxWidth;

	}

	if (boxHeight > screenHeight) {

		boxWidth = Math.floor(boxWidth * (screenHeight-100) / boxHeight);

		boxHeight = screenHeight - 100;

		topboximg_div.width = boxWidth;

	}

	jQuery('#'+this.ifp_topboxcaptiondiv).width(boxWidth);



	var xPos = Math.floor((screenWidth - boxWidth) * 0.5) + arrayPageScroll[0];

	var yPos = Math.floor((screenHeight - boxHeight) * 0.5) + arrayPageScroll[1];



	topbox_div.style.left = xPos + 'px';

	topbox_div.style.top = yPos + 'px';

	topbox_div.style.width = boxWidth + 'px';



	prev_div.style.height = boxHeight + 'px';

	next_div.style.height = boxHeight + 'px';





	// Finally show the topbox...

	topbox_div.style.display = 'none';

	topbox_div.style.visibility = 'visible';

	jQuery("#"+this.ifp_topboxdiv).fadeIn("slow");



};



this.closeTop = function()

{

	//hide the overlay and topbox...

	document.getElementById(this.ifp_overlaydiv).style.visibility='hidden';

	document.getElementById(this.ifp_topboxdiv).style.visibility='hidden';

	document.getElementById(this.ifp_topboxnextdiv).style.visibility='hidden';

	document.getElementById(this.ifp_topboxprevdiv).style.visibility='hidden';



	// this.show hidden objects

	this.showFlash();

};



// Setup

	if(document.getElementById(thisObject.ifp_imageflow2div) === null) { return; }



	/* show loading bar while page is loading */

	thisObject.show(thisObject.ifp_loadingdiv);



	if(typeof window.onunload === "function")

	  {

		var oldonunload = window.onunload;

		window.onunload = function()

		{

			thisObject.unloaded();

			oldonunload();

		};

	} else { 

		window.onunload = this.unloaded; 

	}



	if(typeof window.onload === "function")

	  {

		var oldonload = window.onload;

		window.onload = function()

		{

			thisObject.loaded();

			oldonload();

		};

	} else {

		window.onload = thisObject.loaded;

	}



	/* refresh on window resize */

	window.onresize = function()

	{

		if(document.getElementById(thisObject.ifp_imageflow2div)) { thisObject.refresh(false); }

	};



	document.onkeydown = function(event)

	{

		var charCode  = thisObject.getKeyCode(event);

		switch (charCode)

		{

			/* Right arrow key */

			case 39:

				thisObject.handle(-1);

				break;

		

			/* Left arrow key */

			case 37:

				thisObject.handle(1);

				break;

		}

	};



}