function create_location_map(lat, long, element_id) {
	$('#'+element_id).html('');
	
	var l_map = new ovi.mapsapi.map.Display(document.getElementById(element_id), {
		components: [new ovi.mapsapi.map.component.Behavior(), new ovi.mapsapi.map.component.ZoomBar()],
        zoomLevel: 10,
        center: [parseFloat(lat), parseFloat(long)]
	 });
	
	var l_marker_container = new ovi.mapsapi.map.Container();
	l_map.objects.add(l_marker_container);
	var marker = new ovi.mapsapi.map.StandardMarker([parseFloat(lat), parseFloat(long)], {
	     text: '', 
	     draggable: false
	});   
	l_marker_container.objects.add(marker);
	
}

var map = null;
var infoBubbles;
var marker_container;
var markers = new Array;
var marker_ids = new Array;
var keyword_map = new Array;

var max_latitude, min_longitude, min_latitude, max_longitude;

var click_handler = function (event) {
	 clicked_location = map.pixelToGeo(event.displayX, event.displayY);
		 
	 //show "add feedbck" form
	 if(event.target.$myToolTip == undefined) {

		 $('#map').qtip('destroy');
		 
		 var form = $('#add_feedback').html();		 
		 var element = infoBubbles.addBubble(form, new ovi.mapsapi.geo.Coordinate(clicked_location.latitude, clicked_location.longitude));

		 $('input.latitude').val(clicked_location.latitude);
		 $('input.longitude').val(clicked_location.longitude);
		 
		 markers[element.id] = new ovi.mapsapi.map.StandardMarker([clicked_location.latitude, clicked_location.longitude], {
 		     text: '?', 
 		     draggable: false 		     
 		 });
 		
 		//add marker	    
 		marker_container.objects.add(markers[element.id]);
 		
 		//Handle closing of the bubble(s)
 		infoBubbles.openBubbleHandles.addObserver(function(list, method, element, idx) {
 			marker_container.objects.remove(markers[element.id]);
 		});

	 }
	 
	
};

var current_bubble;
var marker_hover_handler = function (evt) {
	//add bubble on mouseover, remove on mouseout
	if(evt.type == 'mouseover') {
		current_bubble = infoBubbles.addBubble(evt.target.$myToolTip, new ovi.mapsapi.geo.Coordinate(evt.target.coordinate.latitude, evt.target.coordinate.longitude));
		$('#map').addClass('over').qtip('hide');
	} else {		
		infoBubbles.removeBubble(current_bubble);
		$('#map').removeClass('over').qtip('show');
	}
};

var map_created = false;

function add_map_data(data, lat, long) {
	
	keyword_map = new Array;
	//add objects
	for (var i in data.data) {	
		if(data.data[i].keyword != '' && $.inArray(data.data[i].keyword, keyword_map) == -1) {
			keyword_map.push(data.data[i].keyword);
		}
		
		if($.inArray(data.data[i].id, marker_ids) == -1) {
			//create marker
	 		var la = parseFloat(data.data[i].latitude);
	 		var lo = parseFloat(data.data[i].longitude);
	 		
	 		var mouseover_listener = {
	 				"mouseover": [marker_hover_handler, false, null],
	 				"mouseout": [marker_hover_handler, false, null]
	 		}; 
	 		
	 		var distance = parseInt(data.data[i].distance) < 1 ? Math.round(parseFloat(data.data[i].distance)*1000) + 'm' :			
	 			Math.round(parseFloat(data.data[i].distance)*100)/100 + 'km';
			var kw = data.data[i].keyword == '' ? '' : keyword_text + ':' + data.data[i].keyword+' | ';

	 		var marker = new ovi.mapsapi.map.StandardMarker([la, lo], {
	 		     text: /*data.data[i].username*/'', 
	 		     draggable: false,
	 		     eventListener: mouseover_listener,
	 		     $myToolTip: '<h3>'+ data.data[i].full_name+':</h3><p><b>'
	 		     	+data.data[i].text+'</b></p><p>'+ kw + distance_text +': '+distance+'</p>',
	 		     $url: root_uri+'keyword/'+data.data[i].keyword+'/'+data.data[i].hash	 		    
	 		 });
	 		
	 		//add marker	    
	 		marker_container.objects.add(marker); 
	
	
	        //create an InfoBubble with html content
	       	marker.addListener("click", function(evt) {  
	        	window.location.href = evt.target.$url;
	    	});	       	
	
			//mark the marker as added
			marker_ids.push(data.data[i].id);
		
		}

 	}


	$('.list_right div').html(data.html);

    	
	if(!map_created) {
	 	for (var i in data.following) {
	 		var la = parseFloat(data.following[i].latitude);
	 		var lo = parseFloat(data.following[i].longitude);
	 		var marker = new ovi.mapsapi.map.StandardMarker([la, lo], {
	 			text:"", 
	 			brush: {
	 				color: "#ff9900"
	 			}, 
	 			pen: {
	 				strokeColor: "#fff"
	 			}, 
	 			textPen: {
	 				strokeColor: "#FFF"
	 			}, 
	 			shape: "star",
	 		    draggable: false,
	 		    $type: 'follow'
	 		 });
	 		
	 		marker_container.objects.add(marker); 
	 		
	 	}
	 			
	 	
		
		//mark map as created
		map_created = true;
	}
	

	//click listener
	map.addListener("click", click_handler, false);
	
}

