// JavaScript Document
var iniciou = false;
var modo = 'driving';
$(document).ready(function(){
	$('.mapa').hide();
	$('.coluna1 .conteudo_comochegar').hide();
	
	$('.conteudo_comochegar .voltar').click(function(){
		//alert('voltar');
		
		$('.coluna1 .conteudo_comochegar').fadeOut(300);
		$('.mapa').fadeOut(300);
		
		$('.coluna1 .conteudo').delay(300).fadeIn(300);
		$('.lojas').delay(300).fadeIn(300);
		$('.coluna2').delay(300).animate({height:'310px'}, 300);
	});
	
	$('.btok').click(function(){
		$('.loja').children('.nome').text("");
		$('.loja').children('.telefone').text("");
		
		$('#endereco1').val(document.getElementById("endereco").value);
		$('#endereco2').val("");

		$('.coluna2').animate({height:'374px'}, 300);
		
		$('.coluna1 .conteudo').fadeOut(300);
		$('.lojas').fadeOut(300);
		
		$('.coluna1 .conteudo_comochegar').delay(300).fadeIn(300);
		$('.mapa').delay(300).fadeIn(300, function(){
			if (!iniciou){
				iniciou = true;
				initialize();
			}
			setTimeout(function(){
				procuraEndereco();
			}, 300);
			
		});
	});
	
	
	$('.bt_comochegar').click(function(){
		deleteOverlays();
		calcRoute();
	});
	
	
	$('.lojas .item').each(function(){
		$(this).click(function(){
			
			var idLoja = $(this).attr('id');
			var nome = $(this).text().substr(0, $(this).text().indexOf('('));
			var telefone = $(this).text().substr($(this).text().indexOf('('));
			
			$('.loja').children('.nome').text(nome);
			$('.loja').children('.telefone').text(telefone);
			
			Cufon.replace('.conteudo_comochegar .loja .nome, .conteudo_comochegar .loja .telefone', {
				fontFamily:"CaeciliaBoldItalic",
				hover: true
			});
			
			$('.coluna2').animate({height:'374px'}, 300);
			
			$('.coluna1 .conteudo').fadeOut(300);
			$('.lojas').fadeOut(300);
			
			$('.coluna1 .conteudo_comochegar').delay(300).fadeIn(300);
			$('.mapa').delay(300).fadeIn(300, function(){
				if (!iniciou){
					iniciou = true;
					initialize();
				}
				setTimeout(function(){
					mostraLoja(idLoja);	
				}, 300);
			});
		});
	});
	
	$('.modo').children().each(function(){
		$(this).click(function(){
			if ($(this).hasClass("driving")) {
				modo = 'driving';
			} else {
				modo = 'walking';
			}

			$('.modo').children().each(function(){
				$(this).toggleClass('on');
			});
		});
		
		
	});
});
$(window).load(function(){
	//initialize();
});
var infowindow;
var geocoder;
var map;
var markersArray = [];
var markersArrayRoute = [];
var stepDisplay;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();


function initialize() {
	//alert('initialize');
	directionsDisplay = new google.maps.DirectionsRenderer();
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(-23.5756673, -46.6879568);
	var myOptions = {
		zoom: 4,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		navigationControl: true,
		navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT },
		mapTypeControl: true,
		scaleControl: true
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);
	stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {
  
  for (i = 0; i < markersArrayRoute.length; i++) {
  		markersArrayRoute[i].setMap(null);
  }

  var request;
  var start = document.getElementById("endereco1").value;
  var end = document.getElementById("endereco2").value;
  if (modo == 'walking'){
	  request = {
		  origin: start,
		  destination: end,
		  travelMode: google.maps.DirectionsTravelMode.WALKING
	  };
  } else {
	  request = {
		  origin: start,
		  destination: end,
		  travelMode: google.maps.DirectionsTravelMode.DRIVING
	  };
  }
  

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //var warnings = document.getElementById("warnings_panel");
      //warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsDisplay.setDirections(response);
	  directionsDisplay.setMap(map);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point, 
        map: map
      });
	  //alert('instructions: ' + myRoute.steps[i].instructions)
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markersArrayRoute[i] = marker;
  }
}

