/*
Modified by Wilbert Cedeno.

Copyright (c) 2009, www.redips.net  All rights reserved.
Code licensed under the BSD License: http://www.redips.net/license/

http://www.redips.net/javascript/dialog-box/
version 1.2.0
Nov 23, 2009.
*/

/*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
/*global window: false */



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

// create REDIPS namespace
var REDIPS = {};



REDIPS.dialog = (function () {
		// function declaration
	var	init,
		show,
		hide,
		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
		// Wilbert(1/1/2010 18:32:35) I am adding this in the show function below instead.
		/*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, button1, button2, Scroll_On, Reply, Mail_ID, Send, User_ID) {
		var input1 = '',	// define input1 button
			input2 = '',	// define input2 (optional) button
			img,			// needed to find image suffix
			img_text;		// display text under image
		//  set button1 default value
		if (button1 === undefined) {
			button1 = 'Close';
		}
		// Wilbert(12/29/2009 13:45:32) To set a new variable to define whether to scroll and show a shade or not. Passed to position(). I do not need to turn off scrolling since I made image clickable to close and I made div big enough.
		if (Scroll_On === undefined) {
			Scroll_On = 1;
		}
		if (Reply === undefined) {
			Reply = 0;
		}
		if (Mail_ID === undefined) {
			Mail_ID = 0;
		}
		if (Send === undefined) {
			Send = 0;
		}
		if (User_ID === undefined) {
			User_ID = 0;
		}
		
		if (Scroll_On == 0)
		{
			// define onscroll & onresize event handler for FF, Chrome		
			if (window.removeEventListener) {
				window.removeEventListener('scroll', position, false);
				window.removeEventListener('resize', position, false);
			}
			// IE
			else if (window.attachEvent) {
				window.detachEvent('onscroll', null);
				window.detachEvent('onresize', null);
			}
			// other (hopefully this will not be needed)
			else {
				window.onscroll = null;
				window.onresize = null;
			}
		}
		else
		{
			// 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;
			}
		}
		
		// set dialog width, height and calculate central position
		dialog_width  = width;
		dialog_height = height;
		position();
		// if text ends with jpg, jpeg, gif or png, then prepare img tag
		img = /(\.jpg|\.jpeg|\.gif|\.png)$/i;
		if (img.test(text)) {
			// text can precede jpg, jpeg, gif or png image, so search for separator
			img_text = text.split('|');
			// separator doesn't exist, display only image
			if (img_text[1] === undefined) {
				//text = '<IMG src="' + img_text[0] + '" height="' + (height - 40) + '"/>';
				// Wilbert(12/29/2009 19:52:34) Making image clickable to close causes issues. I am moving to the top to be quick about it.
				text = '<IMG style="cursor: pointer;" alt="Please Wait..." title="Close Window" onclick="REDIPS.dialog.hide(\'' + 'undefined' + '\');" src="' + img_text[0] + '" />';
				//text = '<IMG style="cursor: pointer;" alt="Large Version" title="Close Window" onclick="REDIPS.dialog.hide(\'' + button1[1] + '\');" src="' + img_text[0] + '" />';
			}
			// otherwise, display image and text beneath image (text is closed in P tags)
			else {
				text = '<IMG src="' + img_text[1] + '" height="' + (height - 40) + '"/>';
				text += '<P>' + img_text[0] + '</P>';
			}
		}
		
		
		
		// prepare button1
		button1 = button1.split('|');
		
		if (Reply == 1)
		{
			if (button1 != "Sent")
			{
				input1 = '<input id="Reply" style="position: relative; bottom: 10px;" type="button" onclick="initCount(\'Message\',500,\'Chrs_Left\',\'\'); this.style.display = \'none\'; document.getElementById(\'Close\').style.display = \'none\';  document.getElementById(\'Delete\').style.display = \'none\'; document.getElementById(\'Reply_Box\').style.display = \'block\';" value="' + button1[0] + '">';

				var Reply_Section = '<div id="Reply_Box" name="Reply_Box" style="display: none;"><label for="Subject">Subject: </label><input style="height: 21px; cursor: default; width: 240px;" name="Subject" type="text" id="Subject" maxlength="50" /><br /><br /><textarea name="Message" id="Message" onkeyup="taCount(\'Message\',\'Chrs_Left\');" cols="45" rows="9" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border: solid 1px #000; -moz-appearance: none; padding: 5px; font-family: Arial,Helvetica,sans-serif;"></textarea><div class="Limit_Warning" id="Limit_Warning">Your caption is too long.<br />Make it short and sweet.<br />Delete <span id="Delete_Amount">0</span> character(s).</div><br />You can use up to <span id="Chrs_Left">500</span> character(s).<br /><br /><div class="Button" style="width: 270px; background-Color: #437ec7;"><div id="Status_Reply_Mail_' + Mail_ID + '" style="display: none; position: absolute; left: 165px; bottom: 30px;"><img style="vertical-align: middle;" src="/Images/Circle_Loading_Icon.gif" alt="Sending..." title="Sending..." /> Sending...</div><div id="Status_Reply_Text_' + Mail_ID + '" style="display: none; position: absolute; left: 165px; bottom: 50px; color: #F00;"></div><input style="margin: 10px;" onclick="SoMoodee_Mail(\'Reply\', ' + Mail_ID + ', Grab_Subject(), Grab_Body());" type="button" name="Send" id="Send" value="Send" />';
			
				var Close = '<input id="Close" style="position: relative; margin: 10px;" type="button" onclick="REDIPS.dialog.hide(\'undefined\');" value="Close">';
			}
			else
			{
				var Reply_Section = '';
				var Close = '';
			}
			
			var Delete = '<input id="Delete" style="position: relative; bottom: 10px;" type="button" onclick="Delete_Mail_' + Mail_ID + '();REDIPS.dialog.hide(\'undefined\');" value="Delete">';
			
		}
		else if (Send == 1)
		{
			input1 = '<input id="Send" style="position: relative; bottom: 10px;" type="button" onclick="SoMoodee_Mail(\'Send\', \'\', Grab_Subject(), Grab_Body(), ' + User_ID + ');" value="' + button1[0] + '">';
			
			var Reply_Section = '<div><label for="Subject">Subject: </label><input style="height: 21px; cursor: default; width: 240px;" name="Subject" type="text" id="Subject" maxlength="50" /><br /><br /><textarea name="Message" id="Message" onkeyup="taCountSendMail(\'Message\',\'Chrs_Left\');" cols="45" rows="9" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border: solid 1px #000; -moz-appearance: none; padding: 5px; font-family: Arial,Helvetica,sans-serif;"></textarea><div class="Limit_Warning" id="Limit_Warning">Your caption is too long.<br />Make it short and sweet.<br />Delete <span id="Delete_Amount">0</span> character(s).</div><br />You can use up to <span id="Chrs_Left">500</span> character(s).<br /><br /><div id="Status_Send_Mail" style="display: none; position: absolute; left: 185px; bottom: 30px;"><img style="vertical-align: middle;" src="/Images/Circle_Loading_Icon.gif" alt="Sending..." title="Sending..." /> Sending...</div><div id="Status_Send_Text" style="display: none; position: absolute; left: 185px; bottom: 50px; color: #F00;"></div>';
			
			
		}
		else
		{
			input1 = '<input style="position: relative; bottom: 10px;" type="button" onclick="REDIPS.dialog.hide(\'' + button1[1] + '\');" value="' + button1[0] + '">';
		}
		
		// prepare optional button2 
		if (button2 !== undefined) {
			button2 = button2.split('|');
			input2  = '<input id="Close" style="position: relative; bottom: 10px;" type="button" onclick="REDIPS.dialog.hide(\'' + button2[1] + '\');" value="' + button2[0] + '">';
		}
		// set HTML for dialog box - use table to vertical align content inside
		// dialog box (this should work in all browsers)
		
		 if (Reply == 1)
		 {
			 dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="' + height + 
								 '" width="' + width + '"><P style="text-align: left; font-weight: normal; color: #000;">' + text + '<br />' + input1 + Delete + input2 + Reply_Section + Close + '</div></P>' +
								 '</TD></TR></TABLE>';
		 }
		 else if (Send == 1)
		 {
			 dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="' + height + 
								 '" width="' + width + '"><P style="font-weight: normal; color: #000;">' + text + '<br />' + Reply_Section + input1 + input2 + '</P>' +
								 '</TD></TR></TABLE>';
		 }
		 else
		 {
			 dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="' + height + 
								 '" width="' + width + '"><P>' + text + '<br />' + input1 + input2 + '</P>' +
								 '</TD></TR></TABLE>';
		 }
		 
		 if (Reply == 1 || Send == 1)
		{
			dialog_box.style.backgroundColor = '#edf8ff';
			dialog_box.style.color = '#000';
		}
		
		// show shade and dialog box
		if (Scroll_On == 0)
		{
			dialog_box.style.display = 'block';
		}
		else
		{
			shade.style.display = dialog_box.style.display = 'block';
		}
		// hide dropdown menus, iframes & flash
		visibility('hidden');
		// show shaded div slowly
		fade(op_low, 10);
		
		// Wilbert(1/4/2010 13:40:30) Init Countdown for characters
		if (Send == 1)
		{

var invCharsSendMail=/[@/<>]/;
function initCountSendMail(ident,maxChars,displayId,chkStr)
{ // init settings
  taObj=document.getElementById(ident);
  maxLen=maxChars;
  if(chkStr !== ""){invCharsSendMail=chkStr;}
  if(chkStr.toLowerCase() === "nocheck"){invChars="";}
  if(displayId.toLowerCase() === "noshow"){return;} // suppress display
  dispObj=document.getElementById(displayId);
  dispObj.innerHTML=maxLen-taObj.value.length;
  taLength=taObj.value.length;
  
  if (taLength>maxLen)
	{
	  document.getElementById('Limit_Warning').style.display = 'block';
	  document.getElementById('Send').style.display = 'none';
	  dispObj.innerHTML = '0';
	  dispDelObj = document.getElementById('Delete_Amount');
	  dispDelObj.innerHTML=(maxLen-taObj.value.length) * -1;
	}
}
			
			initCountSendMail('Message', 500, 'Chrs_Left','');
		}
		
	};
	
	
	// hide dialog box and shade
	hide = function (fnc) {
		// set function call
		function_call = fnc;
		// start fade out
		fade(op_high, -20);
		// hide dialog box
		dialog_box.style.display = 'none';
		// show dropdown menu, iframe & flash
		visibility('visible');
		
	};
	
	
	// function sets dialog position to the center and maximize shade div
	position = function () {
		// define local variables
		var window_width, window_height, scrollX, scrollY;
		
		/*if (Scroll_On)
		{*/
		
			// 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 - 40)) + 'px';
			//dialog_box.style.top  = scrollY + 'px'; // Wilbert(12/29/2009 19:42:32) To set to top
			// set shade offset
			shade.style.top  = scrollY + 'px';
			shade.style.left = scrollX + 'px';
		/*}
		else
		{
			
			dialog_box.style.left = '0px';
			dialog_box.style.top = '0px';
			shade.style.top  = '0px';
			shade.style.left  = '0px';
			
		}*/
	};
	
	
	// show/hide dropdown menu, iframe and flash objects (work-around for dropdown menu problem in IE6)
	visibility = function (p) {
		var obj = [],	// define tag array
			x, y;		// variables used in local loops
		obj[0] = document.getElementsByTagName('select');
		obj[1] = document.getElementsByTagName('iframe');
		obj[2] = document.getElementsByTagName('object');
		// loop through fetched elements
		for (x = 0; x < obj.length; x++) {
			for (y = 0; y < obj[x].length; y++) {
				obj[x][y].style.visibility = p;
			}
		}
	};
	
	
	// 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';
			if (function_call !== 'undefined') {
				// call function after button is clicked because functions are defined in global scope
				window[function_call]();
			}
		}
	};
	
	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
	};
			
}());




//
// onclick button handlers needed for examples in dialog call
//


// execute after button1 is clicked 
function button1() {
	alert('Hi from function button1 ...');
}

// execute after button2 is clicked
function button2() {
	alert('Hi from function button2 ...');
}



// after page is loaded, initialize DIV elements inside tables
window.onload = function () {
	REDIPS.dialog.init();
};