/// <reference path="jquery-1.3.2-vsdoc.js" />
/// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />

var map = null;
var smallmap = null;
var smallmapdiv = null;
var points = [];
var healthboardDisplayed = false;
var searchDisplayed = false;
var resources = null;
var imagesArray = new Array();


/*  this is the function which is called when the page is first loaded
it checks to see if the client has javascript enabled then hides the controls
for querying the map, it then creates a map of Scotland and renders it on the page
*/
function GetMap() {
    checkJavaScriptValidity();
    hideControls();
    map = new VEMap('theMap');
    var Scotland = new VELatLong(56.9089, -4.5264);
    map.LoadMap(Scotland, 6, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
	
	//this changes the fonts to Clekenwell
	Cufon.replace('h2');
	Cufon.replace('.tag1 h2');
    //map.SetCenterAndZoom(new VELatLong(54.729466, -1.982005), 10);
}

function GetSmallMap(smallLat, smallLong, mapdiv) {
    smallmap = new VEMap(mapdiv);
    smallmap.HideDashboard();
    smallmap.HideScalebar();
    smallmap.AttachEvent("onmouseover", mouseOverHandler);
    var smallMapLocation = new VELatLong(smallLat, smallLong);
    smallmap.LoadMap(smallMapLocation, 15, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

}
//this handler function overwrites the onmouseover
//event for the smallmaps (I was forced to do this because of a bug
//in IE6 which hid the generated HTML beside the smallmaps 
//when the user placed the mouse over the pushpin
function mouseOverHandler(e) {
    if (e.elementID != null) {
        //cancel default action
        return true;
    }
    
}
$(document).ready(function() {
$('#theMap').addClass("nomap");

});

function Loading() {
    $("<div id='busy'><img src='/images/ajax-loader.gif' alt='ajax loader' /></div>")
        .ajaxStart(function() { $(this).show(); })
        .ajaxStop(function() { $(this).hide(); })
        .appendTo('#timerimage');
}
/* 
this function adds the 'getResources' function to the _btnGetResources button
it also defines the click event for the 'view bigger map' links even though they 
do not exist when the page first loads - this is achieved by using the .live jquery
method
*/
$(function() {
    $('#_btnGetResources').click(getResources);
    $("#ddlHealthboard").change(function() {
        $('#theMap').removeClass('showmap').addClass('nomap');

    });
    $('a.bigmap').live("click", function(e) {
        e.preventDefault();
        $('#theMap').addClass("showmap");
        var modalPopupBehaviourCtrl = $find('ModalPopupBehaviourID');
        modalPopupBehaviourCtrl.show();
        if (resources.length > 0) {
            map = new VEMap('theMap');

            var latLong = new VELatLong(resources[0].Lat, resources[0].Long)
            map.LoadMap(latLong, 13, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
            map.Resize(600, 520);
            map.ClearInfoBoxStyles();
            if (resources.length == 1) {
                smallmapdiv = resources[0].Resource_Centre_Name; 
                AddNewPin(resources[0].Lat, resources[0].Long, resources[0].Resource_Centre_Name, resources[0].Notes, resources[0].URL, map);
            }
            else {
                for (var i = 0; i < resources.length; i++) {
                    smallmapdiv = resources[i].Resource_Centre_Name; 
                    AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, map);
                }
                //adjust zoom level to display all the pins we just added
                map.SetMapView(points);
            }//end else
        }
    });
});

//  here we define the fade in for the 'byhealthboard' div
function fadeInHB() {
    $('#byhealthboard').fadeIn('slow');
}
/*  this function defines the click event for the 'lnkHB' link.
It first prevents the default hyperlink event then causes the 'searchbox' div 
to fade out then sets boolean values used by the keypress function.
the healthboard drop down list is then reset and finally a one second delay 
is set before the 'fadeInHB' function is called.
*/
$(function() {
    $('#lnkHB').click(function(e) {

        e.preventDefault();
        $('#error').empty();
        $('#searchbox').fadeOut("slow");
        healthboardDisplayed = true;
        searchDisplayed = false;
        //reset the heathboard drop down list
        $("#ddlHealthboard option[value='']").attr('selected', 'selected');

        setTimeout("fadeInHB()", 1000);


    });
});
//  here we define the fade in for the 'searchbox' div
function fadeInSearchBox() {
    $('#searchbox').fadeIn("slow");
}
/* 
this function defines the click event for the 'lnkLocation' link.
It first prevents the default hyperlink event then causes the 'sbyhealthboard' div 
to fade out then sets boolean values used by the keypress function.
the searchbox is then reset and finally a one second delay 
is set before the 'fadeInSearchBox' function is called.
*/
$(function() {
    $('#lnkLocation').click(function(e) {

        e.preventDefault();
        $('#error').empty();
        $('#byhealthboard').fadeOut("slow");
        healthboardDisplayed = false;
        searchDisplayed = true;
        //reset the search box
        $("#Location").val('');

        setTimeout("fadeInSearchBox()", 1000);


    });
});

//this tests if the clients browser is IE
var IE = /*@cc_on!@*/false;

/*  
this function captures the user's 'Enter' key keypress function and determines which 
button should fire it's click event 
*/
$(function() {

    $("body, input, textarea").keypress(function(e) {

        var keyPressed = (e.which) ? e.which : e.keyCode;
        if (keyPressed == 13 && healthboardDisplayed == true)
            $('#_btnGetResources').click();
        if (keyPressed == 13 && searchDisplayed == true && IE == true)
            $("#_btnSearch").click();
        if (keyPressed == 13 && searchDisplayed == true && IE == false) {
            $('#error').append(document.createTextNode("please use the Search button")).addClass("redtext");
            return false;
        }
    });

});

//  eponymous 
function hideControls() {

    $('#byhealthboard').addClass("hide");

    $('#searchbox').addClass("hide");

}

/*
this is where the real work happens. An ajax call is made to the GetResourcesByHbId
web method. The resuls are then stored in the 'resources' variable. Looping through 
this variable the latitude and longitude of the first resource centre is extracted 
and the map is centered on these co-ordinates. The 'output' div is cleared and data
is extracted from the resources variable to create pushpins and populate the 'output' 
div.
*/
function getResources() {

    
    $('#error').empty();
    $('#output').empty();
    $('#timerimage').empty();
    if ($('#ddlHealthboard').val() == "") {
        $('#output').append("<p style='color:#ff0000'>please select a healthboard</p>");
        return;
    }
    if ($('#ddlServiceType').val() != 0) {
        Loading();

        $.ajax({
            type: "POST",
            url: "HepCResources.asmx/GetResourcesByHBAndType",
            data: "{id: " + $('#ddlHealthboard').val() + ", serviceType: " + $('#ddlServiceType').val() + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {

                resources = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

                if (resources.length > 0) {
                    $('#output').empty();
                    clearMap();
                    for (var i = 0; i < resources.length; i++) {
                        smallmapdiv = resources[i].Resource_Centre_Name;
                        var smallimagediv = resources[i].Resource_CentreID + "_smallimg";
                        var typesdiv = resources[i].Resource_CentreID + "_type";
                        //clear out image array
                        imagesArray = [];
                        //set image array
                        $.each(resources[i].Types, function(n, val) {
                            if (val == 1) {
                                var testingImage = resources[i].Resource_Centre_Name + "_Testing";
                                testingImage = new Image(15, 31);
                                testingImage.src = "/images/testing.gif";
                                testingImage.alt = "Testing";
                                imagesArray.push(testingImage);
                            }
                            if (val == 2) {
                                var treatmentImage = resources[i].Resource_Centre_Name + "_Treatment";
                                treatmentImage = new Image(20, 26);
                                treatmentImage.src = "/images/treatment.gif";
                                treatmentImage.alt = "Treatment";
                                imagesArray.push(treatmentImage);
                            }
                            if (val == 3) {
                                var supportImage = resources[i].Resource_Centre_Name + "_Support";
                                supportImage = new Image(20, 26);
                                supportImage.src = "/images/listen.gif";
                                supportImage.alt = "Support";
                                imagesArray.push(supportImage);
                            }
                        });

                        var addressLine2 = null;
                        if (resources[i].Address_2 != null) {
                            addressLine2 = "<div class='addressline2'>" +
				        resources[i].Address_2 + "</div>";
                        }
                        else
                            addressLine2 = "<span></span>"

                        var telNo = null;
                        if (resources[i].TelNo != null) {
                            telNo = "<span class='phoneimage'><img src='/images/phone.gif' alt='phone number' /></span><span>" +
                        resources[i].TelNo + "</span>";
                        }
                        else
                            telNo = "<span></span>";

                        var url = null;
                        if (resources[i].URL != null) {
                            url = "<div><a href='" + resources[i].URL + "' target='_blank'>visit website</a></div>";
                        }
                        else
                            url = "<span></span>";
							
						var email = null;
						if (resources[i].Email != null) {
							email = " <a href='mailto:" + resources[i].Email + "' target='_blank'>email centre</a>";
						}
						else
							email = "<span></span>";
							
						var contact = null;
						if (resources[i].Contact != null) {
							contact = "<div><span>contact: " + resources[i].Contact + "</span></div>";
						}
						else
							contact = "<span></span>";	
				
			var serviceDescription = null;
		    	if(resources[i].Notes != null)
		    	{
					serviceDescription = "<div class='servicedescription' >" + resources[i].Notes + "</div>";
		    	}
		   	else
		  	    serviceDescription = "<span></span>"; 


                        //AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, map);

                        //configure the output
						$('#output').append("<div class='smallmapcontainer' >" +
                        "<span class='centrename'>" + resources[i].Resource_Centre_Name + "</span>" +
				        "<div id='smallmap' style='position:relative; width:220px; height:190px;float:left;' />" +
                        "<div class='detailcontainer' >" +
                        "<div class='leftdetail' >" +
                        "<div id='typeimages'></div>" +
                        "<div id='types' style='font-size:xx-small;margin-bottom:10px;' >|&nbsp;</div>" +
						"<a href='#' class='bigmap'>view bigger map</a>" +
				        "<div class='envelope'><img src='/images/envelope.gif' alt='address' /></div><div class='address'>" + resources[i].Address_1 + "</div><div class='address'>" + addressLine2 +
				        "</div><div class='address'>" +
				        resources[i].Address_3 + "</div>" + "<div class='postcode'>" + resources[i].Postcode +
				        "</div></div>" +
				        "<div class='rightdetail' >" +
				        serviceDescription + telNo + "<div>" + url + email + "</div>" + contact +
				        "</div>" +
				        "<div>" +
				        "</div>"

						);

                        $('#smallmap').attr('id', smallmapdiv);
                        GetSmallMap(resources[i].Lat, resources[i].Long, smallmapdiv);
                        AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, smallmap);

                        $('#typeimages').attr('id', smallimagediv)
                        $('#types').attr('id', typesdiv);
                        $.each(imagesArray, function(n, val) {
                            $("#" + smallimagediv).append(val); //.append('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
                            $("#" + typesdiv).append(val.alt + ' | ');
                        });


                    }

                    $(".smallmapcontainer:odd").css("background-color", "#ffffff");
                    $(".smallmapcontainer:even").css("background-color", "#f4f4f8");
                }
                else {
                    $('#output').empty();
                    $('#output').append('no services');
                }


            },
            failure: function(msg) {

                $('output').text(msg);
            }
        });
    }
    else {
        //$("#output").append("<p style='color:#ff0000'>Please select a service</p>");
        $('#timerimage').empty();
        Loading();
        $.ajax({
            type: "POST",
            url: "HepCResources.asmx/GetResourcesByHBId",
            data: "{id: " + $('#ddlHealthboard').val() + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {

                resources = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

                if (resources.length > 0) {
                    $('#output').empty();
                    clearMap();
                    for (var i = 0; i < resources.length; i++) {
                        smallmapdiv = resources[i].Resource_Centre_Name;
                        var smallimagediv = resources[i].Resource_CentreID + "_smallimg";
                        var typesdiv = resources[i].Resource_CentreID + "_type";
                        //clear out image array
                        imagesArray = [];
                        //set image array
                        $.each(resources[i].Types, function(n, val) {
                            if (val == 1) {
                                var testingImage = resources[i].Resource_Centre_Name + "_Testing";
                                testingImage = new Image(15, 31);
                                testingImage.src = "/images/testing.gif";
                                testingImage.alt = "Testing";
                                imagesArray.push(testingImage);
                            }
                            if (val == 2) {
                                var treatmentImage = resources[i].Resource_Centre_Name + "_Treatment";
                                treatmentImage = new Image(20, 26);
                                treatmentImage.src = "/images/treatment.gif";
                                treatmentImage.alt = "Treatment";
                                imagesArray.push(treatmentImage);
                            }
                            if (val == 3) {
                                var supportImage = resources[i].Resource_Centre_Name + "_Support";
                                supportImage = new Image(20, 26);
                                supportImage.src = "/images/listen.gif";
                                supportImage.alt = "Support";
                                imagesArray.push(supportImage);
                            }
                        });

                        var addressLine2 = null;
						if (resources[i].Address_2 != null) {
							addressLine2 = "<div class='addressline2'>" +
							resources[i].Address_2 + "</div>";
						}
						else
							addressLine2 = "<span></span>"

                        var telNo = null;
                        if (resources[i].TelNo != null) {
                            telNo = "<span class='phoneimage'><img src='/images/phone.gif' alt='phone number' /></span><span>" +
                        resources[i].TelNo + "</span>";
                        }
                        else
                            telNo = "<span></span>";

                        var url = null;
                        if (resources[i].URL != null) {
                            url = "<div><a href='" + resources[i].URL + "' target='_blank'>visit website</a></div>";
                        }
                        else
                            url = "<span></span>";
							
						var email = null;
						if (resources[i].Email != null) {
							email = " <a href='mailto:" + resources[i].Email + "' target='_blank'>email centre</a>";
						}
						else
							email = "<span></span>";
							
						var contact = null;
						if (resources[i].Contact != null) {
							contact = "<div><span>contact: " + resources[i].Contact + "</span></div>";
						}
						else
							contact = "<span></span>";
                        
  		        var serviceDescription = null;
		        if(resources[i].Notes != null)
		        {
					serviceDescription = "<div class='servicedescription' >" + resources[i].Notes + "</div>";
		        }
		        else
		  	    serviceDescription = "<span></span>";


                        //AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, map);

                        //configure the output
						$('#output').append("<div class='smallmapcontainer' >" +
                        "<span class='centrename'>" + resources[i].Resource_Centre_Name + "</span>" +
				        "<div id='smallmap' style='position:relative; width:220px; height:190px;float:left;' />" +
                        "<div class='detailcontainer' >" +
                        "<div class='leftdetail' >" +
                        "<div id='typeimages'></div>" +
                        "<div id='types' style='font-size:xx-small;margin-bottom:10px;' >|&nbsp;</div>" +
						"<a href='#' class='bigmap'>view bigger map</a>" +
				        "<div class='envelope'><img src='/images/envelope.gif' alt='address' /></div><div class='address'>" + resources[i].Address_1 + "</div><div class='address'>" + addressLine2 +
				        "</div><div class='address'>" +
				        resources[i].Address_3 + "</div>" + "<div class='postcode'>" + resources[i].Postcode +
				        "</div></div>" +
				        "<div class='rightdetail' >" +
				         serviceDescription + telNo + "<div>" + url + email + "</div>" + contact +
				        "</div>" +
				        "<div>" +
				        "</div>"

						);

                        $('#smallmap').attr('id', smallmapdiv);
                        GetSmallMap(resources[i].Lat, resources[i].Long, smallmapdiv);
                        AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, smallmap);

                        $('#typeimages').attr('id', smallimagediv)
                        $('#types').attr('id', typesdiv);
                        $.each(imagesArray, function(n, val) {
                            $("#" + smallimagediv).append(val);//.append('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                            $("#" + typesdiv).append(val.alt + ' | ');
                        });


                    }

                    $(".smallmapcontainer:odd").css("background-color", "#ffffff");
                    $(".smallmapcontainer:even").css("background-color", "#f4f4f8");
                }
                else {
                    $('#output').empty();
                    $('#output').append('no services');
                }


            },
            failure: function(msg) {

                $('output').text(msg);
            }
        });
    }
        

}


