//-- Lista de spots
var listaDeSpots = [];

//-- Lista de box
var boxSpots = [];

//-- onload
$(document).ready(function(){

	$('div.spot').each(function(){
		//-- Para cada spot, pega sua posicao, id e elemento e guarda no array de spots
		pegaListaDeSpots($(this));
	});
	
	//-- Inicia os box
	//var spotPos = 0; //-- Posicao no array dos spots
	var spotSize = listaDeSpots.length; //-- Numero de spots encontrados
	var cont = 0;
	
	//alert(getCookie('DropDownHome'));
	
	var cookieSpots = [];
	var cookieBox = [];
	$('section .box').each(function(){
		var boxId = $(this).attr('id');
		var boxElem = $(this);
		
		//-- Verifica se não há cookies gravados.
		if(getCookie('DropDownHome') == '' || getCookie('DropDownHome') == undefined){
			//-- Se não houver, entao a posicao no array de spots seguira a ordem do contador
			spotPos = cont;
			
			var box = new Box(boxId, boxElem, listaDeSpots[spotPos]);
			
			listaDeSpots[cont].inUse = true;
			boxSpots.push(box);
		}
		
		if(cont < spotSize)
			cont++;
	});
	
	if(getCookie('DropDownHome') != '' && getCookie('DropDownHome') != undefined){
		//-- Se houver, verifica qual o valor do cookie para ordenar os box (o array seguira a ordem do tipo do cookie)
		var cookie = getCookie('DropDownHome').split('#');
		for(i=0; i<cookie.length; i++){
			cookieSpots.push(cookie[i].split('@')[0]);
			cookieBox.push(cookie[i].split('@')[1]);
		}
	}
	
	for(i=0; i<listaDeSpots.length; i++){
		for(j=0; j<cookieSpots.length; j++){
			if(cookieSpots[j] == listaDeSpots[i].id){
				var box = new Box(cookieBox[j], $('#' + cookieBox[j]), listaDeSpots[i]);
				
				listaDeSpots[i].inUse = true;
				boxSpots.push(box);
			}
		}
	}
	
	$('section .box').each(function(){
		$(this)
			.bind('dragstart',function(event){
				if (!$(event.target).is('.handle'))
					return false;
				
				$(this).css('position','absolute');
				$(this).css('zIndex',100);
				
				return $(this).css('opacity',0.5);
			})
			.bind('drag',function(event){
				
				verificaPosicao($(this));
				
				$(event.dragTarget).css({
					top: event.offsetY + 'px',
					left: event.offsetX + 'px'
				});
			})
			.bind('dragend',function(event){
				verificaSelecao($(this));
				ajusteResize();
				$(this).css('zIndex',10);
				
				gravaCookie();
			});
	});
	
	//-- Ajusta posicao dos box quando abrir a aba de configuração
	$('#personalize_content .botao').click(function(){
		$('section .box').css('position','static');
		window.setTimeout("ajusteResize()",300);
	});
	
	//-- Reposiciona os box e redefine o tamanho dos spots
	ajusteResize();
	
	
	
	/***
	** Função ajax do box de fp Online para troca de conteudo.
	***/
	$('#box_fp_online .menu_vol li a').click(function(){
		$(this).blur();
		if($(this).hasClass('on'))
			return;
		
		var id = $(this).attr('id');
		$('#box_fp_online .menu_vol li a').removeClass('on');
		$(this).addClass('on');
		
		//-- Classe que guardará o texto e o link
		function Itens(pTexto, pHref){
			this.texto = pTexto;
			this.href = pHref;
		}
		
		var ul = document.createElement('ul');
		if(id.indexOf('pos') > -1)
		{
			var listaItensVol = [];
			//-- Quando clicar na aba Pós

		}
		else if(id.indexOf('controle') > -1)
		{
			var listaItensVol = [];
			//-- Quando clicar na aba Controle
			
		}
		else
		{
			var listaItensVol = [];
			//-- Quando clicar na aba Pré
			
			
		}
		
		//-- Monta o DOM de acordo com a lista selecionada
		for(i=0; i<listaItensVol.length; i++){
			var li = document.createElement('li');
			/*var href = document.createElement('a');
			href.setAttribute('href',listaItensVol[i].href);
			href.href = listaItensVol[i].href;
			href.innerHTML = listaItensVol[i].texto;*/
			var span = document.createElement('span');
			span.innerHTML = listaItensVol[i].texto;
			
			li.appendChild(span);
			ul.appendChild(li);
		}
		
		//-- Remove os velhos elementos e adiciona os novos
		$('#box_fp_online .menu_vol_conteudo ul').remove();
		$('#box_fp_online .menu_vol_conteudo').append(ul);
		
		if(ie6 == false){
			//-- Animação para visualização da lista (EXCETO IE6)
			$('#box_fp_online .menu_vol_conteudo ul li').css('opacity',0);
			var anim_timer = 150;
			$('#box_fp_online .menu_vol_conteudo ul li').each(function(){
				$(this).animate({
					opacity:1
				},anim_timer += 150);
			});
		}
	});
	
	//-- Realiza o click no primeiro item do box Meu fp
	$('#box_fp_online .menu_vol li a:first').click();
});


