/* 
	Background Changer (Fadein-Fadeout)
	Author: Rames Aliyev
	Version: 1.0.1
	Release Date: 14.12.2011
	Feel free to use!
	
	To use; just put two img tag and add theese's id to "imgID" and "bImgID" below, after this just "$(document).ready(function() { $.fn.bganimation(); });"
	
*/
(function($){
	$.fn.bganimation = function(settings) {
		settings = jQuery.extend({
			fadeOut	: 500,
			speed	: 10000, //must bigger than wait time, wait time is neccessary for replacing img (its about cross browser)
			wait	: 1000,
			show	: 1000,
			showDur	: 750,
			imgID 	: 'bgimg',
			bImgID 	: 'bgimgback',
			images 	: new Array(
				'/images/backgrounds/1.jpg',
				'/images/backgrounds/2.jpg',
				'/images/backgrounds/3.jpg',
				'/images/backgrounds/4.jpg'
			),
			loaded	: [],
			active  : 1,
			next  	: 2
		},settings);
		

		// first show all images unvisible
		$('#'+settings.imgID).css('opacity', 0)
		$('#'+settings.bImgID).css('opacity', 0)
		
		// and everything begin!
		setTimeout(
			(function(){
				// show unvisible images
				$('#'+settings.imgID).fadeTo(settings.showDur,100, function() {
					$('#'+settings.bImgID).css('opacity', 100)
				})
			}),settings.show
		)
		
		setInterval(
			(function(){
				// FadeOut the image
				$('#'+settings.imgID).fadeTo(settings.fadeOut,0, function() {

					$('#'+settings.imgID).attr("src", settings.images[settings.active]);
					setTimeout((function(){
						$('#'+settings.imgID).css('opacity', 1)
						settings.active = (settings.active + 1 < settings.images.length ? settings.active + 1 : 0 );
						$('#'+settings.bImgID).attr("src", settings.images[settings.active]);
					}),settings.wait)
					
					settings.next = (settings.active + 1 < settings.images.length ? settings.next + 1 : 0 );
					if(!(settings.next in settings.loaded)){
						settings.loaded[settings.active] = new Image(1,1);
						settings.loaded[settings.active].src = settings.images[settings.active];
					}		
				});	
			})
			,settings.speed
		);
		
	};
})(jQuery);