/*********** USAGE *************
--- HTML code ---
<div id="fadeBanner_sample">
	<ul>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
	</ul>
</div>

--- Javascript code ---
$('#fadeBanner_sample').fadeBanner();

--- ADVANCE USAGE ---
(Parameters)
duration: duration of one image staying time (ms)
duration2: fading duration (ms)
loading: if you have loading gif-animation image, this need to be true
buttonNumber: true: show numbers or false: not show
buttonStyle: Button style setting 
	fontColor: '#252525' string,
	fontSize: 20 int,
	fontWeight: 'normal' string,
	fontFamily: 'Trebuchet MS' string,
	padding: '8px 15px' string,
	border: '3px solid #eee' string,
	cornerRadius: 4 int,
	bottom: button position bottom - 10 integer,
	left: button position left - 10 integer,
	margin: button right margin - 5 integer,
	bgColor: background color - 'rgba(240,240,240,0.7)' string,
	bgColorIE: background color for IE 6-7 - 'rgb(245,245,245)' string
maps: (Array / HTML Code or false) Link mapping to the images

(Add link mapping)
Add object "maps" to the options.
ex. maps:new Array('<area shape="rect" coords="0,0,100,20" href=""/>')

(Add loading gif-image)
You need to add the following HTML code
<img class="loader" src="path/loader.gif" width="image width" height="image height" style="display:none;"/>

(For no-script browser)
You need to add noscript tag
<noscript>
	<img src="path/noscript.jpg" alt="You need to have javascript to view this content." width="image width" height="image height"/>
</noscript>

(complete example)
<div id="fadeBanner_sample">
	<noscript>
		<img src="path/noscript.jpg" alt="You need to have javascript to view this content." width="image width" height="image height"/>
	</noscript>
	<img class="loader" src="path/loader.gif" width="image width" height="image height" style="display:none;"/>
	<ul>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
		<li><a href="http://example.com" image="path/image.jpg"></a></li>
	</ul>
</div>

*******************************/

