var Dialog = {
   container : undefined,
   dialog : undefined,
   base : undefined,

   init: function() {
      // prepare dialog elem
      $(document.body).append('<div id="dialog-container"><div id="dialog"></div></div><div id="dialog-base"></div>');
      Dialog.container = $('#dialog-container');
      Dialog.dialog = $('#dialog');
      Dialog.base = $('#dialog-base');
      Dialog.container.css({position:'fixed',zIndex:100002,backgroundColor:'#fff'});
      Dialog.base.css({position:'fixed',backgroundColor:'#000',zIndex:100001});
      Dialog.base.fadeTo(0,0.3);
      Dialog.base.hide();
      Dialog.container.hide();
      Dialog.adjust();
      $(window).bind('resize', Dialog.adjust);
      $(window).bind('scroll', Dialog.adjust);
   },
   adjust : function() {
      Dialog.container.css({
         top: ($(window).height()-Dialog.container.height())/2 + 'px',
         left: ($(window).width()-Dialog.container.width())/2 + 'px'
      });
      Dialog.base.css({top: 0, left: 0, width:$(window).width() + 'px',height:$(window).height() + 'px'});
   },
   close : function() {
       Dialog.dialog.html('');
      Dialog.container.hide();
      Dialog.base.hide();
   },
   show : function(html,option) {
      if(!Dialog.dialog) return;
      Dialog.dialog.html(html);
      Dialog.adjust();
      Dialog.container.show();
      Dialog.base.show();
       if(!option) option = {};
       if(option.close_on_click_base) {
	   Dialog.base.one('click',Dialog.close);
       }
   }
};
$(document).ready(Dialog.init);