//Following code is design by M.H. Shaon, mh_shaon@yahoo.com, www.windbd.com

$(document).ready(function() {
	var pus=5000;	//Set the time that a image will show after animation
	var speed=2000; //Set the time of the animation
	var arr=[];
	var totalpic=0;
	var captionHeight=40;
	var picheight=$(".animbanner").height();
	var picwidht=$(".animbanner").width();
	$(".imgbox").css({'height':picheight, 'min-height':'50px'});
	$(".animbanner").hide().css({'position':'absolute','z-index':'0'});
	
	var larr=[];
	var totall;
	
//-------Do not modify the following code--------------
//---------Image Preloader --------------------
	
	function imgpreload(imgs,settings)
	{
		// settings = { each:Function, all:Function }
		if (settings instanceof Function) { settings = {all:settings}; }
	
		// use of typeof required
		// https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Operators/Special_Operators/Instanceof_Operator#Description
		if (typeof imgs == "string") { imgs = [imgs]; }
	
		var loaded = [];
		var t = imgs.length;
		var i = 0;
	
		for (i; i<t; i++)
		{
			var img = new Image();
			img.onload = function()
			{
				loaded.push(this);
				if (settings.each instanceof Function) { settings.each.call(this); }
				if (loaded.length>=t && settings.all instanceof Function) { settings.all.call(loaded); }
			};
			img.src = imgs[i];
		}
	}
	
	if (typeof jQuery != "undefined")
	{
		(function($){
	
			$.imgpreload = imgpreload;
	
			// public
			$.fn.imgpreload = function(settings)
			{
				settings = $.extend({},$.fn.imgpreload.defaults,(settings instanceof Function)?{all:settings}:settings);
	
				this.each(function()
				{
					var elem = this;
	
					imgpreload($(this).attr('src'),function()
					{
						if (settings.each instanceof Function) { settings.each.call(elem); }
					});
				});
	
				// declare urls and loop here (loop a second time) to prevent
				// pollution of above closure with unnecessary variables
	
				var urls = [];
	
				this.each(function()
				{
					urls.push($(this).attr('src'));
				});
	
				var selection = this;
	
				imgpreload(urls,function()
				{
					if (settings.all instanceof Function) { settings.all.call(selection); }
				});
	
				return this;
			};
	
			// public
			$.fn.imgpreload.defaults =
			{
				each: null // callback invoked when each image in a group loads
				, all: null // callback invoked when when the entire group of images has loaded
			};
	
		})(jQuery);
	}
	//---------End of Image Preloader -------------
					
	
      $(".animbanner").each(function (index, aimg) {
		arr[index]=aimg;
        totalpic=index;
      });
	  var i=0;
	   $(".imgbox").append('<div class="bnrCaption"></div>'); 
	  $(".bnrCaption").css({'background':'#000000','color':'#FFFFFF','opacity': '0.7',  'margin-top':picheight-captionHeight-0, 'width':picwidht-5,'font-size':'12px','padding-left':'5px'});
	 <!--Creating Loader Div--> 
	 $(".imgbox").append('<div align="center" class="bannerloader1">Loading Animation.....</div>'); 
	
	 var loaderwidth=picwidht/6;
	 var loadertop=16;
	 
	  for(l=0; l<5; l++){	$(".imgbox").append('<div class="bannerloader">&nbsp;</div>'); }
			$(".bannerloader").css({'background':'#000000','opacity': '0.5', 'float':'left', 'width':'16%','margin-top':loadertop});
			$(".bannerloader1").css({'background':'#000000','color':'#FFFFFF','opacity': '0.5', 'width':'100%','margin-top':'15px'});
			
			//$(".bannerloader").hide();
			  $(".bannerloader").each(function (index, aimg) {
				// domEle == this
				larr[index]=aimg;
			   // $(aimg).hide().fadeIn(1000).delay(500).fadeOut(); 
				//alert(larr[index]);
				totall=index;
				
			  });
	    var loopl=0;
		$('.bannerloader').hide();
	   <!--End of Creating Loader Div--> 
	  function lp(){
		$(arr[i]).hide().show("slide","",speed,function(){
			if(i==totalpic){
					$('.bnrCaption').animate({height:0,marginTop:picheight-captionHeight-1,opacity:0},500); 
				 $('.bnrCaption').html('<b>'+$(this).attr("title") + '</b><br>' + $(this).attr("alt"));
				 $('.bnrCaption').show().animate({height:captionHeight,marginTop:picheight-captionHeight-0,opacity:0.7},500); 
				$(arr[i]).delay(pus).show('fast',function(){ 
														 $(this).fadeOut(speed+3000); 
														//  $(this).delay(3000).hide(); 
														
												$('.bnrCaption').css({'height':'0','margin-top':picheight-captionHeight-1,'opacity':0});
														
														
														 lp(); 
														})
				i=0; 
				
				//alert('final' + i);
			}
			else{
				 $('.bnrCaption').animate({height:0,marginTop:picheight-captionHeight-1,opacity:0},500); 
				 $('.bnrCaption').html('<b>'+$(this).attr("title") + '</b><br>' + $(this).attr("alt"));
				 $('.bnrCaption').show().animate({height:captionHeight,marginTop:picheight-captionHeight-0,opacity:0.7},500); 
				$(arr[i]).delay(pus).show('fast',function(){ 
														 $(this).fadeOut(speed+3000); 
														 //$(this).delay(3000).hide(); 
												$('.bnrCaption').css({'height':'0','margin-top':picheight-captionHeight-1,'opacity':0});
														
														
														 lp(); 
														})
				i=i+1; 
				//alert(i);
				
			}
		});
		}
		
		var stp=0;
		function startloader(){
			$(larr[loopl]).hide().fadeIn(800,function(){
					if(stp==0){
						if(loopl==totall){loopl=0; startloader();$(".bannerloader").hide();}else{loopl=loopl+1; startloader();}
					}
						});
		}
		startloader();
		
		function stoploader(){
			stp=1;
			$('.bannerloader').hide();
			$('.bannerloader1').hide();
		}
		$('.animbanner').imgpreload
			({
				each: function()
				{
					//alert("each");
					// this = dom image object
					// callback executes when each image loads
					
					var picheight=$(".animbanner").height();
					var picwidht=$(".animbanner").width();
					$(".imgbox").css({'height':picheight});
			$(".bannerloader").css({'background':'#000000','opacity': '0.5', 'float':'left', 'width':'16%','margin-top':loadertop});
			$(".bannerloader1").css({'background':'#000000','color':'#FFFFFF','opacity': '0.5', 'width':'100%'});
			
				},
				all: function()
				{
					stoploader();
					var picheight=$(".animbanner").height();
					var picwidht=$(".animbanner").width();
					$(".bnrCaption").css({'background':'#000000','color':'#FFFFFF','opacity': '0.7',  'margin-top':picheight-captionHeight-0, 'width':picwidht-5,'font-size':'12px','padding-left':'5px'});
					lp();
					
					
				}
			});
		
		
	
});