// JScript File

var UI = {
	__SHOW_HIDE_ELEMENTS: [],
	// each key is the container, the value is an array, 1 item shows, other item hides
	ShowHideElements: {
		Add: function( options ) {
			if( ! UI.ShowHideElements.__INIT ) {
				window.addEvent('domready', UI.ShowHideElements.Init );
				UI.ShowHideElements.__INIT = true;
				UI.ShowHideElements.__ELEMENTS = [];
			}
			UI.ShowHideElements.__ELEMENTS.push( options );
		},
		Init: function() {
			UI.ShowHideElements.__ELEMENTS.each( function( options ) {
				var containerEle = $(options.AttachTo);
				var triggerYesEle = $(options.OnEle);
				var triggerNoEle = $(options.OffEle);
				
				if( triggerYesEle && triggerNoEle && containerEle ) {
					triggerYesEle.containerEle = containerEle;
					triggerNoEle.containerEle = containerEle;
						
					triggerYesEle.addEvent( 'click', function() {
						this.containerEle.addClass("hidden");
					});
					
					triggerNoEle.addEvent( 'click', function() {
						this.containerEle.removeClass("hidden");
					});
					
					if( triggerNoEle.checked ) {
						triggerNoEle.containerEle.removeClass("hidden");
					} else {
						triggerNoEle.containerEle.addClass("hidden");
					};
				}else if (triggerNoEle && containerEle){
				    triggerNoEle.addEvent( 'click', function() {
						if( triggerNoEle.checked ) {
						containerEle.addClass("hidden");
					    } else {
						    containerEle.removeClass("hidden");
					    };
					});
				}
			});
		}
	},
	ShowLoadingWindow: {
		Add: function( id ) {
			if( ! UI.ShowLoadingWindow.__INIT ) {
				window.addEvent( 'domready', UI.ShowLoadingWindow.Init );
				UI.ShowLoadingWindow.__INIT = true;
				UI.ShowLoadingWindow.__ELEMENTS = [];
			}
			UI.ShowLoadingWindow.__ELEMENTS.push( id );
		},
		Init: function() {
			
		}	
	}
};

Element.extend({
	/*
	 *
	 */
	
	/* 
	 * fadeIn() - 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.
	 */
    FadeIn: function( callback ) {
		var theFx = new Fx.Styles( this, {
			duration: Lightbox.Settings.FadeDuration, 
			wait: false,
			onStart: function() {
				if( Lightbox.__FADE_IN_ELEMENT ) {
					Lightbox.__FADE_IN_ELEMENT.Hide();
				};
				
				this.CenterEle();
				$(document.body).addClass('fixSelect');
				this.element.Show();
				Lightbox.__FADE_IN_ELEMENT = this.element;
			},
			onComplete: function() {
				this.CenterEle();
				this.element.addClass('undoFixSelect');
				if( $type( callback ) == 'function' ) { 
					callback();
				}
			}
		});
	
		// if( theEle.hasClass( 'positionHidden' ) ) {
		//		theEle.__POSITION_HIDDEN = true;
		//		theEle.removeClass( 'positionHidden' );
		// } else {
		//		theEle.removeClass( UI.settings.hiddenClass );
		// }
		
		theFx.CenterEle = Lightbox.Show( this );
		
		theFx.set({'opacity': 0});
		theFx.start({ 'opacity': 1});
		
		theFx.CenterEle();
	},
	/* 
	 * fadeOut() - 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.
	 */
	FadeOut: function( callback ) {
		this.removeClass('undoFixSelect');
		var theFx = new Fx.Styles(this, { duration: Lightbox.Settings.FadeDuration, wait: false,
			onComplete: function() { 
				this.element.Hide();
				
				$(document.body).removeClass('fixSelect');
				this.element.addClass('undoSelect');
				
	            if( $type( callback ) == "function" ) {
	                callback();
	            }
	            
	            Lightbox.Hide();
			}
		});
		theFx.set({'opacity': 1 });
		theFx.start({'opacity': 0 });
	},
	Hide: function() {
		this.addClass('hidden');
	},
	Show: function() {
		this.removeClass('hidden');
	}
});


var Lightbox = { 
	/*
	 *
	 * showLightBox
	 *
	 */
	Show: function( theEle ) {
		var lightBoxEle = $('lightbox');
		if( ! lightBoxEle ) {
			lightBoxEle = new Element( 'div', {
				'class':'lightboxContainer hidden',
				'id': 'lightbox'
			});
			
			lightBoxEle.addEvent('click', function() {
				Lightbox.__FADE_IN_ELEMENT.FadeOut();
			});//*/
			$(document.body).adopt( lightBoxEle );
		}
		
		/*
		 * fix CSS position fixed, calculate vertical position and stay about 40px from top
		 */
		var centerEle = function() { 
			
			var eleWidth = theEle.offsetWidth;
			var windowWidth = $(document.body).getSize().size.x;
			theEle.setStyle( 'left', ((windowWidth - eleWidth) / 2) );
			if( window.ie6 ) {
				theEle.setStyle( 'top', window.getScrollTop() + 40 );
			}
			
			var lightboxHeight = $(document.body).getSize().size.y + 20;
				if( lightboxHeight < window.getHeight() ) {
					lightboxHeight = window.getHeight();
				}
				lightBoxEle.setStyles({
					'width': '100%', // test.size.x,
					'height': lightboxHeight
				});		
		};
		
		window.addEvent('resize', centerEle );
		window.addEvent('scroll', centerEle );
		centerEle();
		lightBoxEle.Show();
		
		return centerEle;
	},
	Hide: function() {
		var lightBoxEle = $('lightbox');
		if( lightBoxEle ) {
			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 = HTMLFactory.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
		});
	}*/
};

var HTMLFactory = {	
	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]
						}
					}).set('html', key )
				);
			}
			
			buttonEles.each(function(ele){
				ele.addEvent('click', function() {
					Lightbox.FadeOut(newWindow);
				});
			});	
		}
		
		var innerContent = [
			new Element( 'a', {
				'class': 'close',
				'href': "javascript:Void();"
			}).set('html', '[x]'),
			new Element( 'h2' ).set('html', str.title ),
			new Element( 'p', {
				'class': 'message'
			}).set('html', 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'
			}
		}
	}
}