Element.implement({
	/* 
	 * FadeIn() - fades the element in (sets opacity from 0 to 1) in LightBox.Settings.FadeDuration milliseconds
	 * @params
	 *     callback - option, call this function after the element has faded in
	 */
    FadeIn: function( callback ) {		
		this.centerEle = function() {

			var eleWidth = this.offsetWidth;
			var windowWidth = $(document.body).getSize().x;
			this.setStyle( 'left', ((windowWidth - eleWidth) / 2) );
			
			//if( Browser.Engine.trident4 ) {
				this.setStyle( 'top', window.getScrollTop() + 40 );
			//}
		}
		    
		var theFx = new Fx.Elements( this, {
			duration: LightBox.Settings.FadeDuration, 
			wait: false,
			onStart: function() {
			    var ele = this.elements[0];
				// only allow one element shown
				if( LightBox.__FADE_IN_ELEMENT ) {
					LightBox.__FADE_IN_ELEMENT.Hide();
				};
				
				LightBox.__FADE_IN_ELEMENT = ele;

				ele.Show();
				
				ele.centerEle();

				$(document.body).addClass('fixSelect');
				
				theFx.CenterEle = LightBox.Show( ele );
				
				ele.__ORIGINAL_POSITION = ele.getStyle('position');
				ele.__ORIGINAL_Z_INDEX = ele.getStyle('z-index');
				
				ele.setStyle('position', 'absolute');
				ele.setStyle('z-index', '1000');
			},
			onComplete: function() {
			    var ele = this.elements[0];
				ele.addClass('undoFixSelect');
				if( $type( callback ) == 'function' ) { 
					callback();
				}
			}
		});
	
		// if( theEle.hasClass( 'positionHidden' ) ) {
		//		theEle.__POSITION_HIDDEN = true;
		//		theEle.removeClass( 'positionHidden' );
		// } else {
		//		theEle.removeClass( UI.settings.hiddenClass );
		// }
		
		
		this.__HIDDEN = ( this.IsHidden() );
		
		// alert("the element is hidden: " + this.__HIDDEN );
		
		window.addEvent( 'resize', this.centerEle.bind ( this ) );
		window.addEvent( 'scroll', this.centerEle.bind ( this ) );
		
		this.centerEle();
	
		theFx.set({'0': {'opacity':0}});
		theFx.start({'0': {'opacity':1}});
	},
	/* 
	 * FadeOut() - fades the element out (sets opacity from 1 to 0) in LightBox.Settings.FadeDuration milliseconds
	 * @params
	 *     callback - optional, call this fuction after the element has faded out
	 */
	FadeOut: function( callback ) {
		this.removeClass('undoFixSelect');
		var theFx = new Fx.Elements(this, { duration: LightBox.Settings.FadeDuration, wait: false,
			onComplete: function() { 
			    var ele = this.elements[0];
				$(document.body).removeClass('fixSelect');
				ele.removeClass('undoSelect');
				
	            LightBox.Hide();
	            
	            ele.setStyle('position', ele.__ORIGINAL_POSITION);
	            ele.setStyle('z-index', ele.__ORIGINAL_Z_INDEX);			
	            
				ele.Hide();
				
				ele.setStyle('opacity', 1);

	            if( ! ele.__HIDDEN ) {
					ele.Show();
					ele.setStyle("display", "block");
				}
				
				// cleanup
				ele.__NOT_HIDDEN = null;
				ele.__ORIGINAL_Z_INDEX = null;
				ele.__ORIGINAL_POSITION = null;
				
	            if( $type( callback ) == "function" ) {
	                callback();
	            }				
			}
		});
		theFx.set({'0': {'opacity':1}});
		theFx.start({'0': {'opacity':0}});
	}
});

