var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
  initialize: function(id, opt) {
  	Object.extend(this.options, opt || {});
  	
  	this.positioned = false;
    this.dialog_box = $(id);
    this.dialog_box.show = this.show.bind(this);
    this.dialog_box.hide = this.hide.bind(this);
    
    this.createOverlay();
    
    this.parent_element = this.dialog_box.parentNode;

    
	this.dialog_box.style.position = 'absolute';
	this.dialog_box.style.display = 'none';
	this.dialog_box.style.zIndex = 95;
  },

  createOverlay: function() {
    if($('dialog_overlay')) {
      this.overlay = $('dialog_overlay');
    } else {
      this.overlay = document.createElement('div');
      this.overlay.id = 'dialog_overlay';
      document.body.insertBefore(this.overlay, document.body.childNodes[0]);
    }
  },
  
  styleOverlay: function() {
  	var vPort = document.viewport.getScrollOffsets();
  	
  	var body_h = $('body').getHeight();
	var window_h = window.innerHeight;
	var client_h = document.documentElement.clientHeight;
	var dbox_h = vPort.top + this.dialog_box.getHeight() + this.options.position_top + 50;

	Object.extend(this.overlay.style, {
	  	position: 'absolute',
	  	top: 0,
	  	left: 0,
	  	zIndex: 90,
	  	width: '100%',
	  	height: (this.large([body_h, window_h, client_h, dbox_h])+200)+'px',
	  	backgroundColor: '#000'
	  });
	  
	  if(this.options.draggable)
    	new Draggable(this.dialog_box, {onEnd: this.styleOverlay.bind(this), handle: 'window-move'});
	  
	  new Effect.Appear(this.overlay, {duration: 0.3, to: 0.5});
  },

  moveDialogBox: function(where) {
    Element.remove(this.dialog_box);
    if(where == 'back')
      this.dialog_box = this.parent_element.appendChild(this.dialog_box);
    else
      this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
  },

  show: function() {
  	this.position();
	this.styleOverlay();
	
    this.moveDialogBox('out');
    this.overlay.observe('click', this.hide.bind(this));
    this.selectBoxes('hide');
   
    this.dialog_box.style.display = ''
	// $('dbox').scrollTo();
	
	this.dialog_box.getElementsBySelector('.window-close').each(function(e) {
		e.observe('click', this.hide.bind(this));
	}.bind(this));
  },

  hide: function(event) {
	Event.stop(event);
    this.selectBoxes('show');
    new Effect.Fade(this.overlay, {duration: 0.3});
    this.dialog_box.style.display = 'none';
    
    this.moveDialogBox('back');
    $A(this.dialog_box.getElementsByTagName('input')).each(function(e){if(e.type!='submit')e.value=''});
    this.positioned = false;
  },
  
  position: function() {
	  if(!this.positioned) {
		    var e_dims = Element.getDimensions(this.dialog_box);
			var b_dims = Element.getDimensions(this.overlay);
			var vPort = document.viewport.getScrollOffsets();
			this.dialog_box.style.left = this.options.position_left == 'center' ? ((b_dims.width/2) - (e_dims.width/2)) + 'px' : this.options.position_left + 'px';
			this.dialog_box.style.top = vPort.top+this.options.position_top+'px';
			this.positioned = true;
	  }
  },

  selectBoxes: function(what) {
    $A(document.getElementsByTagName('select')).each(function(select) {
      Element[what](select);
    });

    if(what == 'hide')
      $A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)})
  },
  
  large: function(numbers) {
  	var num = 0;
  	$A(numbers).each(function(n) {
  		if(n > num) num = n;
  	});
  	return num;
  },
  
  options: {
  	draggable: true,
  	position_top: 0,
	position_left: 'center'
  }
});