/*
* Script para movimentar animar os ícones 
*
*/

var duracaoHover = 1000;
var duracaoLeave = 250;
var tamanhoFinal = 125;
var easeHover = 'easeOutElastic';
var easeLeave = 'easeOutCubic';
var iconsInfo = [
	{name: 'cart',img: 'cart-icon', x: 510, y: 60, tamanhoInicial: 55, url: 'cart', title: 'Gerenciamento de Vendas' },		//cart
	{name: 'sac',img: 'sac-icon', x: 595, y: 98, tamanhoInicial: 50, url: 'sac', title: 'Sistema de SAC' },			//sac
	{name: 'farma',img: 'farma-icon', x: 683, y: 83, tamanhoInicial: 48, url: 'farma', title: 'Gerenciamento de Farmácias' },	//farma
	{name: 'finance',img: 'finance-icon', x: 755, y: 124, tamanhoInicial: 40, url: 'finance', title: 'Finanças' },	//finance
	{name: 'process',img: 'process-icon', x: 662, y: 166, tamanhoInicial: 47, url: 'process', title: 'Gerenciamento Processual' },	//process
	{name: 'consult',img: 'consult-icon', x: 559, y: 185, tamanhoInicial: 52, url: 'consult', title: 'Consultoria' },	//consult
]

var cont = 0;
var origem = {x: 0, y: 0};
var correcaodePosicao;

var xIni;
var yIni;

//array de icons
var icons = new Array(iconsInfo.length);

//array de z-index e z-index inicial
var zIndexInicial = 900;
var zIndexMax = zIndexInicial + iconsInfo.length - 1;

$(document).ready( function () {

	//Origem do sistema de coordenadas a partir da imagem do branding
	origem.x = Math.round( $("#headerImage").offset().left );
	origem.y = Math.round( $("#headerImage").offset().top );
	
	$("#masthead").append("<div id='legendaIcon'>Sistema de Vendas</div>");	

	//posicionar ícones
	for(i = 0; i < icons.length; i++){
		correcaoPosicao = iconsInfo[i].tamanhoInicial/2;
		
		$("#masthead").append("<img id='icon"+i+"' class='icon'/>");
		icons[i] = $("#icon"+i);
			
		icons[i].attr({
			src: 'wp-content/themes/netsoft/images/'+ iconsInfo[i].img +'.png',
			alt: iconsInfo[i].title,
		});
		
		icons[i].css({
			width: iconsInfo[i].tamanhoInicial,
			height: iconsInfo[i].tamanhoInicial,
			cursor: "pointer",
			'z-index': zIndexInicial + i
		});
	
	}
	
	atualizarPosicoesIcones();
	
	setarAcoes();
	
	$(window).resize(atualizarPosicoesIcones);
	$(window).resize(setarAcoes);

});

function setarAcoes(){
	
	//add funcções de animaçãpara os ícones
	$(".icon").each( function(){
	
		var tInicial = iconsInfo[cont].tamanhoInicial;
		var xIni = origem.x + iconsInfo[cont].x - correcaoPosicao;
		var yIni = origem.y + iconsInfo[cont].y - correcaoPosicao;
		var xFinal = xIni - (tamanhoFinal - iconsInfo[cont].tamanhoInicial)/2;
		var yFinal = yIni - (tamanhoFinal - iconsInfo[cont].tamanhoInicial)/2;
		var url = "produtos-e-servicos#" + iconsInfo[cont].url;
		var titulo = iconsInfo[cont].title;
	
		$(this).hover( function(){
			$("#legendaIcon").text(titulo).show();
			moverLegenda(xFinal, yFinal+tamanhoFinal);
			
			zIndexSwitch( $(this) );
			
			$(this).stop().animate({width: tamanhoFinal, height:tamanhoFinal, left: xFinal, top: yFinal }, {duration: duracaoHover, easing: easeHover, queue: false});
		}).mouseleave( function(){
			$(this).stop().animate({width: tInicial, height: tInicial, left: xIni, top: yIni }, {duration: duracaoLeave, easing: easeLeave, queue: false});
			$("#legendaIcon").hide();
		}).click( function(){
			$(window.location).attr('href', url);
		});
		
		cont = cont >= iconsInfo.length ? 0 : ++cont ;
		
	});
	
}

function zIndexSwitch(iconAtivo){
	var temp = iconAtivo.css("z-index");
	for(i=0; i < icons.length; i++){
		if( icons[i].css("z-index") == zIndexMax ){
			icons[i].css({'z-index': temp });
		}
	}
	iconAtivo.css({'z-index': zIndexMax});
}

function moverLegenda( x, y){
	var legenda = $("#legendaIcon");
	legenda.css({ left: x, top: y}).fadeIn();
}

function atualizarPosicoesIcones(){

	for(i = 0; i < icons.length; i++){
		//Origem do sistema de coordenadas a partir da imagem do branding
		origem.x = Math.round( $("#headerImage").offset().left );
		origem.y = Math.round( $("#headerImage").offset().top );
		
		xIni = origem.x + iconsInfo[i].x - correcaoPosicao;
		yIni = origem.y + iconsInfo[i].y - correcaoPosicao;
		
		icons[i].css({
			left: xIni,
			top: yIni
		});
		
	}
	
}