
	/*
	JS
	--------------------------------------------------------------------------------------------
	@site			sho.com (beta)
	@file			Overlay.js
	@author			dpaul
	@modified		10.27.09
	@desc			Manager class for all UI Helpers that need to use Overlay Effect
	@note			ffox throws css bug on init(), not much we can do about it..
	@note			"Unexpected token in attribute selector 'HTMLDivElement'"
	@depend			prototype, scriptaculous, SHO.Utils
	
	/* =:Overlay
	-------------------------------------------------------------------------------------------*/
	if( SHO == undefined ) var SHO = {};
	
	SHO.Overlay = function()
	{	
		var _ui = {};
		var _visible = false;
		var _width = 0;
		var _height = 0;
		var _alpha = 0.8;
		var _bgcolor = "#000000";
		var _onComplete;
		var _onCompleteScope;
		var _purge = true;
		var _tweening = false;
		var _events = {
			onOpen:(function(){}),
			onClose:(function(){}),
			scope:window
		}
	
		/* =:Startup
		  ---------------------------------------------------------------------------------------*/
		function init()
		{
			build();
			setHandlers(); // setHandlers.defer() was problematic.
		}
	
		function build()
		{
			$$('body')[0].insert(['',
				'<div id="overlay-shader"></div>',
				'<div id="overlay-outer">',
					'<div id="overlay-inner">',
						'<div id="overlay-closer"></div>',
						'<div id="overlay-content"></div>',
					'</div>',
				'</div>'
			].join(''));
		}
	
		
		function setHandlers()
		{
			// pack useful element pointers into ui object, stored by abbreviated id
			$w( 'overlay-outer overlay-inner overlay-closer overlay-content overlay-shader').each(function(id){
				var key = id.split('-')[1];
				_ui[ key ] = key == 'shader' || key == 'outer' ? cloak($(id)) : $(id);
			});
	
			// set close handlers
			_ui.closer.observe( 'click', closeOverlay );
			_ui.shader.observe( 'click', closeOverlay );
			
			// set handler to update shader when window is resized
			window.onresize = (function(){
				if( !_tweening && _width !== 0 && _height !== 0) update(); 
			});
		}
		
		function cloak(ele)
		{
			new Effect.Opacity( ele.hide(), { duration: 0, to:0 });
			return ele;
		}
		
		function uncloak(ele)
		{
			new Effect.Opacity( ele.show(), { duration: 0, to:1 });
			return ele;
		}
		
		/* =:Runtime
		---------------------------------------------------------------------------------------*/
		function openOverlay(cfg)
		{	
			if(cfg)
			{
				$w('onOpen onClose scope').each( function(p){
					_events[p] = cfg[p] || _events[p];
				});
			}
		
			_tweening = true;
			new Effect.Parallel([	
				new Effect.Opacity( _ui.shader.show(), { 
					to: _alpha
				}),
				new Effect.Opacity( _ui.outer.show(), { 
					to: 1.0
				})],
			{ 
				duration:0.25,
				afterFinish:(function(){
					_tweening = false;
					_events.onOpen.apply(_events.scope);
				})
			});
		}
		
		function closeOverlay()
		{
			_tweening = true;
			new Effect.Parallel([	
				new Effect.Opacity( _ui.shader, { 
					from:_alpha, to:0
				}),
				new Effect.Opacity( _ui.outer, { 
					from:1.0, to:0
				})],
			{ 
				duration:0.25,
				afterFinish:(function(){
					_ui.shader.hide();
					_ui.outer.hide();
					_tweening = false;
					if( _purge ) purgeContent(); 
					_events.onClose.apply(_events.scope);
				})
			});
		}
		
		function update()
		{
			updateShader();
			updateWrapper();
		}
		
		function updateShader()
		{
			_ui.shader.setStyle({ 
				width:  SHO.Utils.getPageSize()[0]+'px', 
				height:  SHO.Utils.getPageSize()[1]+'px',
				background: _bgcolor
			});	
		}
		
		function updateWrapper()
		{
			var ybounds = document.viewport.getHeight();
			var xbounds = document.viewport.getWidth();
			var offs =  document.viewport.getScrollOffsets();
			var left = Math.floor(( xbounds - _width ) / 2) + offs[0];
			var top = Math.floor(( ybounds - _height ) / 2) + offs[1] - 15;
		
			_ui.outer.setStyle({ 
				left:left+'px', 
				top:top+'px',
				width:_width+'px', 
				height:_height+'px'
			});
			_ui.content.setStyle({ 
				width:_width+'px', 
				height:_height+'px'
			});
		}
		
		function resize(w,h)
		{
			_width = w;
			_height = h;
			update();
		}
		
		function updateContent(c)
		{
			if( typeof c !== 'string' ) log('Error: Overlay.update() expects a string');
			_ui.content.update(c);
		}
	
		/* prevent flash audio from playing in background, for example */
		function purgeContent()
		{
			_ui.content.update('');
		}
	
		function setPurge(p){
			_purge = p; 
		}
		
		/* =:Reveal as Public
		---------------------------------------------------------------------------------------*/
		return {
			init:init,
			open:openOverlay,
			close:closeOverlay,
			resize:resize,
			update:updateContent,
			setPurge:setPurge
		};
		
	}();
	
	document.observe("dom:loaded", function() { 
		SHO.Overlay.init();
	});	
	

