// INIT VARS
var background_container;
var image_container;
var title_container;
var preview_image;
var preview_image_title;
var preview_image_description;
var preview_original_width = 0;
var preview_original_height = 0;
var screen_dimensions;
var _docHeight;

// SETTING VARS
var photoviewer_use_page_counter;
var photoviewer_use_prev_next;
var photoviewer_use_close_button;
var photoviewer_use_array_name;

/**
 * FUNCTION: photoViewer
 *
 * Shows the image on the screen.
 * 
 */

function photoViewer(nr, image, title, description, array_name, use_page_counter, use_prev_next, use_close_button) {
	
	// Check if the setting vars are loaded
	if (typeof(photoviewer_settings) != "undefined") {
		
		// The page counter functionality isn't developed yet.
		if (use_page_counter) {
			
			alert("The page counter functionality isn't intergrated into this version of photoViewer.");
			
		}
		
		// Get the height of the document in the browser
		_docHeight = ((document.height !== undefined) ? document.height : document.body.offsetHeight)+30;
		
		// Put all sended information into predefined vars
		photoviewer_use_page_counter 	= use_page_counter;
		photoviewer_use_prev_next 		= use_prev_next;
		photoviewer_use_close_button	= use_close_button;
		photoviewer_use_array_name		= array_name;
		
		preview_image_nr				= nr;
		preview_image_title				= title;
		preview_image_description 		= description;
		
		// Create the needed containers
		photoViewerInit();
		
		// Create a new image
		preview_image = new Image();
		preview_image.id = "photoviewer_image";
		preview_image.onload = photoViewerShowImage; // This function will resize the image and append it into the image container
		
		// Start the loading of the image
		preview_image.src = image;
		
	} else {
		
		// Setting vars aren't loaded
		// Show an error message and redirect to the enlargement of the image
		
		alert("The settings file is missing.\nThe image will be opened in the browser.");
		
		document.location = image;
		
		return false;
		
	}
}

/**
 * FUNCTION: photoViewerInit
 *
 * Create all the containers that are needed for showing the image and append them to the body.
 * 
 */

function photoViewerInit() {
	
	// Get the viewable width and height inside the broswer
	screen_dimensions = photoViewerGetScreenDimensions();
	
	// Create a background overlay
	if (!document.getElementById('photoviewer_container')) {
		background_container = document.createElement("div");
		background_container.id = "photoviewer_container";
	} else {
		background_container = document.getElementById('photoviewer_container');
	}

	// Set the highest found height to the background overlay
	// _docHeight will be higher when there are scrollbars
	// screen_dimensions[1] will be higher when the content is shorter then the viable hight in the browser
	background_container.style.height = (_docHeight > screen_dimensions[1] ? _docHeight : screen_dimensions[1]) + 'px';
	
	// Check if the close button will be used
	if (!photoviewer_use_close_button) {
		
		// Make a click on the background overlay trigger the close all containers event
		background_container.className = 'photoviewer_cursor_pointer';
		background_container.onclick = photoViewerCloseAll;
		
	}
	
	// Create the image container
	image_container = document.createElement("div");
	image_container.id = "photoviewer_image_container";
	image_container.style.width = "0px";
	image_container.style.height = "0px";
	image_container.style.display = "none";
	
	// Check if the prev / next or close button functionality is enabled
	if (photoviewer_use_close_button || photoviewer_use_prev_next) {
		
		// One of the checked functionalities is enabled
		// Disable the onclick on the background overlay
		image_container.onclick = function () {
			
			return false;
			
		}
		
	} else {
		// Functionality is not enabled
		// Make a click on the image container trigger the close all containers event
		image_container.className = 'photoviewer_cursor_pointer';
		image_container.onclick = photoViewerCloseAll;
		
	}
	
	// Explorer 6
	// Disable all <select> fields
	if (/MSIE 6\.0\;/.test(navigator.userAgent)) {
		
		elementList = document.getElementsByTagName('select');
		
		for (i=0; i<elementList.length; i++) {
			
			elementList[i].style.display = "none";
			
		}
		
	}
	
	// Append the background overlay and the image container to the body.
	
	document.body.appendChild(background_container);
	document.body.appendChild(image_container);
	
	if (photoviewer_use_close_button) {
		close_button_container = document.createElement("div");
		close_button_container.id = "photoviewer_close_button_container";
		close_button_container.style.width = "70px";
		close_button_container.style.height = "32px";
		close_button_container.style.position = "absolute";
		close_button_container.style.cursor = "pointer";
		close_button_container.style.top = "10px";
		close_button_container.style.right = "10px";
		close_button_container.innerHTML = "<img src=\"images/photoviewer_close.gif\" />";
		close_button_container.onclick = photoViewerCloseAll;
		
		image_container.appendChild(close_button_container);
	}
	
	// Check if a title is given
	if (preview_image_title != '') {
		
		// The title is given
		// Create a title container and append it to the image container
		title_container = document.createElement("div");
		title_container.id = "photoviewer_image_title_container";
		title_container.innerHTML = preview_image_title;
		
		image_container.appendChild(title_container);
		
	}
	
	// Check if a description is given
	if (preview_image_description != '') {
		
		// The description is given
		// Create a description container and append it to the image container
		description_container = document.createElement("div");
		description_container.id = "photoviewer_image_description_container";
		description_container.innerHTML = preview_image_description;
		
		image_container.appendChild(description_container);
		
	}
	
	if (photoviewer_use_prev_next) {
		prev_button_container = document.createElement("div");
		prev_button_container.id = "photoviewer_prev_button_container";
		prev_button_container.style.width = "0px";
		prev_button_container.style.height = "0px";
		prev_button_container.style.position = "absolute";
		prev_button_container.style.cursor = "pointer";
		
		prev_button_container.style.left = '10px';
		prev_button_container.style.top = "50%";
		
		next_button_container = document.createElement("div");
		next_button_container.id = "photoviewer_next_button_container";
		next_button_container.style.width = "0px";
		next_button_container.style.height = "0px";
		next_button_container.style.position = "absolute";
		next_button_container.style.cursor = "pointer";
		
		next_button_container.style.right = '10px';
		next_button_container.style.top = "50%";
	}

}

