jQuery(document).ready(function() {

	// jQuery(".espondbp2_add_contact").click(function(){
	// jQuery(".removeContact:last").click(function(e){
	// removeContact(this);
	// });
	// });

	jQuery(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});
	// jQuery(".espondbp2_date").datepicker({
	// dateFormat : 'yy-mm-dd',
	// maxDate : 0
	// });
	jQuery(".espondbp2_list").val("");
	// available to display an alert every time textfield is invalid
	// jQuery(".espondbp2_invalid").blur(function(e){
	// if (jQuery(this).hasClass("espondbp2_invalid")){
	// alert("this element is not valid");
	// }
	// });
	// jQuery(".espondbp2_valid").blur(function(e){
	// if (jQuery(this).hasClass("espondbp2_invalid")){
	// alert("this element is not valid");
	// }
	// });
	// jQuery(".espondbp2_temporal").blur(function(e){
	// if (jQuery(".espondbp2_end").hasClass("espondbp2_inconsistent") &&
	// jQuery(".espondbp2_start").hasClass("espondbp2_inconsistent")){
	// alert("End date must be greater than start date.");
	// }
	// });
	jQuery
	jQuery("#metadataDateInputDate").change(function(e) {
		verifDate(this);
	});
	jQuery(".espondbp2_indicator_name").blur(function(e) {
		verifTextLength(this, 128);
	});
	jQuery(".espondbp2_code").blur(function(e) {
		verifTextLength(this, 32);
	});
	jQuery(".espondbp2_provider_name").blur(function(e) {
		verifTextLength(this, 128);
	});
	jQuery(".espondbp2_coordinate").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		verifCoordinate(this);
	});
	jQuery(".espondbp2_mail").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		verifMail(this);
	});
	jQuery(".espondbp2_temporal").change(function(e) {
		verifTemporalExtent(this);
	});
	jQuery(".espondbp2_datasetName").keyup(function(e) {
		concatenationUri(this);
	});
	jQuery(".espondbp2_list_project").click(function(e) {
		concatenationUri(this);
	});
	jQuery(".espondbp2_list").change(function(e) {
		textValueChanged(this);
	});
	// jQuery(".espondbp2_add_contact").click(function(e){
	// addContact();
	// return false;
	// });
	// jQuery(".espondbp2_add_study_area").click(function(e){
	// addStudyArea();
	// return false;
	// });
	// jQuery(".espondbp2_add_indicator").click(function(e){
	// addIndicator();
	// return false;
	// });
	// jQuery(".espondbp2_add_temporal_extent").click(function(e){
	// temporalExtent=addTemporalExtent(this);
	// // return false;
	// });
	// jQuery(".espondbp2_add_source").click(function(e){
	// addSource();
	// return false;
	// });
	// jQuery(".espondbp2_add_provider").click(function(e){
	// provider=addProvider(this);
	// return false;
	// });
	jQuery(".espondbp2_checkbox").click(function(e) {
		sameAsRespParty(this);
	});
	// jQuery(".espondbp2_save").click(function(e){
	// valid=validForm();
	// return valid;
	// });
});

// those functions allow to add textfield

/**
 * remove contact
 */
function removeContact(element) {
	var elt = jQuery(element);
	elt.parents("tr").find(".espondbp2_contact_name_ind").val("none");
	elt.parents("tr").find(".espondbp2_contact_name_org").val("none");
	elt.parents("tr").find(".espondbp2_contact_mail").val("none@none.com");
}
/**
 * remove study area
 * 
 * @param element
 *            the remove button
 */
function removeStudyArea(element) {
	var elt = jQuery(element);
	elt.parents("tr").find(".espondbp2_study_area_name").val("none");
	elt.parents("tr").find(".espondbp2_latitude").val("0");
	elt.parents("tr").find(".espondbp2_longitude").val("0");
}

/**
 * remove temporal Extent
 * 
 * @param element
 *            the remove button
 */
function removeTemporalExtent(element, index) {
	var elt = jQuery(element);
	elt.parents("table.tempExtent").find(".espondbp2_start:eq(" + index + ")")
			.val("0");
	elt.parents("table.tempExtent").find(".espondbp2_end:eq(" + index + ")")
			.val("0");
}

function removeIndicator(element) {
	var elt = jQuery(element);
	elt.parents("tr").find(".espondbp2_start").val("0");
	elt.parents("tr").find(".espondbp2_end").val("0");
	elt.parents("tr").find(".espondbp2_indicator_name").val("none");
	elt.parents("tr").find(".espondbp2_code").val("none");
	elt.parents("tr").find(".espondbp2_indicatorAbstract").val("none");
}
/**
 * remove provider
 * 
 * @param element
 *            the remove button
 * @param index
 *            provider num
 */
