var IPop = Class.create({
  initialize: function(event,id,name,title) {
    this.ev = event || window.event;
    this.left = this.ev.pageX || (this.ev.clientX + (document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft));
    this.top = this.ev.pageY || (this.ev.clientY + (document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop));
    this.id = id;
    this.name = name;
    this.title = title;
    this.create();
    this.header_container = this.id+"_header";
    this.title_container = this.id+"_title";
    this.content_container = this.id+"_content";
  },
  create: function(){
    /**  Close if exists **/
    if($(this.id)){
      this.close();
    }
    this.root = document.getElementsByTagName("body")[0];
    var cNode = document.createElement('div');
    cNode.id = this.id;
    cNode.className = "ipop_window";
    cNode.style.left = ((this.root.clientWidth-500)/2)+'px';
    //cNode.style.top = (((this.root.clientHeight-500)/2))+'px';
    cNode.style.top = (this.top)+'px';
    this.root.appendChild(cNode);
    this.iNode = document.getElementById(this.id);
    /** Problem in IE: with single click or mouse triggers**/
    Event.observe($(this.id), 'dblclick', function(){eval(this.id+'.moveToTop()');});
  },
  getSize: function(){
    if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      myWidth = document.body.clientWidth;
      myHeight = document.body.clientHeight;
    }
    mxWidth = document.body.clientWidth;
    if(mxWidth < myWidth){  mxWidth=myWidth;  }
    mxHeight = document.body.clientHeight;
    if(mxHeight < myHeight){  mxHeight=myHeight;  }
    return Array(myWidth,myHeight,mxWidth,mxHeight);
  },
  display: function(){
    var top = "<div class=\"ipop_top\"><div class=\"ipop_corner ipop_tl\"></div><div class=\"ipop_corner ipop_tr\"></div></div>";
    var bottom = "<div class=\"ipop_bottom\"><div class=\"ipop_corner ipop_bl\"></div><div class=\"ipop_corner ipop_br\"></div></div>";
    var header_options = "<div class=\"ipop_title\" id=\""+this.title_container+"\">"+this.title+"</div>";
    header_options+= "<div class=\"ipop_options\"><img class=\"clickable\" onclick=\""+this.name+".close();\" src=\"/close.gif\" title=\"Close\" alt=\"Close\"/></div>";
    var header = "<div class=\"ipop_header\" id=\""+this.header_container+"\">"+header_options+"<div class=\"clear\"></div></div>";
    var content = "<div class=\"ipop_content\" id=\""+this.content_container+"\"></div>";
    this.iNode.innerHTML = top+header+content+bottom;
    new Draggable( this.id ,{handle:this.header_container});
  },
  moveToTop: function(){
    new Insertion.Bottom(document.getElementsByTagName("body")[0],$(this.id));
  },
  calcMinTop: function(){
    var sizes = this.getSize();
    var ntop=sizes[3];
    var nheight = $(this.id).clientHeight;
    var nbottom = nheight+this.top;
    //alert(this.top+' '+ntop+' '+nbottom+' '+(ntop - nheight)+' '+sizes);
    if (nbottom > ntop){
      $(this.id).style.top = (ntop - nheight)+'px';
    }
  },
  close: function(){
    $(this.id).remove();
  }
});