var LightBox = { 
	Add: function( options ) {
		window.addEvent('domready', function() {
		
			// init the close button
			LightBox.InitCloseButton( options.LightBoxId );
			try { 
			    if( $(options.LinkId).href != null ) {
				    $(options.LinkId).href = "javascript:Void();";
			    }
			    // console.log( options.LinkId );
			    // attach the event to the LightBox	
			    $(options.LinkId).addEvent('click', function() {
				    $(options.LightBoxId).FadeIn();
			    });
			} catch(e) { }
		});
	},
	GetInstance: function( options ) {
		var instance = $('LightBox');
		if( ! instance ) {
			instance = new Element( 'div', {
				'class':'LightBoxContainer hidden',
				'id': 'LightBox'
			});
			
			$(document.body).adopt( instance );
			
			if( options ) {
				if( options.CloseLightBoxOnClick ) {
					instance.addEvent('click', function() {
						if( LightBox.__FADE_IN_ELEMENT ) {
							LightBox.__FADE_IN_ELEMENT.FadeOut();
						}
					});
				}
			}
		}
		return instance;
	},
	/*
	 *
	 * showLightBox
	 *
	 */
	Show: function( theEle ) {
		var LightBoxEle = LightBox.GetInstance({ CloseLightBoxOnClick: true });
		
		if( Browser.Engine.trident4 ) {
			$$("div.regField select").addClass("hidden");
		}
			
		/*
		 * fix CSS position fixed, calculate vertical position and stay about 40px from top
		 */
		var fixLightBox = function() { 
			
			var LightBoxEle = LightBox.GetInstance();
			
			/*/
			var LightBoxHeight = $(document.body).getSize().y;
			if( LightBoxHeight < window.getHeight() ) {
				LightBoxHeight = window.getHeight();
			}
			/**/
			
			var LightBoxHeight = document.body.clientHeight;
			
			LightBoxEle.setStyles({
				'width': '100%', // test.size.x,
				'height': LightBoxHeight
			});		
		};
		
		window.addEvent('resize', fixLightBox );
		window.addEvent('scroll', fixLightBox );
		
		fixLightBox();
		
		LightBoxEle.Show();
	},
	Hide: function() {
		var LightBoxEle = $('LightBox');
		if( LightBoxEle ) {
				
		   //if( Browser.Engine.trident4 ) {
			   $$("div.regField select").removeClass("hidden");
		   //}
			LightBoxEle.Hide();	
		}
	},
    /*
	 * initCloseButton() - generic close functionality, all it does is fade the window out and setup the link.
	 */
	InitCloseButton: function( ele ) {
		try {
			var closeEle = $(ele).getElement('a.close');
			closeEle.addEvent( 'click', function() { 
				$(ele).FadeOut();
			});
			closeEle.href = "javascript:Void();";		
		} catch( e ) { }
		return closeEle;
	},
	ShowMessage: function( message, options, fadeInCallback ) {
		var newWindow = LightBox.createGenericWindow(message, options);
		newWindow.Hide();
		
		$(document.body).adopt(newWindow);
		
		LightBox.InitCloseButton(newWindow);
		
		newWindow.FadeIn(fadeInCallback);
	},
	TestConfirm: function() { 
		var buttons = {
			'yes': function(){ 
				alert('yes');
			},
			'no': function(){ 
				alert('no');
			},
			'ok': function() {
				alert('ok');
			},
			'cancel': function() {
				alert('cancel');
			}
		};
		LightBox.ShowMessage( { 
			'title': 'Title of Message',
			'message': 'Another line of text even though this is much longer. is it wrapping?<br />You can even make <a href="javascript:alert(\'an alert to demo js functionality\');">a link</a> if you want.'
		}, { 'buttons': buttons } );
	},
	ShowLoading: function() {
		LightBox.ShowMessage({
			'title': 'Processing. Please Wait...'
		},{
			'windowClass': 'loadingWindow'
		});
	},
	Settings: {
		FadeDuration: 300
	},
	/*ShowConfirm: function( title, message, clientId) { 
		UI.showMessage({
			'title': title,
			'message': message
		}, {
			'yes': function() {
			    setTimeout("__doPostBack('" + clientId + "','');", 1);
			},
			'no': Void
		});
	},*/
	createGenericWindow: function(str, options) {
		var newWindow;
	
		var buttonEles = [];	
		
		if( options.buttonCalbacks ) {
			for( var key in options.buttons  ) {
				buttonEles.push( 
					new Element( 'a', {
						'href': 'javascript:Void()',
						'class' : key + 'Button genericButton',
						'events': {
							'click': options.buttons[key]
						}
					}).setHTML( key )
				);
			}
			
			buttonEles.each(function(ele){
				ele.addEvent('click', function() {
					LightBox.FadeOut(newWindow);
				});
			});	
		}
		
		var innerContent = [
			new Element( 'a', {
				'class': 'close',
				'href': "javascript:Void();"
			}).setHTML('[x]'),
			new Element( 'h2' ).setHTML( str.title ),
			new Element( 'p', {
				'class': 'message'
			}).setHTML( str.message ),
			new Element( 'div', {
				'class': 'genericWindowButtonContainer '
			}).adopt( buttonEles )
		];
		
		newWindow = new Element('div', {
			'class': 'genericWindowContainer'
		}).adopt( 
			new Element( 'div', {
				'class': 'window clearfix'
			}).adopt( 
				new Element('div', {
					'class': 'windowInner clearfix'
				}).adopt( innerContent )
			)
		);
		if( options.windowClass ) {
			newWindow.addClass( options.windowClass );
		}
		
		return newWindow;
	},
	settings: { 
		window: {
			'yes': {
				'width': '46',
				'height': '20'
			},
			'no': {
				'width': '42',
				'height': '20'
			},
			'ok': {
				'width': '43',
				'height': '20'
			},
			'cancel': {
				'width': '63',
				'height': '20'
			}
		}
	}
};