function removeProvider(element, index) {
	var elt = jQuery(element);
	elt.parents("table.provider").find(
			".espondbp2_provider_name:eq(" + index + ")").val("none");
}

/**
 * remove source
 * 
 * @param element
 *            the remove button
 */
function removeSource(element) {
	var elt = jQuery(element);
	elt.parents("tr").find(".espondbp2_provider_name").val("none");
}

/**
 * indicate the date maximum for the textfield temporal Extent start
 * 
 * @param element
 */
function maxStartDate(element) {
	alert("test");
	alert(element.value);
	var elt = jQuery(element);
	// var maxDate =
	// elt.parents("table.tempExtent").find(".espondbp2_start:eq("+index+")").val();
	if (maxDate = !null) {
		return maxDate;
	} else {
		return 10000;
	}
}

/**
 * indicate the minimun date for the textfield temporal Extent end
 * 
 * @param element
 */
function minEndDate(element) {
	var elt = jQuery(element);
	// var minDate =
	// elt.parents("table.tempExtent").find(".espondbp2_start:eq("+index+")").val();
	if (minDate = !null) {
		return minDate;
	} else {
		return -100000000;
	}
}

/**
 * Checks if the element's value is correct. If it is, the element's class
 * become "espondbp2_valid", otherwise the element's class become
 * "espondbp2_invalid". Call concatenationUri function.
 * 
 * @param element
 *            the element selected by the user.
 */
function concatenationUri(element) {
	concatenationUri();
};

/**
 * Checks is the metadata date is valid.
 * 
 * @param element
 *            is the metadata date.
 */
function verifDate(element) {
	var elt = jQuery(element);
	if (elt.val() != "") {
		elt.removeClass("espondbp2_invalid").addClass("espondbp2_valid");
	} else {
		elt.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
	}

};

/**
 * Checks if the element's value is correct. If it is, this element's class
 * become "espondbp2_valid", otherwise this element's class become
 * "espondbp2_invalid".
 * 
 * @param element
 *            the element selected by the user.
 */