/*  here we create virtual earth pushpins and add VELatLong co-ordinates 
to the 'points' array 
*/

function AddNewPin(lat, lng, title, notes, url, scotmap) {

    var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(lat, lng));
    shape.SetTitle("<span class=\"pinTitle\"> " + title + "</span>");
    shape.SetDescription(escape(notes));
    shape.SetMoreInfoURL(url);
    scotmap.AddShape(shape);
    var LL = new VELatLong(lat, lng);
    points.push(LL);

}
/*  if the client does not have javascript turned on the control without the map
is displayed
*/
function checkJavaScriptValidity() {

    $('#map').removeClass("invisible").addClass("visible");
    $('#javascriptdisabled').addClass("invisible");

}

//$('#lnkHB').removeClass("invisible").fadeIn("slow");

/*---------------------------------- Check for nearest centre -----------------------*/


//  here we add the 'Search' method to the '_btnSearch' button's click event
$(function() {
    $('#_btnSearch').click(Search);
});
/*  gets the location value from the client and calls the 'FindResourcesGivenLocation'
method
*/
function Search() {

    $('#error').empty();
    $('#output').empty();
    var where = jQuery.trim($("#Location").val());
    if (where.length < 1) {
        $('#error').append("<span style='color:red'>please enter a location</span>");
        return;
     
    }

    FindResourcesGivenLocation(where);
}
// clears the map and resets the 'points' array
function clearMap() {
    map.Clear();
    points = [];
}

