var dt_dialog = new Class({
	options: {
		onOpen: function(win){
		},	
		onClose: function(win){
		},	
		showDelay: 1,
		hideDelay: 1,
		className: 'dt',
		width: 250,
		height: 250,
		title: 'DT Dialog',
	  closeWidth: 19,
		closeHeight: 19,
		closeImage: '/img/close_button.gif',
		closeBackgroundColor: 'red',
		borderColor: '#000',
		backgroundColor: '#fff',
		titleBackgroundColor: '#ECE9D8',
		1:1
	},

	initialize: function(options){
		this.setOptions(options);
		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.position.bind(this);

    // create an overlay
    this.overlay = new Element('div', {
      'class': this.options.className + '-overlay',
      'styles':{
        'position': 'absolute',
        'left': 0,
        'width': '100%',
        'background-color': '#000',
        'cursor': 'pointer',
        1:1
      },
      'events': {
        'click': this.close.bind(this)
      }
    }).injectInside(document.body);
    
    // create a dialog
    this.dialog = new Element('div', {
			'class': this.options.className + '-dialog',
			'styles': {
        'position': 'absolute',
        'width': this.options.width, 
        'height': this.options.height, 
        'margin-left': -(this.options.width/2), 
        'margin-top': -(this.options.height/2), 
        'display': 'none',
        'left': '50%',
        'top': '50%',
        'border':'1px solid ' + this.options.borderColor,
        'overflow': 'hidden',
        'background-color':'transparent',
        1:1
			}
		}).injectInside(document.body);

    this.dialog_title = new Element('div',{
      'class': this.options.className + '-title',
      'styles': {
        'position': 'relative',
        //'cursor': 'move',
       // 'width':this.options.width - this.options.closeWidth - 9,
        'height':this.options.closeHeight,
        'background-color':this.options.titleBackgroundColor,
        'overflow':'hidden',
        'border':'1px solid ' + this.options.borderColor,
        'padding':'5px',
        'vertical-align':'middle',
        1:1
      }
    }).injectInside(this.dialog);

    this.dialog_close = new Element('div',{
      'class': this.options.className + '-close',
      'styles': {
        'position': 'relative',
        'width': this.options.closeWidth,
        'height': this.options.closeHeight,
        //'background-color': this.options.closeBackgroundColor,
        'float': 'right',
        'cursor': 'pointer',
        'background-image': 'url(' + this.options.closeImage + ')',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'title':'Close',
        1:1
      },
      'events': {
        'click': this.close.bind(this)
      }
    }).injectInside(this.dialog_title);
    
    this.dialog_title.appendText(this.options.title.clean());

    this.dialog_canvas = new Element('div',{
      'class': this.options.className + '-canvas',
      'styles': {
        'padding':'0px',
        'margin-left':'auto',
        'margin-right':'auto',
        'margin-top':'auto',
        'margin-bottom':'auto',
        'width': (this.options.width -2 ),
        'height': (this.options.height - this.options.closeHeight -14 ),
        'background-color':this.options.backgroundColor,
        'overflow':'hidden',
        'border':'1px solid ' + this.options.borderColor,
        1:1
      }
    }).injectInside(this.dialog);
    
//     this.dialog.makeDraggable({
//       'handle':this.dialog_title
//     });
        
    // some FX for the dialog
		this.fx = {
			'overlay': this.overlay.effect('opacity', {duration: 500}).hide(),
			'dialog': this.dialog.effect('opacity', {duration: 500})
		};
    
		if (this.options.initialize) this.options.initialize.call(this);		
	},

	keyboardListener: function(event){
		switch( event.keyCode ){
			case 27: case 88: case 67: this.close(); break;
		}
	},

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

	show: function(){
		if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);

		this.position();
		this.setup(true);
//		this.top = window.getScrollTop() + (window.getHeight() / 15);
		this.dialog.setStyles({
//      top:this.top,
      display:'',
      'visibility':'visible',
      1:1
    });
//		this.fx.dialog.start(1);
		this.fx.overlay.start(0.5);
	},

	hide: function(){
    this.dialog.setStyle('visibility', 'hidden');
//    this.fx.dialog.start(0);
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
	},

  open: function(){
		this.dialog_canvas.empty();
		//this.fireEvent('onOpen', [this.dialog_canvas]);
		this.options.onOpen.attempt([this.dialog_canvas],this);

    $clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this);
  },
  
  close: function(){
		this.fireEvent('onClose', [this.dialog_canvas]);

		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this);
  },

	setup: function(open){
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
	},
  
  'nothing':'nothing'
});

dt_dialog.implement(new Events, new Options);