function textValueChanged(element) {
	var elt = jQuery(element);
	var reg = /^([a-zA-Z0-9_\(\)\-\%\:\.\,\']+\s*)+$/;
	var valid = reg.test(elt.val().trim());

	if (!valid) {
		elt.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
	} else {
		elt.removeClass("espondbp2_invalid").addClass("espondbp2_valid");
	}
};

/**
 * Checks that the length of the textfield is smaller than the authorized
 * length.
 * 
 * @param element
 *            is a textfield.
 * @param length
 *            int, the maximum authorized length of textfield value.
 */
function verifTextLength(element, length) {
	var elt = jQuery(element);
	if (elt.val().length > length) {
		elt.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
		alert("The length of the text must be smaller than " + length
				+ " character.");
	}
}
/**
 * Checks if the coordinate is correct.If it is, this element's class become
 * "espondbp2_valid", otherwise this element's class become "espondbp2_invalid".
 */
function verifCoordinate(element) {
	var elt = jQuery(element);
	if (elt.hasClass("espondbp2_latitude")) {
		var reg = /(^\-?0?[1-8]?[0-9](\.[0-9]+)?$|^\-?0?(90(\.0+)?)$)/;
	} else if (elt.hasClass("espondbp2_longitude")) {
		var reg = /((^\-?0?[0-9](\.[0-9]+)?$)|(^\-?0?[1-9][0-9](\.[0-9]+)?$)|(^\-?0?[1][0-7][0-9](\.[0-9]+)?$)|^\-?0?(180(\.0+)?)$)/;
	}
	var valid = reg.test(elt.val().trim());

	if (!valid) {
		elt.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
	} else {
		elt.removeClass("espondbp2_invalid").addClass("espondbp2_valid");
	}
};

/**
 * Checks if the mail is correct.If it is, this element's class become
 * "espondbp2_valid", otherwise this element's class become "espondbp2_invalid".
 */
function verifMail(element) {
	var elt = jQuery(element);
	var reg = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	var valid = reg.test(elt.val().trim());

	if (!valid) {
		elt.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
	} else {
		elt.removeClass("espondbp2_invalid").addClass("espondbp2_valid");
	}
};

/**
 * Checks if the temporal extent's values are correct. End date must be higher
 * than start date.
 * 
 * @param element
 *            is temporal extent selected.
 */
function verifTemporalExtent(element) {
	var elt = jQuery(element);
	var reg = /(^1[8-9][0-9][0-9]$)|(^2[0-1][0-9][0-9])|(^2200$)/;
	var validTest = reg.test(elt.val());

	if (elt.hasClass("espondbp2_start")) {
		var end = elt.parents("div.espondbp2_temporal_row").find(
				".espondbp2_end");
		var endValidTest = reg.test(end.val());
		if (validTest) {
			if (elt.val() <= end.val()) {
				elt.removeClass("espondbp2_invalid").removeClass(
						"espondbp2_inconsistent").addClass("espondbp2_valid");
				if (end.hasClass("espondbp2_inconsistent")) {
					end.removeClass("espondbp2_inconsistent").addClass(
							"espondbp2_valid");
				}
			} else {
				elt.removeClass("espondbp2_invalid").removeClass(
						"espondbp2_valid").addClass("espondbp2_inconsistent");
				if (endValidTest) {
					end.removeClass("espondbp2_invalid").removeClass(
							"espondbp2_valid").addClass(
							"espondbp2_inconsistent");
				}
			}
		} else {
			elt.removeClass("espondbp2_valid").removeClass(
					"espondbp2_inconsistent").addClass("espondbp2_invalid");
		}

	} else if (elt.hasClass("espondbp2_end")) {
		var start = elt.parents("div.espondbp2_temporal_row").find(
				".espondbp2_start");
		var startValidTest = reg.test(start.val());
		if (validTest) {
			if (elt.val() >= start.val()) {
				elt.removeClass("espondbp2_invalid").removeClass(
						"espondbp2_inconsistent").addClass("espondbp2_valid");
				if (start.hasClass("espondbp2_inconsistent")) {
					start.removeClass("espondbp2_inconsistent").addClass(
							"espondbp2_valid");
				}
			} else {
				elt.removeClass("espondbp2_invalid").removeClass(
						"espondbp2_valid").addClass("espondbp2_inconsistent");
				if (startValidTest) {
					start.removeClass("espondbp2_invalid").removeClass(
							"espondbp2_valid").addClass(
							"espondbp2_inconsistent");
				}
			}
		} else {
			elt.removeClass("espondbp2_valid").removeClass(
					"espondbp2_inconsistent").addClass("espondbp2_invalid");
		}
	}
};

/**
 * Generate the URI with the acronym's project, the dataset's name and the date.
 */
function concatenationUri() {
	var name = jQuery(".espondbp2_datasetName").val();
	var project = jQuery(".espondbp2_list_project").val();
	var date = new Date();
	var year = date.getFullYear();

	if (name != null) {
		name = name.replace(/ /g, "");
		name = name.replace(/\'/g, "");
		name = name.trim();
	}
	if (project != null) {
		project = project.trim();
	}
	var month = date.getMonth() + 1;

	if (month < 10) {
		month = "0" + month;
	}
	var day = date.getDate();
	if (day < 10) {
		day = "0" + day;
	}
	var uri = jQuery(".espondbp2_uri");
	if (name != null && project != null) {
		if (name != "" && project != "") {
			uri.val(project + "_" + name + "_" + year + month + day);
		} else {
			uri.val("");
		}
	}

	if (jQuery(".espondbp2_datasetName").hasClass("espondbp2_invalid")
			|| jQuery(".espondbp2_list_project").hasClass("espondbp2_invalid")) {
		uri.removeClass("espondbp2_valid").addClass("espondbp2_invalid");
	} else {
		uri.removeClass("espondbp2_invalid").addClass("espondbp2_valid");
	}
};

/**
 * Add a text areas to create a new contact.
 */
function addContact() {
	var contact = jQuery('.espondbp2_metadata_contact:first').clone();
	contact.insertAfter(jQuery('.espondbp2_contact:last')).find(
			"input:not(.espondbp2_checkbox)").val("").removeClass(
			"espondbp2_valid").addClass("espondbp2_invalid").end().find(
			".espondbp2_subtitle").empty().html("<hr /> Point of Contact");
	contact.find("input[type=checkbox]").attr('checked', false).addClass(
			"espondbp2_checkbox").click(function(e) {
		sameAsRespParty(this);
	});

	contact.find(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});

	contact.find(".espondbp2_mail").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		verifMail(this);
	});

	if (contact.find("button").size() == 0) {
		contact.append(jQuery("<button type='button'>Remove</button>").click(
				function() {
					if (confirm("Are you sure to remove this contact ?")) {
						jQuery(this).parents(
								".espondbp2_metadata_contact:first").remove();
					}
				}));
	}
};

