/* 	
	
	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 .63
	
*/

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',
			visible: 'none',
			radius: 3 // or 2
		}
		
		Object.extend( this.options, options || {} );

		this.originalWidth = this.options.width;
		this.originalHeight = this.options.height;
		this.showDelay = null;
		this.isImage = false;
		
		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];
			if ( this.options.visible = 'visible' ) {
				$(link).style.visibility = 'hidden';
			}
			else {
				$(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, programmatic) {
	
		if ( FlexBox.showing ) return;
		
		if ( this.isIE6 ) {
			this._toggleTroubleElements('hidden');
		}
		
		if ( programmatic ) {
		
			var link = e;
		}
		
		else {
			
			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;
			}
			
		}
	
		
		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.imageWidth = query.width;
		if ( query.height ) this.options.imageHeight = 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 ) {
				
					this.isImage = true;
					
					var content = new Element('img', { src : pageToOpen, width: this.options.imageWidth, height: this.options.imageHeight });
					
					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 && !programmatic) 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 );
		}
		
		var windowDims = document.viewport.getDimensions();
			var windowWidth = windowDims.width;
			var windowHeight = windowDims.height;
		
		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) );
		
		
		// fix this for no if statement. temporary fix as tooltips are getting scrollbars //
		if ( this.options.mode != 'tooltip' ) {
		
		
			var popupWidth = (this.options.width == 'auto') ? pcDims.width : this.options.width;
			
			if ( this.isImage ) {
				popupWidth = parseInt(this.options.imageWidth) + parseInt(padWidth);
			}
			
			if ( this.options.height == 'auto' ) pcDims.height = this.popupContent.getHeight();
			
			var popupHeight = (this.options.height == 'auto') ? pcDims.height : this.options.height;
			
			if ( windowWidth >= popupWidth ) {
				if ( windowHeight <= popupHeight ) popupWidth += 18;
				this.popupContent.style.width = popupWidth - padWidth + 'px';
			} else {
				this.popupContent.style.width = windowWidth - padWidth - 10 + 'px';
				popupWidth = windowWidth - 10;
			}
			
			if ( windowHeight >= popupHeight ) {
				this.popupContent.style.height = popupHeight - padHeight + 'px';
			} else {
				this.popupContent.style.height = windowHeight - padHeight - 10 + 'px';
				popupHeight =  windowHeight - 10;
			}

		} else {
		
			var popupWidth = (this.options.width == 'auto') ? pcDims.width : this.options.width;
		
			this.popupContent.style.width = popupWidth - padWidth + 'px';
			
			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' } ); 
			
			if ( this.originalElement ) 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) {
	
		if ( typeof(this.options.beforeDeactivate) == "function" ) {
			this.options.beforeDeactivate();
		}
	
		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);
		
		if ( this.originalElement ) {
			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);
			}
		}
		
		if ( this.originalElement ) 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;
		this.isImage = false;
		
		// 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;
		
		if ( typeof(this.options.afterDeactivate) == "function" ) {
			this.options.afterDeactivate();
		}
		
	}
	
});

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);