/* 	
	
	FlexBox, another Lightbox clone, by Marty Stake
	
	Requires prototype.js 1.6.  
	If you want effects, you need Scriptaculous.	
	Don't forget the css file as well.	
	
	Unique: has anchored contained tooltips as well as modal windows and
	you can set your own wrapper code.  It's pretty flexible.
	
	Version .6
	
*/

var FlexBox = Class.create( {
	
	initialize: function(element, options) {
		
		this.isIE6 = ( typeof document.body.style.maxHeight === 'undefined' );
		
		if (arguments.length > 1) {
		
			if (typeof element == 'string') {
				this.element = ( (element.indexOf('.') < 0) && (element.indexOf('#') < 0) ) ? $(element) : $$(element);
			}
			else {
				this.element = element;
			}
		}
		else {
			this.element = options = element;
		}
		
		this.options = {
			/* you can set these in the instantiation or the CSS */
			fade: true, // whether the overlay fades or not //
			overlayColor: '#666',
			opacity: .6,
			speed: .2,
			width: 'auto', // the width of the popup //
			height: 'auto', // the height of the popup //
			contentClass: 'default',
			popupUpdater: 'popup-content',
			closeClass: 'close',
			action: 'click',
			closeOnMouseOut: true,
			preservePopup: true,
			popupCloseOnMouseOut: true,
			position: 'fixed',
			offsetTop: 0,
			offsetLeft: 0,
			noFollow: true,
			inverseContentClass: 'inverse',
			orient: 'TR',
			reorient: true,
			sticky: false,
			delay: 400,
			imageLocation : '/images/flexbox/',
			color : '#cccccc',
			style : 'default',
			radius: 3 // or 2
		}
		
		Object.extend( this.options, options || {} );

		this.originalWidth = this.options.width;
		this.originalHeight = this.options.height;
		this.showDelay = null;
		
		if( this.options.mode == 'tooltip' ) {
			this.options.overlayColor = 'transparent';
			this.options.opacity = 0;
			this.options.fade = false;
			this.options.position = 'relative';
			this.options.contentClass = ( this.options.contentClass == 'popup-content' ) ? 'tooltip' : this.options.contentClass;
		}
	
		this.setup();
	
		this.element.each(function(element) {
			this.setupShowTarget(element);
		}.bind(this));
		
	},
	
	setWidth: function(width) {
		this.options.width = width;
	},
	
	setHeight: function(height) {
		this.options.height = height;
	},
	
	setup : function() {
		
		if ( !$( 'overlay' ) ) {
			var body = $( document.body );
			body.insert( new Element( 'div', { id : 'overlay' } ) ).insert( new Element( 'div', { id : 'popup-frame' } ) );
		}
		
		this.overlay = $( 'overlay' );
		this.popupFrame = $( 'popup-frame' );
		
		[ this.overlay, this.popupFrame ].invoke('setStyle', { 'display' : 'none' } )
		
		// cache the events so we can unbind //
		this.watchKeyEvent = this.watchKeyPress.bindAsEventListener(this);
		this.deactivateEvent = this.deactivate.bindAsEventListener(this);
		this.activateEvent = this.activate.bindAsEventListener(this);
		this.positionEvent = this.positionTo.bindAsEventListener(this);
		this.detectExitEvent = this.detectExit.bindAsEventListener(this, this.popupFrame)
	
		// IE6 problems are fixed here //
		if ( this.isIE6 ) {
			this.overlay.setStyle({ position :'absolute' });
			this.popupFrame.setStyle({ position : 'absolute' });
			$( document.body ).setStyle({ height: '100%' } );
			$( document.getElementsByTagName('html')[0] ).setStyle({ height : '100%' });
		}
	
	},
	
	setupShowTarget: function(element) {
		
		var link = element.href;
		
		link = link.split('?')[0];
		
		if (link.indexOf('#') > -1) {
			link = link.split('#')[1];
			$(link).style.display = 'none';
		}
		
		this.popupClass = this.options.popupClass || $w(element.className)[0];
		
		Event.observe( element, this.options.action, this.activateEvent );
		
		if( this.options.action != 'click' && this.options.noFollow )
			Event.observe(element, 'click', function(e) { e.stop() } );
		
		
	},
	
	watchKeyPress : function(e) {
	
		if (e.keyCode == Event.KEY_ESC) {
			this.deactivate(e);
		}
		
	},
	
	activate: function(e) {
	
		if ( FlexBox.showing ) return;
		
		if ( this.isIE6 ) {
			this._toggleTroubleElements('hidden');
		}
		
		// makes sure that the anchor text isn't in a span or em or something //
		if ( Event.element(e) ) {
			
			var target = Event.element(e);
			
			while ( !target.readAttribute('href') && target.nodeName != 'BODY') {
				target = target.parentNode;
			}
			
			var link = target.readAttribute('href');
			var title = target.readAttribute('title');
			
			this.originalElement = target;
		}
		
		// programmatic activation //
		else { 
		 	var link = e;
		}
		
		var query = '';
		
		// need this in case we just do bookmark links and we want to do width/height params in the link //
		
		if ( link.split('?')[1] ) {
			var query = link.split('?')[1].toQueryParams();
		}
		
		if ( query.width ) this.options.width = query.width;
		if ( query.height ) this.options.height = query.height;
		
		if ( !this.observing ) {		
			// add the event listeners to turn off the windows //
				Event.observe(document, 'keypress', this.watchKeyEvent);
				Event.observe('overlay', 'click', this.deactivateEvent);
			
			if ( this.options.mode != 'tooltip' ) 
				this.toggleOverlay();
			else 
				Event.observe(document, 'click', this.deactivateEvent);
		
			if ( this.options.mode == 'tooltip' ) {
			
				if ( this.options.closeOnMouseOut ) {
					
					if ( this.options.preservePopup ) {
						// make the popup hoverable //
						Event.observe(this.originalElement, 'mouseout', this.detectExitEvent);
					}
					else {
						// just use the element to tooltip // 
						Event.observe(this.originalElement, 'mouseout', this.deactivateEvent);
					}
				}
			
			}
		
			this.observing = true;
	
		}
		
		if (link.indexOf('#') < 0) {
			var pageToOpen = link;
		}
		else {
			var pageToOpen = link.split('?')[0];
			pageToOpen = pageToOpen.split('#')[1];
			var content = $(pageToOpen).innerHTML;
		}
		
		/* show the content! */
		
		// if the link isn't to a bookmark, we're in ajax/image mode //
		if( (link.indexOf('#') < 0) ) {
			
			if (this.options.remote) pageToOpen = this.options.remote;
				this.remote = true;
				
				// if its simply a link to an image, display the image in a flexbox //
				
				if( pageToOpen.indexOf('png') > 0 || pageToOpen.indexOf('gif') > 0 || pageToOpen.indexOf('jpg') > 0 || pageToOpen.indexOf('jpeg') > 0 ) {
				
					var content = new Element('img', { src : pageToOpen, width: this.options.width, height: this.options.height });
					
					if ( title ) {
						var details = new Element('div');
						details.insert(content);
						details.insert(new Element('p').update(title));
						content = details;
					}
					
					this.display( content );
				
				}
				
				else {
					this.getData( pageToOpen );
				}
			}	
				
		
		
		else {
			this.display( content );
		}
		
		
		if ( this.options.mode == 'tooltip' && this.options.popupCloseOnMouseOut ) {
			Event.observe(this.popupFrame, 'mouseout', this.detectExitEvent);
		}
		
		if(e) Event.stop(e);
	
	},
	
	toggleOverlay: function() {
	
		var bg = this.options.overlayColor || $('overlay').getStyle('background');
		
		$('overlay').setStyle({'background': bg });
	
		// sometimes AJAX popups screw up the height of the overlay, calculating only to 
		// the top of the viewport //
		if (this.isIE6 && $('overlay').style.display == 'none')
			$('overlay').setStyle({'height': $$('body')[0].getHeight() });
	
		if (this.options.fade && bg != 'none') {
			$('overlay').style.display == 'block' ? 
			new Effect.Fade('overlay', { duration: this.options.speed, from: this.options.opacity, to: 0 }) : 
			new Effect.Appear('overlay', { duration: this.options.speed, from: 0.0, to: this.options.opacity });
		}
		
		else {
		
			if(bg != 'none' && this.options.fade) $('overlay').setStyle({'opacity' : this.options.opacity } );
			$('overlay').style.display == 'block' ? $('overlay').style.display = 'none' : $('overlay').style.display = 'block';
		}
		
	}, 
	
	display: function(content) {
	
		if ( !this.popupContent ) {
			this.popupContent = new Element ( 'div', { id: 'popup-content' } );
			this.popupFrame.insert( this.popupContent );
		}
	
		if ( !this.wrappers && this.options.wrappers ) {
			this.wrappers = this.popupContent.insert( this.options.wrappers );
		}
		
		this.popupUpdater = $( this.options.popupUpdater );
		this.popupUpdater.update( content );
	
		this.popupContent.addClassName( this.options.contentClass );
		
		[this.popupFrame, this.popupContent, this.popupUpdater].invoke('setStyle', { 'display' : 'block', 'visibility' : 'hidden' } )
		
		// get the width and height of the popups and set them so we can position correctly later on //
		
		if ( this.options.rounded && !this.isIE6 ) {
			
			var b, bt, bb;
			
			b = ( this.options.radius == 3 ) ? 5 : 3;
			bt = bb = this.options.radius == 3 ? 2 : 1;
			
			this.popupContent.setStyle( {
				borderLeft: b + 'px solid ' + this.options.color,
				borderRight: b + 'px solid ' + this.options.color,
				borderTop: bt + 'px solid '  + this.options.color,
				borderBottom: bb + 'px solid '  + this.options.color	
			} )
		
		}
		
		var pcDims = this.popupContent.getDimensions();
		
		var padWidth = 0, padHeight = 0;
		
		// calculate the padding and borders from x and y so we can
		// center the content correctly by removing them from the style
		
		['padding-left', 'padding-right', 'border-left-width', 'border-right-width'].each( function(style) {
		
			padWidth += ( !parseInt( this.popupContent.getStyle(style) ) ) ? 0 : parseInt( this.popupContent.getStyle(style) );
		
		}.bind(this) );
		
		['padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width'].each( function(style) {
		
			padHeight += ( !parseInt( this.popupContent.getStyle(style) ) ) ? 0 : parseInt( this.popupContent.getStyle(style) );
		
		}.bind(this) );
		
		var popupWidth = (this.options.width == 'auto') ? pcDims.width : this.options.width;
		
		this.popupContent.style.width = popupWidth - padWidth + 'px';
		
		/* Interesting note here  If you have an automatic height and there is no width set on either the wrapper or the parent, the browser does not know how to calculate the height correctly. So,  let's re-calculate the height just in case. */
		
		if ( this.options.height == 'auto' ) pcDims.height = this.popupContent.getHeight();
		
		var popupHeight = (this.options.height == 'auto') ? pcDims.height : this.options.height;
		
		this.popupContent.style.height = popupHeight - padHeight + 'px';

		// -------- //
		
		if ( this.options.tail ) {
			this.tail = this.popupContent.wrap( new Element( 'div', { id : 'tail' } ) );
			this.tail.setStyle( { padding : '12px', visibility: 'hidden' });
		}
	
		if ( this.options.rounded && !this.isIE6 ) {
		
			['before', 'after'].each( function( where ) {
				
				for ( var rad = this.options.radius; rad > 0; rad-- ) {
				
					var bordWidth = popupWidth - rad;	
					
					var newStyle = { 
						height: '1px',
						fontSize: '0',
						backgroundColor : this.options.color,
						width : bordWidth - rad + "px",
						marginLeft : rad + "px"
					}
				
					var bar = new Element( 'div', { className : 'radius' } ).setStyle( newStyle );
					
					where == 'before' ?	this.popupContent.insert( { before : bar } )  : this.popupContent.insert( { after : bar } )
			
				}
			}.bind(this) );
		
		}
		
		
		// get all close targets and assign the deactivation //
		this.popupContent.select('.' + this.options.closeClass).each( function(el) {
			Event.observe(el, 'click', this.deactivateEvent);	
		}.bind(this) )
		
		// if we follow the mouse pointer on a tooltip 
		if ( this.options.sticky ) {
			Event.observe(this.originalElement, 'mousemove', this.positionEvent);
		}
	
		(this.options.position == 'absolute' || this.options.position == 'fixed') ? this.center(popupWidth, popupHeight) : this.positionTo();
	
		if (this.popupClass != '') {
			var insideTargets = this.popupContent.select('.' + this.popupClass);
				insideTargets.each(function(element) {
				this.setupShowTarget(element);
			}.bind(this));		
		}
	
		this.show();
		
	},
	
	show : function() {
		
		var delay = ( this.options.mode == 'tooltip' ) ? this.options.delay : 0;
		
		window.clearTimeout(this.showDelay);
		
		this.showDelay = window.setTimeout( function() {
		
			[this.popupFrame, this.popupContent, this.popupUpdater].invoke('setStyle', { 'visibility' : 'visible' } );
			
			if ( this.tail ) this.tail.setStyle( { 'visibility' : 'visible' } ); 
			
			this.originalElement.addClassName('on');
			
			FlexBox.showing = true;
			
		}.bind(this), delay )
	
	},
	
	center: function(width, height) {
	
		// width and height are the dimensions of the popup //
		
		var scrollPosition = self.pageYOffset ? self.pageYOffset : document.documentElement.scrollTop || document.body.scrollTop;
		
		var pageHeight = self.innerHeight ||  document.documentElement.clientHeight || document.body.clientHeight || 0;
		
		this.popupFrame.style.position = (this.options.position == 'absolute') ? 'absolute' : 'fixed';
		
		this.popupFrame.style.left = '50%';
		this.popupFrame.style.marginLeft = '-' + parseInt(width) / 2 + 'px';
		
		if (this.options.align == 'top') {
			this.popupFrame.style.top =  (this.options.position == 'absolute') ? scrollPosition + 'px' : 0;
			this.popupFrame.style.marginTop = '0';
		}
		
		else {	
		
			var viewportCenter = parseInt( (pageHeight - parseInt(height)) / 2);
			var absCenter = scrollPosition + viewportCenter;
		
			this.popupFrame.style.top =  (this.options.position == 'absolute') ? (absCenter + 'px') : '50%';
			this.popupFrame.style.marginTop = (this.options.position == 'absolute') ? '0' : '-' + parseInt(height) / 2 + 'px';
		}
		
		// IE6 problems are fixed here //
		if (this.isIE6) {
			this.popupFrame.style.top = scrollPosition;
			this.popupFrame.style.position = 'absolute';
			this.popupFrame.style.marginTop =  (this.options.align == 'top') ? '0' : ( ( ( pageHeight - parseInt(height) ) / 2) + 'px' );
		}
	
	},
	
	positionTo: function(e) {
					
			if ( !e )	{
				
				var xy = this.originalElement.cumulativeOffset();
				var x = xy.left; // left
				var y = xy.top; // top
				
				var oeDims = this.originalElement.getDimensions();
				var width = oeDims.width;
				var height = oeDims.height;
			
			}
			
			else {
				// when this.options.sticky is true, element is an event object //
				var x = Event.pointerX(e);
				var y = Event.pointerY(e);
				
				var width = 0;
				var height = 0;
				
			}
			
			var offset = {
				left : this.options.offsetLeft,
				top : this.options.offsetTop
			};
			
			if ( this.options.sticky ) {
				offset.left += 12; offset.top += 12;
				if ( this.options.tail ) {
					offset.left -= 10;
				}
			}
			
			var scrollPosition = self.pageYOffset ? self.pageYOffset : document.documentElement.scrollTop || document.body.scrollTop;
			
			var cumulativeTop = y - scrollPosition;
			
			// do we have a wrapper div or not? We have to know to calculate the bounds
			var divForDims = this.tail || this.popupContent; 
		
			var pcDims = divForDims.getDimensions();
			var popupWidth = pcDims.width;
			var popupHeight = pcDims.height;
		
			var windowDims = document.viewport.getDimensions();
			var windowWidth = windowDims.width;
			var windowHeight = windowDims.height;
			
			// do we have a container we are bounding to?
			if (this.options.container) {
				var container = $$(this.options.container)[0];
				var cDims = container.getDimensions();
				var cxy = container.cumulativeOffset();
			}
			
			var orient = this.options.orient.toUpperCase();
			
			if ( this.options.reorient ) {
			
				var bounds = {
					left : this.options.container ? cxy.left : 0,
					right : this.options.container ? cxy.left + cDims.width : windowWidth,
					top : this.options.container ? cxy.top - scrollPosition : 0,
					bottom: this.options.container ? cxy.top + cDims.height : windowHeight
				}
				
				var tooFar = {
					left : ( x - popupWidth - 2 - offset.left ) <= bounds.left,
					right: ( x + width + 2 + popupWidth + offset.left ) >= bounds.right,
					up: ( cumulativeTop - popupHeight - 2 - offset.top ) < bounds.top,
					down: ( cumulativeTop + height + popupHeight + 2 + offset.top  ) >= bounds.bottom
				};
				
				var opposites = {
					'T' : 'B',
					'L' : 'R',
					'R' : 'L',
					'B' : 'T'
				};
				
				if ( tooFar.left || tooFar.right || tooFar.up || tooFar.down ) {
				
					// ie6 hackola //
					if (this.isIE6)	this.popupFrame.setStyle( 'visibility: visible' );
						
					if (tooFar.left) {
						orient = orient.replace(/L/, opposites["L"]);
						//orient = orient.replace(/C/, "R");
					}
				
					if (tooFar.right) {
						orient = orient.replace(/R/, opposites["R"]);
						//orient = orient.replace(/C/, "L");
					}
					
					if (tooFar.up) {
						orient = orient.replace(/T/, opposites["T"]);
					}
				
					if (tooFar.down) {
						orient = orient.replace(/B/, opposites["B"]);
					}
					
					this.popupContent.addClassName(this.options.inverseContentClass);
						
				}
				
			}
			
			if ( this.tail ) this.tail.setStyle( { 
				backgroundRepeat: 'no-repeat' 
			} );
		
			var imageLocation = this.options.imageLocation + this.options.style + '/';
		
			// default is TR //
			switch(orient) {
				
				case 'TL':
					x = x - popupWidth;
					y = y - popupHeight;
					x = x - offset.left;
					y = y - offset.top;
					
					if ( this.tail ) this.tail.setStyle( { 
						backgroundPosition : '96% 100%',
						backgroundImage : 'url(' + imageLocation + 'br.gif)',
						paddingRight : '0'
					} );
					
					break;				
				
				case 'TC':
					x = x + (width / 2) - (popupWidth / 2);
					y = y - popupHeight;
					y = y - offset.top;
					
					if ( this.tail ) this.tail.setStyle( { 
						backgroundPosition : '50% 100%',
						backgroundImage : 'url(' + imageLocation + 'bc.gif)'
					} );
					
					break;		
				
				case 'TR':
					x = x + width;
					y = y - popupHeight;
					x = x + offset.left;
					y = y - offset.top;
					
					if ( this.tail ) this.tail.setStyle( { 
						backgroundPosition : '4% 100%',
						backgroundImage : 'url(' + imageLocation + 'bl.gif)',
						paddingLeft : '0'
					} );
					
					break;			
				
				case 'LM':
					x = x - popupWidth;
					y = y + (height / 2) - (popupHeight / 2) ;
					x = x - offset.left;
					
					if ( this.tail ) {
						
						this.tail.setStyle( { 
							backgroundPosition : '100% 50%',
							backgroundImage : 'url(' + imageLocation + 'rm.gif)'
						} );
						x = x - 16;
					}
					
					break;		
				
				case 'M':
					x = x + (width / 2) - (popupWidth / 2);
					y = y + (height / 2) - (popupHeight / 2) ;
					x = x + offset.left;
					break;		
				
				case 'RM':
					x = x + width;
					y = y + (height / 2) - (popupHeight / 2);
					x = x + offset.left;
					
					if ( this.tail ) {
						this.tail.setStyle( { 
							backgroundPosition : '0 50%',
							backgroundImage : 'url(' + imageLocation + 'lm.gif)'
						} );
						x = x + 16;
					}
					
					break;	
				
				case 'BL':
					x = x - popupWidth;
					y = y + height;
					x = x - offset.left;
					y = y + offset.top;
					if ( this.tail ) this.tail.setStyle( { 
						backgroundPosition : '96% 0',
						backgroundImage : 'url(' + imageLocation + 'tr.gif)',
						paddingRight : '0'
					} );
					break;
				
				case 'BC':
					x = x + width / 2 - popupWidth / 2;
					y = y + height;
					y = y + offset.top;
					
					if ( this.tail ) this.tail.setStyle( { 
						backgroundPosition : '50% 0',
						backgroundImage : 'url(' + imageLocation + 'tc.gif)'
					} );
		
					break;
				
				case 'BR':
					x = x + width;
					y = y + height;
					x = x + offset.left;
					y = y + offset.top;
					
					if ( this.tail ) {
						this.tail.setStyle( { 
							backgroundPosition : '4% 0',
							backgroundImage : 'url(' + imageLocation + 'tl.gif)',
							paddingLeft : '0'
						} );
						// look out for the finger mouse cursor //
						x = x + 4; y = y + 6;
					}
					
					break;
			}

			
			this.popupFrame.setStyle( { 
				marginLeft : 0,
				position : 'absolute',
				left : x + 'px',
				top : y + 'px'
			});
	
		
	},	
	
	
	detectExit : function(e, base) {
	
		// get the element that you left //
		var toElement = e.relatedTarget || e.toElement;
	
		// if we leave the window //
		if (toElement == null) return
	
		// check to see if a mouseover element is a child.  if so, return false so we dont run the mouseout //	
		if( $(toElement).descendantOf(base) || (toElement == this.originalElement) ) {
				return false;
			}
	
		// otherwise, you are leaving the box. //
		this.deactivate(e);

	},
	
	deactivate: function(e) {
	
		window.clearTimeout(this.showDelay);
		
		// make sure we don't click off the tooltip if we click inside, but if we click the close button, continue //
		if ( this.options.mode == 'tooltip')
			if( e.element().descendantOf(this.popupFrame) && e.type == 'click' && e.element().hasClassName(this.options.closeClass) == false)
				return;
	
		Event.stopObserving(document, 'keypress', this.watchKeyEvent);
		Event.stopObserving('overlay', 'click', this.deactivateEvent);
		Event.stopObserving(this.popupFrame, 'mouseout', this.detectExitEvent);
		Event.stopObserving(this.originalElement, 'mouseout', this.detectExitEvent);
		Event.stopObserving(this.originalElement, 'mouseout', this.deactivateEvent);
		
		this.observing = false;
		
		if ( this.isIE6 ) {
			this._toggleTroubleElements('visible');
		}
		
		if (this.options.mode != 'tooltip')
			this.toggleOverlay();
		else {
			
			Event.stopObserving(document, 'click', this.deactivateEvent);
			
			if (this.options.sticky) {
				Event.stopObserving(this.originalElement, 'mousemove', this.positionEvent);
			}
		}
		
		this.originalElement.removeClassName('on');
		
		// kill the tail wrapper if there is one //
		if ( this.tail ) {
			this.tail.replace( this.popupContent );
			this.tail = null;
		}
		
		this.options.width = this.originalWidth;
		this.options.height = this.originalHeight;
		
		// remove the event listeners on any close mechanisms //
		this.popupContent.select(this.options.closeClass).each( function(el) {
			
			Event.stopObserving(el, 'click', this.deactivateEvent);	
		
		}.bind(this) );
		
				
		this.popupFrame.style.display = 'none';
		this.popupFrame.setStyle( { 'marginTop' : 0 } );
		
		this.popupContent.remove();
		this.popupContent = null; 
		this.wrappers = null;
		 
		if ( this.options.rounded && !this.isIE6  ) {
			$$('div.radius').invoke('remove');
		}
		
		this.remote = false;
		
		if (this.options.noFollow)
			if(e) Event.stop(e);
		
		FlexBox.showing = false;
		
	}
	
});