/**
 * Add a text areas to create a new study area.
 */
function addStudyArea() {
	var studyArea = jQuery('.espondbp2_studyArea:first').clone();
	studyArea.insertAfter(jQuery('.espondbp2_studyArea:last')).find("input")
			.val("").end().find("input:not(.espondbp2_geo_objects)")
			.removeClass("espondbp2_valid").addClass("espondbp2_invalid").end()
			.find(".espondbp2_subtitle").empty().html("<hr /> Study Area");

	studyArea.find(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});

	studyArea.find(".espondbp2_coordinate").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		verifCoordinate(this);
	});

	if (studyArea.find("button").size() == 0) {
		studyArea.append(jQuery("<button type='button'>Remove</button>").click(
				function() {
					if (confirm("Are you sure to remove this Study Area ?")) {
						jQuery(this).parents(".espondbp2_studyArea:first")
								.remove();

					}
				}));
	}
};
/**
 * . Add a text areas to create a new indicator.
 */
function addIndicator() {

	var indicator = jQuery('.espondbp2_indicator:first').clone();
	indicator.insertAfter(jQuery('.espondbp2_indicator:last')).find(
			"input:not(input:submit)").val("").end().find("textarea").val("")
			.end().find(".espondbp2_textfield").removeClass("espondbp2_valid")
			.addClass("espondbp2_invalid").end().find(".espondbp2_temporal")
			.removeClass("espondbp2_valid").removeClass("inconsistent")
			.addClass("espondbp2_invalid");

	while (indicator.find("input:submit").size() != 1) {
		indicator.find("input:submit:last").remove();
		indicator.find(".espondbp2_start:last").remove();
		indicator.find(".espondbp2_end:last").remove();
		indicator.find(".espondbp2_temporal_extent_table div:last > span")
				.remove();
		indicator.find(".espondbp2_temporal_extent_table div:last").remove();
	}

	indicator.append(jQuery("<button type='button'>Remove</button>").css(
			"margin-left", "25%").click(function() {
		if (confirm("Are you sure to remove this indicator ?")) {
			jQuery(this).parents(".espondbp2_indicator:first").remove();
		}
	}));

	indicator.find(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});

	jQuery(".espondbp2_indicator:last").find(".espondbp2_temporal").blur(
			function(e) {
				verifTemporalExtent(this);
			});

	jQuery(".espondbp2_indicator:last").find(".espondbp2_add_temporal_extent")
			.click(function(e) {
				temporalExtent = addTemporalExtent(this);
			});

	jQuery(".espondbp2_remove_temporal_extent:last").click(function() {
		if (confirm("Are you sure to remove this Temporal Extent ?")) {
			temporalExtent.remove();
		}
	});

};
/**
 * Add a text areas to create a new temporal extent.
 * 
 * @param addTemp
 *            is the button "add temporal extent" which add a new temporal
 *            extent.
 * @returns the temporal extent appended
 */
function addTemporalExtent(addTemp) {

	var temporalExtent = jQuery(addTemp).parents(
			"div.espondbp2_temporal_extent_table").find("div:eq(1)").clone();
	temporalExtent.insertAfter(
			jQuery(addTemp).parents("div.espondbp2_temporal_extent_table")
					.find("div:last")).find("input:not(input:submit)").val("")
			.removeClass("espondbp2_valid").removeClass(
					"espondbp2_inconsistent").addClass("espondbp2_invalid")
			.end().find("input:submit:last").val("Remove").removeClass()
			.addClass("espondbp2_remove_temporal_extent").click(function() {
				if (confirm("Are you sure to remove this Temporal Extent ?")) {
					temporalExtent.remove();
				}
			});
	jQuery(".espondbp2_temporal").blur(function(e) {
		verifTemporalExtent(this);
	});
	return (temporalExtent);
};
/**
 * Add a text areas to create a new source reference.
 */
