/*
    Procedure
    
    Først skal siden initialiseres. Baggrundskortet skal indlæses, mens init kører.
    Når baggrund er indlæst, så kan selve visning af profiler startes.
    
    Profiler skal indlæses i et array. Når dette er gjort, tjekkes at array indholder mindst 1 profil.
    Hvis det ikke gør dette, skal der indlæses profiler til array igen.
    Når der er mindst én profil i array, så sættes visning igang.

    Først skal kortet positioneres korrekt. Dette gøres over 4 trin, 50%, 30%, 15%, 5% (afstand * .50/.80/.95/1.0)

    Herefter skal profil-data opdateres og profil-boks positioneres og sættes display: block;
    Husk at positionere ift. højde/bredde på profil-boks og 10 px margin hele vejen rundt.
    
    Efter X antal sekunder, tages næste i array.
    
    Når array er tom, køres rutine til at hente nye profiler. Herefter køres rutine for visning af profiler igen.
*/

wmProfiles = '';
wmCurrentProfile = '';

wmMapProfileDataPictures = new Array;

wmProfileWidth		= 248;
wmProfileHeight		= 108;
wmProfileOffsetX	= 2;
wmProfileOffsetY	= 29;

wmViewPortMarginTop		= 30;
wmViewPortMarginRight	= 25;
wmViewPortMarginBottom	= 25;
wmViewPortMarginLeft	= 100;

wmViewPortBoundaryTop		= wmViewPortMarginTop;
wmViewPortBoundaryBottom	= wmViewPortHeight - wmViewPortMarginBottom - wmProfileHeight;
wmViewPortBoundaryLeft		= wmViewPortMarginLeft;
wmViewPortBoundaryRight		= wmViewPortWidth - wmViewPortMarginRight - wmProfileWidth;

wmMapStepCount			= 30;
wmMapMoveTime			= 1000;

wmProfileDataTemplate	= "<table width='100%' cellspacing='0' cellpadding='0'><tr><td width='69'><a href='{ProfileUrl}'><img src='{ProfileImageUrl}' width='63' height='88' border='0' /></a></td><td width='100%' style='text-align: center; vertical-align: middle;'><div style='overflow: hidden'><a href='{ProfileUrl}'><strong>{ProfileName}</strong><br/>{ProfileZipCity}</a></div></td></tr></table>";

function wmInit() {

	objMap = document.getElementById("wmMap");
	objMap.style.left		= (-1 * ((wmMapWidth - wmViewPortWidth) / 2)) + "px";
	objMap.style.top		= (-1 * ((wmMapHeight - wmViewPortHeight) / 2)) + "px";
	objMap.style.display	= "block";

	// Init slut, start profil procedure
	wmStart();
	
}

function wmRequestProfiles() {
	serverRequest = new ServerRequest("GET", wmHandleProfiles);
	serverRequest.send("/Global/WorldMap/Profiles.aspx", "");
}

function wmHandleProfiles(data) {
	wmProfiles = data;
	wmStart();
}

function wmShowProfile(index) {
	
	if (index < wmProfiles.length) {
	
		wmCurrentProfile = index;

		// Find profilens position
		wmProfileX = wmProfiles[wmCurrentProfile].PixelX;
		wmProfileY = wmProfiles[wmCurrentProfile].PixelY;
		
		// Find tilfældig offset i ViewPort
		wmViewportOffsetX = Math.floor(Math.random() * (wmViewPortBoundaryRight - wmViewPortBoundaryLeft)) + wmViewPortBoundaryLeft;
		wmViewportOffsetY = Math.floor(Math.random() * (wmViewPortBoundaryBottom - wmViewPortBoundaryTop)) + wmViewPortBoundaryTop;
		
		// Beregn kortposition
		wmMapX	= (wmProfileX - wmViewportOffsetX);
		wmMapY	= (wmProfileY - wmViewportOffsetY);
		
		// Beregn profilbox position
		wmProfileBoxX = (wmProfileX - wmProfileOffsetX);
		wmProfileBoxY = (wmProfileY - wmProfileOffsetY);
		
		if (wmMapX > (wmMapWidth - wmViewPortWidth)) wmMapX = (wmMapWidth - wmViewPortWidth);
		if (wmMapY > (wmMapHeight - wmViewPortHeight)) wmMapY = (wmMapHeight - wmViewPortHeight);
		
		if (wmMapY < 0) wmMapY = 0;
		if (wmMapX < 0) wmMapX = 0;

		wmMoveMap(wmProfileBoxX, wmProfileBoxY, wmMapX, wmMapY);

		setTimeout("wmShowProfile(wmCurrentProfile+1)", 5000)
		
	} else {
		
		// Restart
		wmProfiles = "";
		wmStart();

	}
}

function wmMoveMap(wmProfileBoxX, wmProfileBoxY, wmMapX, wmMapY) {

	objMap = document.getElementById("wmMap");

	currentX = parseInt(objMap.style.left) * -1;
	currentY = parseInt(objMap.style.top) * -1;
	
	wmMoveMap_Partial(currentX, currentY, wmMapX, wmMapY, 1);

}

function wmMoveMap_Partial(currentX, currentY, destinationX, destinationY, step) {

	if (step <= wmMapStepCount) {

		x = currentX + ((destinationX - currentX) * (step / wmMapStepCount));
		y = currentY + ((destinationY - currentY) * (step / wmMapStepCount));

		objMap = document.getElementById("wmMap");
		objMap.style.left		= (-1 * x) + "px";
		objMap.style.top		= (-1 * y) + "px";
		
		if (step == wmMapStepCount) wmUpdateProfileData();
				
		setTimeout("wmMoveMap_Partial(" + currentX + ", " + currentY + ", " + destinationX + ", " + destinationY + ", " + (step+1) + ")", Math.floor(wmMapMoveTime / wmMapStepCount));
		
	}

}

function wmUpdateProfileData() {

	var wmProfileData = "";

	wmProfileData = wmProfileDataTemplate;
	
	if (wmProfiles[wmCurrentProfile] && wmProfiles[wmCurrentProfile].Name)
	{
		wmProfileData = wmProfileData.replace(/\{ProfileName\}/gi, wmProfiles[wmCurrentProfile].Name);
		wmProfileData = wmProfileData.replace(/\{ProfileZipCity\}/gi, wmProfiles[wmCurrentProfile].ZipCode.Code + " " + wmProfiles[wmCurrentProfile].ZipCode.Text);
		wmProfileData = wmProfileData.replace(/\{ProfileImageUrl\}/gi, wmProfiles[wmCurrentProfile].PersonOnePictureUrl);
		wmProfileData = wmProfileData.replace(/\{ProfileUrl\}/gi, wmProfiles[wmCurrentProfile].ProfileUrl);

		var objProfileData;
		objProfileData = document.getElementById("wmProfileData")
		objProfileData.innerHTML = wmProfileData

		// Flyt profildata box
		objProfile = document.getElementById("wmProfile");
		objProfile.style.left		= wmProfileBoxX + "px";
		objProfile.style.top		= wmProfileBoxY + "px";
		objProfile.style.display	= "block";
	}
}

function wmCachePictures() {
	
	for (var i = 0; i < wmProfiles.length; i++) {
		eval("wmMapProfileDataPictures[" + i + "] = new Image();");
		eval("wmMapProfileDataPictures[" + i + "].src = wmProfiles[" + i + "].PersonOnePictureUrl;");
	}
	
}

function wmStart() {
	if (wmProfiles.length == 0) {
		wmRequestProfiles();
	} else {
		wmCachePictures();
		wmShowProfile(0);
	}
}

window.onload = wmInit;