/**
 * FUNCTION: photoViewerShowImage
 *
 * Resize the image and append it into the image container
 * 
 */

function photoViewerShowImage() {

	// Check if this is a new image 
	if (preview_original_width == 0 && preview_original_height == 0) {
		
		// New image
		// Set the real dimensions in predefined vars
		preview_original_width = preview_image.width;
		preview_original_height = preview_image.height;	
		
	}
	
	// Set the real image dimensions
	real_image_width = preview_original_width;
	real_image_height = preview_original_height;
	
	// Get the viewable width and height inside the broswer
	screen_dimensions = photoViewerGetScreenDimensions();
	
	// Define the max width and height the image container may use
	max_image_container_width = (screen_dimensions[0] - 120);
	max_image_container_height = (screen_dimensions[1] - 120);
	
	// Check if there is a title or a description given
	// If so reduce the image height to create space for the items
	height_reduction = 0;
	
	if (document.getElementById('photoviewer_image_title_container')) {
		
		height_reduction += photoviewer_settings_title_height;
		
	}
	
	if (document.getElementById('photoviewer_image_description_container')) {
		
		height_reduction += photoviewer_settings_description_height;
		
	}
	
	// Define what the effect of the height reduction will do to the width of the image / image container
	width_reduction = ((height_reduction*real_image_width)/real_image_height);
	
	// Define the max dimensions of the image
	// The reduction to the width and height are used here
	max_image_width = max_image_container_width - width_reduction;
	max_image_height = max_image_container_height - height_reduction;
	
	if (real_image_width > max_image_width || real_image_height > max_image_height) { // Resizeing is needed
		
		if ((real_image_width/max_image_width) > (real_image_height/max_image_height)) { // Width needs to be resized the most
			
			// Set width to the max allowed and define the new height
			new_image_width = max_image_width;
			new_image_height = (real_image_height/(real_image_width/max_image_width));
			
		} else { // Height needs to be resized the most
			
			// Set height to the max allowed and define the new width
			new_image_width = (real_image_width/(real_image_height/max_image_height));
			new_image_height = max_image_height;

		}
		
		// Check if the image height is less then the minimum allowed
		if (new_image_height < photoviewer_settings_minimal_preview_height) {
			
			// Set the height to the minimum allowed and define the new width
			new_image_width = (photoviewer_settings_minimal_preview_height/real_image_height)*real_image_width;
			new_image_height = photoviewer_settings_minimal_preview_height;
			
		}
		
		// Check if the image width is less then the minimum allowed
		if (new_image_width < photoviewer_settings_minimal_preview_width) {
			
			// Set the width to the minimum allowed and define the new height
			new_image_height = (photoviewer_settings_minimal_preview_width/real_image_width)*real_image_height;
			new_image_width = photoviewer_settings_minimal_preview_width;
			
		}
		
		// Assigne the new dimensions to the image	
		preview_image.style.width = new_image_width + "px";
		preview_image.style.height = new_image_height + "px";
		
		// Assign the new dimensions to the image container
		// Also assign new margins to the image container to center it
		image_container.style.margin = ( (0 - ((new_image_height+height_reduction)/2)) + document.documentElement.scrollTop) + "px 0px 0px -" + ( (new_image_width/2) - document.documentElement.scrollLeft) + "px";
		image_container.style.width = new_image_width + "px";
		image_container.style.height = (new_image_height + height_reduction) + "px";
				
		// Check if there is a description given
		if (document.getElementById('photoviewer_image_description_container')) {
			
			// Description is given
			// Give the description field the same width as the image
			description_container.style.width = new_image_width + "px";
			
		}
				
	} else { // No resizing needed
		
		// Set the real image dimensions as the new dimensions of the image
		preview_image.style.height = real_image_height + "px";
		preview_image.style.width = real_image_width + "px";
		
		// Set the real image dimensions as the new dimensions of the image container
		// Also assign new margins to the image container to center it
		// 
		image_container.style.width = real_image_width + "px";
		image_container.style.height = (real_image_height+height_reduction) + "px";
		
		image_container.style.margin = ( (0 - ((real_image_height+height_reduction)/2) ) + document.documentElement.scrollTop) + "px 0px 0px -" + ( (real_image_width/2) - document.documentElement.scrollLeft) + "px";
				
	}
	
	// Append the image to the image container
	image_container.appendChild(preview_image);
	
	if (preview_image_nr > 1) {
		prev_button_container.style.width = '53px';
		prev_button_container.style.height = '32px';
		prev_button_container.innerHTML = "<img src=\"images/photoviewer_prev.gif\" />";
		prev_button_container.onclick = function() {
			changePhoto((preview_image_nr-1),eval(photoviewer_use_array_name + "[" + (preview_image_nr-1) + "]"));
		}
		
		image_container.appendChild(prev_button_container);
	}
	
	if (eval(photoviewer_use_array_name + "[" + (preview_image_nr+1) + "]") != undefined) {
		next_button_container.style.width = '53px';
		next_button_container.style.height = '32px';
		next_button_container.innerHTML = "<img src=\"images/photoviewer_next.gif\" />";
		next_button_container.onclick = function () {
			changePhoto((preview_image_nr+1),eval(photoviewer_use_array_name + "[" + (preview_image_nr+1) + "]"));
		}
		
		image_container.appendChild(next_button_container);
	}
	
	
	
	image_container.style.display = 'block';
	
}

