var iFloorNumber;
var curCanvas;
var FloorNames = new Array();
var coordsCashe = new Array();

function floorSwitcher()
{
	var $curLevel = $('#FloorPlates div[id^="Level-"]:eq(' + (iFloorNumber - 1) + ')');
	var iFloorsTotal = $('#FloorPlates div[id^="Level-"]').length;
	var $floorName = $curLevel.find('img').attr('alt');
	var $floorNameStr = $floorName +  " <span>(" + iFloorNumber + " of " + iFloorsTotal + ")</span>";
	var $FloorDivs = $('#FloorPlates div[id^="Level-"]');
	
	if (iFloorNumber !== 1 && $('#Prev').css('display') == 'none')
	{
		$('#Prev').css('display','block');
	}
	
	for(var i=0; i<$FloorDivs.length; i++)
	{
		FloorNames[i] = $('#FloorPlates div[id^="Level-"]:eq(' + i + ')').find('img').attr('alt');
	}
		
	$('#FloorIndicator').html($floorNameStr);
	
	$('#Next').click(function(event)
	{
		if (iFloorsTotal > iFloorNumber)
		{
			$curLevel = $curLevel.hide('slow').next().show('slow');
			
			var $floorNameStr = FloorNames[iFloorNumber] +  " <span>(" + (iFloorNumber + 1)+ " of " + iFloorsTotal + ")</span>";
			
			var LevelName;
			iFloorNumber < 10 ? LevelName = "Level-0" + iFloorNumber + "-Canvas" : LevelName = "Level-" + iFloorNumber + "-Canvas";
			
			curCanvas = document.getElementById(LevelName);
			
			iFloorNumber++;
			
			var canvas = curCanvas;
			var width = parseInt(canvas.width);
			var height = parseInt(canvas.height);
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, width, height);
			
			reMarkSold();
						
			$('#FloorIndicator').html($floorNameStr);
			
			if ($('#Prev').css('display') == 'none')
			{
				$('#Prev').show('slow');
			}
			
			if (iFloorNumber === iFloorsTotal)
			{
				$(this).hide('slow');
			}
		
		}
		event.preventDefault();
	});
	$('#Prev').click(function(event)
	{
		if (iFloorNumber > 1)
		{
			$curLevel = $curLevel.hide('slow').prev().show('slow');
			
			var canvas = curCanvas;
			var width = parseInt(canvas.width);
			var height = parseInt(canvas.height);
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, width, height);
			
			iFloorNumber--;
			
			var LevelName;
			iFloorNumber < 10 ? LevelName = "Level-0" + (iFloorNumber - 1)+ "-Canvas" : LevelName = "Level-" + (iFloorNumber - 1)+ "-Canvas";
			
			curCanvas = document.getElementById(LevelName);

			var canvas = curCanvas;
			var width = parseInt(canvas.width);
			var height = parseInt(canvas.height);
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, width, height);
			
			reMarkSold();
			
			var $floorNameStr = FloorNames[iFloorNumber - 1] +  " <span>(" + iFloorNumber + " of " + iFloorsTotal + ")</span>";			
			$('#FloorIndicator').html($floorNameStr);
			
			if ($('#Next').css('display') == 'none')
			{
				$('#Next').show('slow');
			}
			
			if (iFloorNumber === 1)
			{
				$(this).hide('slow');
			}
		}
		event.preventDefault();
	});
}

function canvasBrowser() {
	// Check UA
	var ua = navigator.userAgent.toLowerCase();
	var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1); 
	var isOpera = ua.indexOf("opera") != -1; 
	var isFF = ua.indexOf("firefox") != -1;
	var isSafari = ua.indexOf("safari") != -1;
	
	var result = false;
	// Allow all IE versions
	if (isIE) result = true;
	// Allow all Safari versions
	if (isSafari) result = true;
	// FF >= 1.5
	else if (isFF) {
		var ffVersion = parseFloat(ua.substring(ua.indexOf("firefox") + 8, ua.length));
		if (ffVersion >= 1.5) result = true;
	// Opera >= 9
	} else if (isOpera) {
		var operaVersion = parseFloat(ua.substring(ua.indexOf("opera") + 6, ua.length));
		if (operaVersion >= 9.0) result = true;
	}
	return result;
}

