$(function(){
	
	navigation = function(_groupItensW, 
						  _qtdItens, 
						  _qtdVisivel, 
						  _buttonNext, 
						  _buttonPrevious, 
						  _itens, 
						  _contentPaginas
						  ){

		var _pos = 0;
		var _arr = [];
		
		// montando as positions
		for(var i=0; i < _qtdItens; i++){ _arr[i] = ((i) * _groupItensW)*-1; }
		
		_buttonNext.click(function(){

			_pos++;
			if(_pos < _qtdItens){
				activeButtonNavigation(_buttonPrevious);
				
				_itens.eq(_pos-1).fadeOut('slow', function(){
					_itens.eq(_pos).fadeIn('slow');
				});

				if(_pos == _qtdItens-1) inactiveButtonNavigation(_buttonNext);
			}

			markPageBox(_pos);

			return false;
		})
		
		_buttonPrevious.click(function(){
			_pos--;
			if(_pos >= 0){
				
				activeButtonNavigation(_buttonNext);
				
				_itens.eq(_pos+1).fadeOut('slow', function(){
					_itens.eq(_pos).fadeIn('slow');
				});
				
				if(_pos == 0) inactiveButtonNavigation(_buttonPrevious);
			} 

			markPageBox(_pos);
			
			return false;
		})
		
		activeButtonNavigation = function(_button){
			_button.css('cursor','pointer');
			_button.fadeIn('slow');
		}
	
		inactiveButtonNavigation = function(_button){
			_button.css('cursor','default');
			_button.fadeOut('slow');
		}
		
		_qtdPaginas = _qtdItens-1;
		_strPag = "";
		
		for(i=0; i <= _qtdPaginas; i++){
			_strPag += "<a class='selpagina' href='#' title='"+ (i+1) +"'>" + (i+1) + "</a>";
			if(i != _qtdPaginas) _strPag += "<em>|</em>"
		}
		
		_contentPaginas.html(_strPag);
		
		inactiveButtonNavigation(_buttonPrevious);
		
		$('.selpagina').css('textDecoration','underline');
		$('.selpagina').css('cursor','pointer');

		$('.selpagina').eq(0).css('textDecoration','none');
		$('.selpagina').eq(0).css('cursor','default');
		
		markPageBox = function(_pagina){
			$('.selpagina').css('textDecoration','underline');
			$('.selpagina').css('cursor','pointer');
			
			$('.selpagina').eq(_pagina).css('textDecoration','none');
			$('.selpagina').eq(_pagina).css('cursor','default');
		}
		
		$('.selpagina').click(function(){
			_pagSel = $(this).attr('title');
			_pagSelRef = _pagSel - 1;
			_temp = _pos;
			
			markPageBox(_pagSelRef);
			
			if(_pagSelRef != _pos){ // verifico se precisa mudar de página
				if(_pagSelRef > _pos){
					while(_pagSelRef > _temp){ // trás a página selecionada dando varios next
						_buttonNext.click();
						_temp++;
					}
				}else{
					while(_pagSelRef < _temp){ // trás a página selecionada dando varios next
						_buttonPrevious.click();
						_temp--;
					}
				}
			}
			
			return false;
		})

	}

	// responsavel pela navegacao do box quadrado (TV)
	navigation(
		   $('.box-quadrado .itens ul li').width(), 
		   $('.box-quadrado .itens ul li').length, 
		   1,
		   $('.box-quadrado .navegacao .next a'),
		   $('.box-quadrado .navegacao .previous a'),
		   $('.box-quadrado .itens ul li'),
		   $('.box-quadrado .navegacao .paginas')
		   )

	createPages = function(_content, _targetPages, _colunasVisiveis){
		//_qtdPaginas = (_content.length - _colunasVisiveis);
		_qtdPaginas = Math.ceil(_content.length / _colunasVisiveis);
		_strPag = '';
		_pagAtual = 1;
		_pagScroll = [];
		_testArr = [];

			//for(i=0; i <= _qtdPaginas; i++){
			for(i=0; i < _qtdPaginas; i++){

				_strPag += "<a href='#' title='"+ (i+1) +"'>" + (i+1) + "</a>";
				if(i != _qtdPaginas-1) _strPag += "<em>|</em>"
				_pagScroll[i] = (i+1) != 1 ? (i+1)*3-2 : 1;
				apagar = (i+1) != 1 ? (i+1)*3-2 : 1;
				
				_testArr[i] = {'pos':i, 'scroll': apagar};
			}
			
		_targetPages.html(_strPag);
	}

	swapAba = function(_abas, _contentAbas){
		jQuery.each( _abas, function(index, item){
									 
			$(item).click(function(){

				jQuery.each( _abas, function(index, cadaAba){
					 $(cadaAba).removeClass('on');
				});
				
				$(this).addClass('on'); // ativa a aba

				_title = $(this).attr('title') // guarda a referencia da aba selecionada
				
				$(_contentAbas).addClass('off'); // coloca todos os conteudos invisiveis
				$(_contentAbas).removeClass('on'); // remove todas as classes que deixam a aba ativa
				
				$(_contentAbas+'.' + _title).toggleClass('on').toggleClass('off');
				
				switch(_title){
					case 'generos': 
					case 'somgospel':	jQuery('#mycarousel-'+ _title).jcarousel({
											scroll: 2
										});
										break;

					case 'pop': 
					case 'pentecostal': 
					case 'rocks': 
					case 'louvor':		jQuery('#mycarousel-'+ _title).jcarousel({
											scroll: 4
										});
										break;

					case 'cantores': 
					case 'cantoras': 
					case 'duplas':	
					case 'coletaneas':	
					case 'bandas':
					case 'ministerios':	
										createPages(
											$('#mycarousel-'+_title+' ul li'),
											$('.jcarousel-control'),
											3
										)
										jQuery('#mycarousel-'+ _title).jcarousel({
											scroll: 3,
											initCallback: mycarousel_initCallback,
											buttonNextHTML: null,
											buttonPrevHTML: null
										});
										
										break;
				}
				
				return false;
			})

		});
		
	}
	
	swapAba( $('.radios-online .abas ul li a'), '.content-radios-online')
	swapAba( $('.albuns .abas ul li a'), '.content-albuns' )
	swapAba( $('.box-artistas .abas ul li a'), '.content-artistas' )
	swapAba( $('.ranking .abas ul li a'), '.content-ranking' )
	
	/* 
	Apenas as primeiras abas devem ser instanciadas,
	as demais serão instanciadas dinamicamente,
	pois quando está oculta, não consegue instanciá-la
	*/
	var carouselArtistas = jQuery('#mycarousel-artistas');
    carouselArtistas.jcarousel({
        scroll: 3 // quantidade visível
    });
	
	var carouselLancamentos = jQuery('#mycarousel-lancamentos');
    carouselLancamentos.jcarousel({
        scroll: 4 // quantidade visível
    });
	
	createPages(
		$('#mycarousel-cantoras ul li'),
		$('.jcarousel-control'),
		3
	);

	var carouselCantores = jQuery('#mycarousel-cantoras');
	
	carouselCantores.jcarousel({
        scroll: 3, // quantidade visível
		initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	function markPage(__pag){
		// desabilita a pagina atual
		jQuery('.jcarousel-control a').css('textDecoration','underline');
		jQuery('.jcarousel-control a').css('cursor','pointer');
		__pag.css('textDecoration','none');
		__pag.css('cursor','default');
	}
	
	function resetCssPages(){
		// inicializadores
		jQuery('.jcarousel-control a').eq(0).css('textDecoration','none');
		jQuery('.jcarousel-control a').eq(0).css('cursor','default');
		jQuery('#mycarousel-prev').hide();
		jQuery('#mycarousel-next').hide();
	}
	
	function mycarousel_initCallback(carousel) {
		
		resetCssPages();

		if(  carousel.options.size > 3 )
			jQuery('#mycarousel-next').show();
		else
		{
			jQuery('#mycarousel-next').hide();
			 jQuery('.jcarousel-control' ).text("");
		}

	        


		jQuery('.jcarousel-control a')
		.unbind('click')
		.bind('click', function() {
			page = jQuery.jcarousel.intval(jQuery(this).text()-1)
			
			carousel.scroll(_testArr[page].scroll);
			_pagAtual = page+1;
			
			// se estiver na primeira página, exibe o botao next
			(previewPage() == 0) ? jQuery('#mycarousel-next').hide() : jQuery('#mycarousel-next').show();
			
			// se estiver na última página, oculta o botao next
			(_pagAtual != 1) ? jQuery('#mycarousel-prev').show() : jQuery('#mycarousel-prev').hide();

			return false;
		});
		
		jQuery('#mycarousel-next')
		.unbind('click')
		.bind('click', function() {
			jQuery('#mycarousel-prev').show();

			page = _pagAtual;
			markPage(jQuery('.jcarousel-control a').eq(page));
			
			carousel.scroll(_testArr[page].scroll);
			_pagAtual++;
			if (previewPage() == 0){ jQuery('#mycarousel-next').hide(); }
			
			return false;
		});
		
		jQuery('#mycarousel-prev')
		.unbind('click')
		.bind('click', function() {
			jQuery('#mycarousel-next').show();

			_pagAtual--;
			page = _pagAtual;
			markPage(jQuery('.jcarousel-control a').eq(page-1));

			carousel.scroll(_testArr[page-1].scroll);

			if(page == 1) { jQuery('#mycarousel-prev').hide(); };

			return false;
		});
		
		function previewPage(){
			return jQuery.jcarousel.intval(_pagScroll[_pagAtual]);
		}

	};
	
})