var Dialog = function() {
	// global variables //
	var TIMER = 5;
	var SPEED = 200;
	var WRAPPER = 'jsl-content';

	var DIALOG_ID = 'jsl-dialog'
	var DIALOG_HEADER_ID = 'jsl-dialog-header'
	var DIALOG_TITLE_ID = 'jsl-dialog-title'
	var DIALOG_CONTENT_ID = 'jsl-dialog-content'
	var DIALOG_MESSAGE_ID = 'jsl-dialog-message'
	var DIALOG_BUTTONS_ID = 'jsl-dialog-buttons'
	var DIALOG_MASK_ID = 'jsl-dialog-mask'
	
	// calculate the current window width //
	var pageWidth = function () {
		return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
	};
	
	// calculate the current window height //
	var pageHeight = function () {
		return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
	};
	
	// calculate the current window vertical offset //
	var topPosition = function () {
		return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
	};
	
	// calculate the position starting at the left of the window //
	var leftPosition = function () {
		return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
	};

	return {
		// build/show the dialog box, populate the data and call the fadeDialog function //
		show: function (message, options) {
		alert('show');
			if(!options.level) {
				options.level = 'prompt';
			}

			var dialog;
			var dialogheader;
			var dialogtitle;
			var dialogcontent;
			var dialogmessage;
			var dialogbuttons;
			var dialogmask;
			if(!document.getElementById(DIALOG_ID)) {
				dialog = document.createElement('div');
				dialog.id = DIALOG_ID;
				dialogheader = document.createElement('div');
				dialogheader.id = DIALOG_HEADER_ID;
				dialogtitle = document.createElement('div');
				dialogtitle.id = DIALOG_TITLE_ID;
				dialogcontent = document.createElement('div');
				dialogcontent.id = DIALOG_CONTENT_ID;
				dialogmessage = document.createElement('div');
				dialogmessage.id = DIALOG_MESSAGE_ID;
				dialogbuttons = document.createElement('div');
				dialogbuttons.id = DIALOG_BUTTONS_ID;
				dialogmask = document.createElement('iframe');
				dialogmask.id = DIALOG_MASK_ID;
				document.body.appendChild(dialogmask);
				document.body.appendChild(dialog);
				dialog.appendChild(dialogheader);
				dialogheader.appendChild(dialogtitle);
				dialog.appendChild(dialogcontent);;
				dialogcontent.appendChild(dialogmessage);
				dialogcontent.appendChild(dialogbuttons);
			} else {
				dialog = document.getElementById(DIALOG_ID);
				dialogheader = document.getElementById(DIALOG_HEADER_ID);
				dialogtitle = document.getElementById(DIALOG_TITLE_ID);
				dialogcontent = document.getElementById(DIALOG_CONTENT_ID);
				dialogmessage = document.getElementById(DIALOG_MESSAGE_ID);
				dialogbuttons = document.getElementById(DIALOG_BUTTONS_ID);
				dialogmask = document.getElementById(DIALOG_MASK_ID);
				dialogmask.style.visibility = "visible";
				dialog.style.visibility = "visible";
			}
			dialog.style.opacity = .00;
			dialog.style.filter = 'alpha(opacity=0)';
			dialog.alpha = 0;
			var width = pageWidth();
			var height = pageHeight();
			var left = leftPosition();
			var top = topPosition();
			var dialogwidth = dialog.offsetWidth;
			var dialogheight = dialog.offsetHeight;
			var topposition = top + (height / 2) - (dialogheight / 2);
			var leftposition = left + (width / 2) - (dialogwidth / 2);
			dialog.style.top = topposition + "px";
			dialog.style.left = leftposition + "px";
			dialogheader.className = options.level + "header";
			if (!options.title){
				options.title = options.level;
			}
			dialogtitle.innerHTML = options.title;
			dialogcontent.className = options.level;
			dialogmessage.innerHTML = message;
			if (!options.buttons){
				var buttons = document.createElement('div');
				buttons.style.align = 'center';
				var okbutton = document.createElement('input');
				okbutton.id = 'jsl-ok-button';
				okbutton.type = 'button';
				okbutton.value = '확인';
				okbutton.onclick = function() {
					Dialog.hide(buttons);
				};
				buttons.appendChild(okbutton);
				options.buttons = buttons;
			}
			dialogbuttons.appendChild(options.buttons);
			var content = document.getElementById(WRAPPER);
			dialogmask.style.height = content.offsetHeight + 'px';
			dialog.timer = setInterval("Dialog.fade(1)", TIMER);
		},
		// hide the dialog box //
		hide : function (buttons) {
			alert('hide');
			var dialog = document.getElementById(DIALOG_ID);
			clearInterval(dialog.timer);
			dialog.timer = setInterval("Dialog.fade(0)", TIMER);

			var parent = buttons.parentNode;
			while (parent.firstChild) {
				parent.removeChild(parent.firstChild);
			}
		},
		// fade-in the dialog box //
		fade : function(flag) {
			if(flag == null) {
				flag = 1;
			}
			var dialog = document.getElementById(DIALOG_ID);
			var value;
			if(flag == 1) {
				value = dialog.alpha + SPEED;
			} else {
				value = dialog.alpha - SPEED;
			}
			dialog.alpha = value;
			dialog.style.opacity = (value / 100);
			dialog.style.filter = 'alpha(opacity=' + value + ')';
			if(value >= 99) {
				clearInterval(dialog.timer);
				dialog.timer = null;
			} else if(value <= 1) {
				dialog.style.visibility = "hidden";
				document.getElementById(DIALOG_MASK_ID).style.visibility = "hidden";
				clearInterval(dialog.timer);
			}
		}
	}
}();


