/**
 * @author Ruan Candido
 */
$.fn.bannerRotativo = function (opts){
	var settings = 	$.extend({}, $.fn.bannerRotativo.defaults , opts);
	
	return this.each( function (i,banner){
		/*criando variáveis*/
			var $banner , browserName , typeBanner , $json , jsonURL , src , $loading , controls , interval , pause , transitionDuration , $itens , $current , $legenda , $title , $link , $next , totalItens , pages , $bts , marginLeftBt , $nav , $barraAtual , barraWidth , marginBT , target , current , delay , delayBT , intervalo ,	transition , $slider ,
			
			start = function(){
				/*definindo variáveis*/
					$banner 			= $(banner);
					browserName 		= navigator.appName;
					interval 			= settings.interval;
					pause 				= settings.pause;
					transitionDuration 	= settings.transitionDuration;
					transition 			= settings.transition;
					$itens 				= $banner.find('img');
					totalItens 			= $banner.find('img').length;
					pages 				= totalItens;
					target 				= 0;
					current 			= 0;
					controls 			= settings.controls;
					ease 				= settings.easing;
					typeBanner 			= settings.typeBanner;
					$loading 			= $('<img src="'+settings.urlLoading+'" class="loading"/>');
					jsonURL 			= settings.jsonURL;
				
				
				/*Tipo banner*/
				switch(typeBanner){
					case "ajax":
						// var json = '\{ "imagem" \: \[ ';
						// $itens.each(function(i , img){
							// json += '\{"src" \: "' + img.src + '" \, "legenda" \: "' + img.alt +'" \, "link" \: "'+$(img).attr('data-link')+'" \, "title" \: "' + img.title +'" \}';
							// if (i<totalItens-1){
								// json += "\,";
							// }
							// $(img).remove();
						// });
						// json += "\] \}";
						// console.log(json);
						$.get(jsonURL,function(data){
							$json =  eval('(' + data + ')');
							totalItens = $json.imagem.length;
							pages = totalItens;
							ajax();
						});
					break;
				}
				
				var ajax =  function(){
				/*Tipo de transição*/
					switch (transition){
						case 'automatic':
							src = new Array();
							$itens.each(function(i,img){
								src.push($(img).attr('src'));
							});
							$itens.hide();
							$banner.prepend('<div class="animation" style="position:relative; overflow:hidden; width:100%; height:100%; display:block"><div class="current"></div><div class="current"></div><div class="next"></div><div class="next"></div></div>');
							$current = $banner.find('div.current');
							$next = $banner.find('div.next');
							var width  = $itens.outerWidth(),
								height = $itens.outerHeight();
							$current.css({'width': width , 'height' : height/$current.length  , 'left':0 , 'position':'absolute' , 'z-index':1});
							$next.css({'width': width , 'height' : height/$current.length , 'top': (height/$next.length*i) , 'left':0 , 'position':'absolute' , 'z-index':2});
							$next.eq(0).css({'top': -(height/$current.length)});
							$next.eq(1).css({'bottom': -(height/$current.length)});
							for(var i = 0 ; i < $current.length ; i++){
								$current.eq(i).css({'background':'url('+src[0]+') 0 '+ -(height/$current.length*i)+'px no-repeat', 'top': (height/$current.length*i)});
							};
						break;
						case 'imgAndText':
							switch(typeBanner){
								case "ajax":
										$banner.prepend('<div class="animation" style="position:relative; width:100%; height:100%; display:block"><h3 class="title"></h3><p class="legenda"></p><a href="javascript:;" class="link">Saiba como foi</a><div class="current" style="position:absolute; width:100%; height:0; bottom:0; left:0; display:block"></div></div>');
										$current = $banner.find('div.current');
										$title = $banner.find('h3.title');
										$legenda = $banner.find('p.legenda');
										$link = $banner.find('a.link');
										$current.parent().append($loading);
										
										if (browserName == "Microsoft Internet Explorer"){
											$loading.animate({opacity:0});
											$current.css("background","url(" + $json.imagem[0].src +") left bottom no-repeat").delay(300).animate({"height":"100%"} , transitionDuration , ease);
											$title.css('display','none').html($json.imagem[0].title).delay(600).fadeIn();
											$legenda.css('display','none').html($json.imagem[0].legenda).delay(800).fadeIn();
											$link.css('display','none').attr('href',$json.imagem[0].link).delay(1000).fadeIn();
										}else{
											$.get($json.imagem[0].src , function (){
												$loading.animate({opacity:0});
												$current.css("background","url(" + $json.imagem[0].src +") left bottom no-repeat").delay(300).animate({"height":"100%"} , transitionDuration , ease);
												$title.css('display','none').html($json.imagem[0].title).delay(600).fadeIn();
												$legenda.css('display','none').html($json.imagem[0].legenda).delay(800).fadeIn();
												$link.css('display','none').attr('href',$json.imagem[0].link).delay(1000).fadeIn();
											});
										}	
									
									
								break;
							}
						break;
						case 'fade': 
							$itens.css({'position': 'absolute' , 'top': '0' ,  'left': '0' , 'display':'none'}).first().show();
						break;
						case 'slideH':
							$banner.prepend("<div id='slider'/>");
							$slider = $banner.find("#slider");
							$slider.append($itens).css({'position':'absolute' , 'top':'0' , 'left' : '0' , 'height': $itens.height() + 'px', 'width' : (totalItens*$itens.width()) + 'px'});
							$itens.css('float' , 'left');
						break;
					}
				
				
				/*controls*/
					switch (controls){
						case 'relogio':
							$banner.append('<div class="nav"><div class="barra"><div class="barraAtual"/></div><div class="bts"/></nav>');
							$nav = $banner.find('.nav');
							$barraAtual = $(".barraAtual");
							for ( var i=0 ; i < pages ; i++){
								$nav.find('.bts').append('<a href="javascript:;" rel="' + i + '" class="bt" title="banner 0' + i + '"><span class="branco"/><span class="ponto"/></a>');
							};
							$bts = $nav.find('.bt');
							marginBT = 100 / (totalItens-1);
							marginLeftBt = parseInt($bts.css('margin-left')) * -1;
							barraWidth = parseInt($banner.find('.barra').width());
							$bts.each( function(i){
								if ( i > 0){
									$(this).css({"left" : (i*marginBT) + "%"})
								}
							});
							$bts.first().find('.branco').css({"width":"20px"});
							$bts.click( function(){
								target = parseInt($(this).attr('rel'));
								if(target != current){
									clearTimeout(delayBT);
									$bts.find('.branco').stop().css('width' , '0').end().eq(target).find('.branco').css('width','20px');
									clearTimeout(intervalo);
									mudarBanner(target);
									auto();
								}else{
									clearTimeout(delayBT);
									$bts.find('.branco').stop().css('width' , '0').end().slice(0 , target+1).find('.branco').css('width','20px');
									clearTimeout(intervalo);
									$barraAtual.stop().css({"width" : "" + (target * marginBT) + "%"});
									auto();
									current = target;
								}
								return false;
							});
							delay = parseInt( marginLeftBt / (((barraWidth * marginBT) / 100) / interval));
							auto();
						break;
						case 'pagination':
							$banner.append('<div class="nav"></div>');
							$nav = $banner.find('.nav');
							for(var i = 0 ; i < totalItens ; i++){
								$nav.append('<a href="javascript:;" class="bts" rel="'+i+'" title="pagina 0'+(i+1)+'">'+ (i+1) +'</a>');
							}
							$bts = $nav.find('.bts');
							$bts.first().addClass('active');
							$nav.css({'width': $nav.outerWidth(true) , 'margin':"0 0 0 " + (-$nav.outerWidth(true)/2)+"px"});
							$bts.click( function(){
								target = parseInt($(this).attr('rel'));
								$bts.removeClass('active');
								$(this).addClass('active');
								if(target != current){
									if(target > current){
										mudarBanner(target , "next");
									}else{
										mudarBanner(target , "prev");
									}
								}else{
									current = target;
								}
								return false;
							});
							auto();
						break;
					}
				};
				
			},
			
			inicia = function(interval , marginBT , marginLeftBt , barraWidth){
				if(target < pages-1){
					target++;
					$barraAtual.animate({ width : (marginBT*target) + "%"}, interval , 'linear');
					delayBT = setTimeout( function(){
						$bts.eq(target)
							.find('.branco')
							.animate({width:"20px"} , delay*2 , function(){ auto(); mudarBanner(target)});
					},interval-delay);
				}else{
					target++;
					$barraAtual.animate({ width : (marginBT*target) + "%"}, interval , 'linear' , function(){
						target = 0;
						$barraAtual.css({"width":"0"});
						$bts.find('.branco')
							.css({"width":"0"})
							.end()
							.eq(target)
							.find('.branco')
							.animate({width:"20px"} , delay*2 , function(){ auto(); mudarBanner(target)});
					});
				}
			},
			
			auto = function(){
				switch (controls){
					case 'relogio':
						intervalo = setTimeout ( function(){
							inicia(interval , marginBT , marginLeftBt , barraWidth)
						} , pause );
					break;
					case 'relogio2':
						b = 39;
						intervaloBT = setTimeout (function(){
							b--
							animaBT(b);
						}, interval/39);
						intervalo = setTimeout ( function(){
							blocked = false;
						}, interval);
					break;
					default:
						intervalo =  setTimeout( function(){
									target = current + 1;
									if (target < pages){
										mudarBanner (target , current);
										animando = true;
									}else{
										target = 0;
										mudarBanner (target , current);
										animando = true;
									};
									if($bts){
										$bts.removeClass('active').children('.hover').fadeOut();
										$bts.eq(target).addClass('active').children('.hover').fadeIn();
									}
									current=target;
							}, interval);
					break;
					
				}
			},
			
			mudarBanner = function(target , diretion){
				switch (controls){
					case "relogio":
						$bts.find('.branco').css({'width' : "0"}).end().slice(0 , target+1).find('.branco').css({"width" :"20px"});
						$barraAtual.stop().css({"width":(target * marginBT) + "%"});
					break;
				}
				switch (transition){
					case 'automatic':
						var position = -$next.outerHeight();
						if(diretion=="next"){
							$next.eq(0).css({'top':position});
							$next.eq(1).css({'bottom':position});
							$next.each(function(i,div){
								$(div).css({'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
								if (i==0){
									$(div).stop().animate({top:0}, transitionDuration , ease , function(){
										$current.eq(i).css({'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
									});	
								}else{
									$(div).stop().animate({bottom:0}, transitionDuration , ease ,function(){
										$current.eq(i).css({'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
									});	
								}
							});
						}else{
							$current.each(function(i,div){
								$(div).css({'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
								if (i==0){
									$next.eq(i).stop().animate({top:position}, transitionDuration , ease ,function(){
										$(this).css({'top':0 , 'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
									});
								}else{
									$next.eq(i).stop().animate({bottom:position}, transitionDuration , ease , function(){
										$(this).css({'bottom':0 , 'background':'url('+src[target]+') 0 ' + position*i+'px no-repeat'});
									});
								}
							});
						}
					break;
					case 'imgAndText':
						clearTimeout(intervalo);
						switch(typeBanner){
							case "ajax":
								var flag = false , flag2 = false;
								$title.stop().fadeTo(300,0);
								
								$legenda.stop().delay(200).fadeTo(300,0);
								$link.stop().delay(400).fadeTo(300,0);
								$current.stop().delay(300).animate({'height':"0"} , transitionDuration , ease);
								$loading.stop().delay(transitionDuration).animate({opacity:1},function(){ flag=true; trocaBanner(flag,flag2); });
								
								if (browserName == "Microsoft Internet Explorer"){
									setTimeout(function(){
										flag2 = true;
										trocaBanner(flag,flag2);
									},1000);
								}else{
									$.get($json.imagem[target].src, function(){
										flag2 = true;
										trocaBanner(flag,flag2);
									});
								}	
								
								function trocaBanner (flag,flag2){
									if(flag && flag2){
										$loading.animate({opacity:0});
										$current.css("background","url(" + $json.imagem[target].src +") left bottom no-repeat").stop().delay(300).animate({"height":"100%"} , transitionDuration , ease);
										$title.html($json.imagem[target].title).stop().delay(600).fadeTo(300,1);
										$legenda.html($json.imagem[target].legenda).stop().delay(800).fadeTo(300,1);
										$link.attr('href',$json.imagem[target].link).stop().delay(1000).fadeTo(300,1,function(){auto();});
									}
								}
							break;
						}
					break;
					case 'fade': 
						$itens.fadeOut(transitionDuration).eq(target).fadeIn(transitionDuration);
					break;
					case 'slideH':
						$slider.animate({'left': -target*$itens.outerWidth(true)} , {duration:transitionDuration , easing:ease})
						//$itens.fadeOut(transitionDuration).eq(target).fadeIn(transitionDuration);
					break;
				}
				current = target;
			};
			start();
	});
};

$.fn.bannerRotativo.defaults = {
	interval: 5000,
	typeBanner: "ajax",
	jsonURL: "",
	urlLoading: "public/img/loading.gif",
	transitionDuration: 700,
	transition:'imgAndText',
	controls:'pagination',
	pause:2000,
	easing:'easeOutSine'
}


