var DoolaoModal = Class.create({
    Browser: {},
    overlay: null,
    visible: false,
    
    initialize: function() {
    	if (typeof Overlay == 'undefined') {
    		$(document.body).insert({top: new Element('script', {'type': 'text/javascript', 'src': '/javascripts/doolao.overlay.js'})});
    	}
    	
        var defaults = {
            element: null,
            url: null,
            title: '',
            parameters: {},
            showCancelButton: false,
            onCancel: null
        };
        
        this.options = Object.extend(defaults, arguments[0] || {});
        
        if ((this.options.element == null) && (this.options.url == null)) {
        	alert('You have to specify an source element or url');
        }
        
        this.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
        this.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
        this.Browser.IE8 = Prototype.Browser.IE && !this.Browser.IE6 && !this.Browser.IE7;
        
        var tmp = new Date();
        this.uniqueId = tmp.getTime();
        
        $(document.body).insert({top: this.generateHtml()});
        
    	$('modal_dialog_cancel_' + this.uniqueId).observe('click', function(event) {
    		event.stop();
    		
            if (this.options.showCancelButton && (this.options.onCancel != null)) {
            	this.options.onCancel();
            } else {
            	this.hide();
            }
    	}.bindAsEventListener(this));
        
        if (this.options.element != null) {
        	var element = $(this.options.element).clone(true).show();
        	
        	$('modal_dialog_content_' + this.uniqueId).update(element);
        	
        	this.show();
        } else {
        	var loading = new Element('div').setStyle({display: 'block', width: '32px', height: '125px', margin: 'auto'});
        	loading.update(new Element('img', {src: '/images/grafik/symbole/ajax-loader.gif'}).setStyle({marginTop: '92px'}));
        	
        	$('modal_dialog_content_' + this.uniqueId).update(loading);
        	
        	window.tmpTimeout = setTimeout(this.show.bind(this), 150);
        	
        	new Ajax.Updater('modal_dialog_content_' + this.uniqueId, this.options.url, {
        		parameters: {
        		    ajax: true,
        		    parameters: this.options.parameters
        		},
        		
    		    evalScripts: true,
        		
        		onComplete: function() {
        			clearTimeout(window.tmpTimeout);
        			
        			if (!this.visible) {
        				this.show();
        			}
        		}.bind(this)
        	});
        }
    },
    
    show: function() {
    	if (typeof Overlay != 'undefined') {
        	this.overlay = new Overlay('modal_dialog_' + this.uniqueId, {
        		center: 'horizontal',
        		setFixed: false
        	});
        	
        	this.visible = true;
    	} else {
	        document.observe('doolao:overlayLoaded', function() {
	        	this.overlay = new Overlay('modal_dialog_' + this.uniqueId, {
	        		center: 'horizontal',
	        		setFixed: false
	        	});
	        	
	        	this.visible = true;
	        }.bindAsEventListener(this));
    	}
    },
    
    hide: function() {
    	if (this.overlay == null) {
    		return;
    	}
    	
    	this.overlay.hide();
    	
    	this.visible = false;
    },
    
    generateHtml: function() {
    	var current = new Element('div').addClassName('dialog_content');
    	current.insert({bottom: new Element('div', {'id': 'modal_dialog_content_' + this.uniqueId}).addClassName('dialog_body').addClassName('clearfix')});

		var tmpDiv = new Element('div').addClassName('dialog_options');
    	if (this.options.showCancelButton) {
    		tmpDiv.update(new Element('a', {href: '#', id: 'modal_dialog_cancel_' + this.uniqueId}).update('schließen'));
    	}
    	
    	current.insert({bottom: tmpDiv});
    	
    	var next = new Element('div').addClassName('overlay_content');
    	
    	if (this.options.title != '') {
        	next.insert({bottom: new Element('h2').addClassName('dialog_headline').update(this.options.title)});
    	}
    	
    	next.insert({bottom: current});
    	
    	if (this.Browser.IE8) {
    		next.addClassName('overlay_content_ie8');
    	}
    	
    	current = new Element('div').addClassName('pop_container');
    	
    	if (this.Browser.IE8) {
    		current.insert({bottom: new Element('div').addClassName('overlay_verticalslab')});
    		current.insert({bottom: new Element('div').addClassName('overlay_horizontalslab')});
    		current.insert({bottom: new Element('div').addClassName('overlay_topleft')});
    		current.insert({bottom: new Element('div').addClassName('overlay_topright')});
    		current.insert({bottom: new Element('div').addClassName('overlay_bottomleft')});
    		current.insert({bottom: new Element('div').addClassName('overlay_bottomright')});
    		current.insert({bottom: next});
    	} else {
    		current.insert({bottom: new Element('div').addClassName('overlay_border').insert({bottom: next})});
    	}
    	
    	next = new Element('div').addClassName('overlay_wrapper').insert({bottom: current});
    	current = new Element('div', {'id': 'modal_dialog_' + this.uniqueId}).addClassName('overlay').insert({bottom: next}).hide().setStyle({marginTop: '130px'});

    	return current;
    }
});