var browser=navigator.appName;

	$.fn.image = function (src,w,h) {
       	var img = new Image();
   		var windowWidth = $(window).width();
   		var windowHeight = $(window).height();
		$('#loader').css('display','block');
		$('#loader').css('width',w);
		$('#loader').css('height',h);
		
		$(window).bind("resize", function(){
    		changeCss();
		});
		
		var imageHeight = $('#loader').height();
	    var imageWidth = $('#loader').width();
		changeCss();
		
		function changeCss(){
			
	    	$('#loader').css({
        		"position" : "absolute",
        		"left" : windowWidth / 2 - imageWidth / 2,
       			"top" : windowHeight /2 - imageHeight / 2 + (browser=="Microsoft Internet Explorer"?(document.documentElement.scrollTop || 0):window.pageYOffset)
   			});
		};		
		
       	$(img).load(function () {
           	//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
           	$(this).hide();
           	$('#loader').removeClass('loading').append(this);
			
            $(this).fadeIn();
       	}).error(function () {
           	// notify the user that the image could not be loaded
        }).attr('src', src);
	};
	
	function loadImage(src,w,h)
	{
		closeImage();
		$("#loader").image(src,w,h);
	}
    
    
    function closeImage()
    {
    	
    	$("#loader").addClass('loading');
    	$("#loader").css('display','none');
    	document.getElementById('loader').innerHTML='';
    }