/*  prevents the map going to an American location i.e. Dunfermline, Illinois
then calls the map's 'Find' method.
*/
function FindResourcesGivenLocation(where) {
    //if the user does not add "uk" then add it yourself
    if ($('#ddlServiceType2').val() != 0) {
        if (where.indexOf(" uk") == -1)
            where += " uk";
        map.Find("", where, null, null, null, null, null, false, null, null, callbackUpdateMapResources);
    }
    else {
        //$('#output').append("<div style='color=#ff0000;'>Please select a service</div> ");
        if (where.indexOf(" uk") == -1)
            where += " uk";
        map.Find("", where, null, null, null, null, null, false, null, null, callbackUpdateMapResourcesNoType);
    
    }
}
/*
The 'output' div is cleared, as is the map. The web service's 'SearchByLocation'
method is called by the jQuery 'ajax' method. Push pins and output are created and 
finally the map's SetMapView mathod is called with the points array as an argument.
This zooms the map to include the added push pins.  
*/
function callbackUpdateMapResources(layer, resultArray, places, hasMore, VEErrorMessage) {

    $('#output').empty();
    $('#timerimage').empty();
    Loading();
    clearMap();

    var center = map.GetCenter();
    $.ajax({
        type: "POST",
        url: "HepCResources.asmx/SearchByLocationAndType",
        data: "{latitude: " + center.Latitude + ", longitude: " + center.Longitude + ", serviceType: " + $('#ddlServiceType2').val() + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {

            resources = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

            if (resources.length > 0) {
                //var latLong = new VELatLong(resources[0].Lat, resources[0].Long)
                // map.LoadMap(latLong, 9, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

                $('#output').empty();
                for (var i = 0; i < resources.length; i++) {

                    smallmapdiv = resources[i].Resource_Centre_Name;
                    var smallimagediv = resources[i].Resource_CentreID + "_smallimg";
                    var typesdiv = resources[i].Resource_CentreID + "_type";

                    //clear out image array
                    imagesArray = [];
                    //set image array
                    $.each(resources[i].Types, function(n, val) {
                        if (val == 1) {
                            var testingImage = resources[i].Resource_Centre_Name + "_Testing";
                            testingImage = new Image(15, 31);
                            testingImage.src = "/images/testing.gif";
                            testingImage.alt = "Testing";
                            imagesArray.push(testingImage);
                        }
                        if (val == 2) {
                            var treatmentImage = resources[i].Resource_Centre_Name + "_Treatment";
                            treatmentImage = new Image(20, 26);
                            treatmentImage.src = "/images/treatment.gif";
                            treatmentImage.alt = "Treatment";
                            imagesArray.push(treatmentImage);
                        }
                        if (val == 3) {
                            var supportImage = resources[i].Resource_Centre_Name + "_Support";
                            supportImage = new Image(20, 26);
                            supportImage.src = "/images/listen.gif";
                            supportImage.alt = "Support";
                            imagesArray.push(supportImage);
                        }
                    });

                    var addressLine2 = null;
                    if (resources[i].Address_2 != null) {
                        addressLine2 = "<div class='addressline2'>" +
				        resources[i].Address_2 + "</div>";
                    }
                    else
                        addressLine2 = "<span></span>"

                    var telNo = null;
                    if (resources[i].TelNo != null) {
                        telNo = "<span class='phoneimage'><img src='/images/phone.gif' alt='phone number' /></span><span>" +
                        resources[i].TelNo + "</span>";
                    }
                    else
                        telNo = "<span></span>";

					var url = null;
                    if (resources[i].URL != null) {
                        url = "<a href='" + resources[i].URL + "' target='_blank'>visit website</a>";
                    }
                    else
                        url = "<span></span>";
						
					var email = null;
					if (resources[i].Email != null) {
                        email = " <a href='mailto:" + resources[i].Email + "' target='_blank'>email centre</a>";
                    }
                    else
                        email = "<span></span>";
						
					var contact = null;
					if (resources[i].Contact != null) {
                        contact = "<div><span>contact: " + resources[i].Contact + "</span></div>";
                    }
                    else
                        contact = "<span></span>";
		
	            var serviceDescription = null;
		    if(resources[i].Notes != null)
		    {
				serviceDescription = "<div class='servicedescription' >" + resources[i].Notes + "</div>";
		    }
		    else
		  	serviceDescription = "<span></span>";

                    //configure the output
                    $('#output').append("<div class='smallmapcontainer' >" +
                        "<span class='centrename'>" + resources[i].Resource_Centre_Name + "</span>" +
				        "<div id='smallmap' style='position:relative; width:220px; height:190px;float:left;' />" +
                        "<div class='detailcontainer' >" +
                        "<div class='leftdetail' >" +
                        "<div id='typeimages'></div>" +
                        "<div id='types' style='font-size:xx-small;margin-bottom:10px;' >|&nbsp;</div>" +

				        "<img id='distanceimage' src='/images/distance.gif' alt='distance' /><span class='bold'>" + Math.round(resources[i].Distance * 10) / 10 + "km</span><a href='#' class='bigmap'>bigger map</a>" +
				         "<div class='envelope'><img src='/images/envelope.gif' alt='address' /></div><div class='address'>" + resources[i].Address_1 + "</div><div class='address'>" + addressLine2 +
				        "</div><div class='address'>" +
				        resources[i].Address_3 + "</div>" + "<div class='postcode'>" + resources[i].Postcode +
				        "</div></div>" +
				        "<div class='rightdetail' >" +
				        serviceDescription + telNo + "<div>" + url + email + "</div>" + contact +
				        "</div>" +
				        "<div>" +
				        "</div>"

				    );

                    //AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, map);
                    $('#smallmap').attr('id', smallmapdiv);
                    GetSmallMap(resources[i].Lat, resources[i].Long, smallmapdiv);
                    AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, smallmap);

                    $('#typeimages').attr('id', smallimagediv)
                    $('#types').attr('id', typesdiv);
                    $.each(imagesArray, function(n, val) {
                    $("#" + smallimagediv).append(val);//.append('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                        $("#" + typesdiv).append(val.alt + ' | ');
                    });

                } //endfor
                $(".smallmapcontainer:odd").css("background-color", "#ffffff");
                $(".smallmapcontainer:even").css("background-color", "#f4f4f8");
                //adjust zoom level to display all the pins we just added
                map.SetMapView(points);

            } //endif
            else {
                $('#output').empty();
                $('#output').append('no resources within a 40km radius');
            }

        },
        failure: function(msg) {

            $('output').text(msg);
        }

    });
}

