$('document').ready(function(){
	//this makes possible to have more than one localization tool on one page.
	$('.localization').each(function(){
		document.map_type = $('input[name=map_tool_type]').val();
		$(this).append('<div id="map_canvas"></div>');
		$(this).append('<div id="map_placemarks"></div>');
		$(this).append('<div id="map_detailed_views" style="display:none;"></div>');
		//this selector is very important to have more than one localization tool on one page.
		document.mapToolSelector = $(this);

		switch (document.map_type){
		case 'specific_location':
			var myOptions = {
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				streetViewControl: true
		}; 
			var map = new google.maps.Map($('#map_canvas')[0],
					myOptions);
			var kml_file = $('input[name=kml_file_to_use]').val();
			var kml_url = 'http://'+document.location.host+'/'+kml_file;
			var kml_layer = new google.maps.KmlLayer(kml_url , {
				suppressInfoWindows: true
			});
			kml_layer.setMap(map);
			getPlacemarks(kml_url);
			break;
			
		case 'auto_location':
			var button_color = $(document.mapToolSelector).children('input[name=button_color]').val();
			var button_text_color = $(document.mapToolSelector).children('input[name=button_text_color]').val();
			var button_text = $(document.mapToolSelector).children('input[name=button_text]').val();
			var button_type = $(document.mapToolSelector).children('input[name=button_type]').val();
			var table = 
				'<table>'+
					'<tbody>'+
						'<tr class="divider">'+
							'<td>'+
								'<label>Address</label>'+
							'</td>'+
							'<td>'+
								'<input type="text" name="address" />'+
							'</td>'+
						'</tr>'+
						'<tr class="divider">'+
							'<td>'+
								'<label>City</label>'+
							'</td>'+
							'<td>'+
								'<input type="text" name="city" />'+
							'</td>'+
						'</tr>'+
						'<tr class="divider">'+
							'<td>'+
								'<label>State</label>'+
							'</td>'+
							'<td>'+
								'<input type="text" name="state" />'+
							'</td>'+
						'</tr>'+
						'<tr class="divider">'+
							'<td>'+
								'<label>Zip</label>'+
							'</td>'+
							'<td>'+
								'<input type="text" name="zip" />'+
							'</td>'+
						'</tr>'+
					'</tbody>'+
				'</table>';
			$(document.mapToolSelector).children('#map_canvas').hide();
			button_type != 'light' ?  css = 'background-color:'+button_color+'; color:'+button_text_color+'; background-image:none;' : css = 'background-color:'+button_color+'; color:'+button_text_color+';';
			document.mapToolSelector.append(
					$('<div id="find_closest"></div>').addClass('actionbutton').attr('style', css)
						.append($('<div></div>')
								.append($('<span></span>').addClass('ab').html(button_text)))
					)
					.append($('<div></div>').addClass('header')
							.append($('<div></div>').attr('id', 'prehead')
									.append($('<h2></h2>').html('')))
							.append($('<div></div>').attr('id', 'head')
									.append($('<h1></h1>').html('Find the closest location.')))
							.append($('<div></div>').attr('id', 'subhead')
									.append($('<h3></h3>').html('Enter address below')))
							)
					.append($('<div></div>').attr('id', 'localization_form').addClass('formsection').append(table))
					.append($('<div id="find_closest_by_address"></div>').addClass('actionbutton').attr('style', css)
							.append($('<div></div>')
									.append($('<span></span>').addClass('ab').html('Search')))
						);
			break;
		}
	});
	
	/**
	 * 
	 */
	function getPlacemarks(kml_url){
		$.ajax({
			url: kml_url,
			type: 'POST',
			dataType: 'XML',
			success: function(file){
				var placemark = $(file).find('Placemark');
				createPlacemarkView(placemark);
			}
		});
	}
	
	/**
	 * 
	 */
	function createPlacemarkView(placemark){
		var name, description, address, phone;		
		var charString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';  
		var charArray = new Array('-1');  
		var letter = stringCounter(charString, charArray);
		document.mapToolSelector.children('#map_placemarks').html('');
		document.mapToolSelector.children('#map_detailed_views').html('');
		for (var i = 0; i < placemark.length; i++){
			id = $(placemark[i]).attr('id');
			name = $(placemark[i]).children('name').text();
			description = $(placemark[i]).children('description').text();
			address = $(placemark[i]).children('address').text();
			phone = $(placemark[i]).children('phoneNumber').text();
			email = $(placemark[i]).find('Data[name=email]').children('value').text();
			alt_phone = $(placemark[i]).find('Data[name=alt_phone]').children('value').text();
			mobile_phone = $(placemark[i]).find('Data[name=mobile_phone]').children('value').text();
			fax_phone = $(placemark[i]).find('Data[name=fax_phone]').children('value').text();
			home_page = $(placemark[i]).find('Data[name=home_page]').children('value').text();
			payment_types = $(placemark[i]).find('Data[name=payment_types]').children('value').text();
			document.mapToolSelector.children('#map_placemarks').append(
					$('<a></a>').attr({'id':id, 'class':'placemark_item', 'href':'#'+id+'-detailed'})
					.append($('<div></div>').addClass('lps-element-1')
							.append($('<div></div>').addClass('nav'))
							.append($('<div></div>').addClass('placemark_letter thumbnail').html(letter))
							.append($('<div></div>').addClass('maintext').html('<h4>'+name+'</h4>'))
							.append($('<div></div>').addClass('subtext').html('<h5>'+address+'</h5>'))
							)
			);
			if(document.map_type == 'auto_location'){
				document.mapToolSelector.children('#map_placemarks').append($('<a></a>').attr({'id':'back_to_search', 'href':'#back_to_search'})
						.append($('<div id="find_closest"></div>').addClass('actionbutton').attr('style', css)
								.append($('<div></div>')
										.append($('<span></span>').addClass('ab').html('Back to search')))
						)
				);
			}
			createDetailedView(id, name, description, address, phone, letter, email, alt_phone, mobile_phone, fax_phone, home_page, payment_types);
			letter = stringCounter(charString, charArray);
		}
		document.mapToolSelector.children('#map_placemarks').show();
		document.mapToolSelector.find('.lps-element-1:odd').addClass('odd');
	};
	
	/**
	 * 
	 */
	function createDetailedView(id, name, description, address, phone, letter, email, alt_phone, mobile_phone, fax_phone, home_page, payment_types){
		var button_color = $(document.mapToolSelector).children('input[name=button_color]').val();
		var button_text_color = $(document.mapToolSelector).children('input[name=button_text_color]').val();
		var button_text = $(document.mapToolSelector).children('input[name=button_text]').val();
		var button_type = $(document.mapToolSelector).children('input[name=button_type]').val();
		button_type != 'light' ?  css = 'background-color:'+button_color+'; color:'+button_text_color+'; background-image:none;' : css = 'background-color:'+button_color+'; color:'+button_text_color+';';
		document.mapToolSelector.children('#map_detailed_views').append(
				$('<div></div>').attr({'id':id+'-detailed', 'class':'detailed_view_item'}).hide()
				.append($('<div></div>').addClass('header')
						.append($('<div></div>').attr('id', 'prehead')
								.append($('<h2></h2>').html('Location')))
								.append($('<div></div>').attr('id', 'head')
										.append($('<h1></h1>').html(name)))
										.append($('<div></div>').attr('id', 'subhead')
												.append($('<h3></h3>').html(description)))
				)
				.append($('<div></div>').addClass('bodymessage')
						.append($('<div></div>').attr('id','page-content-body-0-message')
								.append($('<p></p>').html(description))
								.append($('<p></p>').html(address))
								.append($('<p></p>').html(phone))
								.append($('<p id="alt_phone"></p>'))
								.append($('<p id="mobile_phone"></p>'))
								.append($('<p id="fax_phone"></p>'))
								.append($('<p id="email"></p>'))
								.append($('<p id="home_page"></p>'))
								.append($('<p id="payment_types"></p>'))
								)
						.append($('<a></a>').attr({'href':'tel:'+phone})
								.append($('<div id="find_closest"></div>').addClass('actionbutton').attr('style', css)
										.append($('<div></div>')
												.append($('<span></span>').addClass('ab').html('Make a call')))
								)
						)
						.append($('<a></a>').attr({'href':'mailto:'+email})
								.append($('<div id="find_closest"></div>').addClass('actionbutton').attr('style', css)
										.append($('<div></div>')
												.append($('<span></span>').addClass('ab').html('Send an email')))
								)
						)
				)
				.append($('<a></a>').attr({'href':'#back_to_results', 'id':'back_to_results'})
								.append($('<div></div>').addClass('actionbutton').attr('style', css)
										.append($('<div></div>')
												.append($('<span></span>').addClass('ab').html('Back to results')))
								)
						)
		);
		if(alt_phone != '')
			$('#'+id+'-detailed').find('#alt_phone').html('Alternative phone: '+alt_phone);
		if(mobile_phone != '')
			$('#'+id+'-detailed').find('#mobile_phone').html('Mobile phone: '+mobile_phone);
		if(fax_phone != '')
			$('#'+id+'-detailed').find('#fax_phone').html('Fax phone: '+fax_phone);
		if(email != '')
			$('#'+id+'-detailed').find('#email').html(email);
		if(home_page != '')
			$('#'+id+'-detailed').find('#home_page').html('<a href="'+home_page+'">'+home_page+'</a>');
		if(payment_types != '')
			$('#'+id+'-detailed').find('#payment_types').html('Payment types: '+payment_types);
	};
	
	//event listener for slideup transition
	$('.placemark_item').live('click', function(clickEvent){
		clickEvent.preventDefault();
		var screen_size = $(window).height();
		var top_of_screen = $(window).scrollTop();
		var show_id = $(this).attr('href');
		document.placemark_selection = $(this);
		
		document.mapToolSelector.find('#map_detailed_views').addClass('slideup_localization').show();
		document.mapToolSelector.find('#map_detailed_views').css({'height':screen_size, 'top':screen_size+top_of_screen, 'margin-top':-screen_size, 'background-color':$('#page').css('background-color')});
		document.mapToolSelector.find('#map_detailed_views').children(show_id).show();
	});
	
	//event listener for back to results button
	//hides with a css3 animation the placemark detailed view
	$('#back_to_results').live('click', function(clickEvent){
		clickEvent.preventDefault();
		window.buton_selector = $(this);
		var margin = parseInt($(this).parents('#map_detailed_views').css('margin-top'));
		$(this).parents('#map_detailed_views').css({'margin-top':-margin});
		setTimeout(function(){
			$(window.buton_selector).parents('#map_detailed_views').removeClass('slideup_localization').hide();
			$(window.buton_selector).parents('.detailed_view_item').hide();
		}, 600);
	});
	
	//event listener for back to search button
	$('#back_to_search').live('click', function(clickEvent){
		clickEvent.preventDefault();
		document.mapToolSelector.find('#map_canvas, #map_placemarks').fadeOut('slow', function(){
			document.mapToolSelector.find('#find_closest, #find_closest_by_address, #localization_form').fadeIn('slow');
			document.mapToolSelector.find('#localization_form').prev().fadeIn('slow');
		});

	});
	
	//event listener for the button that will trigger a geolocalization request to the browser
	$('#find_closest').click(function(){
		if(navigator.geolocation){
			$('#page').append('<div id="loading_overlay"><img src="/images/ajax-loader-bar.gif"></div>');
			navigator.geolocation.getCurrentPosition(success, error);
		}
		else{
			alert('Geolocalization is not supported on this device.');
		}
	});
	
	//event listener for the button that will trigger a geolocalization request via address form
	$('#find_closest_by_address').click(function(submitButton){
		submitButton.preventDefault();
		var address = document.mapToolSelector.find('input[name=address]').val();
		var city = document.mapToolSelector.find('input[name=city]').val();
		var state = document.mapToolSelector.find('input[name=state]').val();
		var zip = document.mapToolSelector.find('input[name=zip]').val();
		var full_address = address+' '+zip+', '+city+', '+state;
		$.ajax({
			url: '/localization/php/localization.php',
			type: 'POST',
			dataType: 'JSON',
			data: {
				address: full_address
			},
			success: function(response){
				if (typeof response == 'string'){
					response = $.parseJSON(response);
				}
				if(response.length == 1){
					alert(response);
				}
				else{
					var addressLocation = new LatLon(response.lat, response.lon);
					closest_location = getClosestLocation(addressLocation);
			        showInMap(addressLocation, closest_location);
			        showClosestLocation(closest_location);
				}
			}
		});
	});
	
	/**
	 * 
	 */
    function success(position){
    	$('#loading_overlay').remove();
        var user_lat = position.coords.latitude;
        var user_lon = position.coords.longitude;
        var user_location = new LatLon(user_lat, user_lon);
        var kml_file = $('input[name=kml_file_to_use]').val();
		kml_url = 'http://'+document.location.host+'/'+kml_file;
        closest_location = getClosestLocation(user_location);
        showInMap(position, closest_location);
        showClosestLocation(closest_location);
    }
    
    function error(msg){
    	$('#loading_overlay').remove();
    	alert('There was an error while getting your position. Please try again later or enable this feature on your device settings.');
    }
    
    /**
     * 
     */
    function getClosestLocation(user_location){
    	var coordinates = getCoordinates();
    	for (var i=0; i < coordinates.length; i++){
    		var coordinate = coordinates[i].coordinates.split(',');
    		var placemark_location = new LatLon(coordinate[1], coordinate[0]);
    		coordinates[i].distance = user_location.distanceTo(placemark_location);
    	}
    	coordinates.sort(sortDistance);
    	return coordinates[0];
    }
    
    /**
     * gets the location coordinates from the kml file.
     */
    function getCoordinates(){
    	
    	var coordinates = $.ajax({
			url: '/localization/php/coordinates.php',
			async: false,
			type: 'POST',
			dataType: 'JSON',
			data: {
				kml_file :  $('input[name=kml_file_to_use]').val()
			},
			success: function(data){
				//console.log($.parseJSON(data));
				return 'ok';
			}
		}).responseText;
    	
    	return $.parseJSON(coordinates);
    	
    }
    
    function sortDistance(a, b){
    	return a.distance - b.distance;
    }
    
    /**
     * 
     */
    function showClosestLocation(closest_location){
    	$.ajax({
    		url: '/'+closest_location.file,
    		type:'POST',
    		dataType: 'XML',
    		success: function(kml_file){
    			var placemark = $(kml_file).find('#'+closest_location.id);
    			createPlacemarkView(placemark);
    		}
    	});
    }
    
    /**
     * 
     */
    function showInMap(position, closest_location){
    	$(document.mapToolSelector).children('#map_canvas').show();
    	$(document.mapToolSelector).children('#find_closest, #find_closest_by_address, #localization_form').hide();
    	$(document.mapToolSelector).children('#localization_form').prev().hide();
    	if(position.coords){
    		var user_latlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    	}
    	else{
    		var user_latlon = new google.maps.LatLng(position._lat, position._lon);
    	}
    	var place_latlon = new google.maps.LatLng(closest_location.coordinates.split(',')[1], closest_location.coordinates.split(',')[0]);
    	var mapOptions = {
				zoom: 10,
				center: user_latlon,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				streetViewControl: true
		};
    	
    	var gmap = new google.maps.Map($('#map_canvas')[0], mapOptions);
    	var user_markerOptions = {
        		map: gmap,
        		position: user_latlon,
        		animation: google.maps.Animation.DROP,
        		visible: true
        	};
    	var place_markerOptions = {
        		map: gmap,
        		position: place_latlon,
        		animation: google.maps.Animation.DROP,
        		visible: true,
        		icon: '/images/A.png'
        	};
    	var user_marker, place_marker;
    	user_marker = new google.maps.Marker(user_markerOptions);
		place_marker = new google.maps.Marker(place_markerOptions);
		var bounds = new google.maps.LatLngBounds();
		bounds.extend(user_latlon);
		gmap.fitBounds(bounds);
		bounds.extend(place_latlon);
		gmap.fitBounds(bounds);
    }
    
    /**
     * 
     */
	function stringCounter(charString,charArray) {  

		var str='';  
		var maxVal = charString.length-1;  

		// increment greatest index  
		++charArray[charArray.length-1];  

		// if greatest index == maxVal+1  
		if (charArray[charArray.length-1] == maxVal+1) {  
			// iterate from max to first and increment  
			for (i=charArray.length;i>0;i--){  
				if (charArray[i] == maxVal+1) {  
					charArray[i-1]++; // increment previous character  
					charArray[i]=0; // reset current character  
				}  
			}  
		}  

		// if first index surpasses the available sting, then  
		// reset whole counter and add one char  
		if (charArray[0] == maxVal+1) {  
			for (i=0;i<charArray.length;i++) {  
				charArray[i] = 0; // zeros counter on all indexes  
			}  
			charArray[charArray.length]=0; // appends a new index  
		}  

		// Prepare output by translating numbers and  
		// contatenating results  
		for (i=0;i<charArray.length;i++) {  
			str += charString.charAt(charArray[i]);  
		}  

		return str;  
	}  

});