function addSource() {
	var source = jQuery('.espondbp2_source:first').clone();
	source.insertAfter(jQuery('.espondbp2_source:last')).find(
			"input:not(input:submit)").val("").end().find(
			"input.espondbp2_textfield").removeClass("espondbp2_valid")
			.addClass("espondbp2_invalid");

	if (jQuery(".espondbp2_source:first").find("input:submit").size() != 1) {
		while (source.find("input:submit").size() != 1) {
			source.find("input:submit:last").remove();
			source.find(".espondbp2_provider_name:last").remove();
			source.find(".espondbp2_provider_uri:last").remove();
			source.find(".espondbp2_provider div:last > span").remove();
			source.find(".espondbp2_provider div:last").remove();
			source.find(".espondbp2_provider div:last > span").remove();
			source.find(".espondbp2_provider div:last").remove();
		}
	}

	source.append(jQuery("<button type='button'>Remove</button>").css(
			"margin-left", "25%").click(function() {
		if (confirm("Are you sure to remove this source ?")) {
			jQuery(this).parents(".espondbp2_source:first").remove();
		}
	}));
	source.find(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});

	jQuery(".espondbp2_source:last").find(".espondbp2_add_provider").click(
			function(e) {
				provider = addProvider(this);
				return false;
			});

	jQuery(".espondbp2_remove_provider:last").click(function() {
		if (confirm("Are you sure to remove this Provider ?")) {
			provider.remove();
		}
	});
};
/**
 * Add a text areas to create a new provider.
 * 
 * @param addProvider
 *            is the button "add provider" which add a new provider.
 * @returns the provider appended.
 */
function addProvider(addProvider) {

	var provider = jQuery(addProvider).parents("div.espondbp2_provider")
			.clone();
	provider.insertAfter(
			jQuery(addProvider).parents("div.espondbp2_provider:last")).find(
			"input:text").val("").end().find(
			"input:text:not(.espondbp2_provider_uri)").removeClass(
			"espondbp2_valid").addClass("espondbp2_invalid");

	provider.find("input:submit:last").val("Remove").removeClass().addClass(
			"espondbp2_remove_provider").click(function() {
		if (confirm("Are you sure to remove this Provider ?")) {
			provider.remove();
		}
	});

	jQuery(".espondbp2_textfield").blur(function(e) {
		jQuery(this).val(this.value.trim());
	}).keyup(function(e) {
		textValueChanged(this);
	});
	return (provider);
};
/**
 * Allow to create contact same as the responsible party (if the checkbox is
 * checked)
 * 
 * @param element
 *            is the checkbox checked.
 */
function sameAsRespParty(element) {
	var checkbox = jQuery(element);
	var elt = jQuery(element).parents("tr");
	if (checkbox.attr('checked')) {
		var respParty = jQuery(".espondbp2_contact_resp");
		elt.find(".espondbp2_contact_name_ind").val(
				respParty.find(".espondbp2_responsible_name_ind").val());
		elt.find(".espondbp2_contact_name_org").val(
				respParty.find(".espondbp2_responsible_name_org").val());
		elt.find(".espondbp2_contact_role").val(
				respParty.find(".espondbp2_responsible_role").val());
		elt.find(".espondbp2_contact_mail").val(
				respParty.find(".espondbp2_responsible_mail").val());

		elt.find(".espondbp2_contact_name_ind").removeClass()
				.addClass(
						respParty.find(".espondbp2_responsible_name_ind").attr(
								"class"));
		elt.find(".espondbp2_contact_name_org").removeClass()
				.addClass(
						respParty.find(".espondbp2_responsible_name_org").attr(
								"class"));
		elt.find(".espondbp2_contact_role").removeClass().addClass(
				respParty.find(".espondbp2_responsible_role").attr("class"));
		elt.find(".espondbp2_contact_mail").removeClass().addClass(
				respParty.find(".espondbp2_responsible_mail").attr("class"));

	} else {
		elt.find(".espondbp2_contact_name_ind").val("");
		elt.find(".espondbp2_contact_name_org").val("");
		elt.find(".espondbp2_contact_mail").val("");
		elt.find("input:not(.espondbp2_checkbox)").removeClass(
				"espondbp2_valid").addClass("espondbp2_invalid");
	}
};

/**
 * Checks if the form is completed properly. if this is not the caserefuse to
 * submit the form if dataset information are incorrect.
 * 
 * @returns {Boolean} true if the form is valid, otherwise, false.
 */
function validForm() {
	var valid = true;
	if (jQuery(".espondbp2_invalid").size()
			+ jQuery(".espondbp2_inconsistent").size() == 0) {
		alert("The form is correct !");
	} else {
		alert("You can't save, incorrect or missing values !!");
		valid = false;
		if (jQuery(".espondbp2_inconsistent").size() > 0) {
			alert("End date must be greater than start date.");
		}
	}
	return (valid);
};

// ====================================== jQuery for case study map
// ==================================