/**
 * FUNCTION: photoViewerGetScreenDimensions
 *
 * Get the Viewable dimensions of the window
 *
 * RETURN array(width,height)
 * 
 */

function photoViewerGetScreenDimensions() {
	
	// Get the viewable width and height of the window
	if (window.innerHeight) {
		
		return new Array(
						window.innerWidth,
						window.innerHeight
					);
					
	} else {
		
		return new Array(
						document.documentElement.clientWidth,
						document.documentElement.clientHeight
					);
					
	}
	
}


/**
 * FUNCTION: photoViewerCloseAll
 *
 * Destroy all containers that where used
 * 
 */

function photoViewerCloseAll () {

	// Explorer 6
	// Enable all <select> fields
	if (/MSIE 6\.0\;/.test(navigator.userAgent)) {
		
		elementList = document.getElementsByTagName('select');
		
		for (i=0; i<elementList.length; i++) {
			
			elementList[i].style.display = "inline";
			
		}
		
	}
	
	// Empty the image source
	preview_image.src = "";

	// Set the predefined dimensions vars back to default
	preview_original_width = 0;
	preview_original_height = 0;	
	
	// remove all containers that where defined
	document.body.removeChild(background_container);
	document.body.removeChild(image_container);
	
	if (document.getElementById('photoviewer_image_title_container')) {
		
		document.body.removeChild(title_container);
		
	}
	
	if (document.getElementById('photoviewer_image_description_container')) {
		
		document.body.removeChild(description_container);
		
	}
	
}

function changePhoto(nr,new_image) {
	
	preview_image.src = "";

	// Set the predefined dimensions vars back to default
	preview_original_width = 0;
	preview_original_height = 0;	
	
	// remove all containers that where defined
	document.body.removeChild(image_container);
	
	if (document.getElementById('photoviewer_image_title_container')) {
		
		document.body.removeChild(title_container);
		
	}
	
	if (document.getElementById('photoviewer_image_description_container')) {
		
		document.body.removeChild(description_container);
		
	}
	
	photoViewer(nr,new_image,'','',photoviewer_use_array_name,photoviewer_use_page_counter,photoviewer_use_prev_next,photoviewer_use_close_button);
}

window.onresize = function() {
	
	// Check if a image is currently being showed
	if (document.getElementById('photoviewer_image_container')) {
		
		screen_dimensions = photoViewerGetScreenDimensions();
		
		// Regenerate the background overlay
		background_container.style.height = (_docHeight > screen_dimensions[1] ? _docHeight : screen_dimensions[1]) + 'px';
		
		// Reload the image
		photoViewerShowImage()
		
		// Scroll to the top of the page
		document.documentElement.scrollTop = 0;
		
	}	
}

window.onscroll = function() {
	
	// Check if a image is currently being showed
	if (document.getElementById('photoviewer_image_container')) {
		
		// Set a new margin for the image container to keep it centered
		image_container.style.margin = ((0 - (preview_image.height/2)) + document.documentElement.scrollTop) + "px 0px 0px -" + ((preview_image.width/2)-document.documentElement.scrollLeft) + "px";
		
	}	
}