// --------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------------------------------------------------
// manages generic modal overlays;
// this is a new version of modalAlert.js but more generic; at some point, the two codes could be merged
// for now, they stay separate
// 
// depends: 	jQuery library;
// author:		mdja;
// 
// the main modalOverlay object creates overlay items which can be managed independently and externally;
// only one modal can be shown at a time, and the main object manages this
// --------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------------------------------------------------

// -- define namespace;
if (typeof Barclaycard !== 'object') var Barclaycard={};

Barclaycard.modalDialog = new (function(el) {
	var params = {
		DIALOG_CLASS: 'modalDialog',
		CONTENT_CLASS: 'content',
		HTML_PRE: 	'<div class="t"><div></div></div><div class="c"><div class="content">',
		HTML_POST:	'</div></div><div class="b"><div></div>',
		CONTENT_WIDTH: 959
	};
	// private members;
	var overlay_el = null,
	modal_obj_arr = [],
	showing_modal = false,
	showing_overlay = false,
	current_modal = null;
		
	// private objects;
	// ----------------------------------------------------------------------------------------------------------------------------
	// ---- creates a modal object;
	var modal = function(/*{html: , width: , closeable: }*/) {
		// private members;
		var html_content = arguments[0].html,
		width = arguments[0].width,
		closeable = arguments[0].closeable,
		me = this,
		modal_shell_el = null,
		modal_content_el = null,
		modal_close_el = null;

		// private methods;
		// create the close button;
		var createCloseButton = function() {
			modal_close_el = document.createElement('a');
			modal_close_el.href='#';
			modal_close_el.className = 'close';
			modal_close_el.style.display = 'none';
			
			$(modal_close_el).click(onClickClose);
			
			return modal_close_el;
		};
	
		// creates the modal shell;
		var createShell = function() {
			modal_shell_el = document.createElement('DIV');
			modal_shell_el.className = params.DIALOG_CLASS;
			
			modal_shell_el.innerHTML = params.HTML_PRE + params.HTML_POST;
			
			document.body.appendChild(modal_shell_el);
			modal_shell_el.appendChild(createCloseButton());
	
			if (closeable) modal_close_el.style.display = 'block';

			modal_content_el = $(modal_shell_el).find('div.' + params.CONTENT_CLASS)[0];
		};

		var create = function() {
			// create the shell;
			createShell();
			
			// inject content HTML and set width;
			modal_content_el.innerHTML = html_content;
			modal_shell_el.style.width = width + 'px';
		};
		
		// public methods;
		this.show = function() {
			if (!modal_shell_el) create();
			showModal(me);
		};

		// close the modal;
		this.close = function() {
			hideModal(me);
		};	
		
		this.display = function(to_show) {
			modal_shell_el.style.display = (to_show)?'block':'none';
		};
	
		// return the html;
		this.html = function(html) {
			if (html) {
				html_content = html;
				modal_content_el.innerHTML = html_content;
			}
			return html_content;
		};
		
		this.width = function(newWidth) {
			if (newWidth) {
				width = newWidth;
				modal_shell_el.style.width = width + 'px';
				showModal(me);
			}
			return width;
		};
		
		this.shell = function() {
			return modal_shell_el;			
		};
		
		this.element = function() {
			// only has an element if showing!
			if (!showing_modal) return null; 
			return modal_content_el;
		};	
		
		this.closeable = function() {
			if (arguments.length>0) {
				modal_close_el.style.display = (arguments[0])?'block':'none';
			}
			return closeable;
		}
		
		// create the modal HTML;
		create();
	};
	// ----------------------------------------------------------------------------------------------------------------------------
	
	// private methods;
	
	// onclick event handling for close button;
	var onClickClose = function() {
		if (current_modal) hideModal(current_modal);	
		return false;
	};
	
	// creates the overlay element;
	var createOverlay = function() {
		overlay_el = document.createElement('DIV');
		overlay_el.className='modalOverlay';
		document.body.appendChild(overlay_el);
		/*@cc_on
			$(overlay_el).css("filter", "alpha(opacity=70)");
		@*/
		$(window).resize(onResize).scroll(onScroll);
	};
	
	// positions the overlay element;
	var showOverlay = function() {
		var body_height = document.body.offsetHeight,
		body_width = Math.max(document.body.offsetWidth, params.CONTENT_WIDTH);
		// show overlay, set height and width;
		overlay_el.style.display = 'block';	
		overlay_el.style.height = body_height + 'px';
		overlay_el.style.width = body_width + 'px';
		$(overlay_el).bgiframe();
		showing_overlay = true;
	};
	
	var hideOverlay = function() {
		overlay_el.style.display = 'none';
		showing_overlay = false;
	}
	
	var onResize = function() {
		if (showing_overlay) resizeOverlay();
		if (showing_modal) positionModal(current_modal.shell());
	};
	
	var onScroll = function() {
		if (showing_modal) positionModal(current_modal.shell(), true);		
	};
	
	var resizeOverlay = function() {
		if (!showing_modal) return;
		
		var body_width = Math.max(document.body.offsetWidth, params.CONTENT_WIDTH);
		overlay_el.style.width = body_width + 'px';		
	};
	
	var positionModal = function(shell_el, in_scroll) {
		// set modal position;
		var	modal_h = shell_el.offsetHeight,
		modal_w = shell_el.offsetWidth,
		scroll_top = $(window).scrollTop(),
		win_h = $(window).height(),
		win_w = $(window).width(),
		scroll_l = $(window).scrollLeft(),
		page_height = document.body.offsetHeight,
		modal_top = (scroll_top + Math.max(0, parseInt((win_h - modal_h) / 3))),
		modal_left = Math.max(0, parseInt((win_w - modal_w) / 2)) + scroll_l;
		
		// if window is smaller than modal, don't reposition on scrolling.
		if (in_scroll && (win_h < (modal_h + 20) || win_w < (modal_w + 20))) return;
		
		modal_top = (modal_top<10)?10:modal_top;
		modal_left = (modal_left<10)?10:modal_left;
		
		shell_el.style.left = modal_left + 'px';
		shell_el.style.top = modal_top + 'px';
						
	};
	
	var showModal = function(modal_obj) {
		// hide any current modals and deal with it;
		if (showing_modal && current_modal) hideModal(current_modal);
		
		if (!overlay_el) createOverlay();
		//if (!modal_shell_el) createShell();

		// show the overlay;
		showOverlay();
		
		// set visible;
		modal_obj.display(true);
		
		// position it;
		positionModal(modal_obj.shell());
		
		// add close button if necessary;
		//setShellCloseable(modal_obj.closeable());
		
		showing_modal = true;
		current_modal = modal_obj;
	};
	
	var hideModal = function(modal_obj) {
		// deal with any events etc;
		modal_obj.display(false);
		
		current_modal = null;
		showing_modal = false;
		// note - should not let multiple modals conflict in outer code (this is a hazard).
		hideOverlay();
	};
	
	// public methods;
	// ----------------------------------------------------------------------------------------------------------------------------
	// creates a new modal object;
	this.createModal = function(/*{html: , width: , closeable: }*/) {
		// create new modal object;
		var new_modal = new modal(arguments[0]);
		
		// push onto array;
		modal_obj_arr.push(new_modal);

		// return it;
		return new_modal;
	};
	
	this.holdOverlay = function() {
		showOverlay();
	};
// ----------------------------------------------------------------------------------------------------------------------------	
});

// --------------------------------------------------------------------------------------------------------------------------------
// --- end of file --- 
// --------------------------------------------------------------------------------------------------------------------------------