﻿(function($) {
    var urlIndicadorThumb = "imagens/layout/setaDisclaimer.png";
    var intervalBanner = null;
    var intervalThumb = null;

    $.fn.disclaimer = function() {
        var $this = this;
        this.children('ul').addClass("bannerList");

        //Seta a primeira imagem com a classe active para iniciar o efeito
        if ($('.bannerList li.active').length == 0) {
            $('.bannerList li:first').addClass('active');
            $('.bannerList li:first').show();
        }

        // Verifica se existe mais de um banner
        // Se existir mais de 1 inicia o efeito
        // Se existir só 1 registra o view e não inicia o efeito
        if ($('.bannerList li').length > 1) {
            //Efeito de animação dos banners
            $.fn.disclaimer.efeitoBanner();

            //funcao que cria os thumbs
            $.fn.disclaimer.thumb(this);

            //Efeito de animação dos thumbnail
            $.fn.disclaimer.efeitoThumb();

            //Função com ação de click nos Thumbs
            $.fn.disclaimer.thumb.click();
        }
        else {
            $.fn.disclaimer.bannerView($('.bannerList li.active'));

            //funcao que cria os thumbs
            $.fn.disclaimer.thumb(this);
        }

        //Função com ação de click nos banners
        //foi inativada pois o click foi feito no c#
        //$.fn.disclaimer.bannerClick();
        
    };

    // método que cria thumbnail 
    // Este método percorre todas imagens dentro da div disclaimer e monta uma lista com os thumbnails
    $.fn.disclaimer.thumb = function(oDisclamer) {
        //Criando os Thumbs
        oDisclamer.append('<img alt=\"\" class=\"indicador\" src=\"' + urlIndicadorThumb + '\" />"');
        oDisclamer.append('<ul id="thumb"></ul>');

        $('.bannerList').children('li').each(function() {
            oDisclamer.children('#thumb').append('<li><div></div><img alt="' + $(this).children('a').children('img').attr('alt') + '" src="' + $(this).children('a').children('img').attr('src').replace("Banner", "Banner/Thumbnail") + '" title="' + $(this).children('a').children('img').attr('alt') + '" /></li>');
        });

        //posiciona a seta sobre a primeira li, aqui foi somado 4 pois o tamanho da imagem do thumb não é proporcional ao tamamnho da seta
        var posLeftSeta = $('#thumb li:first').offset().left - Math.floor((($(document).width() - 980) / 2)) + 43;
        if ($.browser.msie && $.browser.version > 7) {
            posLeftSeta += 10;
        }
       
        $('.indicador').css('left', posLeftSeta + "px").show();

        //Seta a primeira li do thumb com a classe active para iniciar o efeito
        $('#thumb li:first').addClass('active');

    };

    //  Método que cria a animacao dos banners
    //  Recebe um bool 'click' para fazer  quando o cliente clicar no thumbnail pausar o efeito e recomeçar
    $.fn.disclaimer.efeitoBanner = function() {

        intervalBanner = setInterval(
            function() {
                // recupera o elemento que está marcado como ativo                                       
                var $active = $('.bannerList li.active');
                $active.addClass('last-active');
                $.fn.disclaimer.bannerView($active)
                //verifica se existe um próximo banner, caso ele nao exista, retorna para o primeiro
                var $next = ($active.next().length && $active.next().attr("id") != "thumb") ? $active.next() : $('.bannerList li:first');

                // Codigo que define as transicoes entre as imagens
                $next.css({ opacity: 0.0, display: 'list-item' })
	                .addClass('active')
	                .animate({ opacity: 1.0 }, 1000, function() {
	                    $active.removeClass('active last-active').css({ display: 'none' });
	                });
            }, 5000
         );
    };

    //  Método que cria a animação do thumbnail
    //  Recebe um bool 'click' para fazer  quando o cliente clicar no thumbnail pausar o efeito e recomeçar
    $.fn.disclaimer.efeitoThumb = function() {

        intervalThumb = setInterval(
            function() {
                // recupera o elemento que está marcado como ativo
                var $active = $('#thumb li.active');
                $active.addClass('last-active');
                $active.children('div').css({ opacity: 0.0 });

                //verifica se existe um próximo thumb, caso ele nao exista, retorna para o primeiro
                var $next = $active.next().length ? $active.next() : $('#thumb li:first');

                //posicao da seta do próximo banner
                var $nextPosLeft = $next.offset().left - Math.floor((($(document).width() - 980) / 2)) + ($next.width() / 2) - ($('.indicador').width() / 2);
                if ($.browser.msie && $.browser.version > 7) {
                    $nextPosLeft += 10;
                }
                $nextPosLeft += 'px';
                $('.indicador').animate({ left: $nextPosLeft }, 1000);

                // Codigo que define as transicoes entre as imagens
                $next.addClass('active').children('div').animate(
		            { opacity: 1.0 },
		            1000,
		            function() {

		                $active.removeClass('active last-active');
		            }
	            )
            }, 5000
        );
    };


    // Método que executa o efeito que vai ocorrer no click do thumbnail
    // Sequencia: limpa os intervalos dos efeitos do banner e do thumbnail, 
    // alterna para o banner clickado, registra um novo view para o banner clicado e depois reinicia a animação
    $.fn.disclaimer.thumb.click = function() {        
        if ($('#thumb li')) {
            $('#thumb li').live('click', function() {

                clearInterval(intervalBanner);
                clearInterval(intervalThumb);

                $active = $('.bannerList li.active');
                $active.addClass('last-active');

                var thumbClicado = $('#thumb li').index(this);

                $('.bannerList li').each(function() {
                    if ($(this).index() == thumbClicado) {
                        $next = $('.bannerList li').eq($(this).index());
                    }
                });

                // Codigo que define as transicoes entre as imagens
                $next.css({ opacity: 0.0, display:'list-item' }).attr('class', 'active').animate({ opacity: 1.0 }, 1000, function() {
                    $('.bannerList li.last-active').removeClass('active last-active').css({ display: 'none' });
                })

                // recupera o elemento que está marcado como ativo
                var $activeThumb = $('#thumb li.active');
                $activeThumb.addClass('last-active');
                $activeThumb.children('div').css({ opacity: 0.0 });

                //verifica se existe um próximo thumb, caso ele nao exista, retorna para o primeiro
                var $nextThumb = $(this);

                //posicao da seta do próximo banner
                var $nextThumbPosLeft = $nextThumb.offset().left - Math.floor((($(document).width() - 980) / 2)) + ($nextThumb.width() / 2) - ($('.indicador').width() / 2);
                if ($.browser.msie && $.browser.version > 7) {
                    $nextThumbPosLeft += 10;
                }
                $nextThumbPosLeft += 'px';
                $('.indicador').animate({ left: $nextThumbPosLeft }, 1000);

                // Codigo que define as transicoes entre as imagens
                $nextThumb.addClass('active').children('div').animate(
		            { opacity: 1.0 },
		            1000,
		            function() {
		                $activeThumb.removeClass('active last-active');
		            }
	            )

                //reinicia os efeitos  
                var reiniciaEfeitos = setTimeout(
                    function() {
                        //Efeito de animação dos banner
                        $.fn.disclaimer.efeitoBanner();
                        //Efeito de animação dos thumbnail  
                        $.fn.disclaimer.efeitoThumb();
                    }
                );

            });
        }
    };

    // Método que registra a quantidade de clicks em cada banner
    $.fn.disclaimer.bannerClick = function() {
        $('.bannerList li').live('click', function() {
            var arrayID = $(this).attr('id').split("_")[1].split("-");
            var idBanner = arrayID[0];
            var idDepartamento = arrayID[1];

            $.ajax({
                type: "POST",
                url: "~/Codigos/WebMethods.aspx/GeraClickDisclaimer",
                data: "{idBanner:" + idBanner + ", idDepartamento:" + idDepartamento + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function() {
                },
                success: function() {
                },
                error: function(xhr, msg) {
                }
            });
        });
    };

    // Método que registra a quantidade de views em cada banner	
    $.fn.disclaimer.bannerView = function(banner) {
        var arrayID = banner.attr('id').split('_');
        var idBanner = arrayID[arrayID.length - 1].split('-')[0];
        var idDepartamento = arrayID[arrayID.length - 1].split('-')[1];
        $.ajax({
            type: "POST",
            url: "Codigos/WebMethods.aspx/GeraViewDisclaimer",
            data: "{idBanner:" + idBanner + ", idDepartamento:" + idDepartamento + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function() {
            },
            success: function() {
            },
            error: function(xhr, msg) {
            }
        });
    };

})(jQuery); 

$(document).ready(function(){
	if($(".disclaimer").length > 0){						   
   		$(".disclaimer").disclaimer(); 
   	}
});

