/*	Script: modalizer.js
		Provides functionality to overlay the window contents with a semi-transparent layer that prevents interaction with page content until it is removed.
		
		Dependencies:
		Mootools - <Moo.js>, <Array.js>, <String.js>, <Function.js>, <Utility.js>, <Dom.js>, <Element.js>, <Window.Size.js>, <Event.js>, <Window.Base.js>
		
		Author:
		Aaron Newton (aaron [dot] newton [at] cnet [dot] com)

		Class: Modalizer
		Provides functionality to overlay the window contents with a semi-transparent layer that prevents interaction with page content until it is removed. This class is intended to be implemented into other classes to provide them access to this functionality.
	*/
	
	
function changePositionStyle(value) {
	$ES('#content #secondary #museumInfo dl').each(function (el){el.setStyle('position', value)}); 
	$ES('#content #secondary #museumInfo p').each(function (el){el.setStyle('position', value)}); 
	$ES('#content #secondary div.secondaryModule p.moreInfo').each(function (el){el.setStyle('position', value)});
	$ES('#eNewsletter dt').each(function (el){el.setStyle('position', value)}); 
	$ES('#eNewsletter #emailNewsletter').each(function (el){el.setStyle('position', value)}); 
	$ES('#eNewsletter fieldset a').each(function (el){el.setStyle('position', value)}); 
	$ES('#footerLinks dl').each(function (el){el.setStyle('position', value)}); 	
	$ES('div.secondaryModule').each(function (el){el.setStyle('position', value)}); 
	$ES('div.moreAssetsWrap').each(function (el){el.setStyle('position', value)}); 
	$ES('div.relatedAssetsWrap').each(function (el){el.setStyle('position', value)}); 
}

function changeZindexStyle(value) {
	$ES('#previousAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#nextAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#previousRelatedAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#nextRelatedAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#noPreviousRelatedAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#noNextRelatedAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#noNextAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#noPreviousAsset').each(function (el){el.setStyle('z-index', value)});
	$ES('#body #content #main #mainContent div.fiveUp div.module .moduleIcon').each(function (el){el.setStyle('z-index', value)});
	$ES('#body #content #main #mainContent div.threeModulesUp div.module .moduleIcon').each(function (el){el.setStyle('z-index', value)});
	$ES('#body #content #main #mainContent .showcasePane div.module .moduleIcon').each(function (el){el.setStyle('z-index', value)});
	$ES('#body #content #main #mainContent .showcaseRelatedPane div.module .moduleIcon').each(function (el){el.setStyle('z-index', value)});
}