function drawSoldPlots(curCanvas, arr, state)
{
	var canvas = curCanvas;
	if (canvas.getContext)
	{
		var ctxSold = canvas.getContext('2d');
		// Drawing
		ctxSold.beginPath();
		for (var i = 0; i < arr.length; i++)
		{
			// Put point on start position
			if (i == 0) ctxSold.moveTo(arr[i][0], arr[i][1]);
			// Draw lines from point to point
			else ctxSold.lineTo(arr[i][0], arr[i][1]);
		}
		ctxSold.fillStyle = "rgba(237,104,104,0.8)";
		ctxSold.fill();
	}
}

function drawPoly(curCanvas, arr, state)
{
	var canvas = curCanvas;
	var width = parseInt(canvas.width);
	var height = parseInt(canvas.height);
	if (canvas.getContext)
	{
		var ctxHover = canvas.getContext('2d');
		// Drawing
		ctxHover.beginPath();
		for (var i = 0; i < arr.length; i++)
		{
			// Put point on start position
			if (i == 0) ctxHover.moveTo(arr[i][0], arr[i][1]);
			// Draw lines from point to point
			else ctxHover.lineTo(arr[i][0], arr[i][1]);
		}
		ctxHover.fillStyle = "rgba(0,58,99,0.4)";
		ctxHover.fill();
	}
}

function clearCanvas(id, state)
{
	var canvas = curCanvas;
	var width = parseInt(canvas.width);
	var height = parseInt(canvas.height);
	var ctx = canvas.getContext('2d');
	if(state != "Sold")
	{
		ctx.clearRect(0, 0, width, height);
	}
	
}

function initImageMap()
{
	if (readCookie('floornumber') == null)
	{
		iFloorNumber = 1;
	}
	else
	{
		iFloorNumber = readCookie('floornumber');
		eraseCookie('floornumber');
	}
	
	floorSwitcher();	
	
	for(var i=0; i<$('#FloorPlates div[id^="Level-"]').length; i++)
	{
		if (iFloorNumber - 1 != i)
		{
			var LevelName;
			i < 10 ? LevelName = "Level-0" + i : LevelName = "Level-" + i;
		
			// Create canvas
			if(!document.getElementById(LevelName + "-Canvas"))
			{
				var image = document.getElementById(LevelName).getElementsByTagName('img');
				var width = parseInt(image[0].getAttribute('width'));
				var height = parseInt(image[0].getAttribute('height'));
				image[0].removeAttribute("alt");
				h = document.createElement("canvas");
				h. setAttribute("width", width);
				h. setAttribute("height", height);
				h.id = LevelName + "-Canvas";
				// h.appendChild(document.createTextNode("This is canvas"));
				curCanvas = document.getElementById(LevelName).appendChild(h);
				// fix new canvas in IE (note it must be append to the document first)
				if (typeof G_vmlCanvasManager != 'undefined') {
					// you must reassign the element to the return of this method.
					curCanvas = G_vmlCanvasManager.initElement(curCanvas);
				} 
			}
			
			/* Imagemap areas */
			processAreas(plotData, LevelName, curCanvas);
		}
	}
	
		if (iFloorNumber < 10)
		{
			var LevelName = "Level-0" + (iFloorNumber - 1);
		}
		else
		{
			var LevelName = "Level-" + (iFloorNumber - 1);
		}
	
		// Create canvas
		if(!document.getElementById(LevelName + "-Canvas"))
		{
			var image = document.getElementById(LevelName).getElementsByTagName("img");
			var width = parseInt(image[0].width);
			var height = parseInt(image[0].height);
			image[0].removeAttribute("alt");
			h = document.createElement("canvas");
			h. setAttribute("width", width);
			h. setAttribute("height", height);
			h.id = LevelName + "-Canvas";
			// h.appendChild(document.createTextNode("This is canvas"));
			curCanvas = document.getElementById(LevelName).appendChild(h);
			// fix new canvas in IE (note it must be append to the document first)
			if (typeof G_vmlCanvasManager != 'undefined') {
				// you must reassign the element to the return of this method.
				curCanvas = G_vmlCanvasManager.initElement(curCanvas);
			} 
		}
//		NeedMarkSold = true;
		/* Imagemap areas */
		processAreas(plotData, LevelName, curCanvas);
		reMarkSold();	

	// Create tooltip
	
	if(!objTooltip)
	{
		var objTooltip = $('<div id="Tooltip"/>').appendTo('#FloorPlates');
	}
	
	$('#FloorPlates div[id^="Level-"]').hide();	
	$('#FloorPlates div[id^="Level-"]:eq(' + (iFloorNumber - 1) + ')').show();
}

