(function($){
    $.fn.extend({

          center: function (options) {
               var options =  $.extend({ // Default values
                    inside: window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
            }

     });
    })(jQuery);
   
    (function ($) {
        $.fn.extend({

            greyOut: function (options) {
                      
                var options =  $.extend({ // Default values
                        zindex:900, // element, center into window
                        opacity: 50, // millisecond, transition time
                        bgcolor:'#000', // pixel, minimum left element value
                        show:true, // pixel, minimum top element value
                        fade:true, // booleen, take care of the scrollbar (scrollTop)
                        imgURL:"" //the path to the progress bar image to display
                   }, options);

                var zindex = options.zindex;
                var opacity = options.opacity;
                var opaque = (opacity / 100);
                var bgcolor = options.bgcolor;
                var vis = options.show;
                var animate = options.fade;
                var imgURL = options.imgURL;
  
                var dark = document.getElementById('darkenScreenObject');
                if (!dark) {

                    var nodeType = $(this).context.nodeName;
                    var tnode = document.createElement('div');           // Create the layer.
                    if (nodeType == "BODY") 
                    {
                        var tbody = document.getElementsByTagName("body")[0];
                        tnode.style.position = 'absolute'; 
                    } 
                    else 
                    {
                        var tbody = document.getElementById($(this).attr('id').toString());
                        tnode.style.position = 'absolute'; 
                    }
                    
                                    // Position absolutely
                    tnode.style.top = '0px';                           // In the top
                    tnode.style.left = '0px';                          // Left corner of the page
                    tnode.style.overflow = 'hidden';                   // Try to avoid making scroll bars            
                    tnode.style.display = 'none';                      // Start out Hidden
                    tnode.id = 'darkenScreenObject';                   // Name it so we can find it later
                    tbody.appendChild(tnode);                            // Add it to the web page
                    
                    if (imgURL != "") {
                        var tSpan = document.createElement('span');
                        tnode.appendChild(tSpan);
                        var tImg = document.createElement('img');
                        tnode.appendChild(tImg);
                        $(tImg).attr("src",imgURL);
                        $(tSpan).css("display", "inline-block");
                        $(tSpan).css("height", "50\%");
                        $(tSpan).css("width", "1px");
                    }
                    
                    dark = document.getElementById('darkenScreenObject');  // Get the object.
                }
               
                if (vis) {

       
                    $(this).append(dark);
                    var nodeType = $(this).context.nodeName;
                    if (nodeType == "BODY") 
                    {
                        var pageWidth = $(document).width();
                        var pageHeight = $(document).height();
                    } 
                    else 
                    {
                        var pageWidth = $(this).width();
                        var pageHeight = $(this).height();
                    }

                    //set the shader to cover the entire page and make it visible.
                    dark.style.opacity = opaque;
                    dark.style.MozOpacity = opaque;
                    dark.style.filter = 'alpha(opacity=' + opacity + ')';
                    dark.style.zIndex = zindex;
                    dark.style.backgroundColor = bgcolor;

                    $(dark).css("top", '0px');
                    $(dark).css("left", '0px');
                    $(dark).css("width", pageWidth + 'px');
                    $(dark).css("height", pageHeight + 'px');
                    $(dark).css("padding-right", $(this).css('padding-right'));
                    $(dark).css("padding-left", $(this).css('padding-left'));
                    $(dark).css("padding-top", $(this).css('padding-top'));
                    $(dark).css("padding-bottom", $(this).css('padding-bottom'));


                    $(dark).css("display", "block");
                    $(dark).css("text-align", "center");
                    $(dark).css("vertical-align", "middle");
                    


                    if (animate) { $(dark).fadeIn('fast'); }
                    else { dark.style.display = 'block'; }
                }
                else {
                    if (animate) { $(dark).fadeOut('fast'); }
                    else { dark.style.display = 'none'; }
                }
            }
        });
    })(jQuery);



    (function ($) {
        $.fn.extend({

            DialogGreyOut: function (options) {
                      
                var Opts =  $.extend({ // Default values
                        zindex:900, // element, center into window
                        opacity: 50, // millisecond, transition time
                        bgcolor:'#000', // pixel, minimum left element value
                        show:true, // pixel, minimum top element value
                        fade:true, // booleen, take care of the scrollbar (scrollTop)
                        TheDiv:'',  //the id of the div to float
                        VerticalPos: null,
                        WrapperDiv: '',
                        UseWindow: false,
                        Center: true
                   }, options);

                var zindex = Opts.zindex;
                var opacity = Opts.opacity;
                var opaque = (opacity / 100);
                var bgcolor = Opts.bgcolor;
                var vis = Opts.show;
                var animate = Opts.fade;
                var TheDiv = Opts.TheDiv;
                var VerticalPos = Opts.VerticalPos;
                var wrapper = Opts.WrapperDiv;
                var UseWindow = Opts.UseWindow;
                var Center = Opts.Center;

                var idark = document.getElementById('idarkenScreenObject');
                var tDiv = document.getElementById(TheDiv);
                var tMDiv = document.getElementById(wrapper);
                var tBody = document.body;


                if (TheDiv != '') {
                    
                        
                        $(tDiv).css("display", "block");
                        $(tDiv).css("position", "absolute");
                        $(tDiv).css("z-index", "999");
                        $(tDiv).css("padding", "10px");
                        $(tDiv).css("border-radius", "5px 5px 5px 5px");
                        $(tDiv).css("-moz-border-radius", "5px 5px 5px 5px");
                        $(tDiv).css("-webkit-border-radius", "5px 5px 5px 5px");
                        $(tDiv).css("box-shadow", "2px 2px 30px rgba(0,0,0,0.6)");
                        $(tDiv).css("-webkit-box-shadow", "2px 2px 30px rgba(0,0,0,0.6)");
                        $(tDiv).css("-moz-box-shadow", "2px 2px 30px rgba(0,0,0,0.6)");
                }

                if (!idark) {
                
                    var tnode = document.createElement('div');           // Create the layer.
                    tnode.style.position = 'absolute';                 // Position absolutely
                    tnode.style.top = '0px';                           // In the top
                    tnode.style.left = '0px';                          // Left corner of the page
                    tnode.style.overflow = 'hidden';                   // Try to avoid making scroll bars            
                    tnode.style.display = 'none';                      // Start out Hidden
                    tnode.id = 'idarkenScreenObject';                   // Name it so we can find it later
                    
                    
                    $(tnode).appendTo(tMDiv);
                    idark = document.getElementById('idarkenScreenObject');  // Get the object.
                }
               
                if (vis) {

       
                    //$(this).append(idark);
                    var nodeType = $(this).context.nodeName;
                    if (nodeType == "BODY") 
                    {
                        var pageWidth = $(document).width();
                        var pageHeight = $(document).height()
                    } 
                    else 
                    {
                        var pageWidth = $(this).width();
                        var pageHeight = $(this).height();
                    }

                    //set the shader to cover the entire page and make it visible.
                    idark.style.opacity = opaque;
                    idark.style.MozOpacity = opaque;
                    idark.style.filter = 'alpha(opacity=' + opacity + ')';
                    idark.style.zIndex = zindex;
                    idark.style.backgroundColor = bgcolor;

                    $(idark).css("top", '0px');
                    $(idark).css("left", '0px');
                    $(idark).css("width", pageWidth + 'px');
                    $(idark).css("height", pageHeight + 'px');
                    $(idark).css("padding-right", $(this).css('padding-right'));
                    $(idark).css("padding-left", $(this).css('padding-left'));
                    $(idark).css("padding-top", $(this).css('padding-top'));
                    $(idark).css("padding-bottom", $(this).css('padding-bottom'));

                    $(idark).css("display", "block");
                    $(idark).css("text-align", "center");
                    $(idark).css("vertical-align", "middle");

                    if(Center){ $(tDiv).center(); }
                    if(VerticalPos){ $(tDiv).css("top", VerticalPos + 'px'); }
                   

                    if (animate) { $(idark).fadeIn('fast'); }
                    else { idark.style.display = 'block'; }
                }
                else {
                    if (animate) { $(idark).fadeOut('fast'); tDiv.style.display = 'none';}
                    else { idark.style.display = 'none'; tDiv.style.display = 'none';}
                }
             }
        });
    })(jQuery);