/**
*	These are the functions used by the potsites system:
*	-	showmailer(...) displays an email form in ifram '#emailblock'
*	-	hideIframe() hides '#emailblock' again
*	-	Geometry{..} provides a series of utility routines for size and postion
*	-	bigpic(url) displays the image src=url as a big overlay on the page
*	-	scaleimg() is a callback function that sizes the bigpic image once loaded
*	-	nobigpic() hides the bigpic image
*
*	-	jQuery functions are at the bottom of the file and include
*		functionality to make columns equal height and fill the page.
*
*/

function showmailer(ref,name,price)
{	// Displays a form to email a query about a product
	if (window.emb === undefined)
	{	//////prodquery = new Array();
		//////prodseq = -1;
		emb=document.getElementById('emailblock');
		ems = emb.src.split('?')[0];	//	This will be the existing page URL
	}
	//////prodquery[++prodseq] = '?ref='+ref+'&name='+name+'&price='+price;
	emb.src=ems + '?ref='+ref+'&name='+name+'&price='+price;
	emb.style.display='block';		// Was hidden before
}

function hide_emailblock()
{//	emb=document.getElementById('emailblock');
	emb.style.display='none';
}

function hide_dbbackup()
{	document.getElementById('backupframe').style.display='none';
}


// bigpic is the version of large version image display used for the live site
function bigpic(path)				//	'path' is the url for the picture
{	newimg = new Image();			//	Used so we can get width and height unsullied by
	newimg.src = path;				//	previous size information which hangs about 'bp'
	newimg.onload = scalepic;		//	WAIT for the image to load so we get its dims
}	//	end bigimg

function scalepic()
{	var bp = document.getElementById('picholder');	//	Container in which the image will be displayed
	bp.src = newimg.src;			//	Assign the image to the container
	//	Now we know the original size of the picture so can scale it in the browser
	//	We want the viewport dimensions, less a bit, as the max sizes
	//	Put them in variables to avoid repeated function calls
	var ww = $(window).width();
	var wh = $(window).height()
	var maxX = ww - 80;			//	Allow 80px for visual margin 40px each side
	var maxY = wh - 140;			//	Allow 105px for the header and 15px bottom gap
	var newX = newimg.width;		//	Start with the natural image sizes
	var newY = newimg.height;
	if (newX>maxX || newY>maxY)		//	Check if scaling is required
	{	var ratX = newX/maxX;
		var ratY = newY/maxY;
		var ratio = ratX>ratY ? ratX : ratY;	//	Choose the tighter constraint
		newX = newX/ratio;			//	Now we have the scaled sizes
		newY = newY/ratio;
	}
	bp.width = newX;				//	Assign the new dimensions to the image
	bp.height = newY;
	//	Position the display div after the page header
	bp.style.top = (105+$(document).scrollTop())+'px';
	//	Centre the display div horizontally in the viewport
	bp.style.left = ((ww-newX)/2+$(document).scrollLeft())+'px';
	bp.style.display = "block";		//	Make the display div visible
}

/*	nobigimg is the event handler that hides the large image overlay, called
*	by an onclick event
*/
function nobigpic()
{	var bp = document.getElementById('picholder');	//	Where the image is displayed
	bp.style.display = 'none';
}


/**
*	jQuery controlled routines ... eventually all functionality will be by jQuery
*	but some legacy code still remains in use above. We use jQuery and the jQuery
*	dimensions plugin.
*/

/**
*	jQuery routines run once the document is ready for manipulation but before
*	all images etc are necessarily loaded.
*/

$(document).ready(
	function ()
	{	//	ensure columns are equal height and fill the viewport
		var vh = $(window).height();
		var hh = $('#SITE_HEADER').outerHeight() + $('#SITE_FOOTER').outerHeight();
		var sh = $('#SIDE_PANEL').outerHeight();
		var mh = $('#MAIN_PANEL').outerHeight();
		//	Now calculate and apply the minimum height required for the two panels
		var minh = Math.max(vh-hh,Math.max(sh,mh));
		$('#SIDE_PANEL,#MAIN_PANEL').height(minh);
	}
)	//	end $(document).ready()