function mouseMoveHandler()
{
	reLocate;
}

// Parse coords string into 2d array
function parseCoords(str)
{
	var coords = [];
	var buferArray = str.split(",");
	var j = 0;
	for (var i = 0; i < buferArray.length; i++) {
		if (i % 2 == 0) {
			coords[j] = [];
			coords[j][0] = buferArray[i];
		} else {
			coords[j][1] = buferArray[i];
			j++;
		}
	}
	return coords;
}

function findPos(obj)
{
	var curleft = curtop = 0;
	if (obj.offsetParent)
	{
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent)
		{
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function Locate(e, targ)
{
	var posx=0,posy=0;
	if(e==null) e=window.event;
	if(e.pageX || e.pageY)
	{
		posx=e.pageX;
		posy=e.pageY;
	}
	else if(e.clientX || e.clientY)
	{
		if(document.documentElement.scrollTop)
		{
			posx=e.clientX+document.documentElement.scrollLeft;
			posy=e.clientY+document.documentElement.scrollTop;
		}
		else
		{
			posx=e.clientX+document.body.scrollLeft;
			posy=e.clientY+document.body.scrollTop;
		}
	}

	Move(targ, posx, posy);
}

function Move (targ, pox, poy)
{
	if(document.getElementById(targ))
	{
		var coors = findPos(document.getElementById(targ));
		document.getElementById(targ).style.top=(poy+10)+"px";
		document.getElementById(targ).style.left=(pox+20)+"px";
	}
}

function reLocate(e)
{
	var posx=0,posy=0;
	var coors = findPos(document.getElementById("FloorPlates"));
	if(e==null) e=window.event;
	if(e.pageX || e.pageY)
	{
		posx=e.pageX;
		posy=e.pageY;
	}
	else if(e.clientX || e.clientY)
	{
		if(document.documentElement.scrollTop)
		{
			posx=e.clientX+document.documentElement.scrollLeft;
			posy=e.clientY+document.documentElement.scrollTop;
		}
		else
		{
			posx=e.clientX+document.body.scrollLeft;
			posy=e.clientY+document.body.scrollTop;
		}
	}
	document.getElementById("Tooltip").style.top = (posy+15-coors[1]) + "px";
	document.getElementById("Tooltip").style.left = (posx+15-coors[0]) + "px";
}

function getChecked(eid){
    if (document.getElementById(eid))
    	 return document.getElementById(eid)
    else
       return null
}

function reMarkSold()
{
	for(var i in plotData)
	{					
		if(plotData[i].availability == 'Sold' && plotData[i].floorNumber == iFloorNumber - 1)
		{
			coordsCashe[i] = parseCoords(plotData[i].area.coords);
			drawSoldPlots(curCanvas, coordsCashe[i], "S");
		}
	}
}

function processAreas(data, NeedMarkSold)
{
	for (var i in data)
	{
		if(data[i].area)
		{
			if (!canvasBrowser()) return;
			
			/* Tooltips */
//			var classN = 'ttips';
			ttip = createEl('div', 'ttips');
			
			// Create plot number(plot name) message
			var plotNumber = createEl("h5", "plot-number");
			if (i.charAt(0) == 'p')
			{
				if (i == 'p9999')
				{
					plotNumber.appendChild(document.createTextNode("Penthouse"));					
				}
				else
				{
					plotNumber.appendChild(document.createTextNode("Plot " + i.substring(1,i.length)));
				}					
			}
				
			// Create description message
			var plotDescription;
			if (data[i].description)
			{
				plotDescription = createEl("strong", "plot-description");
				plotDescription.appendChild(document.createTextNode(data[i].description));
			}
			else
			{
				plotDescription = null;
			}
			
			// Create availability message
			var plotAvailability;
			if (data[i].availability)
			{
				switch(data[i].availability)
				{
					case("Available"): plotAvailability = createEl("span", "A");
						break;
					case("Sold"): plotAvailability = createEl("span", "S");
						break;
					case("Unreleased"): plotAvailability = createEl("span", "U");
						break;
					case("Reserved"): plotAvailability = createEl("span", "R");
						break;					
				}
				plotAvailability.appendChild(document.createTextNode(data[i].availability));
			}
			else
			{
				plotAvailability = null;
			}
			
			// Create price message
			var plotPrice;
			if (data[i].price)
			{
				plotPrice = createEl("span", "plot-price");
				plotPrice.appendChild(document.createTextNode(data[i].price));
			}
			else
			{
				plotPrice = null;
			}			
			
			// Create custom message
			var plotMessage;
			if (data[i].customMessage)
			{
				plotMessage = createEl("span", "custom-message");
				plotMessage.appendChild(document.createTextNode(data[i].customMessage));
			}
			else
			{
				plotMessage = null;
			}
			
			// Build tooltip messages
			t = [plotNumber, plotDescription, plotAvailability, plotPrice, plotMessage];
				for (var y in t)
				{
					if (t[y])
					{
						ttip.appendChild(t[y]);
					}
				}

			data[i].area.ttip = ttip;
			data[i].area.removeAttribute("title");
			data[i].area.removeAttribute("alt");

			/*Links*/
			if(plotData[i].availability == 'Sold' || plotData[i].availability == '')
			{
				plotData[i].area.removeAttribute("href");
				plotData[i].area.style.cursor = 'default';
			}				
			
			data[i].area.onmouseover = function()
			{
				coordsCashe[i] = parseCoords(this.coords);
				if(data[this.id].availability != 'Sold')
				{
					drawPoly(curCanvas, coordsCashe[i], data[this.id].availability);
				}
				document.getElementById("Tooltip").appendChild(this.ttip);
			};
			
			data[i].area.onclick = function()
			{
				createCookie('floornumber', iFloorNumber, 1);				
			};
			
			data[i].area.onmouseout = function()
			{
				coordsCashe[i] = parseCoords(this.coords);
				if(data[this.id].availability != 'Sold')
				{
					clearCanvas(curCanvas, data[this.id].availability);
					reMarkSold();					
				}
				
				var tooltip = document.getElementById("Tooltip");
				if(tooltip.childNodes.length > 0) 
				{
					tooltip.removeChild(tooltip.firstChild);
				}
				tooltip.style.left = "-999em";
			};
			
			data[i].area.onmousemove = reLocate;
		}
	}
}

function createEl(t,c)
{
	var x=document.createElement(t);
	x.className=c;
	return(x);
}

/*Cookie stuff*/
function createCookie(name,value,days) 
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/properties";
}

function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name)
{
	createCookie(name,"",-1);
}

function setCookie(pid)
{
	eraseCookie('floornumber');
	createCookie('floornumber', pid);
}