FlexBox.showing = false;

FlexBox.AJAX = { 

		indicateLoad : function(state) {
			
			if (state == 'load') {
				// show spinner //
				var loading = '<p class=\"loading\">';
				loading += this.options.spinner ? '<img src=\"' + this.options.spinner + '\ " />' : 'Loading...'
				loading += '</p>';
				
				this.display( loading );
			}
			
		},
		
		getData: function(url) {
				
			this.remoteLoading = true;	
			var cacheNum = new Date().getTime();
			
			// so we dont get two re-centering windows //
			if ( (this.options.height != 'auto' || (this.options.position != 'absolute' || this.options.position != 'fixed')) ) 
				this.indicateLoad('load');
			
			var req = new Ajax.Request(url, {
				method: 'get',
				parameters: { ms: cacheNum },
				onSuccess: function(request) { 
		
					this.display( request.responseText ); 
					this.remoteLoading = false;
								
				}.bind(this),
				
				onComplete: function() { 
					if (typeof this.options.afterRemote == 'function') {
						this.options.afterRemote.apply(this);
					}
				}.bind(this),
				onFailure: function() { 
					alert('I in ur page messing up ur ajax'); 
				}
			});

		},
		
		//
	//	Hide Selects from the page because of IE.
	//     We could use iframe shims instead here but why add all the extra markup for one browser when this is much easier and cleaner.  From LightWindow and Mr. Stickman
	//
	_toggleTroubleElements : function(visibility) {
		
		var selects = document.getElementsByTagName('select');
		
		for(var i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
		
		if (this.options.hideFlash) {
				
				var objects = document.getElementsByTagName('object');
				for (i = 0; i != objects.length; i++) {
					objects[i].style.visibility = visibility;
				}
				var embeds = document.getElementsByTagName('embed');
				for (i = 0; i != embeds.length; i++) {
					embeds[i].style.visibility = visibility;
				}
		}
		
		var iframes = document.getElementsByTagName('iframe');
			for (i = 0; i != iframes.length; i++) {
				iframes[i].style.visibility = visibility;
			}
	}	

};
	
// add the add-on methods to the main tab prototype //
Object.extend(FlexBox.prototype, FlexBox.AJAX)


// overwrite prototype's show method to specifically add block -- necessary if we want to use Effect.Appear and hide the background with CSS display: none; //

var newShow = { show : function(element) {
	$(element).style.display = 'block';
	return element;
  	}
  }
// 
Element.addMethods(newShow);