var UI = { 
    settings: {
		blankImage: '/App_Themes/Default/img/blank.gif',
        closeButton: 'a.closeButton',
		fadeDuration: 300,
		hiddenClass: 'hide',
		selectedClass: 'selected',
		voidLink: 'javascript:Void();',
		lightBox: { 
			containerId: 'lightbox',
			containerClass: 'lightboxContainer'
		}
	},
	init: function() {
	},
	/*
	 *
	 * showLightBox
	 *
	 */
	showLightBox: function( theEle ) {
		var lightBoxEle = $(UI.settings.lightBox.containerId);
		
		if( ! lightBoxEle ) {
			lightBoxEle = new Element( 'div', {
				'class': UI.settings.lightBox.containerClass + " " + UI.settings.hiddenClass,
				'id': UI.settings.lightBox.containerId
			});
			$(document.body).adopt( lightBoxEle );
		}
		
		var centerEle = function() { 
			if( document.all ) {
				var theWidth = theEle.offsetWidth;
				var windowWidth = $(document.body).getSize().x;
				if( ! theEle.hasClass('signIn') && ! theEle.hasClass('familyList') ) {
					theEle.setStyle( 'left', ((windowWidth - theWidth) / 2) );
					if( Browser.Engine.trident ) {
						theEle.setStyle( 'top', window.getScrollTop() + 40 );
					}
				}
			}
			
			var lightboxHeight = $(document.body).getSize().y + 20;
				if( lightboxHeight < window.getScrollHeight() ) {
					lightboxHeight = window.getScrollHeight();
				}
				lightBoxEle.setStyles({
					'width': '100%', // test.size.x,
					'height': lightboxHeight
				});	
		};
		
		window.addEvent('resize', centerEle );
		window.addEvent('scroll', centerEle );
		
		centerEle();
		
		lightBoxEle.removeClass( UI.settings.hiddenClass );
	},
	/*
	 *
	 *
	 */
	 hideLightBox: function( theEle ) {
		var lightBoxEle = $(UI.settings.lightBox.containerId);
		if( lightBoxEle ) {
			lightBoxEle.addClass( UI.settings.hiddenClass );	
		}
	},
	/* 
	 * fadeInElement() - fades the element 'theEle' in (sets opacity from 0 to 1 in UI.settings.fadeDuration milliseconds
	 * @params
	 *     theEle - this is the main container ele, typically a window that will be faded in.
	 */
  fadeInElement: function( theEle, callback ) {
		var theFx = new Fx.Elements(theEle, {
			duration: UI.settings.fadeDuration, 
			onComplete: function() {
				theEle.addClass('undoFixSelect');
				if( $type( callback ) == "function" ) { 
					callback();
				}
			},
			onStart: function() {
        if( theEle.hasClass( 'positionHidden' ) ) {
            theEle.__POSITION_HIDDEN = true;
            theEle.removeClass( 'positionHidden' );
        } else {
            theEle.removeClass( UI.settings.hiddenClass );
        }
			}
		});
		
		theEle.setStyles({ 'opacity': 0});
    // theFx.set({ 'opacity': 0 });	
		theFx.start({ 0: {'opacity': [0, 1] } });
		
		$(document.body).addClass('fixSelect');
    
		UI.showLightBox( theEle );
	},
	/* 
	 * fadeOurElement() - fades the element 'theEle' our (sets opacity from 1 to 0 in UI.settings.fadeDuration milliseconds
	 * @params
	 *     theEle - this is the main container ele, typically a window that will be faded in.
	 */
	fadeOutElement: function( theEle, callback, lightBox ) {
		theEle.removeClass('undoFixSelect');
		var theFx = new Fx.Elements(theEle, { 
      duration: UI.settings.fadeDuration, 
      wait: false,
      onComplete: function() { 
        if( theEle.__POSITION_HIDDEN ) { 
            theEle.addClass( 'positionHidden' );
        } else {
            theEle.addClass( UI.settings.hiddenClass ); 
        }
        if( ! lightBox ) {
          UI.hideLightBox( theEle );
        }
        $(document.body).removeClass('fixSelect');
        if( $type( callback ) == "function" ) {
            callback();
        }
			}
		});
		
		theFx.start({ 0: { 'opacity': [1, 0] } });
	},
    /*
	 * initCloseButton() - generic close functionality, all it does is fade the window out and setup the link.
	 */
	initCloseButton: function( ele ) {
		try {
			var closeEle = ele.getElement( UI.settings.closeButton );
			closeEle.addEvent( 'click', function() {
				UI.fadeOutElement( ele );
			});
			closeEle.href = UI.settings.voidLink;		
		} catch( e ) { }
		return closeEle;
	}
};