var LoadedComponent = new Class({
    options: {
        resizeDuration: 240,
		resizeTransition: Fx.Transitions.sineInOut,
		topDistance: 15,
		initialWidth: 250,
		initialHeight: 250,
		defaultWidth: 300,
		defaultHeight: 350,
        uri: ''
    },
    initialize: function(options){
        this.setOptions(options);
        this.buildInterface();
		var onCompleteFunction = this.open.bind(this);
        var loaderOptions = {
            update: 'lcContent',
            onComplete: onCompleteFunction,
            method: 'get',
            evalScripts: true
        };
        this.loader = new Ajax(this.options.uri,loaderOptions).request();
    },
    buildInterface: function(){
        this.eventPosition = this.position.bind(this);
        if($chk($('lcOverlay')))
        {
            this.overlay = $('lcOverlay');
            this.center  = $('lcCenter');
            this.canvas  = $('lcContent');
        }
        else
        {
            var onClickFunction = this.close.bind(this);
            this.overlay = new Element('div', {'id': 'lcOverlay'});
            this.overlay.addEvent('click', onClickFunction);
            this.overlay.injectInside(document.body);
    		this.center = new Element('div', {'id': 'lcCenter', 
    		                                  'styles': {'width': this.options.initialWidth, 
    		                                             'height': this.options.initialHeight, 
    		                                             'marginLeft': -(this.options.initialWidth/2), 
    		                                             'display': 'none'
    		                                            }
    	                                     }
    	                             ).injectInside(document.body);
            this.canvas = new Element('div').setProperty('id', 'lcContent').injectInside(this.center);
        }
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
            center: this.center.effect('opacity', {duration: 1000}).hide()
		};
    },
	position: function(){
		this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
	},
    open: function(){
        this.position();
        window.addEvent('scroll', this.eventPosition).addEvent('resize', this.eventPosition);
		var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
		var st = document.body.scrollTop  || document.documentElement.scrollTop;
		this.top = st + (wh / this.options.topDistance);
        this.center.setStyles({display: 'block',
                               width: 350,
                               height: 380,
                               top: this.top
                             });
        var showContent = function(){
            this.fx.center.start(1);
        }.bind(this);
        this.fx.overlay.start(0.8).chain(showContent);
    },
    close: function(){
        var closeFX = function(){
            var removeScroll = function(){
                window.removeEvent('scroll', this.eventPosition).removeEvent('resize', this.eventPosition);
            }.bind(this);
            this.fx.overlay.start(0).chain(removeScroll);
        }.bind(this);
        this.fx.center.chain(closeFX).start(0);
    }
});
LoadedComponent.implement(new Options, new Events);