// <![CDATA[
/**
 * dependency of this plugin:
 *
 * //@var global string http_root
 * //@var global string rp_global_image
 * //@var global string image_loader
 * //@var global string rp_cms
 *
 * //@function close_popup()
 *
*/

// You need an anonymous function to wrap around your function to avoid conflict
(function($){
 
    // Attach this new method to jQuery
    $.fn.extend({ 
         
        // This is where you write your plugin's name
        make_blackout: function(options) {
		
			// Set the default values, use comma to separate the settings, example:
            var defaults = {
				backgroundOpacity:	0.3, // The opacity of the background layer.
				backgroundColour:	'#000000', // The colour of the background layer.
				frontColour:		'#ffffff' // The colour of the front loading text.
            }
                 
            var options = $.extend(defaults, options);
			
			// return this.click(function(){ // original
			// "this" is already a jQuery object: 
			// When you create the click function you can assign that element to a variable and reference it within:
			var $cm = this.ready(function(e){
				
				var o = options;
				var object = $(this); // always return #document.
				
				$(document.body).append("<div class='background-blackout'></div>");
				$(document.body).append('<div class="loading-blackout"><img src="'+http_root+rp_global_image+'ajax-loader.gif" width="16" height="11"/></div>');

				// Set the background layer and the front layer.
				// Must set the css of layer .loading-blackout first otherwise the calculation for this layer won't get the answer correctly and the document will get extra space.
				var layer_background = $('.background-blackout');
				var layer_front = $('.loading-blackout').css({
					float:'left', // float to left to make the div same size as the picture. 
					position:'absolute', 
					top:0,
					left:0
				});
				
				// Set the variable and get the value for the front layer.
				var width_loading = layer_front.width();
				var height_loading = layer_front.height();
				var height_window = $(window).height();
				var scroll_top = $(window).scrollTop();
				var scroll_left = $(window).scrollLeft();
				var scroll_height = $("body").attr("scrollHeight");

				// Do the calculation for the front layer.
				var scroll_bottom = scroll_top + height_window;
				var top_front_layer = (height_window/2)-(height_loading/2);
				var margin_left_front_layer = "-"+((scroll_left + width_loading)/2);

				// Set the variable and get the value for the blackout.
				var height_document = $(document).height();
				var index_div = $('div').get_topZindex();
				
				// Keep the lines below for checking.
				//alert(object.get(0).nodeName);
				//alert(layer_front.get(0).nodeName);
				//alert(height_document);
				//alert(top_front_layer);
				//alert(scroll_top);
				//$( '#last' )[0].nodeName;
				//document.getElementById( 'last' ).nodeName;
				//alert(index_div);

				// Set the css for background/ blackout.
				layer_background.css({
					position:'absolute',
					width:'100%',
					height:height_document,
					background: o.backgroundColour,
					opacity: o.backgroundOpacity,
					top:0,
					left:0,
					zIndex:index_div+1
					/*
					position: 'fixed',
					top: '0',
					left: '0',
					width: '100%',
					height: '100%',
					overflowX: 'auto',
					overflowY: 'scroll'
					*/
				});
					
				// Set the css for the front layer/ animated gif.
				layer_front.css({
					position:'absolute',
					width: width_loading + "px",
					height: height_loading + "px",
					marginLeft:margin_left_front_layer + "px",
					top: scroll_top + top_front_layer + "px",
					left:'50%',
					display: 'none',
					zIndex:index_div+2
				});
				

				// Fade in the blackout
				layer_background.fadeIn('fast', function(){
					layer_front.fadeIn('fast');
				});
				
			});
			
			// Keep the lines below for checking.
			//alert($cm.get(0).nodeName); // get #document if you call the plugin like this - $(document).make_blackout();
			
			// Remove the layers.
			$.fn.make_blackout.remove_blackout = function() {
                
				$(".loading-blackout").fadeOut('slow', function(){
					// Remove all the layer.
					$(this).remove();
				});
				
				$(".background-blackout").fadeOut('slow', function(){
					// Remove all the layer.
					$(this).remove();
				});
				
            }

			
        }
    });
     
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

// ]]>