/* ------------------------------------------------------------------------
	s3Slider
	
	Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
	Version: 1.0
	
	Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 3000;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsNav    = $("#linhaNav .num");
        
        items.each(function(i) {
          $(items[i]).mouseover(function() {
             mOver = true;
             fadeElement(false, false);
          });
            
          $(items[i]).mouseout(function() {
              mOver   = false;
              fadeElement(true, true);
          });
        });

        itemsNav.each(function(i) {
          $(itemsNav[i]).mouseover(function() {
             mOver = true;
             fadeElement(false, false);
          });
          $(itemsNav[i]).mouseout(function() {
             mOver = false;
             fadeElement(true, true);
          });
        });
        
        var fadeElement = function(isMouseOut, spliTime) {
          //var thisTimeOut = timeOut;
          var thisTimeOut = (spliTime) ? (timeOut/2) : timeOut;
          thisTimeOut = (faderStat) ? 10 : thisTimeOut;
          if (items.length > 0) {
            if (!isMouseOut) {
              clearTimeout(timeOutFn);
            } else {
              timeOutFn = setTimeout(makeSlider, thisTimeOut);
            }
          } else {
            console.log("Poof..");
          }
        }
        
        var makeSlider = function() {
            var currNo = +document.getElementById('currNo').value;
            prevNo = (currNo == 0) ? items.length-2 : currNo-1;

            if(faderStat == true) {
              if(!mOver) {
                $(items[currNo]).fadeIn((timeOut/6), function() {
                  faderStat = false;
                  document.getElementById('iStatus').value = 0;
                  if(!mOver) {
                    fadeElement(true, false);
                  }
                });
                $(itemsNav[currNo]).animate({"font-size": "15px"},250);
                $(itemsNav[prevNo]).animate({"font-size": "10px"},250);
              }
            } else {
              if(!mOver) {
                $(items[currNo]).fadeOut((timeOut/6), function() {
                  faderStat = true;
                  document.getElementById('iStatus').value = 1;
                  if(!mOver) {
                    fadeElement(true, false);
                    currNo = (currNo+1 == items.length-1) ? 0 : currNo+1;
                    document.getElementById('currNo').value = currNo;
                  }
                });
              }
            }
        }

        // Trata os clicks na barra de navegação
        $(itemsNav).each(function(i){
            this.onclick = function(){
              // Indica se está ocorrendo uma transição
              var iStatus = +document.getElementById('iStatus').value;
              // Se não está ocorrendo transição de imagens, pode realizar uma transição
              if (iStatus == 0) {
                // Aciona a flag para indicar que está ocorrendo uma transição
                document.getElementById('iStatus').value = 1;
                var currNo = +document.getElementById('currNo').value;
                $(itemsNav[currNo]).animate({"font-size": "10px"},250);
                $(itemsNav[i]).animate({"font-size": "15px"},250);
                $(items[currNo]).fadeOut((timeOut/6), function() {
                  // Começa o fadeIn apenas após o término do fadeOut
                  $(items[i]).fadeIn((timeOut/6), function() {
                    // Fim do fadeIn, seta a flag para o seu status inicial
                    document.getElementById('iStatus').value = 0;
                  });
                });
                document.getElementById('currNo').value = i;
              } 
            }
        });

        makeSlider();

    };  

})(jQuery);