var Popup=Class.create(
{
 initialize : function(arg)
 {
  this.id=arg.id;
  this.cparent=arg.parent==undefined?$(document.body):$(arg.parent);
  this.isModal = arg.modal==undefined?false:arg.modal;
  this.isLoadingInfo = arg.loadingInfo==undefined?true:arg.loadingInfo;
  this.title = arg.loadingInfo==undefined?null:arg.title;
  this.content=arg.content==undefined?null:arg.content;
  this.isImgPopup=arg.isImgPopup==undefined?false:arg.isImgPopup;

  if(this.isModal)
  {
       this.container = Element('div',{'id':this.id});
       this.container.insert({bottom:' '});
  	   this.container.addClassName('popup_modal');
	   this.modalLayer=Element('div',{'class':'modalLayer'});
	   this.modalLayer.setOpacity(0.5);   
	   this.modalLayer.setStyle
	   ({
	    width:document.viewport.getWidth()+'px',
	    height:document.viewport.getHeight()+'px'
	   });
	   this.modalLayer.insert({bottom:' '});
	   $(document.body).insert({top:this.modalLayer});
  } else if(this.isLoadingInfo){
    this.container = Element('div',{'id':this.id});
    this.container.insert({bottom:' '});
  	this.container.addClassName('popup');
  }
  else
  {
  	if(this.isImgPopup){
	    this.container = Element('table',{'id':this.id, 'class':'popup_img','cellspacing':'0'});
	}else{
    	this.container = Element('table',{'id':this.id, 'class':'popup_text','cellspacing':'0'});
    }
    this.body = Element('tbody').insert('<tr><td colspan="2" class="tdbody">'+this.content+'</td></tr>');
  	if(this.content){
  	 //this.body.select('td').first().update();
  	}
  	this.hRow = Element('tr');
  	this.hCellLeft = Element('td',{'id':'title','class':'popup_title'});
  	this.hCellLeft.insert(this.title);
  	this.hRow.insert(this.hCellLeft);
  	this.hCellRight = Element('td',{'class':'closeWindow'});
  	if(this.isImgPopup){
	  	this.hCellRight.insert('<a href="#" onclick="stopImgPopup(); return false;" class="close">[ESC]</a>');
	}else{
	  	this.hCellRight.insert('<a href="#" onclick="stopPopup(); return false;" class="close">[ESC]</a>');
    }
  	this.hRow.insert(this.hCellRight);
  	this.header    = Element('thead');//.insert('<tr><td class="popup_title">'+this.title+'</td><td  class="closeWindow"><table><tr><td>[Esc]</td><td>X</td></tr></table></td></tr>');
  	this.header.insert(this.hRow);
   	this.container.insert( this.header );
   	if(this.isImgPopup){
   		new Draggable(this.container);
   	}
  	this.container.insert( this.body );
   	this.closeBtn = this.header.select('.closeWindow img').first();
   	this.addListener(true);
  }
 },
 /** 
  *  To handle and deal with key strokes
  *  e.g [ESC] key should be caught and then respectively 
  *  performing process must be aborted.
  */  
 addListener:function (ctrl)
 {
  var ref = this;
  this.onescpress=function(event)
  {  
   try
   {     
    if (event['keyCode'] == 27 )
    {
     ref.destroy();           
    }
   }catch( e ){}       
    }
    
    this.onmousedown= function(event)
  {    
   try{
    if( ref.getId() !=
     $(event.element()).up('.popup').identify())
    { 
     if(event.element().className != 'modalLayer' )
      ref.destroy();     
    }
   }catch( e ) {
    try
    {       
     if(event.element().className != 'modalLayer' )
      ref.destroy();    
    }catch( e ){}
   }               
    }    
  
    if(ctrl) 
    {
     $(document).observe('keydown', this.onescpress);
     //$(document).observe('mousedown',this.onmousedown);
  }
  if(this.isClosable){
   try{
    this.closeBtn.observe('click', function(){ref.destroy();});
   }catch(e){}
  }  
 }, 
 open  : function( _top,_left, _width)
 {  

   this.container.setStyle({
    position:'absolute', 
    display:'block',     
    left:_left+"px",
    top:_top+"px" ,
    width:_width+"px"  
   });
  this.cparent.insert({bottom:this.container});   
 },
 setContent:function(content)
 {
  this.content=content;
  this.body.select('td').first().update(this.content);
  this.content.show();
 },
 destroy : function()
 { 
  try{
   this.container.remove();
   this.modalLayer.remove();   
  }catch(e){}                       
 },
 getId:function(){return this.container.id;}
})