$(document).ready(function() {

	gmap.setTargetDirections('route_div');

	$("#route_locations").sortable({
      axis: 'y',
      containment: 'parent',
      update : function () {
		var order = $('#route_locations').sortable('serialize');
  		$.ajax({url: "/Jscontent/sortLocations/"+ order,async: false });
  		drawRoute();
      }
    });

	if (typeof gmap != "undefined"){
		drawRoute();
	}

	$("#route_locations").click(function(e){
		target = e.target;
		if ($(target).hasClass("del")) {
			$.ajax({url: "/Jscontent/delLocation/"+ target.rel,async: false });
			drawRoute();
		}
		return false;
	});

	$('#route_div').hide();
	$('#route_menu .loc').addClass("active");

	$("#route_menu").click(function(e){
		target = e.target;
		if ($(target).hasClass("loc")) {
			$('#route_div').hide();
			$('#route_menu .route').removeClass("active");

			$('#route_locations').show();
			$('#route_menu .loc').addClass("active");

		}else if ($(target).hasClass("route")) {
			$('#route_div').show();
			$('#route_locations').hide();
			$('#route_menu .loc').removeClass("active");

			$('#route_menu .route').addClass("active");

		}
		return false;
	});

	// Left bar navigation

	$("#search_location").val('');

	$.each(locaties,function(i, objValue ){
		$("#locations_list").append($( "<li class=\"" + objValue.properties.replace(/:/g, " ")+ "\"><a href=\"\"  class=\"marker\"  rel=\"" + objValue.id + "\">" + objValue.name.substr(0, 1).toUpperCase() + objValue.name.substr(1).toLowerCase().substring(0,19) + "</a></li>" ));
	});

	$("#search_location").keyup(function(e){
		//e.keyCode;

	    var search = $(this).val();
	 	$("#locations_list").html('');
	    if (search.length > 0) {
	    	$.each(locaties,function(i, objValue ){

				if(objValue.name.toLowerCase().indexOf(search.toLowerCase()) == "0"){

					$("#locations_list").append($("<li class=\"marker " + objValue.properties+ "\" ><a href=\"\" class=\"marker\"  rel=\"" + objValue.id + "\">" + objValue.name.substr(0, 1).toUpperCase() + objValue.name.substr(1).toLowerCase() + "</a></li>"));
					gmap.toggelId(objValue.id, 'show');

				}else if(objValue.name.toLowerCase().indexOf(search.toLowerCase()) >= "0"){
					if (objValue.name.toLowerCase().charAt(objValue.name.toLowerCase().indexOf(search.toLowerCase())-1) == ' '){
						$("#locations_list").append($("<li class=\"marker " + objValue.properties+ "\"><a href=\"\" class=\"marker\"  rel=\"" + objValue.id + "\">" + objValue.name.substr(0, 1).toUpperCase() + objValue.name.substr(1).toLowerCase() + "</a></li>"));
						gmap.toggelId(objValue.id, 'show');
					}else{
						gmap.toggelId(objValue.id, 'hide');
					}
				}else{
					gmap.toggelId(objValue.id, 'hide');
				}

			});
	    }else{
	    	$.each(locaties,function(i, objValue ){
				$("#locations_list").append($( "<li class=\"" + objValue.properties.replace(/:/g, " ")+ "\"><a href=\"\"  class=\"marker\"  rel=\"" + objValue.id + "\">" + objValue.name.substr(0, 1).toUpperCase() + objValue.name.substr(1).toLowerCase().substring(0,19) + "</a></li>" ));
				gmap.toggelId(objValue.id, 'show');
			});
	    }
	});

});


function drawRoute(){
	$.getJSON("/Jscontent/getRoute",function(data){
		var mp = [];
		x=0;
		gmap.removeMarkers();
		$('#route_locations').html('');
		$('#mandje').html('');

		$.each(data.items, function(i,item){
       		html = "<table width=\"100%\" height=\"100%\" border=\"0\"><tr><td><img src=\"/layout/images/vg.jpg\"></td><td valign=\"top\"><b>"+ item.name+"</b><br></td></tr><tr><td colspan=\"2\" height=\"20px\" align=\"right\"><a href=\"/locatie/"+item.id+"\">Bekijk</a> | <a href=\"\" rel=\""+item.latlng+"\" class=\"item\">add</a></td></tr></table>";
			gmap.addMarker({"id" : item.id,"name" : item.name, "latlng" : item.latlng, "type" : "routeMarker", "prop" : "", "markerHTML" : html, "markerIcone" : "/layout/images/kaart_icons/stap"+(i+1)+"_pink.png"});

			$('#mandje').append('<li><b>'+(i+1)+'.</b> '+item.name+'</li>');

			var html = '<li id="list_' +i+ '"><div class="arrows"><img src="/layout/images/pijl_up_down.gif"></div><div class="adress"><b>'+item.name+'</b><br>' + item.street + ' '+ item.housenumber+' | ' + item.zipcode + ' '+ item.city + ' | '+ item.phonenumber +'</div><div class="delete"><a href="#" class="del" rel="'+item.id+'">verwijderen</a></div></li>';
			if (i == 0){$(".startpoint").val(item.id);}

			$('#route_locations').append(html);
			mp.push(item.latlng);

			i++;
       	});
		gmap.addRoute(mp);
	});
}


$(".startpoint").click(function(e){
	target = e.target;

	if (target.checked) {
		$.getJSON("/Jscontent/getLocation/" + target.value,function(data){
       		$.each(data.items, function(i,item){

       			$.ajax({
				   type: "POST",
				   url: "/session/add",
				   data: "id=" + item.id + "&name=" +item.name+ "&latlng=" + item.latlng + "&street=" + item.street + "&housenumber=" + item.housenumber+ "&city=" + item.city + "&zipcode=" + item.zipcode + "&phonenumber=" + item.phonenumber,
				   success: function(msg){
						drawRoute();
				   }
				 });
       		});
        });
	}else{
		$.getJSON("/Jscontent/getLocation/" + target.value,function(data){
   		$.each(data.items, function(i,item){

   			$.ajax({
			   type: "POST",
			   url: "/session/remove",
			   data: "id=" + item.id,
			   success: function(msg){
					drawRoute();
			   }
			 });
   		});
    });

	}

	document.getElementById('route_div').appendChild('<b>xxx</b>');

});