/** The map display on case-study-search page **/
var map;

/** The url of the application **/
var pathname;

/** The map layer that displays case study study areas on search page **/
var casestudyFeature;

/** The map layer that displays case study study areas on metadata page **/
var caseStudyMetadataFeature;

/** The default styles map for markers on map (contains 3 feature styles: "default", "temporary", "select") **/
var generalStyles;

/** The styles map for markers on map when a project is selected (contains 3 feature styles: "default", "temporary", "select") **/
var projectStyles;

/** The styles map for markers on map when a case study is selected (contains 3 feature styles: "default", "temporary", "select") **/
var caseStudyStyles;

/**select a case study study area point**/
var select;

/**Control to highlight the study areas belonging to the same dataset than the a pin selected on map. Used "temporary" style**/
var highlightCtrl;

/**
 * Adds map in the case-study-map.xhtml and displays, on the map, all study
 * areas of integrated case study.
 */
function init() {

	var pathArray = window.location.href.split('/');
	var applicationName = pathArray[3];
	pathname = window.location.protocol + "//" + window.location.host + "/"
			+ applicationName + "/";
	
//	This array lists four mapQuest servers known on the 204-07-01 in order to load mapQuest "map" (!=satelite) tiles
	var arrayMapQuest = [
			"http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
			"http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
			"http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg",
			"http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg" ];
	
//	This array lists 3 opencyclemap servers known on the 204-07-01 in order to load transport tiles
	var arrayOsmTransport = [
			"http://a.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
			"http://b.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
			"http://c.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png" ];

//	3 background map are proposed to the user.
	var osmBg = new OpenLayers.Layer.OSM("Simple OSM Map");
	var mapQuestBg =  new OpenLayers.Layer.OSM("MapQuest-OSM Tiles", arrayMapQuest);
	var transportBg = new OpenLayers.Layer.OSM("OSM Transport Tiles", arrayOsmTransport);

	/**contains 3 feature styles: 
	  "default"
	  "temporary": highlights the study areas belonging to the same dataset than the a pin selected on map
	  "select": highlights a selected pin on map **/
	generalStyles = new OpenLayers.StyleMap({
		"default" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_all.png",
			graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
		}),
		"temporary": new OpenLayers.Style({
				externalGraphic: pathname+"resources/images/cs_marker_selected.png",
				graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
			}),
		"select" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_selected.png",
			graphicWidth: 16, graphicHeight: 26, graphicYOffset: -26
		})
	});

	projectStyles = new OpenLayers.StyleMap({
		"default" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_project.png",
			graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
		}),
		"temporary": new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_selected.png",
			graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
		}),
		"select" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_selected.png",
			graphicWidth: 16, graphicHeight: 26, graphicYOffset: -26
		})
	});

	caseStudyStyles = new OpenLayers.StyleMap({
		"default" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_one_cs.png",
			graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
		}),
		"temporary": new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_selected.png",
			graphicWidth: 9, graphicHeight: 16, graphicYOffset: -16
		}),
		"select" : new OpenLayers.Style({
			externalGraphic: pathname+"resources/images/cs_marker_selected.png",
			graphicWidth: 16, graphicHeight: 26, graphicYOffset: -26
		})
	});
	
	casestudyFeature = new OpenLayers.Layer.Vector("Case Study layer", {
		styleMap: generalStyles,
		projection : new OpenLayers.Projection("EPSG:4326"),
		strategies : [ new OpenLayers.Strategy.Fixed() ],
		protocol : new OpenLayers.Protocol.HTTP({
			url : pathname + "casestudyareaservlet",
			params : {
				format : "geojson"
			},
			format : new OpenLayers.Format.GeoJSON({
				ignoreExtraDims : true
			}),
			callbackKey : "callback"
		}),
		eventListeners : {
			'featureselected': onFeatureSelect,
			'featureunselected': onFeatureUnselect
		}
	});
	
	map = new OpenLayers.Map('map', {
		maxResolution: 156543.0339 ,
		maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
		projection : "EPSG:900913"
	});
	
	//Control to highlight the other study areas belonging to the same dataset
	highlightCtrl = new OpenLayers.Control.SelectFeature(casestudyFeature, {highlightOnly: true,renderIntent: "temporary"});
	
	//select a case study study area point
	select = new OpenLayers.Control.SelectFeature(casestudyFeature);
	
	map.addLayer(mapQuestBg);
	map.addLayer(osmBg);
	map.addLayer(transportBg);
	map.addLayer(casestudyFeature);
	map.addControl(new OpenLayers.Control.LayerSwitcher());
    
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(9.248056, 50.116944).transform(fromProjection, toProjection);
    map.addControl(highlightCtrl);
    map.addControl(select);
    highlightCtrl.activate();
    select.activate();
	map.setCenter(position);
	map.getNumZoomLevels = function() {
		return 8;
	};
	map.zoomToMaxExtent();
	document.getElementById('map').scrollIntoView();
}

