jQuery.fn.extend({
   floater: function(options){
      //start - set default options
      settings = jQuery.extend({
         width          : 700,
         height         : 500,
         title          : 'Floater',
         prefix         : 'floater',
         shadowBgColor  : '#366d91',
         closeImage     : '/tolteam/images/close.png',
         onLoad         : function(){},
         onShow         : function(){$("body").css("overflow", "hidden");},
         onHide         : function(){$("body").css("overflow", "auto");}
      }, options);
      settings.thisEl = $(this);
      //end- set default options



      //start - init
      var init = function(){
         //onLoad function
         settings.onLoad();

         if (!$("#"+settings.prefix+"Shadow").size() || !$("#"+settings.prefix+"Content").size()){
            create();
         }
         else if ($("#"+settings.prefix+"Shadow").size() && $("#"+settings.prefix+"Content").size()){
            show();
         }

         //events
         $("#"+settings.prefix+"Shadow").click(function(){
            hide();
         });

         $("#"+settings.prefix+"Close").click(function(){
            hide();
         });
      };
      //end - init




      //start - create elements
      var create = function(element){
         //calculations
         var marginTop = settings.height / 2;
         var marginLeft = settings.width / 2;
         var dataWidth = settings.width - 20;
         var dataHeight = settings.height - 20 - 20;
         

         $("body").append('<div id="'+settings.prefix+'Shadow"></div>');
         $("body").append('<div id="'+settings.prefix+'Content"></div>');

         $("#"+settings.prefix+"Content").append('<div id="'+settings.prefix+'TopBar"></div>');
         $("#"+settings.prefix+"Content").append('<div id="'+settings.prefix+'Data"></div>');

         $("#"+settings.prefix+"TopBar").append('<span id="'+settings.prefix+'Title">'+settings.title+'</span>');
         $("#"+settings.prefix+"TopBar").append('<img src="'+settings.closeImage+'" alt="Close" id="'+settings.prefix+'Close" />');



         $("#"+settings.prefix+"Shadow").css({'position' : 'absolute',
                                              'z-index' : '9990',
                                              'top' : '0',
                                              'left' : '0',
                                              'width'  : '100%',
                                              'height' : '100%',
                                              'background-color' : settings.shadowBgColor})
                                        .fadeTo(0, 0.5);


         $("#"+settings.prefix+"Content").css({'position' : 'absolute',
                                               'z-index' : '9991',
                                               'width'  : settings.width+'px',
                                               'height' : settings.height+'px',
                                               'top' : '50%',
                                               'left' : '50%',
                                               'margin-top' : '-'+marginTop+'px',
                                               'margin-left' : '-'+marginLeft+'px',
                                               'background-color' : '#fafafa',
                                               'border' : 'solid 1px #555'});


         $("#"+settings.prefix+"TopBar").css({'width'  : settings.width+'px',
                                              'height' : '20px',
                                              'background-color' : '#efefef',
                                              'border-bottom' : 'solid 1px #555'});


         $("#"+settings.prefix+"Title").css({'margin' : '2px',
                                             'font-weight' : 'bold'});


         $("#"+settings.prefix+"Close").css({'float' : 'right',
                                             'width' : '16px',
                                             'height' : '16px',
                                             'margin' : '3px 2px 2px 2px',
                                             'cursor' : 'pointer'});


         $("#"+settings.prefix+"Data").css({'width' : dataWidth+'px',
                                            'height' : dataHeight+'px',
                                            'padding' : '10px',
                                            'overflow' : 'auto'});

         settings.onShow();
      };
      //end - create elements




      //start - show floater
      var show = function(element){
         settings.onShow();
         $("#"+settings.prefix+"Shadow").show();
         $("#"+settings.prefix+"Content").show();
      }
      //end - show floater




      //start - hide floater
      var hide = function(element){
         settings.onHide();
         $("#"+settings.prefix+"Shadow").hide();
         $("#"+settings.prefix+"Content").hide();
      }
      //end - hide floater




      //start - set title
      var setTitle = function(title){
         $("#"+settings.prefix+"Title").html(title);
      }
      //end - set title




      //start - set date
      var setData = function(data){
         $("#"+settings.prefix+"Data").html(data);
      }
      //end - set date



      init();
   }
});