/**
 * pDialog
 * 
 * This is a wrapper plugin for jQuery UI dialog
 * p is for 'peppered'
 * 
 * Requires:
 * 		jQuery (1.3.2)
 * 		jQuery UI dialog
 * 		$.log function in global namespace
 *		$.url
 * 
 * @author AK | Peppered
 * @version 1.1.1-dev
 * 
 */
;(function($) {

var dialogs = {};	// object to keep track of created dialogs

$.pDialog = function(options) {
	if ($.isPlainObject(options)) {
		// init (new) pDialog
	}
	else if (typeof options == 'string') {		
		if (arguments[1] == 'option') {
			// option setter
			// ... @todo
		}
		return;
	}
	
	options = $.extend({
		debug: false,
		
		// default jQuery UI dialog options:
		title: '',
		width: 300,
		height: 'auto',
		modal: true,
		autoOpen: false,
		closeOnEscape: true,				// not yet implemented
		resizable: true,
		draggable: true,
		bgiframe: true,						// deprecated?
				
		// extra pDialog options:
		id: '',								// each pdialog should have an unique id (used to respawn the dialog after a close for instance) 
											//   a HTML id attribute is assigned to the content <div/> as: {idPrefix}{id}
											
		type: null,							// dialog type, must be specified:
											//   message | confirmation | iframe | tabs | page
											//		
		extraClass: null,					// extra class to assign to dialog widget (format: ui-pdialog-TYPE-dialogClass)
											//   currently only implemented for type='iframe'
		idPrefix: 'uiDialog-',				// id-prefix
		autoResize: true,					// @todo (autoresize when window is resized)
		tabs: null,							// object defining the tabs (when type == 'tabs')
		useTabsAsHeader: false,				// instead of using default header displaying 'title', use the tabs as header (when type == 'tabs')	
		closeOnOutsideclick: false,			// not yet implemented, only works if modal == true
		bringInFocusOnOutsideclick: true,	// centers the dialog, and highlights it. Only works if modal == true
		
		iframe_header: null,				// snippet of HTML to put before the iframe (type==iframe)
		iframe_footer: null,				// snippet of HTML to put after the iframe (type==iframe)
		custom_header: null					// snippet of HTML to use as header (instead of title) (type==iframe)

	}, options);
	
	
	// new object to transfer the default ui-dialog options
	var uiDialogOptions = {
		title: options.title,
		width: options.width,
		height: options.height,
		bgiframe: options.bgiframe,
		modal: options.modal,
		autoOpen: options.autoOpen,
		resizable: options.resizable,
		autoResize: options.autoResize,
		draggable: options.draggable
	};
	
	var buttonExtras = {}; //@todo (be able to define different types/roles of buttons)
	
	spawnDialog(options.type);
	
	return false;
	
	/**
	 * Debugging
	 */
	function debug($obj) {
		if (options.debug) {
			if ($.log) {
				$.log($obj);
			}
			else if (window.console && window.console.debug) {
				console.debug($obj);
			}
			else if (window.console && window.console.log) {
				console.log($obj);
			}
		}
	}
	
	/**
	 * spawnDialog()
	 * 
	 */
	function spawnDialog(type) {
		var dialogId = options.idPrefix + options.id;
		
		// once, generate base HTML structure and append to body
		if (!dialogs[options.id]) {						
			// buttons
			uiDialogOptions.buttons = generateButtons();
			
			// open function
			uiDialogOptions.open = function(e, ui) {
				$theDialogContent = $(this);
				
				if (type == 'tabs' && options.useTabsAsHeader) {
					//fn_useTabsAsHeader($(this), e, ui);
				}
				if (options.bringInFocusOnOutsideclick) {
					fn_bringInFocusOnOutsideclick($(this), e, ui);
				}
				if (type == 'iframe') {
					$theDialogContent.addClass('ui-dialog-content-loading');
					$('body').addClass('ui-busy');
					$uiWidget.find('iframe').load(function(){
						$theDialogContent.removeClass('ui-dialog-content-loading');
						$('body').removeClass('ui-busy');
					});
					$uiWidget.find('iframe').error(function(){
						$theDialogContent.removeClass('ui-dialog-content-loading');
						$('body').removeClass('ui-busy');
					});
				}
				else if (type == 'page') {
					//$theDialogContent.addClass('ui-dialog-content-loading');
				}
				
				$('html').addClass('ui-modalActive');
			};
			
			// close function
			uiDialogOptions.close = function(e, ui) {
				debug('dialog: close');
				$('html').removeClass('ui-modalActive');
			};
			
			uiDialogOptions.beforeClose = function(e, ui) {
				debug('dialog: beforeClose');
				if ($(this).dialog('option', '_parentRefresh') !== false) {
					if (options.parentRefresh) {
						$('body').addClass('ui-wait');
						e.preventDefault();
					 	// 'reload' parent (no location.reload() <> possible form submits)
						window.location = $.url.set(window.location.href, {fragment: ''});
					}
				}
			};
			
			switch (options.type) {
				case 'tabs':
					createDialogWithTabs(dialogId);
					dialogs[options.id] = true;			// remember it has been created	
					break;
				case 'confirmation':
					var $dialog = $('<div id="' + dialogId + '">' + options.content + '</div>');
					$('body').append($dialog.hide());					
					$dialog.dialog(uiDialogOptions);	// create the dialog
					
					var $uiWidget = $dialog.parent();
					$uiWidget.addClass('ui-pdialog ui-pdialog-confirmation');
					
					$uiWidget.find('button').addClass('button'); /*@todo/wip*/
					
					dialogs[options.id] = true;
					break;
				case 'message':
					var $dialog = $('<div id="' + dialogId + '">' + options.content + '</div>');
					$('body').append($dialog.hide());
					$dialog.dialog(uiDialogOptions);
					
					var $uiWidget = $dialog.parent();
					$uiWidget.addClass('ui-pdialog ui-pdialog-message');
					
					dialogs[options.id] = true;
					break;
				case 'page':
					var $dialog = $('<div id="' + dialogId + '"></div>');
					$dialog.load( options.load, null, function(responseText, textStatus, XMLHttpRequest){  // gets cached in IE
						debug(XMLHttpRequest);
						$theDialogContent.removeClass('ui-dialog-content-loading');
					});
					
					$('body').append($dialog.hide().addClass('ui-dialog-content-loading'));
					$dialog.dialog(uiDialogOptions);
					
					var $uiWidget = $dialog.parent();
					$uiWidget.addClass('ui-pdialog ui-pdialog-page');
					
					dialogs[options.id] = true;
					break;					
				case 'iframe':
					var $dialog = $('<div id="' + dialogId + '">' + options.iframe_header + '<iframe scrolling="auto" frameborder="0" src="' + options.load + '" />' + options.iframe_footer + '</div>');
					$('body').append($dialog.hide());
					$dialog.dialog(uiDialogOptions);
					
					var $uiWidget = $dialog.parent();
					$uiWidget.addClass('ui-pdialog ui-pdialog-iframe' + (options.extraClass != null ? ' ui-pdialog-iframe-'+options.extraClass : ''));
					
					$uiWidget.find('.ui-dialog-titlebar-close').addClass('button'); // custom
								
					// custom title/header
					if (options.custom_header !== null) {
						$dialog.dialog('option', 'draggable', false);
						var $box = $('<div class="customHeader dragHandle"/>').append(options.custom_header);
						$uiWidget.find('.ui-dialog-titlebar .ui-dialog-title').replaceWith($box);
						$uiWidget
							.draggable({ handle: '.ui-dialog-titlebar .dragHandle', containment: 'document' })
						;						
					}
					
					dialogs[options.id] = true;
					break;
			}
			
			// store this pDialog options
			$dialog.data('pdialog', {options: options});					
		}
		else {
			$dialog = $('#'+dialogId);
		}
		
		// open/show the dialog
		// always center (if existing dialog has been opened after moved & closed)
		
		$dialog.dialog('option', 'position', 'center').dialog('open');
		
		return true;
	}
	
	
	/**
	 * fn_bringInFocusOnOutsideclick()
	 */
	function fn_bringInFocusOnOutsideclick($theDialogContent, e, ui) {
		var $dialog = $theDialogContent.parent();
		var $overlay = $dialog.prev('.ui-widget-overlay');		
		$overlay.click(function(){
			debug('event: ui-widget-overlay clicked');
			//debug($theDialogContent);
			$dialog.effect('highlight');
			$theDialogContent.dialog('option', 'position', 'center');
		});
	};
	
	
	/**
	 * generateButtons()
	 */
	function generateButtons() {
		var buttons = {};
		var i = 0;
		$.each(options.buttons, function(key, val) {
			i++;
			buttonExtras[i] = {role: this.role }
			
			switch (this.action) {
				case 'cancel':
					buttons[key] = function() {
						var $this = $(this);
						$this.dialog('close');
					}
					break;
				case 'submit':
					buttons[key] = function() {
						debug('OK pressed, submit the form: ');
					}
					break;
				default:
					if (typeof this.action == 'function') {
						buttons[key] = this.action;
					}
					break;
			}
			
		});
		//debug(buttonExtras);
		return buttons;
	}	
	
	
	/**
	 * createDialogWithTabs()
	 * 
	 * Available options per tab:
	 *    type		{String ('iframe')}		defaults to loading via Ajax
	 *    title		
	 *    load		{String}				the URL to load in tab
	 *    
	 * 
	 */
	function createDialogWithTabs(dialogId) {
		
		var tabsHTML, tabListItemsHTML = '', tabContentsHTML = '', tabId;
			
		$.each(options.tabs, function(i, val){
			tabId = this.tabId = 'dialog-tab' + i;
			tabListItemsHTML += '<li><a href="#' + tabId + '">' + this.title + '</a></li>';	
			tabContentsHTML  += '<div id="' + tabId + '"></div>'	
		});
		
		
		// Generate tabs HTML
		// This first needs to be appended to body, else the Tabs plugin can't/won't work correctly
		tabsHTML = '<div class="tabs" id="' + dialogId + '"><ul>'
			+ tabListItemsHTML
			+ '</ul><div class="richtext" id="tabDivsContainer">'
			+ tabContentsHTML
			+ '</div></div>'
		;
		
		// Append to body & hide
		$('body').append($(tabsHTML).hide());
		
		// Create the tabs and dialog
		var $dialog = $('#'+dialogId).tabs().dialog(uiDialogOptions);
		var $uiWidget = $dialog.parent();
		$uiWidget.addClass('ui-pdialog-dialogtabs');
		
		if (options.useTabsAsHeader) {
			var $uiTabsNav = $uiWidget.find('.ui-tabs-nav');			
			$dialog.dialog('option', 'draggable', false);			
			$uiWidget.find('.ui-dialog-titlebar').replaceWith($uiTabsNav);			
			$uiTabsNav
				.wrap('<div class="ui-tabs ui-dialog-titlebar"/>')
			;
			$uiWidget
				.draggable({ handle: '.ui-tabs-nav', cancel: '.ui-tabs-nav li', containment: 'document' })
			;
		}
		
		// load Ajax content
		$.each(options.tabs, function(i, val) {
			if (this.type == 'iframe') {
				var html = '<iframe src="'+this.load+'" frameborder="0"></iframe>';
				$('#' + this.tabId).addClass('pdialog-tab-iframe').html(html);
			}
			else {
				$('#' + this.tabId).load( this.load, null, function(responseText, textStatus, XMLHttpRequest){
					debug(responseText);
				} ); // gets cached in IE
			}
		});
	
	}


} /* end of $.pDialog */


/**
 * public showNotice()
 * Shortcut function to use for (short) system messages/notices
 * 
 * @param {String} id				The unique id for pDialog
 * @param {String} notice_text		Plain-text String
 */
$.pDialog.showNotice = function(id, notice_text) {
	$.pDialog({
		id: id,			
		type: 'message',
		title: 'Let op!',
		content: '<div class="richtext"><p>' + notice_text+ '.</p><p>Klik op OK om door te gaan.</p></div>',
		bringInFocusOnOutsideclick: true,
		modal: true,
		buttons: {
			'OK': {
				action: 'cancel'
			}
		}
	});
};

	
})(jQuery); /* end of $.pDialog closure */