function callbackUpdateMapResourcesNoType(layer, resultArray, places, hasMore, VEErrorMessage) {

    $('#output').empty();
    $('#timerimage').empty();
    Loading();
    clearMap();

    var center = map.GetCenter();
    $.ajax({
        type: "POST",
        url: "HepCResources.asmx/SearchByLocation",
        data: "{latitude: " + center.Latitude + ", longitude: " + center.Longitude + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {

            resources = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

            if (resources.length > 0) {
                //var latLong = new VELatLong(resources[0].Lat, resources[0].Long)
                // map.LoadMap(latLong, 9, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

                $('#output').empty();
                for (var i = 0; i < resources.length; i++) {

                    smallmapdiv = resources[i].Resource_Centre_Name;
                    var smallimagediv = resources[i].Resource_CentreID + "_smallimg";
                    var typesdiv = resources[i].Resource_CentreID + "_type";

                    //clear out image array
                    imagesArray = [];
                    //set image array
                    $.each(resources[i].Types, function(n, val) {
                        if (val == 1) {
                            var testingImage = resources[i].Resource_Centre_Name + "_Testing";
                            testingImage = new Image(15, 31);
                            testingImage.src = "/images/testing.gif";
                            testingImage.alt = "Testing";
                            imagesArray.push(testingImage);
                        }
                        if (val == 2) {
                            var treatmentImage = resources[i].Resource_Centre_Name + "_Treatment";
                            treatmentImage = new Image(20, 26);
                            treatmentImage.src = "/images/treatment.gif";
                            treatmentImage.alt = "Treatment";
                            imagesArray.push(treatmentImage);
                        }
                        if (val == 3) {
                            var supportImage = resources[i].Resource_Centre_Name + "_Support";
                            supportImage = new Image(20, 26);
                            supportImage.src = "/images/listen.gif";
                            supportImage.alt = "Support";
                            imagesArray.push(supportImage);
                        }
                    });

                    var addressLine2 = null;
                    if (resources[i].Address_2 != null) {
                        addressLine2 = "<div class='addressline2'>" +
				        resources[i].Address_2 + "</div>";
                    }
                    else
                        addressLine2 = "<span></span>"

                    var telNo = null;
                    if (resources[i].TelNo != null) {
                        telNo = "<span class='phoneimage'><img src='/images/phone.gif' alt='phone number' /></span><span>" +
                        resources[i].TelNo + "</span>";
                    }
                    else
                        telNo = "<span></span>";

                    var url = null;
                    if (resources[i].URL != null) {
                        url = "<a href='" + resources[i].URL + "' target='_blank'>visit website</a>";
                    }
                    else
                        url = "<span></span>";
						
					var email = null;
					if (resources[i].Email != null) {
                        email = " <a href='mailto:" + resources[i].Email + "' target='_blank'>email centre</a>";
                    }
                    else
                        email = "<span></span>";
						
					var contact = null;
					if (resources[i].Contact != null) {
                        contact = "<div><span>contact: " + resources[i].Contact + "</span></div>";
                    }
                    else
                        contact = "<span></span>";
					
		
		    var serviceDescription = null;
		    if(resources[i].Notes != null)
		    {
				serviceDescription = "<div class='servicedescription' >" + resources[i].Notes + "</div>";
		    }
		    else
		  	serviceDescription = "<span></span>"; 
			

                    //configure the output
                    $('#output').append("<div class='smallmapcontainer' >" +
                        "<span class='centrename'>" + resources[i].Resource_Centre_Name + "</span>" +
				        "<div id='smallmap' style='position:relative; width:220px; height:190px;float:left;' />" +
                        "<div class='detailcontainer' >" +
                        "<div class='leftdetail' >" +
                        "<div id='typeimages'></div>" +
                        "<div id='types' style='font-size:xx-small;margin-bottom:10px;' >|&nbsp;</div>" +

				        "<img id='distanceimage' src='/images/distance.gif' alt='distance' /><span class='bold'>" + Math.round(resources[i].Distance * 10) / 10 + "km</span><a href='#' class='bigmap'>bigger map</a>" +
				        "<div class='envelope' ><img src='/images/envelope.gif' alt='address' /></div><div class='address'>" + resources[i].Address_1 + "</div><div class='address'>" + addressLine2 +
				        "</div><div class='address'>" +
				        resources[i].Address_3 + "</div>" + "<div class='postcode'>" + resources[i].Postcode +
				        "</div></div>" +
				        "<div class='rightdetail' >" +
				        serviceDescription + telNo + "<div>" + url + email + "</div>" + contact +
				        "</div>" +
				        "<div>" +
				        "</div>"

				    );

                    //AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, map);
                    $('#smallmap').attr('id', smallmapdiv);
                    GetSmallMap(resources[i].Lat, resources[i].Long, smallmapdiv);
                    AddNewPin(resources[i].Lat, resources[i].Long, resources[i].Resource_Centre_Name, resources[i].Notes, resources[i].URL, smallmap);

                    $('#typeimages').attr('id', smallimagediv)
                    $('#types').attr('id', typesdiv);
                    $.each(imagesArray, function(n, val) {
                        $("#" + smallimagediv).append(val);//.append('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                        $("#" + typesdiv).append(val.alt + ' | ');
                    });

                } //endfor
                $(".smallmapcontainer:odd").css("background-color", "#ffffff");
                $(".smallmapcontainer:even").css("background-color", "#f4f4f8");
                //adjust zoom level to display all the pins we just added
                map.SetMapView(points);

            } //endif
            else {
                $('#output').empty();
                $('#output').append('no resources within a 40km radius');
            }

        },
        failure: function(msg) {

            $('output').text(msg);
        }

    });
}
function PrintClick() {
    $("#btnPrintMap").fadeOut('slow', PrintMap);
}
function PrintMap() {
    $("#printcontainer").hide("slow");
    var pOptions = new VEPrintOptions(true);
    map.SetPrintOptions(pOptions);
    window.print();
    pOptions = new VEPrintOptions(false);
    map.SetPrintOptions(pOptions);
}
function ResumeBackground() {
    $("#btnPrintMap").fadeIn('slow');
    $("#printcontainer").show("slow");
}