var overlay_zindex_counter = 900000;
var active_overlay_ids_array = new Array();

var number_of_overlay_images_to_preload = 0;
var number_of_overlay_images_preloaded = 0;
function createOverlay(data, position, top, left, id, create_this_overlay_at_this_element, dragable, dragable_element_in_data, allowed_to_exist_outside_of_view, step)
{
	var body_dom = document.getElementsByTagName('body')[0];
	if(step == undefined)
	{
		step = 0;
	}
	
	/** Creating the overlay if it hasn't been so already **/
	var overlay_div = getElement(id);
	if(!overlay_div)
	{
		/** Creating an overlay **/		
		var overlay_div = document.createElement('div');
	
		if(id == undefined)
		{
			id = 'overlay_div_'+overlay_zindex_counter;
		}
		
		/** Setting the id of the overlay **/
		overlay_div.id = id;
		
		/** Addding this overlay's id to the array of active overlays **/
		active_overlay_ids_array.push(id);
		
		/** Now we append this overlay to the body **/
		body_dom.appendChild(overlay_div);		
	}	
	
	if(step == 0)
	{
		/** Inserting the data but masking it with dislay:none so that the user doesn't see us when we preload **/
		overlay_div.style.display = 'none';
		if(data != undefined)
		{
			overlay_div.innerHTML = data;
		}
		
		var children = overlay_div.getElementsByTagName('img');
		
		/** Resetting the preload variables **/
		number_of_overlay_images_to_preload 	= 0;
		number_of_overlay_images_preloaded 		= 0;		
		
		/** Checking the new content for images to preload **/
		var images_to_preload_array = new Array();
		for(x in children)
		{
			if(children[x].src != undefined)
			{				
				number_of_overlay_images_to_preload++;
				images_to_preload_array.push(children[x].src);
			}
		}
		
		if(number_of_overlay_images_to_preload == 0)
		{
			/** No images to preload, we continue **/
			createOverlay(data, position, top, left, id, create_this_overlay_at_this_element, dragable, dragable_element_in_data, allowed_to_exist_outside_of_view, 1);
		}
		else
		{
			/** There's images to preload, so we preload them **/
			for(x in images_to_preload_array)
			{
				preloadThisImage(images_to_preload_array[x], function()
					{
						donePreloadImagesForCreateOverlay(data, position, top, left, id, create_this_overlay_at_this_element, dragable, dragable_element_in_data, allowed_to_exist_outside_of_view, 1);
					}
				);			
			}			
		}		
	}
	else
	{
		/** Making the overlay visible **/
		overlay_div.style.display = '';
		
		if(allowed_to_exist_outside_of_view == undefined)
		{
			allowed_to_exist_outside_of_view = true;
		}
		
		if(top == undefined)
		{
			top = 'center';
		}
		else if(top != 'center' || (create_this_overlay_at_this_element != undefined && getElement(create_this_overlay_at_this_element)))
		{
			top = parseInt(top);
			if(isNaN(top))
			{
				top = 0;
			}
		}
		
		if(left == undefined)
		{
			left = 'center';
		}
		else if(left != 'center' || create_this_overlay_at_this_element != undefined && getElement(create_this_overlay_at_this_element))
		{
			left = parseInt(left);
			if(isNaN(left))
			{
				left = 0;
			}
		}
		
		if(position == undefined)
		{
			position = "fixed";
		}				
		
		/** A few styles **/
		overlay_div.style.position = 'absolute'; // IE doesn't understand fixed so it's always absolute
		if(browser != 'ie')
		{		
			overlay_div.style.position = position;
		}
		
		overlay_div.style.zIndex = overlay_zindex_counter;
		overlay_zindex_counter++;		
		
		if(dragable != undefined && dragable)
		{
			/** This overlay should be dragable **/
			if(dragable_element_in_data != undefined)
			{				
				dragable_element_in_data 				= getElement(dragable_element_in_data);
				dragable_element_in_data.onmousedown	= function(event){startDragging(event, id);};
				dragable_element_in_data.onmouseup		= function(){cancelDragging();};			
			}
			else
			{
				overlay_div.onmousedown	= function(event){startDragging(event, this);};
				overlay_div.onmouseup	= function(){cancelDragging();};
			}
		}
		
		/** Positioning the overlay **/
		if(create_this_overlay_at_this_element != undefined && create_this_overlay_at_this_element == 'mouse')
		{
			if(left == 'center')
			{
				left = 0;
			}
			
			if(top == 'center')
			{
				top = 0;
			}
			
			/** Creating the overlay at the mouse position **/
			setMouseXY();
			overlay_div.style.left 	= (mouseX*1+left)+"px";
			overlay_div.style.top 	= (mouseY*1+top)+"px";
		}
		else if(create_this_overlay_at_this_element != undefined && getElement(create_this_overlay_at_this_element))
		{				
			var obj_positions 		= getPositionOfObject(create_this_overlay_at_this_element).split(";");		
			overlay_div.style.left 	= (obj_positions[0]*1+left)+"px";
			overlay_div.style.top 	= (obj_positions[1]*1+top)+"px";
		}
		else
		{
			if(top == "center")
			{
				centerObject("top", id);
			}
			else
			{
				overlay_div.style.top = top+"px";	
			}
			
			if(left == "center")
			{
				centerObject("left", id);
			}
			else
			{
				overlay_div.style.left = left+"px";
			}
		}
		
		if(position == "fixed" && browser == 'ie')
		{
			window.onscroll = joinFunctions(window.onscroll, function(){ieFixed(id, top, left)});
			window.onresize = joinFunctions(window.onresize, function(){ieFixed(id, top, left)});
		}
		
		if(!allowed_to_exist_outside_of_view)
		{
			if(parseInt(overlay_div.style.top) < 0)
			{
				overlay_div.style.top = '0px';
			}
			if(parseInt(overlay_div.style.left) < 0)
			{
				overlay_div.style.left = '0px';
			}		
		}		
	}
}

