/************************************************************************************************************
 *	
 *	Type: 		Javascript
 *	Author:		Martin Hedvall
 *	Last modified: 	2009-03-01
 *
 *	Description: 	Displays images with a size that depend on available screen width/height. Prevents scrolling when
 *				an image is displayed.
 *
 *************************************************************************************************************
 *
*/

function display_image(picture_url, picture_text, picture_width, picture_height) {

	//Settings
	var MinBorderWidth=20;
	var BorderWidth = 4;
	var ImagePaddingHorizontal = 20;
	var ImagePaddingVertical = 40;
	
	/* ***** Do not edit the code below ********* */
	
	//Detect available browser dimensions
	var AvailableWidth = 0;
	var AvailableHeight = 0;
	//IE
	if(!window.innerWidth)
	{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
			AvailableWidth = document.documentElement.clientWidth;
			AvailableHeight = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
			AvailableWidth = document.body.clientWidth;
			AvailableHeight = document.body.clientHeight;
		}
	}
	else
	{
		//w3c
		AvailableWidth = window.innerWidth;
		AvailableHeight = window.innerHeight;
	}
	
	if( window.innerHeight && window.scrollMaxY ) // Firefox 
	{
		pageHeight = window.innerHeight + window.scrollMaxY;
	}
	else if( document.body.scrollHeight > document.body.offsetHeight ) // all but Explorer Mac
	{
		pageHeight = document.body.scrollHeight;
	}
	else // works in Explorer 6 Strict, Mozilla (not FF) and Safari
	{
		pageHeight = document.body.offsetHeight + document.body.offsetTop;
	}
	
	//View the half transparent background
	var DisplayDiv = document.getElementById('blank_div');
	DisplayDiv.style.display = "inline";
	//Set backdiv height to the maximum of pageHeight and windowHeight
	if(pageHeight > AvailableHeight) {
		DisplayDiv.style.height = pageHeight + "px";
	}
	else {
		DisplayDiv.style.height = AvailableHeight + "px";
	}
	/*
	if (typeof document.body.style.maxHeight != "undefined") {
		// IE 7, mozilla, safari, opera 9 - position fixed ok
		DisplayDiv.style.position = "fixed";
	}
	*/
	DisplayDiv.innerHTML = "<div id=\"large_image\"></div>";
	
	var MaxPictureWidth = AvailableWidth - ImagePaddingHorizontal - 4*MinBorderWidth;
	var MaxPictureHeight = AvailableHeight - ImagePaddingVertical - 4*MinBorderWidth;
	
	var PictureWidth = picture_width;
	var PictureHeight = picture_height;
	var PictureRatio = picture_width/picture_height;
	
	//Rescale if screensize is smaller than the picture
	if((MaxPictureWidth > picture_width) && (MaxPictureHeight > picture_height)) {
		//Window big enough - keep actual picture size
	}
	else if(MaxPictureHeight > picture_height) {
		//Width not enough - rescale picture
		PictureWidth = MaxPictureWidth;
		PictureHeight = Math.round(PictureWidth/PictureRatio);
	}
	else if(MaxPictureWidth > picture_width) {
		//Height not enough - rescale picture
		PictureHeight = MaxPictureHeight;
		PictureWidth = Math.round(PictureHeight*PictureRatio);
	}
	else {
		//decide from both width and height
		if(MaxPictureWidth < MaxPictureHeight*PictureRatio) {
			//decide size from Width
			PictureWidth = MaxPictureWidth;
			PictureHeight = Math.round(PictureWidth/PictureRatio);
		}
		else {
			//decide size from Height
			PictureHeight = MaxPictureHeight;
			PictureWidth = Math.round(PictureHeight*PictureRatio);
		}
	}
	
		
	
	//Create a div inside for the image
	var DisplayDiv2 = document.getElementById('large_image');
	DisplayDiv2.style.display = "inline";
	
	var margLeft = Math.round((AvailableWidth-PictureWidth-ImagePaddingHorizontal-2*BorderWidth)/2)-MinBorderWidth;
	var margTop = Math.round((AvailableHeight-PictureHeight-ImagePaddingVertical-2*BorderWidth)/2)-MinBorderWidth;
	
	DisplayDiv2.style.marginLeft =  getScrollX() + margLeft + "px";
	DisplayDiv2.style.marginTop =  getScrollY() + margTop + "px";
	
	var DivWidth = PictureWidth+ImagePaddingHorizontal;
	var DivHeight = PictureHeight+ImagePaddingVertical;
	DisplayDiv2.style.width = DivWidth+"px";
	DisplayDiv2.style.height = DivHeight+"px";
	
	//View image and text
	var display_block = "<img src=\""+picture_url+"\" width=\""+PictureWidth+"px\" height=\""+PictureHeight+"px\" onclick=\"hide_image()\" /><br /><br />"+picture_text;
	document.getElementById('large_image').innerHTML = display_block;
	
	//Set position fixed, and change background if not IE6-
	if (typeof document.body.style.maxHeight != "undefined") {
		// IE 7, mozilla, safari, opera 9 - switch background to semitransparent
		DisplayDiv.style.backgroundColor = "transparent";
		DisplayDiv.style.backgroundImage = "url('/images/layout/login/transparent.png')";
		DisplayDiv.style.backgroundRepeat = "repeat";
		DisplayDiv2.style.position = "fixed";
		DisplayDiv2.style.top = margTop + "px";
		DisplayDiv2.style.left = margLeft + "px";
		DisplayDiv2.style.marginTop = "0px";
		DisplayDiv2.style.marginLeft = "0px";
	}
}
function hide_image() {
	var DisplayDiv = document.getElementById('blank_div');
	var DisplayDiv2 = document.getElementById('large_image');
	DisplayDiv.style.display = "none";
	DisplayDiv2.style.display = "none";
}
function getScrollX(){
	if(!window.pageXOffset) {
		//IE
		if(document.body.scrollLeft) {
			return document.body.scrollLeft;
		}
		else {
			return document.documentElement.scrollLeft;
		}
	}
	else {
		//w3c
		return window.pageXOffset;
	}
}
function getScrollY(){
	if(!window.pageYOffset) {
		//IE
		if(document.body.scrollTop) {
			return document.body.scrollTop;
		}
		else {
			return document.documentElement.scrollTop;
		}
	}
	else {
		//w3c
		return window.pageYOffset;
	}
}