/*
Script for handling imagemap hovers and clicks.
*/
$(function() {
	/**
	 * For the overview, highlight an area on mouseover.
	 */
	$("#map_bezirke area").mouseover(
		function() {
		  var style = '';
		  if ($('#stadtbezirke').hasClass('gruen')) {
		    style = 'gruen/';
		  }
			$("#stadtbezirke").attr("src", newSDE.path+"img/stadtbezirkskarten/" + style + $(this).attr("class") + ".jpg");
		});
	/**
	 * For the overview, remove highlight from an area on mouseout.
	 */
	$("#map_bezirke area").mouseout(
		function() {
		  var style = '';
		  if ($("#stadtbezirke").hasClass('gruen')) {
        style = 'gruen/';
      }
			// Only if we're in the overview, else we'd overwrite the detail view.
			if ($("#stadtbezirke").attr("usemap") == "#map_bezirke") {
				$("#stadtbezirke").attr("src", newSDE.path+'img/stadtbezirkskarten/' + style + '_stadtbezirke.jpg');
			}
		});
	/**
	 * For the overview, switch to detail view on click.
	 */
	$("#map_bezirke area").click(
		function() {
		  // If imagemap has class="nostadtteil" set, do not show detail maps,
		  // jump to actually linked page.
			if($("#stadtbezirke").hasClass('nostadtteil')) return true;
			//$("#stadtbezirke").attr("src", "img/" + $(this).attr("id") + "_detail.jpg");
			//$("#stadtbezirke").attr("usemap", "#map_detail");
			// The above method is nicer, but apparently internet explorer and opera
			// do not update the imagemap when the usemap attribute is changed.
			$("map_detail").attr("alt", $(this).attr("title"));
			$("#map_detail area.stadtteil_homepage").attr("alt", $(this).attr("alt"));
			$("#map_detail area.stadtteil_homepage").attr("href", $(this).attr("href"));
			$("#stadtbezirke").replaceWith('<img id="stadtbezirke" src="'+newSDE.path+'img/stadtbezirkskarten/'
				   + $(this).attr("class") + '_detail.jpg" width="' + $("#stadtbezirke").attr("width")
				   + '" height="' + $("#stadtbezirke").attr("height") + '" border="0" alt="'
				   + $("#stadtbezirke").attr("alt") + '" usemap="#map_detail"/>');
			// Return false to avoid navigating to the actually linked page.
			return false;
		});
	/**
	 * For the detailview, switch back to overview on click.
	 */
	$("#map_detail area.back_to_overview").click(
		function() {
			//$("#stadtbezirke").attr("src", "img/_stadtbezirke.jpg");
			//$("#stadtbezirke").attr("usemap", "#map_bezirke");
			// The above method is nicer, but apparently internet explorer and opera
			// do not update the imagemap when the usemap attribute is changed.
			$("#stadtbezirke").replaceWith('<img id="stadtbezirke" src="'+newSDE.path+'img/stadtbezirkskarten/_stadtbezirke.jpg" width="'
				   + $("#stadtbezirke").attr("width") + '" height="' + $("#stadtbezirke").attr("height")
				   + '" border="0" alt="' + $("#stadtbezirke").attr("alt") + '" usemap="#map_bezirke"/>');
		});
});