function centerObject(type, obj)
{	
	var obj = getElement(obj);
	
	/** Updating window dimensions **/
	updateWindowDimensions();
			
	/** Getting objects dimensions **/
	var width = obj.offsetWidth;
	var height = obj.offsetHeight;		
		
	if(obj.style.position == 'fixed')
	{
		window_scroll_y = 0;
		window_scroll_x = 0;
	}
		
	if(type != undefined && type == "top")
	{		
		obj.style.top 	= (window_scroll_y)+(window_height/2)-(height/2)+"px";
	}
	else if(type != undefined && type == "left")
	{

		obj.style.left 	= (window_scroll_x)+(window_width/2)-(width/2)+"px";
	}
	else
	{
		obj.style.top 	= (window_scroll_y)+(window_height/2)-(height/2)+"px";
		obj.style.left 	= (window_scroll_x)+(window_width/2)-(width/2)+"px";			
	}
	
	if(parseInt(obj.style.top) < 0)
	{
		obj.style.top = '0px';
	}
	if(parseInt(obj.style.left) < 0)
	{
		obj.style.left = '0px';
	}
}

function createVeil(final_fade, do_fade, color, function_to_execute_when_done)
{
	setDocumentHeightAndWidth();
	var body_dom = document.getElementsByTagName('body')[0];

	/** We create the protective layer that will make sure that the user cannot click on anything except our overlay **/
	var protective_div = document.createElement('div');
	protective_div.id = 'protective_div';				
	
	/** Styling the protective div **/
	protective_div.style.position = "absolute";
	if(browser != "ie")
	{
		protective_div.style.position = "fixed";
	}
	
	protective_div.style.top 	= "0px";
	protective_div.style.left 	= "0px";
	protective_div.style.width 	= document_total_width+"px";
	protective_div.style.height = document_total_height+"px";
	
	if(color == undefined)
	{
		color = "#000000";
	}
	protective_div.style.backgroundColor = color;
	protective_div.style.zIndex = overlay_zindex_counter;
	protective_div.style.opacity = 0;
	protective_div.style.display = 'inline';
	
	/** Appending it to the body **/
	body_dom.appendChild(protective_div);
	
	/** Updating the zindex counter **/
	overlay_zindex_counter++;
	
	if(browser_version == 6)
	{
		hideSelects();
	}
	
	if(final_fade != undefined)
	{
		if(do_fade != undefined && do_fade)
		{
			fadeElement(protective_div, 0, final_fade, 'in', function_to_execute_when_done);
		}
		else
		{
			if(browser == 'ie')
			{
				protective_div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+final_fade+')';	
				protective_div.style.filter = 'alpha(opacity='+final_fade+');';
			}
			else
			{
				protective_div.style.opacity = final_fade/100;
			}
			
			if(typeof function_to_execute_when_done == 'function')
			{
				function_to_execute_when_done();
			}
		}
	}
	else
	{
		if(browser == 'ie')
		{
			protective_div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';	
			protective_div.style.filter = 'alpha(opacity=50);';
		}
		else
		{
			protective_div.style.opacity = 0.5;
		}
		
		if(typeof function_to_execute_when_done == 'function')
		{
			function_to_execute_when_done();
		}		
	}
	
	if(browser == 'ie')
	{
		protective_div.onmousewheel = joinFunctions(protective_div.onmousewheel, function(){handleVeilScroll();});
		window.onresize 			= joinFunctions(window.onresize, function(){handleVeilScroll();});
	}		
}