var Modalizer = new Class({
	defaultModalStyle: {
		display:'block',
		position:'absolute',
		top:'0px',
		left:'0px',	
		'z-index':1,
		'background-color':'#ffffff',
		opacity:0.00001
	},
/*	Property: setOptions
		Sets the options for the modal overlay.
		
		Arguments:
		options - an object with name/value definitions
		
		See <modalShow> for options list.
	*/

		setModalOptions: function(options,modal_height){
		
		if(!window.ie6) {
			var modal_height = window.getScrollHeight()+'px';
		} else {
			var modal_height = window.getScrollHeight()+300+'px';
		}
		if ($('addEditTeamMembersForm')){
			var elToHide = Class.empty;
		} else {
			var elToHide = 'select';
		}
		
		
		this.modalOptions = $merge({
			width:(window.getScrollWidth()-21)+'px',
			//height:(window.getScrollHeight()+300)+'px',
			height:modal_height,
			elementsToHide: elToHide,
			onModalHide: Class.empty,
			onModalShow: Class.empty,
			hideOnClick: false,
			element: false,
			modalStyle: {},
			updateOnResize: true
		}, this.modalOptions, options || {});
	},
	resize: function(){
		if($('modalOverlay')) {
			if(!window.ie6) {
				$('modalOverlay').setStyles({
					width:window.getWidth()+'px',
					height:window.getScrollHeight()+'px'
				});
			}
		}
	},
/*	Property: setModalStyle
		Sets the style of the modal overlay to those in the object passed in.
		
		Arguments:
		styleObject - object with key/value css properties
		
		Default styleObject:
(start code){
	'display':'block',
	'position':'fixed',
	'top':'0px',
	'left':'0px',	
	'width':'100%',
	'height':'100%',
	'z-index':this.modalOptions.zIndex,
	'background-color':this.modalOptions.color,
	'opacity':this.modalOptions.opacity
}(end)

	The object you pass in can contain any portion of this object, and the options you specify will overwrite the defaults; any option you do not specify will remain.		
	*/
	setModalStyle: function (styleObject){
		this.modalOptions.modalStyle = styleObject;
		this.modalStyle = $merge(this.defaultModalStyle, {
			width:this.modalOptions.width,
			height:this.modalOptions.height
		}, styleObject);
		if($('modalOverlay'))$('modalOverlay').setStyles(this.modalStyle);
		return(this.modalStyle);
	},
/*	Property: modalShow
		Shows the modal window.
		
		Arguments:
		options - key/value options object
		
		Options:
		elementsToHide - comma seperated string of selectors to hide when the overlay is applied;
			example: 'select, input, img.someClass'; defaults to 'select'
		modalHide - the funciton that hides the modal window; defaults to 
			"function(){if($('modalOverlay'))$('modalOverlay').hide();}"
		modalShow - the function that shows the modal window; defaults to
			"function(){$('modalOverlay').setStyle('display','block');}"
		onModalHide - function to execute when the modal window is removed
		onModalShow - function to execute when the modal window appears
		hideOnClick - allow the user to click anywhere on the modal layer to close it; defaults to true.
		modalStyle - a css style object to apply to the modal overlay. See <setModalStyle>.
		updateOnResize - (boolean) will update the size of the modal layer to fit the window if the user resizes; defaults to true.
	*/
	modalShow: function(options){
		this.setModalOptions(options||{});
		var overlay = null;
		if($('modalOverlay')) overlay = $('modalOverlay');
		if(!overlay) overlay = new Element('div').setProperty('id','modalOverlay').injectAfter(this.modalOptions.element);
		overlay.setStyles(this.setModalStyle(this.modalOptions.modalStyle));
		if(window.ie6) {
			overlay.setStyle('position','absolute');
			overlay.setStyle('width', '975px');
			changePositionStyle('static');
		}
		if (!window.ie) {
			changeZindexStyle('0');	
		}
		
		$('modalOverlay').removeEvents('click').addEvent('click', function(){
			this.modalHide(this.modalOptions.hideOnClick);
		 }.bind(this));
		this.bound = this.bound||{};
		if(!this.bound.resize && this.modalOptions.updateOnResize) {
			this.bound.resize = this.resize.bind(this);
			window.addEvent('resize', this.bound.resize);
		}
		this.modalOptions.onModalShow();
		this.togglePopThroughElements(0);
		overlay.setStyle('display','block');
		return this;
	},
/*	Property: modalHide
		Hides the modal layer.
	*/
	modalHide: function(override){
		if(override === false) return false; //this is internal, you don't need to pass in an argument
		this.togglePopThroughElements(1);
		this.modalOptions.onModalHide();
		if($('modalOverlay'))$('modalOverlay').setStyle('display','none');
		if(this.modalOptions.updateOnResize) {
			this.bound = this.bound||{};
			if(!this.bound.resize) this.bound.resize = this.resize.bind(this);
			window.removeEvent('resize', this.bound.resize);
		}
		if(window.ie6) {
			changePositionStyle('relative');
		}
		
		return this;
	},
	togglePopThroughElements: function(opacity){
		if((window.ie6 || (window.gecko && navigator.userAgent.test('mac', 'i')))) {
			$$(this.modalOptions.elementsToHide).each(function(sel){
				sel.setStyle('opacity', opacity);
			});
		}
	}
});
//legacy namespace
var modalizer = Modalizer;
/* do not edit below this line */