/**
 * Function called when a case study study area is selected on the map:
 * Displays a popup with project name and dataset name of the case study.
 */
function onFeatureSelect(evt) {
	feature = evt.feature;
	getTableRowSelected(feature.attributes.iddataset, true);
	highlightDatasetStudyArea(feature.attributes.id, feature.attributes.iddataset);
	var text  = "<h3>"+feature.attributes.saname + " - "+feature.attributes.geoinfo+ ".</h3> <hr style=\"height: 2px; color: #2E2E2E; background-color: #2E2E2E; width: 40%; border: none;\">"+
    "<p> <b>Case study name:</b> "+feature.attributes.dataset+"</p>";
	
	popup = new OpenLayers.Popup.FramedCloud("featurePopup",
					 feature.geometry.getBounds().getCenterLonLat(),
                     new OpenLayers.Size(80,80),
                     text,
                     null, true, onPopupClose);
	popup.maxSize = new OpenLayers.Size(350,200);
	feature.popup = popup;
	map.addPopup(popup);
}

/**
 * Function called when a case study study area is unselected on the map
 */
function onFeatureUnselect(evt) {
	feature = evt.feature;
	getTableRowSelected(feature.attributes.iddataset, false);
	if (feature.popup) {
		popup.feature = null;
		map.removePopup(feature.popup);
		feature.popup.destroy();
		feature.popup = null;
	}
	//unhighlight the other study areas belonging to the same dataset
	for ( var i = 0; i < casestudyFeature.features.length; i++) {
		var element = casestudyFeature.features[i];
		if (element.attributes.iddataset == feature.attributes.iddataset ) {
			highlightCtrl.unhighlight(element);
		}
	} 
	casestudyFeature.redraw();
}

/**
 * Gets the left table row of the selected case study on map and highlighted it or unhighlight it.
 * 
 * @param iddatasetSelected the id of the selected case study (a study area is selected on map, this study area belongs to a specific case study dataset).
 * @param highlight a boolean indicates if the table row must be highlighted or unhighlighted.
 */
function getTableRowSelected(iddatasetSelected, highlight) {
	iddatasetSelected = parseInt(iddatasetSelected, 10);
	var table = document.getElementById('CaseStudySearchForm:caseStudyTable');
	for ( var r = 0; r < table.rows.length; r++) {
		var inputs = table.rows[r].getElementsByTagName('input');
		for (i = 0; i < inputs.length; i++) {
			if (inputs[i].type == 'hidden' && iddatasetSelected == parseInt(inputs[i].value, 10)) {
				if (highlight){
					table.rows[r].className = "highlight";
					table.rows[r].scrollIntoView();
				}else{
					table.rows[r].className = "odd";
				}
			}
		}
	}
}

/**
 * Function called when a popup is close by the user
 */
function onPopupClose(evt) {
	select.unselectAll();
}

/**
 * Clears all the popup open on a map layer
 */
function popupClear(map) {
    while( map.popups.length ) {
         map.removePopup(map.popups[0]);
    }
}

/**
 * This function is called when a row of the case study search table is
 * selected by clincking the radio check button: the study areas of the selected row are displayed on the map.
 */
function getCheckedCaseStudyStudyArea(radio, caseStudyDatasetId) {
	// Unchecking the radio button and search all the study areas of the
	// integrated case study
	if (!radio.checked) {
		radio.checked = false;
		//clear all popup
		popupClear(map);
		//unload the layer in order to erase case study feature on map and reload new one.
		casestudyFeature.loaded = false;
        //setting visibility to true forces a reload of the layer
		casestudyFeature.setVisibility(true);
        //load new style for case study study area feature (markers on map)
		casestudyFeature.styleMap = generalStyles;
		//the refresh will force it to get the new Geojson data
		casestudyFeature.refresh({ force: true, params: { format : "geojson"} });
		getTableRowSelected(caseStudyDatasetId, false);
	}
	// Checking the radio button + unchecking the others and search the study
	// areas of the selected case study
	else {
		unhighlightUncheckAllRow();
		var radioId = radio.name.substring(radio.name.lastIndexOf(':'));
		for ( var i = 0; i < radio.form.elements.length; i++) {
			var element = radio.form.elements[i];

			if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
				element.checked = false;
			}
		}
		radio.checked = true;
		popupClear(map);
		casestudyFeature.loaded = false;
		casestudyFeature.setVisibility(true);
		casestudyFeature.styleMap = caseStudyStyles;
		casestudyFeature.refresh({ force: true, params: { format : "geojson", casestudyid : caseStudyDatasetId} });
		getTableRowSelected(caseStudyDatasetId, true);
	}
}