(function($) {
	$.fn.fadeBanners = function(userArgs) {
		if(!this.length) return false;
		
		var args = {
			duration:5000,
			duration2:1000,
			loading:false,
			buttonNumber:true,
			buttonStyle:{fontColor:'#252525',fontSize:20,fontWeight:'normal',fontFamily:'Trebuchet MS',padding:'8px 15px',border:'3px solid #eee',cornerRadius:4,bottom:10,left:10,margin:5,bgColor:'rgba(255,255,255,0.8)',bgColorIE:'rgb(245,245,245)'},
			maps:false
		}
			
		$.extend(true, args, userArgs);
		
		$('noscript', this).hide();
		if(!jQuery.support.leadingWhitespace) 	var buttonbg = args.buttonStyle.bgColorIE;
		else var buttonbg = args.buttonStyle.bgColor;
			
		var frame = this.css({'position':'relative'});
		var slides = frame.find('ul').addClass('slides').css({'position':'relative'}).find('li');
		var total = slides.length;
		
		if(args.loading) {
			var loader = frame.find('.loader');
			var leftPosi = (frame.width()-loader.attr('width'))/2;
			var topPosi = (frame.height()-loader.attr('height'))/2;
			loader.css({'position':'absolute','display':'block','top':topPosi+'px','left':leftPosi+'px'});
		}
		var current = 0;
		var frontSlideTimer = null;
		var timerOn = false;
		var imgcompletes = 0;
		
		//BUTTONS PREPARATION	
		if(args.buttonStyle) {
			var buttons = $('<ul></ul>').addClass('buttons').css({'position':'absolute','left':args.buttonStyle.left+'px','bottom':args.buttonStyle.bottom+'px','padding':0,'margin':0,'list-style':'none','color':args.buttonStyle.fontColor,'font-family':args.buttonStyle.fontFamily,'font-size':args.buttonStyle.fontSize+'px','font-weight':args.buttonStyle.fontWeight});
				
			for(var i=0; i<total; i++) {
				var button = $('<li></li>').attr('id','b'+i).css({'float':'left','border':args.buttonStyle.border,'border-radius':args.buttonStyle.cornerRadius+'px','-moz-border-radius':args.buttonStyle.cornerRadius+'px','-webkit-border-radius':args.buttonStyle.cornerRadius+'px','-o-border-radius':args.buttonStyle.cornerRadius+'px','background-color':buttonbg,'margin-right':args.buttonStyle.margin+'px','cursor':'pointer'});
					
				button.append($('<span></span>')).find('span').css({'display':'block','padding':args.buttonStyle.padding}).text(i+1);
				if(!args.buttonNumber) {
					button.find('span').css({'visibility':'hidden'});
				}
				
				if(total > 1) {
					buttons.append(button);
					button.click(function(e) {
						var nextID = this.id.substr(1);
						if(current != nextID) {
							stopTimer();
							current = changeImage(current, nextID);
						}
					});
				}
			}
			frame.append(buttons);
		}
		
		if(total > 1) {
			frame.hover( function(e) {
				if(timerOn) stopTimer();
				e.preventDefault();	
			}, function(e) {
				if(imgcompletes == total) {
					if(timerOn) stopTimer();
					startTimer();
				}
				e.preventDefault();
			});
		}
		
		//SLIDES PREPARATION
		slides.each( function(index) {		
			$(this).css({'position':'absolute','top':0,'left':0,'width':frame.width()+'px','height':frame.height()+'px','overflow':'hidden'});
			var imgpath = $(this).children('a').attr('image');
			if(index != 0) {
				$(this).css({'display':'none','opacity':0});
			}
			
			var img = $('<img>').attr('src',imgpath+'?r='+Math.random()).css({'border':'none'});
			$(this).find('a').append(img);
			
			if(args.maps) {
				if(args.maps[index]) {
					
					var map = $('<map></map>').attr({'name':'map'+index,'id':'map'+index}).html(args.maps[index]);
					
					//FOR IE 6 BUG FIX
					if(!window.XMLHttpRequest) {	
						var coords = args.maps[index].match(/[0-9 ]{1,4},[0-9 ]{1,4},[0-9 ]{1,4},[0-9 ]{1,4}/gi);
						map.find('area').each( function(index) {		
							$(this).attr('coords',coords[index]);
						});
					}
					img.attr('usemap','#map'+index);
					$(this).find('a').append(map);
					map = null;
				}
			}
			
			img.load( function() {
				imgcompletes++;
				
				if(imgcompletes == total) {
					if(args.loading) loader.hide();
					if(total > 1) startTimer();
					return false;
				}
				imgpath = null;
				img = null;
			});
		});
		
		function changeImage(current, nextID) {
			if(nextID) {
				var next = nextID;
				//console.log('next:'+next+'current:'+current);
			}else{
				//console.log(current);
				next = parseInt(current) + 1;
				if(next == total) next = 0;
				//console.log('next:'+next+'current:'+current);
			}
			slides.eq(current).stop(true, true).animate({'opacity':0}, args.duration2, function() {
				$(this).css('display','none');	
			});
			slides.eq(next).css('display','block').stop(true, true).animate({'opacity':1}, args.duration2*1.2);
			return next;			
		}
		
		function stopTimer() {
			if(timerOn) {
				window.clearInterval(frontSlideTimer);
				timerOn = false;
			}
			return false;
		}
		
		function startTimer() {
			if(!timerOn) {
				timerOn = true;
				frontSlideTimer = window.setInterval( function() {
					current = changeImage(current);
				}, args.duration);
			}
			return false;
		}
		
		this.stopTimer = function() {
			if(timerOn && total > 1) {
				window.clearInterval(frontSlideTimer);
				timerOn = false;
			}
			return false;
		}
		
		this.startTimer = function() {
			if(!timerOn && total > 1) {
				timerOn = true;
				frontSlideTimer = window.setInterval( function() {
					current = changeImage(current);
				}, args.duration);
			}
			return false;
		}
		return this;
	};
})(jQuery);