var request_running = false;
var timeoutID;


function update_viewport_ajax() {
	request_running = true;
	$.get(root_uri+"viewport_feedback", { "max_latitude": max_latitude, "min_longitude": min_longitude, "min_latitude": min_latitude, "max_longitude": max_longitude, "latitude": latitude, "longitude": longitude, "html": '1' },
			function(data){
			 	add_map_data(data, latitude, longitude);
				request_running = false;
				
	}, "json");
}


//update viewport

function update_viewport() {
	max_latitude = map.getViewBounds().topLeft.latitude;
	min_longitude = map.getViewBounds().topLeft.longitude;
	min_latitude = map.getViewBounds().bottomRight.latitude;
	max_longitude = map.getViewBounds().bottomRight.longitude;
	
	if(!request_running) {
		window.clearTimeout(timeoutID);
		timeoutID = window.setTimeout(update_viewport_ajax, 1000);		
	}	
}

function create_feedback_map(lat, long) {
	$('#map').css('height', $(window).height()+'px').css('width', ($(window).width()-300)+'px');			

	if(map != null) {
		map.destroy();
  	}
	
	infoBubbles = new ovi.mapsapi.map.component.InfoBubbles();
	marker_container = new ovi.mapsapi.map.Container();
	
	
	map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
        components: [infoBubbles, new ovi.mapsapi.map.component.Behavior(), new ovi.mapsapi.map.component.ZoomBar()],
        zoomLevel: 10,
        center: [lat, long]
	 });

	//add it to the map's objects collection
	map.objects.add(marker_container);

	var drag_handler = function (event) {
		update_viewport();		
	};
	map.addListener("dragend", drag_handler, false);
	
	var zoom_observer = function (obj, key, newValue, oldValue) {
		  update_viewport();
	};
	map.addObserver("zoomLevel", zoom_observer);
	
	//get data for viewport
	update_viewport();
	
	$('#map').qtip({
	      content: hint_text,
	      position: {
	         my: 'top left',
	         target: 'mouse',
	         viewport: $(window), // Keep it on-screen at all times if possible
	         adjust: {
	            x: 10,  y: 10
	         }
	      },
	      hide: {
	         fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
	      },
	      style: {
	          classes: 'ui-tooltip-sayatme ui-tooltip-shadow ui-tooltip-rounded'
	      }
	 });
	
	$('.bg_absolute').removeClass('full');
}

	
$(document).ready(function() {
	$(window).resize(function() {
			$('#map').css('height', $(window).height()+'px').css('width', ($(window).width()-300)+'px');
	});
	
	$('.my_location').click(function(e) {
		map.set("center", new ovi.mapsapi.geo.Coordinate(latitude, longitude));
		map.set("zoomLevel", 10);
		update_viewport();
		return false;
	});

	$('a.nearby_keywords, input.close_choose_keyword').live('click', function(e) {
		$('div.choose_keyword ul').html('');
		
		for(i in keyword_map) {
			$('div.choose_keyword ul').append('<li class="select_keyword"><a href="#" class="select_keyword" title="">'+keyword_map[i]+'</a></li>');
		}
		
		$('div.choose_keyword, div.disable').toggle();
		return false;
	});
	
	$('li.select_keyword, li.select_keyword a').live('click', function(e) {
		$('input.keywords').val($(this).text());
		$('div.choose_keyword, div.disable').toggle();
		return false;
	});
	

	
});