function OnComplete(args, args2) {
    var htmlMapCode = args;
    var resourceIdentifier = args2;
    
    var networkMapDivIdentifier = "#networkMap-" + resourceIdentifier;
    $(networkMapDivIdentifier).html(htmlMapCode);
  
    var tooltipDivIndex = 0;
    $(networkMapDivIdentifier + " area").each(function(){

        
        var tooltipDivId = "mapStudioTooltip" + resourceIdentifier + "-" + tooltipDivIndex;
        var status = this.title.substring(0,this.title.lastIndexOf("|"));
        var tooltiptext = this.title.slice(this.title.indexOf("|") + 1);
		if(tooltiptext.length > 0)
		{
	        $("body").append("<div style='display:none' id='" + tooltipDivId + "'>" + tooltiptext + "</div>");
	        
	        this.title = "";
	        $(this).attr("rel","#" + tooltipDivId);
	        $(this).data("status",status);
	        
	        $(this).cluetip({
	          local: true,
	          showTitle: false,
	      	  cluetipClass: 'mapstudio',
	      	  attribute:'rel',
	      	  arrows: false
	        })
	        tooltipDivIndex++;
		}
    });

}

function OnTimeOut(args,args2) {
if(args.get_timedOut())
    {
        $("#networkMap-" + args2).html("Service call timed out.");
    }
    else
    {
        $("#networkMap-" + args2).html("An unexpected error occured."  + args.get_message() + args.get_stackTrace());
    }
}


function pageLoaded(sender, e) {
    MapService.set_timeout(180000);
    $(".mapIdentifier").each(function(i)
    {
      //mapIdentifier contains string {mapId}|{resourceId}
      //the resource id is sent to the OnComplete function, so it can update the networkMap-{resourceId} element
      var identifiers = $(this).val().split("|");
      $("#networkMap-" + identifiers[1]).html("<div style=\"text-align:center\"><img src=\"/images/AJAX-Loader.gif\" alt=\"Loading map\"></div>");
      MapService.GetMap(identifiers[0], OnComplete, OnTimeOut, identifiers[1]);
    }
    );
}