var Modal=Class.create({
  initialize: function(params){
    this.params=Object.extend({
      width:'500',
      height:'400',
      success_event:'modal:loaded',
			opacity: 0.25,
			//overflow: 'auto',
			fade: true
    },params || {});
    this.create_overlay();
    this.create_modal();
    document.observe('modal:close',function(){
      this.close();
    }.bind(this));
    this.scroll_event=this.center_modal.bind(this);
    this.resize_event=this.center_modal.bind(this);
    Event.observe(document,'scroll',this.scroll_event);
    Event.observe(window,'resize',this.resize_event);
  },
  
  create_overlay: function(){
    this.overlay = new Element('div',{
      'class':'overlay darken'
    });
    this.overlay.setStyle({
      opacity: this.params.opacity,
      height: (document.viewport.getHeight())+'px'
			//overflow: 'none'
    });
    $$('body')[0].insert(this.overlay);
		this.center_modal();
  },
    
  create_modal: function(){
    this.modal_win = new Element('div',{
      'class':'overlay modal'
    });
    this.modal_win.setStyle({
      height: this.params.height+'px',
      width: this.params.width+'px',
      top: ((document.viewport.getHeight()/2) - (this.params.height/2))+'px',
      left: ((document.viewport.getWidth()/2) - (this.params.width/2))+'px'
    });
    this.modal_title=new Element('div',{id:'modal_title'});
    this.cancel_modal=new Element('a',{href:''}).update('close');
    this.modal_title.update(this.cancel_modal);
    this.cancel_modal.observe('click',function(){
      document.fire('modal:close');
    }.bind(this));
    this.modal_win.insert(new Element('div',{
      id: 'modal_content'
    }).update(new Element('img',{src:'/images/ajax-loading.gif',style:'padding:1em;'})));
    this.modal_win.insert({top:this.modal_title});
		this.show_modal();
	},
	
	show_modal: function(){
		if(this.params.fade){
			this.modal_win.hide();
    	$$('body')[0].insert(this.modal_win);
			this.modal_win.appear();
		}
		else {
    	$$('body')[0].insert(this.modal_win);    			
		}
  },
  
  center_modal: function(){
    if(this.modal_win){
      this.modal_win.setStyle({
        top: ((document.viewport.getScrollOffsets().top) + (document.viewport.getHeight()/2) - (this.params.height/2))+'px',
        left: ((document.viewport.getScrollOffsets().left) + (document.viewport.getWidth()/2) - (this.params.width/2))+'px'
      });
    }
    if(this.overlay){
      this.overlay.setStyle({
        top: (document.viewport.getScrollOffsets().top)+'px',
        height: (document.viewport.getHeight())+'px'
      });      
    }
  },

  show: function(){
    this.overlay.removeClassName("hide");
    this.modal_win.removeClassName("hide");
  },
  
  close: function(){
    Event.stopObserving(document,'scroll',this.scroll_event);
    Event.stopObserving(window,'resize',this.resize_event);
    this.overlay.remove();
    this.modal_win.remove();
  }
});

Modal.create = function(options){
  switch(options.modal_type){
    case 'ajax':
      return new AjaxModal(options);
      break;
		case 'iframe':
			return new IframeModal(Object.extend({overflow:'none'},options || {}));
			break;
  }
}.bind(this);

var AjaxModal = Class.create(Modal,{
  initialize: function($super, params) {
    this.params=Object.extend({
      success_event:'ajax_modal:loaded'
    },params || {});
    $super(this.params);
    new Ajax.Updater($('modal_content'),this.params.url,{
      method:'get',
      onSuccess:function(){
        document.fire(this.params.success_event);
      }.bind(this)
    });
  }
});

var IframeModal = Class.create(Modal,{
  initialize: function($super, params) {
    this.params=Object.extend({
      success_event:'iframe_modal:loaded',
			fade: true
    },params || {});
    $super(this.params);
		//iframe=new Element('iframe',{url:this.params.url});
		iframe=new Template('<iframe src="#{href}" id="modal_iframe" width="100%" height="100%" frameborder="0" onload="document.fire(\'#{fire_event}\')"></iframe>')
		$('modal_content').update(iframe.evaluate({href:this.params.url,fire_event:this.params.success_event}));
		document.observe(this.params.success_event,function(){
			this.params.height=window.frames[0].document.body.getHeight()+80;
			this.modal_win.setStyle({height: this.params.height+'px'});
			this.center_modal();
			//this.modal_win.appear();
		}.bind(this));
  },

	show_modal: function(){
		if(this.params.fade){
			this.modal_win.hide();
			this.modal_win.setStyle({height: this.params.height+'px'});
    	$$('body')[0].insert(this.modal_win);
			this.modal_win.appear();
		}
		else {
    	$$('body')[0].insert(this.modal_win);    			
		}
  }
	
});