/*
GPL license: http://gplv3.fsf.org
jquery catelog:plusin(function)
application type: modal dialog
author:jericho(thisnamemeansnothing[at]gmail.com)
version:0.1 alpha
pid-date:2009-4-1 13:03:11
========================================
sample:
$.fn.jmodal({
okEvent:function(e){
alert('jmodal\'ll be closed after u click me:-)');
}
});
========================================
ps:
in order to promote efficiency, 
you'd better place the stylesheet
in a *.css file and add link tag in your pages 
*/
/// <reference path="jquery.js"/>
$.extend($.fn, {
  jmodal: function(setting) {
    $("select").css("visibility", "hidden");
    var ps = $.fn.extend({
      data: {},
      buttonText: 'OK',
      okEvent: function(e) { },
      initWidth: 400,
      initHeight: 0,
      title: 'JModal Dialog',
      content: 'This is a jquery plusin!',
      docWidth: $(document).width(),
      docHeight: $(document).height(),
      overlayCss: {
        'position': 'absolute',
        'left': '0',
        'top': '0',
        'background-color': '#555',
        'opacity': '0',
        'z-index': '200'
      },
      jmodalbgCss: {
        'z-index': '201',
        'position': 'absolute',
        'background-color': '#fff'
      },
      jmodalCss: {
        'z-index': '202',
        'height': 'auto',
        'position': 'absolute',
        'opacity': '0'
      },
      closeCss: {
        'position': 'absolute',
        'background': 'url(images/close.gif) no-repeat left top',
        'right': '5px',
        'top': '8px',
        'width': '16px',
        'height': '16px',
        'font-weight': 'bold',
        'color': '#fff',
        'text-align': 'center',
        'line-height': '16px',
        'display': 'block',
        'text-decoration': 'none'
      },
      titleCss: {
        'height': '30px',
        'background': 'url(images/jmodal_01.gif) repeat-x left top',
        'font-weight': 'bold',
        'text-indent': '10px',
        'color': '#fff',
        'line-height': '30px',
        'border-bottom': 'solid 1px #96A8AA'
      },
      contentCss: {
        'height': 'auto',
        'background-color': '#DEF4F4',
        'color': '#124973',
        'padding': '20px 10px'
      },
      bottomCss: {
        'background-color': '#eee',
        'border-top': '1px solid #ccc',
        'padding': '5px',
        'text-align': 'right'
      },
      buttonCss: {
        'background': 'url(images/jmodal_02.gif) repeat-x left top',
        'border': 'solid 1px #86A2C0',
        'cursor': 'pointer',
        'font-size': '12px',
        'padding': '0px 10px',
        'height': '20px',
        'text-align': 'center',
        'margin-left': '5px',
        'font-family': 'Calibri,Arial'
      }
    }, setting);
    function hideModal() {
      if ($("#flvplay")) {
        $("#flvplay").html("");
      }
      $("select").css("visibility", "visible");
      $('#jmodal-overlay').animate({ opacity: 0 }, function() { $(this).css('display', 'none') });
      //$('#jquery-jmodal-bg').animate({ opacity: 0 }, function() { $(this).css('display', 'none') });
      $('#jquery-jmodal').animate({ opacity: 0 }, function() { $(this).css('display', 'none') });
    }
    if ($('#jquery-jmodal').length == 0) {
      $(document.body).append('<div id="jmodal-overlay" />' +
      //'<div id="jquery-jmodal-bg" />' +
                '<div id="jquery-jmodal">' +
                '<a href="javascript:void(0)" id="jquery-jmodal-close" title="Close"></a>' +
                '<div id="jmodal-container-title" />' +
                '<div  id="jmodal-container-content" />' +
                '<div id="jmodal-container-bottom">' +
                '<button id="jmodal-bottom-okbutton" ></button>' +
                '</div>');
    }
    else {
      $('#jmodal-overlay').css({ opacity: 0, 'display': 'block' });
      //$('#jquery-jmodal-bg').css({ opacity: 0, 'display': 'block' });
      $('#jquery-jmodal').css({ opacity: 0, 'display': 'block' });
    }
    $('#jmodal-overlay').css(ps.overlayCss).css({
      //width: ps.docWidth,
      width: '100%',
      height: ps.docHeight
    }).animate({ opacity: 0.5 });
    var _initHeight = ps.initHeight;
    if (_initHeight == 0) { _initHeight = 190; }
    var _scrollLeft = document.documentElement.scrollLeft || window.pageXOffset;
    var _scrollTop = document.documentElement.scrollTop || window.pageYOffset;
    if (isNaN(_scrollTop)) { _scrollTop = 0; }
    if (isNaN(_scrollLeft)) { _scrollLeft = 0; }
    var _clientWidth = document.documentElement.clientWidth;
    var _clientHeight = document.documentElement.clientHeight;
    $('#jquery-jmodal').css(ps.jmodalCss).css({
      width: ps.initWidth,
      left: _scrollLeft + (_clientWidth - ps.initWidth) / 2,
      top: _scrollTop + (_clientHeight - _initHeight) / 2
    }).animate({ opacity: 1 }, function() {
      var me = this;
      //      $('#jquery-jmodal-bg').css(ps.jmodalbgCss).css({
      //        width: ps.initWidth + 20,
      //        left: (ps.docWidth - ps.initWidth) / 2 - 10,
      //        height: $(me).height() + 20,
      //        opacity: 0.5,
      //        top: (180 + _scrollTop)
      //      });
    });
    $('#jquery-jmodal-close').css(ps.closeCss).hover(function() {
      $(this).css({ 'background': '#fff url(images/close.gif) no-repeat left -16px' });
    }, function() {
      $(this).css({ 'background': 'transparent url(images/close.gif) no-repeat left top' });
    }).mouseup(hideModal);
    $('#jmodal-container-title')
                .css(ps.titleCss)
                .html(ps.title)
                .next()
                .css(ps.contentCss)
                .html(ps.content)
                .next()
                .css(ps.bottomCss)
                .children('#jmodal-bottom-okbutton')
                .text(ps.buttonText)
                .css(ps.buttonCss)
                .one('click', function(e) {
                  ps.okEvent(ps.data); hideModal();
                });
    //by kbii
    $('.jmodalClose').click(function(e) {
      hideModal();
    })
  }
})