var panel = Class.create();

panel.prototype = {
  title:         "",
  left_position:         0,
  top_position:         0,
  initialize: function(container, options) {
    this.options = Object.extend({
      title:       "title",
	  left_position:       "left_position",
	  top_position:       "top_position"
    }, options || {} );
    
    container = $(container);
	var wrap = "<div><div class='pt'><b class='ptl'></b><b class='ptr'></b><div class='pc'></div></div><table width='100%' cellpadding='0' cellspacing='0'></tr><td class='pcl'></td><td class='contenttd'><div class='header'><b class='r icon close' title='Close'></b><h2 id='__title__'>"+ this.options.title +"</h2></div>" + container.innerHTML + "</td><td class='pcr'></td></tr></table><div class='pb'><b class='pbl'></b><b class='pbr'></b><div class='pc'></div></div></div>";
	var wraper = new Element('div',{id: "panel"}).update(wrap);
	
	wraper.setStyle({width: container.getWidth() + 20 + 'px'});

	var x = ($('warp').getWidth() - container.getWidth() + 20)/2+this.options.left_position;
	var y = document.documentElement.scrollTop + (document.documentElement.clientHeight - container.getHeight() - 100)/2 - 100+this.options.top_position;
	wraper.setStyle({left: x + 'px', top: y + 'px'});

	wraper.getElementsByClassName('pt')[0].setOpacity(0.8);
	wraper.getElementsByClassName('pb')[0].setOpacity(0.8);
	wraper.getElementsByClassName('pcl')[0].setOpacity(0.8);
	wraper.getElementsByClassName('pcr')[0].setOpacity(0.8);
	wraper.getElementsByClassName('pcr')[0].setOpacity(0.8);

	var closeBtn = wraper.getElementsByClassName('close')[0];	
	Event.observe(closeBtn, 'click', this.close.bind(this, closeBtn, wraper), false);

	$('warp').insert({'top' : wraper});
  },

  close:function (closeBtn, wraper){
	wraper.remove();
  }
}