/**
 * @projectDescription Gera efeito de carrossel entre uma lista de chamadas.
 *
 * @author 	Roberto Robson (Bode) rnogueira@uolinc.com
 * @version        1.4.3
 * @since	   1.0
*/

/**
 * Carrossel, gera efeito de carrossel entre uma lista de chamadas.
 * @type {Object}
 */
carrossel = {

  /** Id do elemento HTML lista preparado para receber o efeito */
  id : null,
  
  /** Indica o lado e a quantidade de elemens que devem rotacionar */
  to : 0,

  /** status do carrossel quando esta girando, 0 = parado, 1 = rodando. Utilizado para ativar ou não o setAndAnimate */
  rodando : 0,

  /** Lista de itens clonados que foram passados para o outro lado da lista */
  elementClone : [],
  
  /** Lista de itens originais dos clone que devem ser exlcuidos no final da animação */
  elementMove : [],
	
	init : function(){
		/**
		 * Caso não exista o setAndAnimate ele é carregado
		 */
		this.write();
		
	},
	
	write : function(){
		if(typeof setAndAnimate == "undefined")
		  document.write('<scr'+'ipt src="http://lib.uol.com.br/setandanimate/setandanimate.js"></scr'+'ipt>');
		document.write('<style>\
			ul.carrosselFim {margin:0;}\
			ul.carrosselFim li.cloneOrigem,\
			ul.carrosselComeco li.clonado {display:none;}\
		</style>');
	},

  mover : function(){
    if(this.rodando==0){

      this.rodando=1;

      if(typeof(arguments[0])=="object" && arguments[0].length>=1)
        arguments=arguments[0];
      
      /** Para onde deve rodar os elementos, > 0 = esquerda, < 0 = direita */
      this.to=arguments[0]['to'];
      
      this.id=arguments[0]['id'];
  
      if(this.elementClone.length>0)
        this.deletarClone();
      else
        document.getElementById(this.id).style.marginLeft=0;
  
      var qtd=document.getElementById(this.id).getElementsByTagName('li').length;
  
      document.getElementById(this.id).style.width=(document.getElementById(this.id).getElementsByTagName('li')[0].offsetWidth*qtd)+"px";
      
      var marginLeftWidth = 0;
      
      for(var i=0;i<((this.to<0)?this.to*-1:this.to);i++){
        this.elementMove[this.elementMove.length] = document.getElementById(this.id).getElementsByTagName('li')[((this.to>0)?i:qtd-i-1)];
        this.elementMove[this.elementMove.length - 1].className = "cloneOrigem";
				marginLeftWidth += this.elementMove[this.elementMove.length-1].offsetWidth;
        this.elementClone[this.elementClone.length] = this.elementMove[this.elementMove.length-1].cloneNode(true);
				this.elementClone[this.elementClone.length - 1].className = "clonado";
      }
  
      if(this.to>0){
        for(var i = 0; i < ((this.to<0)?this.to*-1:this.to); i++){
          document.getElementById(this.id).appendChild(this.elementClone[i]);
        }
      }else if(this.to<0){
        document.getElementById(this.id).className = "carrosselComeco";
				for(var i = 0; i < ((this.to<0)?this.to*-1:this.to); i++){
          document.getElementById(this.id).insertBefore(this.elementClone[i], document.getElementById(this.id).getElementsByTagName('li')[0]);
        }
        document.getElementById(this.id).style.marginLeft=(marginLeftWidth*-1)+"px";
				document.getElementById(this.id).className = "";
      }
      

			setAndAnimate.change({
          objName : this.id+"Animate",
          propriedade : [document.getElementById(this.id).style, 'marginLeft', 'px'],
          inicio : document.getElementById(this.id).style.marginLeft,
          fim : ((this.to>0)?marginLeftWidth*-1:0),
          callback : function(){ 
              document.getElementById(carrossel.id).className = "carrosselFim";
              document.getElementById(carrossel.id).style.marginLeft = 0;
              setTimeout(function(){
                  carrossel.deletarClone();
                  document.getElementById(carrossel.id).className = "";
                  carrossel.rodando = 0;
              }, 200);
            },
          velocidade : .85
      });

      
    }
  },
  
  deletarClone : function(){

    for(var i = 0; i < ((this.to<0)?this.to*-1:this.to);i++)
      this.elementMove[i].parentNode.removeChild(this.elementMove[i]);

    this.elementClone=[];
    this.elementMove=[];

  }

}

carrossel.init();