/*

Marquee em Javascript (Versão 1.0b - 10/09)

Script desenvolvido por Klonder (Moderador da área de Javascript do fórum iMasters).



Características: 

Javascript puro, sem frameworks;

Disposição: horizontal;

Direção de rolagem: para a esquerda;

Loop infinito: SIM;

Pausa com mouseover: SIM.

Botões de controle: NÃO.



Postagem exclusiva em: www.forum.imasters.com.br

*/

var quantExibida = 9;

var pausa = false;



//Criando uma variável-controle para saber qual será o primeiro índice da sequência atual.

//Varia conforme a sequência em vigor;

//Exemplo: Primeira sequência: [0]123; 2ª: [1]234; 3ª: [2]345...

var iFirst = 0;



//Local das imagens e caminho dos links:

var linha = new Array();



function FormarDiv() {

	// Preenche as linhas.

	$('.Marquee').each(function() {

		$(this).show();

		linha.push($(this).html());

		$(this).remove();

	});

	

	var iAtual = 0;

	var Marquee = document.getElementById("motionMarquee"); 

	var extra = 0;

	var DivFormada = "";

	/*

	Fórmula para saber qual o índice atual (iAtual):

	iAtual = iFirst + i (Primeiro índice + soma do ciclo);

	

	Caso essa soma seja maior do que o valor máximo dos índices,

	irei adicionar um índice <extra>.

	Exemplo: Se a sequência atual iniciasse com iFirst = 6, então:

	[6] 7 <0>; Se iFirst fosse 7, teríamos: [7] <0> <1>;

	

	Como a variável <extra> está dentro da função, sempre irá começar por 0 (zero):

	*/      



        //Zerando o valor do primeiro índice, caso exceda o valor máximo de índices:    

        if (iFirst >= linha.length) {

                iFirst = 0;

        }

        

        //Criando a sequências de índices que serão exibidos no DIV atual:

        for (var i=0; i<quantExibida; i++) {

                if ((iFirst + i) >= linha.length) {

                        //<extra> irá assumindo, em sequência, os valores: <0>, <1>, <2>, <3>...

                        iAtual = extra;

                        extra++;        

                } else {

                        iAtual = iFirst + i;

                }

                //Criando os objetos da div atual em sequência:

                DivFormada += linha[iAtual];

        }

        iFirst++; //Acrescentando 1 ao iFirst para reutilizá-lo na próxima sequência:

        Marquee.innerHTML = DivFormada; //Jogando a sequência atual dentro do DIV;

        pausa = true; //Criando uma pausa; Se "Pausa != true" -----> "stop";

        moveMarquee(); //Chamando a função moveMarquee, para mover o div que acabou de ser criado.

}



//Criando uma variável para controlar a posição do <div id=motionMarquee>:

var pos = 0;



//Função responsável pela animação do Marquee:

function moveMarquee(){

//Localizando os objetos:

var Caixa = document.getElementById("baseMarquee");

var Marquee = document.getElementById("motionMarquee");

        

        pos+=2;



//Se pos assumir o valor = 100, iremos zerá-lo e chamar a função FormarDIV()

//para criar outro grupo de divs:

        if (pos>=100) { 

         pos = 0;

         FormarDiv();

        

        //Caso contrário, prosseguiremos com chamadas à função moveMarquee();

        } else {

                Marquee.style.marginLeft = ((-1)*pos)+"px";

                if (pausa == false) {

                        tempoPausa = setTimeout("moveMarquee()",50);

                } else {

                        tempoPausa = setTimeout("moveMarquee()",0);

                        pausa = false;  

                }

        }

        

}

window.onload = FormarDiv;