(function($){
	$.fn.loadJ = function(options, callback){
		
		var $this = this;
		
		var preClass = parseInt(Math.random() * 100, 10);

		var defaults = {
			datas : 'none',
			loader : 'none',
			bar : 'none',
			image : 'none',
			number:'none'
		};		
		
		// Variables
		
		var numberType;
		var imageWidth;
		var imageHeight;
		var imageHor;
		var imageVer;
		
		var preBackground = false;
		var preBar = false;
		var preImage = false;
		var preNumber = false;
		var preImageHor = false;
		var preImageVer = false;
		
		var loadContent = '';
		var loaderDatas = '';
		var barDatas = '';
		var numberDatas = '';
		var imageDatas = '';
		

		var options = $.extend(defaults, options); 
		
			
		if (options.loader != 'none'){
			if (options.loader.background[0] == '#')		{preBackground = options.loader.background;}
			else 														{preBackground = "url('"+options.loader.background+"')";}
			loaderDatas = 'style="width:' + options.loader.width + ';height:' + options.loader.height + ';position:fixed;top:'+options.loader.top + ';left:'+options.loader.left + ';background:'+preBackground+';z-index:100000;"';
		}
		
		if (options.bar != 'none'){
			preBar = true;
			barDatas = '<div id="loadBar" style="width:0px;height:' + options.bar.height + ';position:absolute;top:' + options.bar.top + ';left:' + options.bar.left + ';background:' + options.bar.background + ';"</div>';
		}
		
		if (options.number != 'none'){
			preNumber = true;
			if (options.number.type == 'percent')
			{numberType = '%';}
			else if (options.number.type == 'number')
			{numberType = '/100';}
			else {numberType = '%';}
			numberDatas = '<div id="number" style="position:absolute;top:'+options.number.top + ';left:' + options.number.left + ';color:' + options.number.color + ';"><span id="changeNumber">0</span><span id="dim">' + numberType + '</span></div>';
		}
		
		if (options.image != 'none') {
			preImage = true;
			imageDatas = '<div id="imageLoader" style="position:absolute;overflow:hidden;">';
			if (options.image.before)
				imageDatas += '<div id="beforeImage" style="position:absolute;top:0px;left:0px;"><img src="' + options.image.before + '"/></div>';
			if (options.image.after)
				imageDatas += '<div id="afterImage" style="position:absolute;top:0px;left:0px;overflow:hidden;"><img src="' + options.image.after + '"/></div>';
			if (options.image.position){
				if (options.image.position.horizontal)						{preImageHor = options.image.position.horizontal;}
				if (options.image.position.vertical)							{preImageVer = options.image.position.vertical;}
			}
			imageDatas += '</div>';
		}
				
		loadContent = '<div id="' + preClass + 'loadContainer"' + loaderDatas + '>';
		
		if (preBar)
			loadContent += barDatas;
		
		if (preImage)
			loadContent += imageDatas;
		
		if (preNumber)
			loadContent += numberDatas;
			
		loadContent += '</div>';
							

		if (preImage){
			var img = new Image();
			img.src = options.image.before;
			img.onload = function(){
				if (options.image.after){
					var img = new Image();
					img.src = options.image.after;
					img.onload = function(){
						launchIt();
					}
				}
				else {
					launchIt();
				}
			}
		}
		else {
			launchIt();
		}

		function launchIt(){
			$this.append(loadContent);
		
			if (typeof(options.datas) == 'string'){	
				var datasLength = 1;
				preloadImage(options.datas, false);
			}
			else{
				var datasLength = options.datas.length;
				preloadImage(options.datas[0], true,datasLength);
			}
			if (preImage){
				imageWidth = $('#beforeImage img').width();
				imageHeight = $('#beforeImage img').height();
				$('#beforeImage')
					.width(imageWidth)
					.height(imageHeight);
				$('#imageLoader')
					.width(imageWidth)
					.height(imageHeight);
					
				if (options.image.after){
					$('#afterImage').width(0).height(imageHeight);
				}
				if (preImageHor){
					if (preImageHor == 'center'){
						$('#imageLoader').css({'left':'50%','margin-left':-imageWidth/2})
					}
					else{ 
					}
				}
				if (preImageVer){
					if(preImageVer == 'center'){
						$('#imageLoader').css({'top':'50%','margin-top':-imageHeight/2})
					}
					else {
					}
				}
			}
		}
		
		
		var i = 1;
		var currentWidth = 0;
		var dimNum = 0;
		var dims = new Array();
		function preloadImage(url, array, datasLength){ 
			var cran = $('#'+preClass+'loadContainer').width() / datasLength;
			currentWidth += cran;
			var img = new Image();
			img.src = url;
				img.onload = function(){
				dims[dimNum] = {height:img.height,width:img.width};
				dimNum++;
				if (!array){
					$('#'+preClass+'loadContainer').fadeOut(500,function(){
						$(this).remove();
					});
					if (typeof callback == 'function') { // make sure the callback is a function
						callback.call(this, dims); // brings the scope to the callback
					}
				}
					else {
						if (i < datasLength){
						$('#loadBar').stop().animate({'width':currentWidth},200,'linear');
						if (preImage){
							$('#afterImage').stop().animate({'width':(currentWidth / $(window).width()) * imageWidth},200,'linear');
						}
						else if (preNumber){
							$('#changeNumber').text(parseInt((currentWidth / $(window).width()) *100, 10));
						}
						preloadImage(options.datas[i], true, datasLength);
						i++;
					}
					else {
						$('#loadBar').stop().animate({'width':'100%'},500,'linear');
						if (preImage){
							$('#afterImage').stop().animate({'width':imageWidth},200,'linear');
						}
						else if (preNumber){
							$('#changeNumber').text(100);
						}
						if (typeof callback == 'function') { // make sure the callback is a function
							callback.call(this, dims); // brings the scope to the callback
						}
						$('#'+preClass+'loadContainer').fadeOut(500,function(){
							$(this).remove();
						});
					}
				}
			}
		}
		
	};
})(jQuery);