var Progress = function() {
	// global variables //
	var TIMER = 1;
	var SPEED = 200;
	var WRAPPER = 'jsl-content';

	var PROGRESS_ID = 'jsl-progress';
	var PROGRESS_CONTENT_ID = 'jsl-progress-content';
	var PROGRESS_CONTENT_STYLE = 'progress';
	var PROGRESS_MASK_ID = 'jsl-progress-mask';
	
	// calculate the current window width //
	var pageWidth = function () {
		return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
	};
	
	// calculate the current window height //
	var pageHeight = function () {
		return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
	};
	
	// calculate the current window vertical offset //
	var topPosition = function () {
		return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
	};
	
	// calculate the position starting at the left of the window //
	var leftPosition = function () {
		return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
	};

	return {
		// build/show the progress box, populate the data and call the fadeDialog function //
		show: function () {
			var progress;
			var progresscontent;
			var progressmask;
			if(!document.getElementById(PROGRESS_ID)) {
				progress = document.createElement('div');
				progress.id = PROGRESS_ID;
				progresscontent = document.createElement('div');
				progresscontent.id = PROGRESS_CONTENT_ID;
				progressmask = document.createElement('iframe');
				progressmask.id = PROGRESS_MASK_ID;
				document.body.appendChild(progressmask);
				document.body.appendChild(progress);
				progress.appendChild(progresscontent);;
			} else {
				progress = document.getElementById(PROGRESS_ID);
				progresscontent = document.getElementById(PROGRESS_CONTENT_ID);
				progressmask = document.getElementById(PROGRESS_MASK_ID);
				progressmask.style.visibility = "visible";
				progress.style.visibility = "visible";
			}
			progress.style.opacity = 2;
//			progress.style.opacity = .00;
			progress.style.filter = 'alpha(opacity=200)';
			progress.alpha = 200;
			var width = pageWidth();
			var height = pageHeight();
			var left = leftPosition();
			var top = topPosition();
			var progresswidth = progress.offsetWidth;
			var progressheight = progress.offsetHeight;
			var topposition = top + (height / 2) - (progressheight / 2);
			var leftposition = left + (width / 2) - (progresswidth / 2);
			progress.style.top = topposition + "px";
			progress.style.left = leftposition + "px";
			progresscontent.className = PROGRESS_CONTENT_STYLE;
			var content = document.getElementById(WRAPPER);
			progressmask.style.height = content.offsetHeight + 'px';
//			progress.timer = setInterval("Progress.fade(1)", TIMER);
		},
		// hide the progress box //
		hide : function () {
			var progress = document.getElementById(PROGRESS_ID);
//			clearInterval(progress.timer);
//			progress.timer = setInterval("Progress.fade(0)", TIMER);
			progress.alpha = -200;
			progress.style.opacity = -2;
			progress.style.visibility = "hidden";
			document.getElementById(PROGRESS_MASK_ID).style.visibility = "hidden";

		},
		
		// fade-in the progress box //
		fade : function(flag) {
			if(flag == null) {
				flag = 1;
			}
			var progress = document.getElementById(PROGRESS_ID);
			var value;
			if(flag == 1) {
				value = progress.alpha + SPEED;
			} else {
				value = progress.alpha - SPEED;
			}
			progress.alpha = value;
			progress.style.opacity = (value / 100);
			progress.style.filter = 'alpha(opacity=' + value + ')';
			if(value >= 99) {
				clearInterval(progress.timer);
				progress.timer = null;
			} else if(value <= 1) {
				progress.style.visibility = "hidden";
				document.getElementById(PROGRESS_MASK_ID).style.visibility = "hidden";
				clearInterval(progress.timer);
			}
		}
	}
}();