$(document).ready(
	/**
	 * The following modifications are done using JavaScript, because these attributes are either deprecated
	 * or otherwise non-standard and including them directly in (X)HTML code would break the validation.
	 * 
	 * It is a known limitation that these attributes work only for JavaScript enabled browsers and therefore
	 * we modify only such variables here that can somehow enhance the browsing experience, but still make
	 * browsing available for users without JavaScript support.
	 */
	function() {
		// set all class="external" links to open up in new window
		$('a.external').each(function(i) {
			this.target = '_blank';
		});
		// set autocomplete="off" to inputs and forms where class="noautocomplete"
		$('form.noautocomplete, input.noautocomplete').each(function(i) {
			this.setAttribute('autocomplete', 'off');
			if(this.value) {
				this.value = '';
			}
		});
		// replace all encoded email addresses with proper mailto email links
		$('span.email').each(function(i) {
			this.innerHTML = this.innerHTML.replace(/([^\(]+)\([^\)]+\)(.+)/, '<a href="mailto:$1@$2">$1@$2</a>');
		});
	}
);

/**
 * LayerHandler singleton implementation.
 */
var LayerHandler = new function() {
	// Private variables and functions
	var _layers = [], _minWidth = 330, _minHeight = 250, _createFullSizeDiv;
	
	// Event which is triggered every time the layer is resized
	this.RESIZED = 'layerResized';
	
	/**
	 * Appends the layer to document body and returns the layer DOM object
	 */
	this.createLayer = function(title) {
		var layerDiv, layerWrapper, darkenerDiv, layerTable, documentClick;
		
		// Darkener div
		darkenerDiv = _createFullSizeDiv();
		darkenerDiv.style.zIndex = 190;
		darkenerDiv.style.background = '#000000';
		$(darkenerDiv).fadeTo(0, 0);
		$(darkenerDiv).fadeTo(300, 0.7);
		
		// Layer div
		layerDiv = document.createElement('div');
		layerDiv.className = 'layer';
		layerDiv.style.zIndex = 200;
		document.body.appendChild(layerDiv);
		
		// Layer content
		$(layerDiv).append(_getLayerHtml());
		$('.title', layerDiv).append(title);
		layerTable = $('.layerTable', layerDiv).get(0);
		layerWrapper = $('.layerWrapper', layerDiv).get(0);
		
		// Resize
		$('a.resize div', layerTable).bind('mousedown', function(e) {
			var origX = false, origY = false, origWidth, origHeight, newWidth, newHeight, preventSelectTextDiv, windowWidth, windowHeight, moveFunction, mouseUpFunction;
			origWidth = $(layerTable).width();
			origHeight = $(layerTable).height();
			preventSelectTextDiv = _createFullSizeDiv();
			preventSelectTextDiv.style.zIndex = 9999;
			windowWidth = $(window).width();
			windowHeight = $(window).height();
			var moveFunction = function(e) {
				var offsetX = 0, offsetY = 0, resized = false;
				if(!origX || !origY) {
					origX = e.pageX;
					origY = e.pageY;
					return;
				}
				offsetX = (e.pageX - origX) * 2;
				offsetY = (e.pageY - origY) * 2;
				newWidth = origWidth + offsetX;
				newHeight = origHeight + offsetY;
				if(newWidth >= _minWidth && newWidth <= windowWidth) {
					layerWrapper.style.width = newWidth + 'px';
					resized = true;
				}
				if(newHeight >= _minHeight && newHeight <= windowHeight) {
					layerWrapper.style.height = newHeight + 'px';
					resized = true;
				}
				if(resized === true) {
					$(layerDiv).trigger(LayerHandler.RESIZED, [parseInt(layerWrapper.style.width.replace(/px/, '')), parseInt(layerWrapper.style.height.replace(/px/, ''))]);
				}
				LayerHandler.centerLayer(layerDiv);
			};
			mouseUpFunction = function(e) {
				$(document.body).unbind('mousemove', moveFunction);
				$(document.body).unbind('mouseup', mouseUpFunction);
				$(preventSelectTextDiv).remove();
			};
			$(document.body).bind('mousemove', moveFunction);
			$(document.body).bind('mouseup', mouseUpFunction);
			// NB. return false to prevent default mousedown handler (prevents issues when doing resize the next time)
			return false;
		});
		
		// Close
		$('.close', layerTable).bind('click', function(e) {
			// Close layer with fadeOut effect
			$(darkenerDiv).fadeTo(300, 0);
			$(layerDiv).fadeOut('300', function() {
				$(layerDiv).remove();
				$(darkenerDiv).remove();
			});
		});
		
		// Center layer
		LayerHandler.centerLayer(layerDiv);
		
		// Close layer on document click (outside the layer)
		documentClick = function(e) {
			$(document).unbind('click', documentClick);
			$('.close', layerTable).trigger('click');
		};
		// Return false when layer is clicked to prevent triggering document click event
		$(layerDiv).bind('click', function(e) {
			return false;
		});
		$(document).bind('click', documentClick);
		
		// Show layer with fadeIn effect
		layerDiv.style.display = 'none';
		$(layerDiv).fadeIn(300);
		
		// Return the layer
		return layerDiv;
	};
	this.centerLayer = function(layer) {
		layer.style.top = ($(window).height() - $(layer).height()) / 2 + 'px';
		layer.style.left = ($(window).width() - $(layer).width()) / 2 + 'px';
	};
	this.showLoading = function(layer) {
		$('td.content', layer).get(0).className = 'content contentLoading';
	};
	this.hideLoading = function(layer) {
		$('td.content', layer).get(0).className = 'content';
	};
	_getLayerHtml = function() {
		var html = '';
		html += '<div class="layerWrapper">';
		html += '<table cellspacing="0" cellpadding="0" border="0" class="layerTable">';
		html += '<tbody>';
		html += '<tr>';
		html += '<td class="topCorner topLeft"><div></div></td>';
		html += '<td class="top">';
		html += '<a class="close" href="javascript:;"></a>';
		html += '<div class="title"></div>';
		html += '</td>';
		html += '<td class="topCorner topRight"><div></div></td>';
		html += '</tr>';
		html += '<tr>';
		html += '<td class="left"><div class="leftTop"></div></td>';
		html += '<td class="content"></td>';
		html += '<td class="right"><div class="rightTop"></div></td>';
		html += '</tr>';
		html += '<tr>';
		html += '<td class="bottomCorner bottomLeft"></td>';
		html += '<td class="bottom">';
		html += '<a class="resize"><div></div></a>';
		html += '</td>';
		html += '<td class="bottomCorner bottomRight"></td>';
		html += '</tr>';
		html += '</tbody>';
		html += '</table>';
		html += '</div>';
		return html;
	};
	_createFullSizeDiv = function() {
		var div = document.createElement('div');
		div.style.position = 'absolute';
		div.style.top = '0px';
		div.style.left = '0px';
		div.style.width = $(window).width() + 'px';
		div.style.height = $(window).height() + 'px';
		document.body.appendChild(div);
		return div;
	};
};