﻿(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("slow");
        }

        // 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>');
            oDisclamer.children('#thumb').append('<li><a href="javascript:void(0)">x</a><div></div></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: 'block' })
	                .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 },
		            100,
		            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: 'block' }).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 },
		            100,
		            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("_");
            var idBanner = arrayID[1];

            $.ajax({
                type: "POST",
                url: "codigos/WebMethods.aspx/GeraClick",
                data: "{idBanner:" + idBanner + "}",
                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 + "}",
        //            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();
    }
});