function handleVeilScroll()
{
	var veil = getElement("protective_div");
	if(veil)
	{
		setDocumentHeightAndWidth();
		veil.style.width 	= document_total_width+"px";
		veil.style.height 	= document_total_height+"px";		
	}
}

var document_total_height = "";
var document_total_width = "";

function setDocumentHeightAndWidth()
{
	var body = document.body, html = document.documentElement;
	
	document_total_height = Math.max( body.scrollHeight, body.offsetHeight,  html.clientHeight, html.scrollHeight, html.offsetHeight );
	document_total_width = Math.max( body.scrollWidth, body.offsetWidth,  html.clientWidth, html.scrollWidth, html.offsetWidth );
		
	if(browser == "ie" && browser_version < 8)
	{
		document_total_height = (Math.max( body.scrollHeight, body.offsetHeight,  html.clientHeight, html.scrollHeight, html.offsetHeight )-5);
		document_total_width = (Math.max( body.scrollWidth, body.offsetWidth,  html.clientWidth, html.scrollWidth, html.offsetWidth )-21);		
	}
}

var preloaded_images_array = new Array();
function preloadThisImage(complete_image_path, function_to_call_when_done_loading)
{
	var found = false;
	/** First we check if the image has been loaded already **/
	for(x in preloaded_images_array)
	{
		if(preloaded_images_array[x].src == complete_image_path)
		{
			found = true;
			break;
		}
	}
	
	if(found)
	{
		/** The image has been loaded already, so we call the function we are to call when we're done loading, if it is defined **/
		if(function_to_call_when_done_loading != undefined)
		{
			/** The setTimeout is there to allow the calling scripts to finish any remaining code before calling this function **/
			setTimeout(function_to_call_when_done_loading, 0);
		}			
	}
	else
	{
		var array_length = preloaded_images_array.length;
		preloaded_images_array[array_length] = new Image();
		if(function_to_call_when_done_loading != undefined)
		{
			preloaded_images_array[array_length].onload = function_to_call_when_done_loading;
			preloaded_images_array[array_length].onerror = function_to_call_when_done_loading;
		}
		preloaded_images_array[array_length].src = complete_image_path;
	}
}

function closeOverlay(fadeout)
{
	removeElementFromDom("overlay_div");
	removeElementFromDom("overlay_div_at_object");
	var protective_div = getElement('protective_div');
	if(fadeout != undefined && fadeout)
	{		
		var current_fade = 0;
		
		if(browser == 'ie')
		{
			current_fade = protective_div.filters[0].opacity;
		}
		else
		{
			current_fade = protective_div.style.opacity*100;
		}
		
		fadeElement(protective_div, current_fade, 0, 'out', function(){ removeElementFromDom("protective_div"); });
	}
	else
	{		
		removeElementFromDom("protective_div");
	}

	
	if(browser_version == 6)
	{
		showSelects();
	}
	
	
	if(browser != 'ie')
	{
		/** Stopping the onresize function **/
		window.onresize = "";
	}
	else
	{
		if(protective_div != undefined)
		{
			/** Stopping the onscroll function **/
			protective_div.onmousewheel = document.onmousewheel = '';
		}
	}
	
	if(active_overlay_ids_array != undefined)
	{
		/** We close all overlays **/
		for(x in active_overlay_ids_array)
		{
			removeElementFromDom(active_overlay_ids_array[x]);
		}
		active_overlay_ids_array = new Array();	
	}
}

