// 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 photopreviewer_use_page_counter;
var photopreviewer_use_prev_next;
var photopreviewer_use_close_button;
var photopreviewer_use_array_name;

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

function photoPreviewer(image, title, description, array_name, use_page_counter, use_prev_next, use_close_button) {
	
	// Check if the setting vars are loaded
	if (typeof(photopreviewer_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 photoPreviewer.");
			
		}
		
		// The prev / next functionality isn't developed yet.
		if (use_prev_next) {
			
			alert("The prev/next functionality isn't intergrated into this version of photoPreviewer.");
			
		}
		
		// The close button functionality isn't developed yet.
		if (use_close_button) {
			
			alert("The close_button functionality isn't intergrated into this version of photoPreviewer.");
			
		}
		
		// 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
		photopreviewer_use_page_counter 	= use_page_counter;
		photopreviewer_use_prev_next 		= use_prev_next;
		photopreviewer_use_close_button		= use_close_button;
		photopreviewer_use_array_name		= array_name;
		
		preview_image_title					= title;
		preview_image_description 			= description;
		
		// Create the needed containers
		photoPreviewerInit();
		
		// Create a new image
		preview_image = new Image();
		preview_image.id = "photopreviewer_image";
		preview_image.onload = photoPreviewerShowImage; // 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: photoPreviewerInit
 *
 * Create all the containers that are needed for showing the image and append them to the body.
 * 
 */

function photoPreviewerInit() {
	
	// Get the viewable width and height inside the broswer
	screen_dimensions = photoPreviewerGetScreenDimensions();
	
	// Create a background overlay
	background_container = document.createElement("div");
	background_container.id = "photopreviewer_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 (!photopreviewer_use_close_button) {
		
		// Make a click on the background overlay trigger the close all containers event
		background_container.className = 'photopreviewer_cursor_pointer';
		background_container.onclick = photoPreviewerCloseAll;
		
	}
	
	// Create the image container
	image_container = document.createElement("div");
	image_container.id = "photopreviewer_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 (photopreviewer_use_close_button || photopreviewer_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 = 'photopreviewer_cursor_pointer';
		image_container.onclick = photoPreviewerCloseAll;
		
	}
	
	// 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);
	
	// 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 = "photopreviewer_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 = "photopreviewer_image_description_container";
		description_container.innerHTML = preview_image_description;
		
		image_container.appendChild(description_container);
		
	}

}

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

function photoPreviewerShowImage() {

	// 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 = photoPreviewerGetScreenDimensions();
	
	// 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('photopreviewer_image_title_container')) {
		
		height_reduction += photopreviewer_settings_title_height;
		
	}
	
	if (document.getElementById('photopreviewer_image_description_container')) {
		
		height_reduction += photopreviewer_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 < photopreviewer_settings_minimal_preview_height) {
			
			// Set the height to the minimum allowed and define the new width
			new_image_width = (photopreviewer_settings_minimal_preview_height/real_image_height)*real_image_width;
			new_image_height = photopreviewer_settings_minimal_preview_height;
			
		}
		
		// Check if the image width is less then the minimum allowed
		if (new_image_width < photopreviewer_settings_minimal_preview_width) {
			
			// Set the width to the minimum allowed and define the new height
			new_image_height = (photopreviewer_settings_minimal_preview_width/real_image_width)*real_image_height;
			new_image_width = photopreviewer_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('photopreviewer_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);
	image_container.style.display = 'block';
	
}

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

function photoPreviewerGetScreenDimensions() {
	
	// 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: photoPreviewerCloseAll
 *
 * Destroy all containers that where used
 * 
 */

function photoPreviewerCloseAll () {

	// 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('photopreviewer_image_title_container')) {
		
		document.body.removeChild(title_container);
		
	}
	
	if (document.getElementById('photopreviewer_image_description_container')) {
		
		document.body.removeChild(description_container);
		
	}
	
}

window.onresize = function() {
	
	// Check if a image is currently being showed
	if (document.getElementById('photopreviewer_image_container')) {
		
		screen_dimensions = photoPreviewerGetScreenDimensions();
		
		// Regenerate the background overlay
		background_container.style.height = (_docHeight > screen_dimensions[1] ? _docHeight : screen_dimensions[1]) + 'px';
		
		// Reload the image
		photoPreviewerShowImage()
		
		// 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('photopreviewer_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";
		
	}	
}