//-- Classe Spot
function Spot(t,r,b,l,id,elem){
	this.top = t;
	this.bottom = b;
	this.right = r;
	this.left = l;
	this.id = id;
	this.elem = elem;
	this.inUse = false;
}

//-- Classe Box
function Box(id,elem,spot){
	this.id = id;
	this.elem = elem;
	this.spot = spot;
}

//-- Seta os valores das dimensoes dos spots e adiciona ao array
function pegaListaDeSpots(elem){
	var l = $(elem).offset().left;
	var r = $(elem).offset().left + $(elem).width();
	var t = $(elem).offset().top;
	var b = $(elem).offset().top + $(elem).height();
	var id = $(elem).attr('id');
	var elem = $(elem);
	
	var spot = new Spot(t,r,b,l,id,elem);
	
	listaDeSpots.push(spot);
}

//-- Durante o drag, verifica se o box selecionado esta sobre algum spot valido.
//-- Se estiver, nesse spot é adicionado uma classe "selecionado" para validação futura.
function verificaPosicao(elem){
	var range = 100;
	
	for(i=0; i<listaDeSpots.length; i++){
		if (($(elem).offset().left + $(elem).width()) >= (listaDeSpots[i].left + range) &&
			($(elem).offset().left) <= (listaDeSpots[i].right - range) &&
			($(elem).offset().top + $(elem).height()) >= (listaDeSpots[i].top + range) &&
			($(elem).offset().top) <= (listaDeSpots[i].bottom - range)
		){
			$('section .spot').removeClass('selecionado');
			$('#' + listaDeSpots[i].id).addClass('selecionado');
		}else{
			$('#' + listaDeSpots[i].id).removeClass('selecionado');
		}
	}
}

//-- Ao dropar o box, verifica se há um spot selecionado.
function verificaSelecao(elem){
	if ($('section div.spot.selecionado').length == 1){
		for(i=0; i<listaDeSpots.length; i++){
			if($('section div.spot.selecionado').attr('id') == listaDeSpots[i].id){
				
				if(listaDeSpots[i].inUse == false){
					//-- Se houver, verifica no array de spots os dados do spot selecionado, e se ele nao estiver em uso por outro box, entao o box selecionado
					//-- é posicionado nas coordenadas desse spots.
					for(j=0; j<boxSpots.length; j++){
						if($(elem).attr('id') == boxSpots[j].id){
							boxSpots[j].spot.inUse = false;
							boxSpots[j].spot = listaDeSpots[i];
							listaDeSpots[i].inUse = true;
							break;
						}
					}
					
					//$('#' + $(elem).id).delay(300).css('position','static');
					
				}else{
					//-- Caso contrario, se houver outro box nesse spot, entao o box do mesmo é guardado em uma variavel, o box selecionado é adicionado ao spot
					//-- escolhido, e o spot que lá estava antes, fica na posicao onde o box selecionado estava.
					var boxDoSpot = new Box();
				
					for(j=0; j<boxSpots.length; j++){
						if(boxSpots[j].spot.id == listaDeSpots[i].id){
							boxDoSpot = boxSpots[j];
						}
					}
					
					for(j=0; j<boxSpots.length; j++){
						if($(elem).attr('id') == boxSpots[j].id){
							boxDoSpot.spot = boxSpots[j].spot;
							boxSpots[j].spot = listaDeSpots[i];
							break;
						}
					}
					
					//-- Define o box do spot selecionado com Posição Absoluta, para realizar a animação de troca de box
					$('#' + boxDoSpot.id).css('position','absolute');
				}
				break;
			}
		}
	}
}

