/* enable strict mode */
"use strict";

// create ovrly namespace
var ovrly = {};

ovrly.dialog = (function () {
		// function declaration
	var	init,
		show,
		hide,
		image_tag,			// prepare image tags
		position,
		visibility,
		fade,
		
		// private parameters
		shade,				// shade div (object reference)
		dialog_box,			// dialog box (object reference)
		dialog_width = 0,	// initialize dialog width
		dialog_height = 0,	// initialize dialog height
		op_high = 60,		// highest opacity level
		op_low = 0,			// lowest opacity level (should be the same as initial opacity in the CSS)
		fade_speed = 18,	// set default speed - 18ms 
		function_call;		// name of function to call after clicking on button 


	// initialization
	init = function () {
		// create dialog box
		dialog_box = document.createElement('div');
		dialog_box.setAttribute('id', 'dialog');
		// create shade div
		shade = document.createElement('div');
		shade.setAttribute('id', 'shade');
		// append dialog box and shade to the page body
		var body = document.getElementsByTagName('body')[0];
		body.appendChild(shade);
		body.appendChild(dialog_box);
		// define onscroll & onresize event handler for FF, Chrome		
		if (window.addEventListener) {
			window.addEventListener('scroll', position, false);
			window.addEventListener('resize', position, false);
		}
		// IE
		else if (window.attachEvent) {
			window.attachEvent('onscroll', position);
			window.attachEvent('onresize', position);
		}
		// other (hopefully this will not be needed)
		else {
			window.onscroll = position;
			window.onresize = position;
		}
	};
	
	// show dialog box
	show = function (width, height, text, alttxt, cls) {
		var input1 = '',		// define input1 button
			input2 = '',		// define input2 (optional) button
			img_extensions,		// needed for image search
			div_img = '',		// prepared DIV with images
			div_text = '',		// text wrapped with DIV
			img_text = '';		// text under image
		// set dialog width, height and calculate central position
		dialog_width  = width;
		dialog_height = height;
		position();
		// set HTML for dialog box - use table to vertical align content inside
		// dialog box (this should work in all browsers)
		switch(cls)
		{
		case 1: //Image overlay
			dialog_box.innerHTML = '<table width="'+ width + '" height="' + height + '" style="background-color:#FFFFFF;">' +
			'<tr><td align="center"><b>' + alttxt + '</b>&nbsp;|&nbsp;<a onclick="ovrly.dialog.hide(0);return false" href="#" title="Close"><b>Close</b></a></td></tr>' +
    	'<tr><td style="background: url(images/2E9HCBUH.GIF) no-repeat center center fixed"><img id="ePhoto" name="ePhoto" alt="Loading photo..." src="' + text + '" title="' + alttxt + '" src="' + text + '" style="border: 1px solid #CCCCCC;" />' +
    	'</td></tr>' +
    	'<tr><td align="center"><a onclick="ovrly.dialog.hide(0);return false" href="#" title="Close"><b>Close</b></a></td></tr>' +
    	'</table>';
			break;
		case 2: //Login
			dialog_box.innerHTML = '<div align="center"><b>Login</b><form method="post" action="scripts/login.php" name="frmLogin"><p>Please enter your account details below:</p><table class="zero">' +
			'<tr><td align="right">E-Mail Address:</td><td align="left"><input type="text" name="eml" size="20" class="inputbox autowidth" title="E-mail Address" value="" /></td></tr>' +
			'<tr><td align="right">Password:</td><td align="left"><input type="password" name="pwd" size="20" class="inputbox autowidth" title="Password" /></td></tr>' +
			'<tr><td>&nbsp;</td><td align="left"><div style="margin-top:5px"><input type="submit" name="login" value="  Login  " class="button2" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="cancel" value="  Cancel  " class="button2" onclick="ovrly.dialog.hide(0);return false;" /></div></td></tr>' +
			'<tr><td>&nbsp;</td><td align="left"><div style="margin-top:5px; margin-bottom:10px;"><a class="icon-faq" href="about.php#lostpass">I forgot my password!</a><br /></div></td></tr>' +
			'</table></form></div>';
			break;
		default: //Panic!
			dialog_box.innerHTML = '<a onclick="ovrly.dialog.hide(1);return false" href="#" title="&laquo; Go back">&laquo; Go back</a>' +
			'<table width="100%"><tr><td style="height:300px;">' + 	
    	'<span style="text-decoration:blink; font-size:36px">CONGRATULATIONS!!!!!!</span>' +
			'<p>.......................................................................</p>' +
			'<span style="font-size:36px;">Today might be your lucky day!!!!!!!</span><br /><br/><span style="font-size:8px;">This is just a placeholder. Click "Go Back" above to return to the site.</span>' +
			'</td></tr></table>';
		}
		// show shade and dialog box
		shade.style.display = dialog_box.style.display = 'block';
		// show shaded div slowly
		if(cls<1){
			fade(100, 20);
		}
		else{
			fade(op_low, 10);
		}
		document.body.style.overflow='hidden';
	};
	
	
	// hide dialog box and shade
	hide = function (fnc) {
		// set function call
		//function_call = fnc;
		// start fade out
		if(fnc<1){
			fade(op_high, -20);
		}
		else{
			shade.style.display = 'none';
			document.body.style.overflow='auto';
		}
		// hide dialog box
		dialog_box.style.display = 'none';
		document.body.style.overflow='auto';
	};

	// function sets dialog position to the center and maximize shade div
	position = function () {
		// define local variables
		var window_width, window_height, scrollX, scrollY;
		// Non-IE (Netscape compliant)
		if (typeof(window.innerWidth) === 'number') {
			window_width  = window.innerWidth;
			window_height = window.innerHeight;
			scrollX = window.pageXOffset;
			scrollY = window.pageYOffset;
		}
		// IE 6 standards compliant mode
		else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
			window_width  = document.documentElement.clientWidth;
			window_height = document.documentElement.clientHeight;
			scrollX = document.documentElement.scrollLeft;
			scrollY = document.documentElement.scrollTop;
			// IE hack because #shade{width:100%;height:100%;} will not work for IE if body{height:100%} isn't set also ?!
			shade.style.width   = window_width  + 'px';
			shade.style.height  = window_height + 'px';
		}
		// DOM compliant
		else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
			window_width  = document.body.clientWidth;
			window_height = document.body.clientHeight;
			scrollX = document.body.scrollLeft;
			scrollY = document.body.scrollTop;
		}
		// place dialog box to the center
		dialog_box.style.left = (scrollX + ((window_width  - dialog_width)  / 2)) + 'px';
		dialog_box.style.top  = (scrollY + ((window_height - dialog_height) / 2)) + 'px';
		// set shade offset
		shade.style.top  = scrollY + 'px';
		shade.style.left = scrollX + 'px';
	};
	
	// shade fade in / fade out
	fade = function (opacity, step) {
		// set opacity for FF and IE
		shade.style.opacity = opacity / 100;
		shade.style.filter  = 'alpha(opacity=' + opacity + ')';
		// update opacity level
		opacity += step;
		// recursive call if opacity is between 'low' and 'high' values
		if (op_low <= opacity && opacity <= op_high) {
			setTimeout(
				function () {
					fade(opacity, step);
				}, fade_speed); // fade speed is public parameter
		}
		// hide shade div when fade out ends and make function call 
		else if (op_low > opacity) {
			shade.style.display = 'none';
		}
	};
	
	return {
		// public properties
		op_high			: op_high,		// highest opacity level
		op_low			: op_low,		// lowest opacity level (should be the same as initial opacity in the CSS)
		fade_speed		: fade_speed,	// fade speed (default is 18ms)
        
		// public methods
		init			: init,			// initialization
		show			: show,			// show dialog box
		hide			: hide			// hide dialog box
	};
			
}());