/**
 * This function is called when a row of the case study search table is
 * selected by clicking the pin icon on the table: the study areas of the selected row are displayed on the map.
 */
function getCaseStudyStudyArea(caseStudyDatasetId) {
		unhighlightUncheckAllRow();
		getTableRowSelected(caseStudyDatasetId, true);
		setCheckBoxSelected(caseStudyDatasetId);
		popupClear(map);
		casestudyFeature.loaded = false;
		casestudyFeature.setVisibility(true);
		casestudyFeature.styleMap = caseStudyStyles;
		casestudyFeature.refresh({ force: true, params: { format : "geojson", casestudyid : caseStudyDatasetId} });
}

function unhighlightUncheckAllRow(){
	var table = document.getElementById('CaseStudySearchForm:caseStudyTable');
	for ( var r = 0; r < table.rows.length; r++) {
		table.rows[r].className = "odd";
		var inputs = table.rows[r].getElementsByTagName('input');
		for (i = 0; i < inputs.length; i++) {
			if (inputs[i].type == 'checkbox' ) {
				for (j = 0; j < inputs.length; j++) {
						inputs[j].checked = false;
				}
			}
		}
	}
}

/**
 * Gets the left table row of the selected case study on map and highlighted it or unhighlight it.
 * 
 * @param iddatasetSelected the id of the selected case study (a study area is selected on map, this study area belongs to a specific case study dataset).
 * @param highlight a boolean indicates if the table row must be highlighted or unhighlighted.
 */
function setCheckBoxSelected(iddatasetSelected) {
	iddatasetSelected = parseInt(iddatasetSelected, 10);
	var table = document.getElementById('CaseStudySearchForm:caseStudyTable');
	for ( var r = 0; r < table.rows.length; r++) {
		var inputs = table.rows[r].getElementsByTagName('input');
		for (i = 0; i < inputs.length; i++) {
			if (inputs[i].type == 'hidden' && iddatasetSelected == parseInt(inputs[i].value, 10)) {
				for (j = 0; j < inputs.length; j++) {
					if (inputs[j].getAttribute('type') == 'checkbox') {
						inputs[j].checked = true;
					}
				}
			}
		}
	}
}

/**
 * This function is called when a ESPON project is selected in the CS search
 * GUI: the study areas of the selected project are display on the map.
 */
function getProjectStudyArea() {

	var listIndex = document
			.getElementById("CaseStudySearchForm:selectCSProjects").selectedIndex;

	var value = document.getElementById("CaseStudySearchForm:selectCSProjects").options[listIndex].value;
	if (typeof (value) !== 'undefined' && value != null && value !== -1
			&& value != "") {
		popupClear(map);
		casestudyFeature.loaded = false;
		casestudyFeature.setVisibility(true);
		casestudyFeature.styleMap = projectStyles;
		casestudyFeature.refresh({ force: true, params: { format : "geojson", projectid : value} });
	}

}

/**
 * This function is called when a pin is selected on map. The other study area of the same dataset are highlighted on map.
 */
function highlightDatasetStudyArea(idstudyarea, caseStudyDatasetId) {
	for ( var i = 0; i < casestudyFeature.features.length; i++) {
		var element = casestudyFeature.features[i];
		if (element.attributes.id != idstudyarea && element.attributes.iddataset == caseStudyDatasetId ) {
			highlightCtrl.highlight(element);
		}
	} 
	casestudyFeature.redraw();
}

/**
 * This function is called when the checkbox "search by project" is click on CS
 * search GUI.
 */
function searchByProject(radio) {
	// Unchecking the "project" checkbox: display all case studies integrated
	// study areas
	if (!radio.checked) {
		radio.checked = false;
		popupClear(map);
		casestudyFeature.loaded = false;
		casestudyFeature.setVisibility(true);
		casestudyFeature.styleMap = generalStyles;
		casestudyFeature.refresh({ force: true, params: { format : "geojson"} });

	}
}