function ajusteResize(){
	
	for(i=0; i<listaDeSpots.length; i++){
		for(j=0; j<boxSpots.length; j++){
			//-- Compara o ID do spot de cada box com os spots
			if(boxSpots[j].spot.id == listaDeSpots[i].id){
				
				//-- Depois que pegar o spot do box, define a altura e largura do spot com as dimensoes do box
				$('#'+listaDeSpots[i].id).css('height',$('#'+boxSpots[j].id).height() + 'px');
				$('#'+listaDeSpots[i].id).css('width',$('#'+boxSpots[j].id).width() + 'px');
				
				//-- Reajusta as dimensoes laterais do spot
				listaDeSpots[i].left 	= Math.ceil($('#'+listaDeSpots[i].id).offset().left);
				listaDeSpots[i].right 	= Math.ceil($('#'+listaDeSpots[i].id).offset().left + $('#'+listaDeSpots[i].id).width());
				listaDeSpots[i].top 	= Math.ceil($('#'+listaDeSpots[i].id).offset().top);
				listaDeSpots[i].bottom 	= Math.ceil($('#'+listaDeSpots[i].id).offset().top + $('#'+listaDeSpots[i].id).height());
				
				//-- Redefine top e left da spot
				$('#'+listaDeSpots[i].id).css('top',listaDeSpots[i].top + 'px');
				$('#'+listaDeSpots[i].id).css('left',listaDeSpots[i].left + 'px');
				
				/*$('#' + listaDeSpots[i].id).animate({
					top: listaDeSpots[i].top + 'px',
					left: listaDeSpots[i].left + 'px'
				})*/
				
				//-- Se estiver carregando a pagina, define a posicao do box sem animacao e da show().
				if($('#' + boxSpots[j].id).css('display') != 'block'){
					$('#' + boxSpots[j].id).css('top',boxSpots[j].spot.top + 'px');
					$('#' + boxSpots[j].id).css('left',boxSpots[j].spot.left + 'px');
					$('#' + boxSpots[j].id).show();
					
				//-- Caso contrario, faz o efeito de animacao da movimentacao do box para o spot selecionado.
				}else{
					$('#' + boxSpots[j].id).animate({
						top: boxSpots[j].spot.top + 'px',
						left: boxSpots[j].spot.left + 'px',
						opacity: 1
					});
				}
				
				$('#' + boxSpots[j].spot.id).append($('#' + boxSpots[j].id));
			}
		}
	}
	window.setTimeout("$('section .box').css('position','static')",350);
}

function gravaCookie(){
	var cookie = '';
	
	//-- Pega os IDs dos Box e Spots
	for(i=0; i<boxSpots.length; i++){
		cookie += boxSpots[i].spot.id + '@' + boxSpots[i].id;
		
		if(i < (boxSpots.length - 1))
			cookie += '#';
	}
	
	//-- Grava o cookie
	setCookie('DropDownHome',cookie,365*12*24);
}

function abreOfertaRelampago(obj){
	if(!$(obj).parents('.ofertaRelampago').hasClass('ofertaRelampago_Aberta')){
		$(obj).parents('.ofertaRelampago_content').stop().animate({
			'height':'240px'
		}).parents('.ofertaRelampago').addClass('ofertaRelampago_Aberta').find('.vitrine').fadeIn('slow');
	}
	else{
		$(obj).parents('.ofertaRelampago_content').stop().animate({
			'height':'40px'
		}).parents('.ofertaRelampago').removeClass('ofertaRelampago_Aberta').find('.vitrine').hide();
	}
	
	//-- Ajusta as posicoes dos box da home quando abre/fecha a oferta relampago
	$('section .box').css('position','static');
	window.setTimeout("ajusteResize()",500);
}