var Roibox = new Class({

	init: function( handle, options ){
		this.options = $extend({
			resizeDuration:   400,
			resizeTransition: false, // default transition
			initialWidth:     250,
			initialHeight:    250,
			finalWidth:       360,
			finalHeight:      253,
			popupSrc:         "index.html"
		}, options || {});

		if( !handle ) {
			this.load();
		} else {
			$( handle ).addEvent('click', this.load.bind( this ) );
		}
		
		this.eventKeyDown  = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.position.bind(this);
	},

	load: function(){
		// Shaded overlay
		this.overlay = new Element( 'div', { 'id' : 'lbOverlay' } ).injectInside( document.body );
		this.overlay.addEvent( 'click', this.close.bind(this) );
		
	
		// Lightbox Wrapper
		this.frame = new Element( 'div', { 
			'id'         : 'lbFrame',
			'width'      : this.options.initialWidth, 
			'height'     : ( this.options.initialHeight ),
			'marginLeft' : -(this.options.initialWidth / 2),
			'display'    : '' 
		} ).injectInside( document.body );
		
		// Area above popup
		this.header = new Element('div', { 
			'id'     : 'lbHeader',
			'width'  : "100%", 
			'height' : "30px" 
		} ).injectInside( this.frame );

		this.closeLink = new Element('a', { 'href' : "javascript:void(0);" } ).injectInside( this.header );
		this.closeLink.innerHTML = '<img src="/view/tal/tallibrary/closeButton.png" alt="close button" />';
		// this.closeLink.addEvent( 'click', this.close.bind(this) );
		this.header.addEvent( 'click', this.close.bind(this) );
		this.iframe = new Element('iframe', { 
			'id'           : 'lbIframe',
			'src'          : this.options.popupSrc, 
			'width'        : "100%", 
			'frameborder'  : 0,
			'height'       : this.options.finalHeight 
		} ).injectInside( this.frame );

		if( window.gecko ) {
			this.overlay.addClass( 'geckoShadow' );
		} else {
			this.overlay.addClass( 'nonGeckoShadow' );
		}

		this.fx = {
			overlay: this.overlay.effect( 'opacity', { duration: 500 } ).hide(),
			resize:  this.frame.effects( $extend( { duration: this.options.resizeDuration }, this.options.resizeTransition ? { transition: this.options.resizeTransition } : {} ) ),
			iframe:  this.iframe.effect('opacity', { duration: 500 } )
		};

		this.position();
		
		this.setup( true );
		this.frame.setStyles( { 
			'top'        : ( window.getScrollTop() + (window.getHeight() / 15) ), 
			'display'    : '',
			'marginLeft' : -( this.options.initialWidth / 2 )
		} );

		if( window.gecko ) {
			this.fx.overlay.start( 1.0 );
		} else {
			this.fx.overlay.start( 0.8 );
		}

		this.fx.resize.start( { height: ( this.options.finalHeight + 30 ), width: ( this.options.finalWidth + 0 ), marginLeft: -(this.options.finalWidth / 2) } );
		return true;
	},

	position: function(){
		this.overlay.setStyles( { 'top': window.getScrollTop(), 'height': window.getHeight() } );
	},

	setup: function( open ){
		// var elements = $A(document.getElementsByTagName('object'));
		// elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		// elements.each(function(el){
		// 	if (open) el.lbBackupStyle = el.style.visibility;
		// 	el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		// });
		var fn = open ? 'addEvent' : 'removeEvent';
//		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
//		document[fn]('keydown', this.eventKeyDown);
		
		if( !open ) {
			this.overlay.remove(); 
			this.frame.remove();
		}
		
		this.step = 0;
	},
	keyboardListener: function( event ){
		switch (event.keyCode){
			case 27: case 88: case 67: this.close(); break;
		}
	},

	close: function(){
		if (this.step < 0) return;
		this.step = -1;
		for (var f in this.fx) 
			this.fx[f].stop();

		this.fx.resize.start({height: this.options.initialHeight, width: this.options.initialWidth, marginLeft: -this.options.initialWidth/2});
		
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		return false;
	}

});