(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 tbody = document.getElementsByTagName("body")[0];
                    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 = '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);