/*
 *
 */

var config = {

	"scriptUrl" : "/dm-scripts/ajax-branch-locator/get-branches-in-county.php",
	"ajaxTimeout" : 5000

}

var ajaxCallStatus = "finished";
  // possible values:
  //  "inprogress" - ajax call currently in progress
  //  "finished" - ajax call finished
  //

$(document).ready(function() {

	var options = {
		url : config["scriptUrl"],
		type : "GET",
		dataType: "json",
		success: onSuccess,
		error: onError,
		complete: onComplete,
		timeout: config["ajaxTimeout"]
	}

	$.ajaxSetup(options);

	// two ways how to invoke branch searching:
	// 1) clicking on the map...
	$("area").click(function() {
		$("#AreaDropdown option[value=" + this.id + "]").attr("selected", "selected");
		startAjaxCall(this.id);
		return false;
	});

	// and 2), choosing a branch from dropdown...
	$("#AreaDropdown").change(function() {
		if (this.value != "#") {
			startAjaxCall(this.value);
		}
	});

});

function startAjaxCall(area) {

	// process request
	ajaxCallStatus = "inprogress";
	$.ajax( { data : "area=" + area + "&iecachefix=" + new Date() } );



	// show GIF animation after 0.3 seconds
	setTimeout(function() {

		// without this check, the busy animation would appear after 0.3 sec even if the
		// call was already successfully finished
		if (ajaxCallStatus == "inprogress") {
			var htmlSnippet = "<div><img src=\"" + getBasePath() + "themes/coversure/img/ajax-loader.gif\" alt=\"Wait for branches to be loaded\" /></div>"
			$("#AjaxBusyAnimation").append(htmlSnippet);
			$("#AjaxBusyAnimation").css("display", "block");
		}
	}, 300);
}

/*
 * On successful AJAX call
 */
function onSuccess(response) {


	var availableBranches = "";

	if (response["error"] != null) {

		availableBranches += "<p>Sorry, we are currently unable to deal with your request. Please try again or <a href=\"" + getBasePath() + "sitemap\">see a list of all branches</a>.</p>";
		availableBranches += "<p style=\"font-size: 0.7em; color: gray;\">Error returned was: " + response["error"] + "</p>";

	} else {

		if (response["branches"].length == 0) {
			availableBranches += "Sorry, no branches it this area. Please select different region or consider contacting <a href=\"branch/huntingdon\">Huntingdon headoffice</a>.";
		} else {
			availableBranches += "<p style=\"font-weight: bold;\">Branches in your area:</p>\n<ul>\n";
			for (var i in response["branches"]) {
				availableBranches += "<li>";
				availableBranches += "<a href=\"" + getBasePath() + response["branches"][i]["url"] + "\">";
				availableBranches += response["branches"][i]["branchName"];
				availableBranches += "</a>";
				availableBranches += "</li>\n";
			}
			availableBranches += "</ul>\n";
		}

	}

	$("#AvailableBranches").html(availableBranches);
}


/*
 * On AJAX error
 */
function onError() {
	$("#AvailableBranches").html("Branches could not be fetched. Sorry for inconvenience.");
}


function onComplete() {
	// hide the animation
	$("#AjaxBusyAnimation").empty();
	$("#AjaxBusyAnimation").css("display", "none");
	ajaxCallStatus = "finished";
}


/*
 * Helper function which retrieves base_path() from helper HTML holder
 */
function getBasePath() {
	return $("#BasePathHolder").attr("class");
}