function attachInstructionText(marker, text) {
	google.maps.event.addListener(marker, 'click', function() {
		stepDisplay.setContent(text);
		stepDisplay.open(map, marker);
	});
}



function procuraEndereco() {
	//alert('procuraEndereco');
	deleteOverlays();
	// Procura a Lat e Long do Endereço passado pelo Usuário	
	var address = document.getElementById("endereco").value;
	
	//alert(address);
	geocoder.geocode({'address': address}, function(results, status) {
		
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var image = $("#url").val() + '/images/aqui.png';
			var marker = new google.maps.Marker({
				map: map,
				icon: image,
				position: results[0].geometry.location,
				title: 'Você está aqui: ' + document.getElementById("endereco").value
			});
		
			marker.setAnimation(google.maps.Animation.BOUNCE);
			markersArray.push(marker);
			var conteudo = '<b>Você está aqui:</b> ' + document.getElementById("endereco").value;
			map.setZoom(12);
			google.maps.event.addListener(marker, "click", function() {
			
			if (infowindow) infowindow.close();
				infowindow = new google.maps.InfoWindow({content: conteudo, maxWidth: 100});
				infowindow.open(map, marker);
			});
			
			procuraEnderecosProximos(results[0].geometry.location);
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
}

function procuraEnderecosProximos(center) {
	//alert('procuraEnderecosProximos');
	// Busca Lojas com Base na Lat e Long do Endereço Informado
	var raio = 12;
	
	urltemplate = $('.logo').children('a').children('img').attr('src');
	urltemplate = urltemplate.substr(0, urltemplate.indexOf('images/logo.png'));
	
	var searchUrl = urltemplate + 'dadosLojas.php?lat=' + center.lat() + '&lon=' + center.lng() + '&raio=' + raio;

	$.get(searchUrl, function(data) {
		
      	var markers = data.documentElement.getElementsByTagName("loja");
	  
      	for (var i = 0; i < markers.length; i++) {
			var dados = [];
			dados["nome"] = markers[i].getAttribute('nome');
			dados["estado"] = markers[i].getAttribute('estado');
			dados["cidade"] = markers[i].getAttribute('cidade');
			dados["bairro"] = markers[i].getAttribute('bairro');
			dados["endereco"] = markers[i].getAttribute('endereco');
			dados["numero"] = markers[i].getAttribute('numero');
			dados["complemento"] = markers[i].getAttribute('complemento');
			dados["cep"] = markers[i].getAttribute('cep');
			dados["telefone1"] = markers[i].getAttribute('telefone1');
			dados["telefone2"] = markers[i].getAttribute('telefone2');
						
			var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lon')));
			var marker = createMarker(markers[i].getAttribute("name"), latlng, dados);
	   }	   
	});
}

function retornaCidadeEstado(tipo, dado){
	// Busca Loja com Base no Tipo // Estado ou Cidade
	deleteOverlays();
	
	if (tipo == "estado"){
		var searchUrl = 'dadosLojas.php?estado=' + dado;
	} else {
		var searchUrl = 'dadosLojas.php?cidade=' + dado;
	}
	
	$.get(searchUrl, function(data) {
		var markers = data.documentElement.getElementsByTagName("loja");
	  
		for (var i = 0; i < markers.length; i++) {
			var dados = [];
			dados["nome"] = markers[i].getAttribute('nome');
			dados["estado"] = markers[i].getAttribute('estado');
			dados["cidade"] = markers[i].getAttribute('cidade');
			dados["bairro"] = markers[i].getAttribute('bairro');
			dados["endereco"] = markers[i].getAttribute('endereco');
			dados["numero"] = markers[i].getAttribute('numero');
			dados["complemento"] = markers[i].getAttribute('complemento');
			dados["cep"] = markers[i].getAttribute('cep');
			dados["telefone1"] = markers[i].getAttribute('telefone1');
			dados["telefone2"] = markers[i].getAttribute('telefone2');
			
			var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lon')));
			var marker = createMarker(markers[i].getAttribute("name"), latlng, dados);
			
			if (i == markers.length - 1){
				setCenter();
			}
	   }
	});	
}

function mostraLoja(dado){
	
	// Busca Loja com Base no Tipo // Estado ou Cidade
	deleteOverlays();
	
	urltemplate = $('.logo').children('a').children('img').attr('src');
	urltemplate = urltemplate.substr(0, urltemplate.indexOf('images/logo.png'));
	
	var searchUrl = urltemplate + 'dadosLojas.php?id=' + dado;
	
	$.get(searchUrl, function(data) {
		var markers = data.documentElement.getElementsByTagName("loja");
	  
		for (var i = 0; i < markers.length; i++) {
			var dados = [];
			dados["nome"] = markers[i].getAttribute('nome');
			dados["estado"] = markers[i].getAttribute('estado');
			dados["cidade"] = markers[i].getAttribute('cidade');
			dados["bairro"] = markers[i].getAttribute('bairro');
			dados["endereco"] = markers[i].getAttribute('endereco');
			dados["numero"] = markers[i].getAttribute('numero');
			dados["complemento"] = markers[i].getAttribute('complemento');
			dados["cep"] = markers[i].getAttribute('cep');
			dados["telefone1"] = markers[i].getAttribute('telefone1');
			dados["telefone2"] = markers[i].getAttribute('telefone2');
			
			$('#endereco2').val(dados["endereco"] + ', ' + dados["numero"] + ', ' + dados["cidade"]);			
			
			var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lon')));
			var marker = createMarker(markers[i].getAttribute("name"), latlng, dados);
			
			if (i == markers.length - 1){
				setCenter();
			}
	   }
	});	
}

function deleteOverlays() {
	// Deleta todos os Markers adicionados
	if (markersArrayRoute){
		directionsDisplay.setMap(null);
		for (i = 0; i < markersArrayRoute.length; i++) {
			markersArrayRoute[i].setMap(null);
		}
		markersArrayRoute.length = 0;
	}
	
	if (markersArray) {
		for (i in markersArray) {
			markersArray[i].setMap(null);
		}
		markersArray.length = 0;
  	}
}

function createMarker(name, latlng, dados) {
	var complemento = (dados["complemento"]=="" || dados["complemento"]==null) ? "" : '<br>' + dados["complemento"];
	var cidade = (dados["cidade"]=="" || dados["cidade"]==null) ? "" : ' &bull; ' + dados["cidade"];
	var cidadeLimpa = (dados["cidade"]=="" || dados["cidade"]==null) ? "" : dados["cidade"];
	var estado = (dados["estado"]=="" || dados["estado"]==null) ? "" : ' &bull; ' + dados["estado"];
	var cep = (dados["cep"]=="" || dados["cep"]==null) ? "" : '<br><b>CEP: </b>' + dados["cep"];
	var telefone2 = (dados["telefone2"]=="" || dados["telefone2"]==null) ? "" : ' / ' + dados["telefone2"];
	var conteudo = '<span id="titulolojamapa"><b>' + dados["nome"] +'</b></span><br><font size="1" color="#222">'+ dados["endereco"] + ', ' + dados["numero"] + complemento + '<br>' + dados["bairro"] + cidade + estado + cep + '<br><b>Tel: </b>' + dados["telefone1"] + telefone2 + '</font>';
	
	var marker = new google.maps.Marker({position: latlng, map: map});
	markersArray.push(marker);
	
    google.maps.event.addListener(marker, "click", function() {
		$('#endereco2').val(dados["endereco"] + ', ' + dados["numero"] + ', ' + cidadeLimpa);
		
	  	if (infowindow) infowindow.close();
	  	infowindow = new google.maps.InfoWindow({content: conteudo, maxWidth: 140});
      	infowindow.open(map, marker);
    });
    return marker;
}

function setCenter(){
	// ajusta os markers no viewport
	var bounds = new google.maps.LatLngBounds();
	for (var i = 0; i < markersArray.length; i++){
		bounds.extend(markersArray[i].position);
	}
	map.fitBounds(bounds);
	map.setZoom(16);
}