/// <reference path="jquery-1.4.1-vsdoc.js"/>
// State when the map is click
var stateCodeClicked = "";

// Max for the first column on the cities box
var boxCitiesRowsMax = 8;

// current state code
var stateCode = "";
// path for the images
var urlImages = "http://info.gumtree.com.au/landing/img/";
// preloading map images array
var mapImages = ["SATS1033_Landing_cities.png", "SATS1033_Landing_wbox_06.png", "SATS1033_Landing_australia.png", "SATS1033_Landing_act_3_03.png", "SATS1033_Landing_nsw_3_03.png",
		"SATS1033_Landing_nt_3_03.png", "SATS1033_Landing_qld_3_03.png", "SATS1033_Landing_sa_3_03.png", "SATS1033_Landing_tas_3_03.png",
		"SATS1033_Landing_vic_3_03.png", "SATS1033_Landing_wa_3_03.png", "SATS1033_Landing_australia.png", "SATS1033_Landing_act_03.png", "SATS1033_Landing_nsw_03.png",
		"SATS1033_Landing_nt_03.png", "SATS1033_Landing_qld_03.png", "SATS1033_Landing_sa_03.png", "SATS1033_Landing_tas_03.png",
		"SATS1033_Landing_vic_03.png", "SATS1033_Landing_wa_03.png"];

// Main event. Begin
$(document).ready(function () {
	init();
	//set the event for the map
	handleAreaEvents();
});

function init() {
	
	$("div#landing_map").css("display", "block");

	//hide the green box
	$("#landing_map_greenBox").hide();
	//Preload all the images for the oz map
	preLoadImages(mapImages, urlImages);

	//Load css images
	$("img#imageMap").css("background-image", "url('" + urlImages + "SATS1033_Landing_australia.png')");
	$("div#landing_map_whiteBox").css("background-image", "url('" + urlImages + "SATS1033_Landing_wbox_06.png')");
	$("ul#landing_map_whiteBox_list li").css("background-image", "url('" + urlImages + "SATS1033_Landing_bullet_06.png')")
	$("div#landing_map_greenBox").css("background-image", "url('" + urlImages + "SATS1033_Landing_cities.png')");

	//Load the first image with the whole OZ map states ( not highlighted )
	$("#imageMap").attr("src", urlImages + "SATS1033_Landing_australia.png");
}

//function to set the event handling for the map area
function handleAreaEvents() {

	//mouse over the map
	$("area").mouseover(function (e) {
		showImageState($(this).attr("id"));
		e.stopPropagation();
	});

	// reset australian map when the mouse is over other areas
	$("#main").mouseover(function (e) {
		if (stateCodeClicked != "") showImageState(stateCodeClicked);
		else {
			setAUMap();
			$("#imageMap").css("background-image", "url(' " + urlImages + "SATS1033_Landing_australia.png')");
		}
	}
	);

	// On Click for the image area would show the state highlighted plus the cities on the right div box
	$("area").click(function () {
		if (stateCodeClicked != stateCode) {
			showStateMap(stateCode);
			showImageState(stateCode);
			showCitiesBox();
			stateCodeClicked = stateCode
		}
		else {
			stateCodeClicked = "";
			setAUMap();
			$("#imageMap").css("background-image", "url(' " + urlImages + "SATS1033_Landing_australia.png')");
			$("#landing_map_greenBox").hide();
			$("#landing_map_whiteBox").show();
		}
	});
}

//Show city box and switch the state map
function showImageState(strState) {
	stateCode = strState.replace("area_state_", "")
	$("#imageMap").attr("src", urlImages + "SATS1033_Landing_" + stateCode + "_3_03.png");
}

//Show map after all images were loaded
function showMap() {
	$("#landing_map_boxes").show();
	$("#imageMap").css("visibility", "visible");
}

// show the oz map with the state highlated. used on map click
function showStateMap(strState) {
	stateCode = strState.replace("state_", "")
	var newBackground = urlImages + "SATS1033_Landing_" + stateCode + "_03.png"
	$("#imageMap").css("background-image", "url('" + newBackground + "')");
}

// set the standard OZ map (without states highlighted)
function setAUMap() {
	$("#imageMap").attr("src", urlImages + "SATS1033_Landing_australia.png");
}

//show the box div with the cities
function showCitiesBox() {
	var count = 0;
	var strLi1 = "";
	var strLi2 = "";

	$("#landing_map_whiteBox").hide();
	$("#landing_map_greenBox").hide();
	$("#landing_map_greenBox").html("");
	$("#landing_map_greenBox").append("<span>" + stateCode.toUpperCase() + "</span>");
	boxCitiesRowsMax = $("ul#state_" + stateCode + " li").size() / 2;

	$("ul#state_" + stateCode + " li").each(function (i) {
		if (i < boxCitiesRowsMax) strLi1 += "<li>" + $(this).html() + "</li>";
		else strLi2 += "<li>" + $(this).html(); +"</li>";
	});

	$("#landing_map_greenBox").append("<ul>" + strLi1 + "</ul>");
	if (strLi2 != "") $("#landing_map_greenBox").append("<ul>" + strLi2 + "</ul>");
	$("#landing_map_greenBox").show();
}

//Preload images function show the map when all of them were load
function preLoadImages(images, path) {
	var gotime = images.length;
	$.each(images, function (e) {
		$(new Image()).load(function () {
			if (--gotime < 1) showMap();
		}).attr('src', path + this);
	});
}