function donePreloadImagesForCreateOverlay(data, position, top, left, id, create_this_overlay_at_this_element, dragable, dragable_element_in_data, allowed_to_exist_outside_of_view, step)
{
	number_of_overlay_images_preloaded++;
	if(number_of_overlay_images_preloaded >= number_of_overlay_images_to_preload)
	{		
		createOverlay(data, position, top, left, id, create_this_overlay_at_this_element, dragable, dragable_element_in_data, allowed_to_exist_outside_of_view, step)
	}
}

var fadeTimersArray = new Array();
function fadeElement(obj, current_fade, final_fade, direction, function_to_execute_when_done, pause_between_fade_incrementions)
{	
	obj = getElement(obj);
	if(obj)
	{		
		if(obj.id == '')
		{
			obj.id = createRandomId();
		}
		
		clearTimeout(fadeTimersArray[obj.id]);
				
		if(direction == undefined)
		{
			direction = 'in';
		}
		
		if(pause_between_fade_incrementions == undefined)
		{
			pause_between_fade_incrementions = 25;
		}
		
		/** Setting the fade to current_fade **/
		obj.style.zoom = 1;
		if(browser == "ie")
		{
			obj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+current_fade+')';	
			obj.style.filter = 'alpha(opacity='+current_fade+');';
		}
		else
		{
			obj.style.opacity = current_fade/100;
		    obj.style.MozOpacity = current_fade/100;
		    obj.style.KhtmlOpacity = current_fade/100;		
		}
		
		if(direction == 'in')
		{
			/** Increasing the current_fade by 10% **/
			current_fade += 10;
			
			if(current_fade <= final_fade)
			{
				/** We have some more fading to do **/				
				fadeTimersArray[obj.id] = setTimeout(function(){fadeElement(obj, current_fade, final_fade, direction, function_to_execute_when_done, pause_between_fade_incrementions)}, pause_between_fade_incrementions);
			}
			else if(typeof function_to_execute_when_done == 'function')
			{
				function_to_execute_when_done();
			}
		}
		else
		{
			/** Decreasing the current_fade by 10% **/
			current_fade -= 10;
			
			if(current_fade >= final_fade)
			{
				/** We have some more fading to do **/
				fadeTimersArray[obj.id] = setTimeout(function(){fadeElement(obj, current_fade, final_fade, direction, function_to_execute_when_done, pause_between_fade_incrementions)}, pause_between_fade_incrementions);
			}
			else if(typeof function_to_execute_when_done == 'function')
			{
				function_to_execute_when_done();
			}
		}
	}
}

function ieFixed(obj, top, left)
{
	var obj = getElement(obj);
	
	if(obj)
	{
		/** Updating window dimensions **/
		updateWindowDimensions();	
		
		if(top == undefined || top == "center")
		{
			centerObject("top", obj);
		}
		else
		{
			obj.style.top = (window_scroll_y+top)+"px";
		}
		
		if(left == undefined || left == "center")
		{
			centerObject("left", obj);
		}
		else
		{
			obj.style.left = (window_scroll_x+left)+"px";
		}
	}
}

var window_height = 0;
var window_width = 0;
var window_scroll_y = 0;
var window_scroll_x = 0;
function updateWindowDimensions()
{	
	if(browser == "ie")
	{
		/** Scroll Y **/
		if(document.documentElement && document.documentElement.scrollTop != 0)
		{
			window_scroll_y = document.documentElement.scrollTop;
		}
		else
		{
			window_scroll_y = document.body.scrollTop;
		}
		
		/** Scroll X **/
		if(document.documentElement && document.documentElement.scrollLeft != 0)
		{
			window_scroll_x = document.documentElement.scrollLeft;
		}
		else
		{
			window_scroll_x = document.body.scrollLeft;
		}
		
		/** Height **/
		if(document.documentElement && document.documentElement.clientHeight != 0)
		{
			window_height = document.documentElement.clientHeight;
		}
		else
		{
			window_height = document.body.clientHeight;
		}

		/** Width **/
		if(document.documentElement && document.documentElement.clientWidth != 0)
		{
			window_width = document.documentElement.clientWidth;
		}
		else
		{
			window_width = document.body.clientWidth;
		}	
	}
	else
	{
		window_scroll_y = window.pageYOffset;
		window_scroll_x = window.pageXOffset;
		window_width 	= window.innerWidth;
		window_height 	= window.innerHeight;		
	}
}