////////////////////////////////////////////////////////
/// Google Maps Clone - (c) 2007 Richard Sadler		////
////////////////////////////////////////////////////////

window.onDomReady(initQuilt);

var drag = false;
var dragStartXPos = 0;
var dragStartYPos = 0;

var coordHeight = 1;
var coordWidth = 1;
var imgHeight = 200;
var imgWidth = 200;


///<summary>
/// function to initialise the quilt
///</summary>
function initQuilt()
{
	var startx2 = -200;
	var starty2 = -200;
	
	if ( queryStr("x") ) { var startx = queryStr("x") - 2; }
	else { var startx = 0 - 2; }
	if ( queryStr("y") ) { var starty = queryStr("y") - 2; }
	else { var starty = 0 - 2; }
	
	for(var r = 1; r < 5; r++)
	{
		for (var c = 1; c < 5; c++)
		{
			var x = startx2 + (r*imgHeight);
			var y = starty2 + (c*imgWidth);

			var cx = startx + (r*coordHeight);
			var cy = starty + (c*coordWidth);
			
			addImg(x, y, cx, cy);
		}
	}
	
	if ( queryStr("t") && queryStr("l") )
	{
		addMarker( queryStr("l"), queryStr("t"), 0, 0 );
	}

	$('quilt_dragLayer').onmousemove = QuiltMouseMove.bindWithEvent($('quilt_dragLayer'));
	$('quilt_dragLayer').onmousedown = QuiltMouseDown.bindWithEvent($('quilt_dragLayer'));
	$('quilt_dragLayer').onmouseup = QuiltMouseUp.bindWithEvent($('quilt_dragLayer'));
	$('quilt_dragLayer').onmouseover = QuiltMouseOver.bindWithEvent($('quilt_dragLayer'));
	$('quilt_dragLayer').onmouseout = QuiltMouseOut.bindWithEvent($('quilt_dragLayer'));

	
}



///<summary>
/// function to create a image block
///</summary>
function addImg(x, y, cx, cy)
{
	var img = new Element('img');
	$('quilt').appendChild(img);
	img.setStyles
	(
		{ 
			'top': y+'px', 
			'left': x+'px' 
		}
	);
	
	img.addClass('imageBox');
	img.setStyles
	(
		{ 
			'width':imgWidth+'px', 
			'height':imgHeight+'px'
		}
	);
	
	if ( (cx > 4 || cx < -5) || (cy > 5 || cy < -5) )
	{
		img.setProperties
		(
			{'src':'images/maps/out.gif', 'x':x, 'y':y, 'cx':cx, 'cy':cy}
		);
	}
	else
	{
		img.setProperties
		(
			{'src':'images/map.aspx?x=' + cx + '&y=' + cy, 'x':x, 'y':y, 'cx':cx, 'cy':cy}
		);
	}
}

function addMarker(x, y, cx, cy)
{
	var img = new Element('img');
	$('quilt').appendChild(img);
	img.setStyles
	(
		{ 
			'top': (y*1+200)+'px', 
			'left': (x*1+200)+'px' 
		}
	);
	
	img.addClass('imagePin');
	img.setStyles
	(
		{ 
			'width':'50px', 
			'height':'50px'
		}
	);
	
	img.setProperties
	(
		{'src':'images/icon-pin.gif', 'x':(x*1+200), 'y':(y*1+200), 'cx':cx, 'cy':cy}
	);
}


///<summary>
/// function to check if the element el is visible inside the quilt
///</summary>
function IsVisible(el)
{
	var c = el.getCoordinates();	
	var q = $('quilt').getCoordinates();
	
    var t = Math.max(c.top, q.top - 200);
    var r = Math.min(c.right, q.right + 0);
    var b = Math.min(c.bottom, q.bottom + 200);
    var l = Math.max(c.left, q.left - 0);
    
    if (b >= t && r >= l) 
	{
        return true;
    } 
	else
	{
        return false;
    }
}

function addMissingBlocks(blockStartX, blockStartY, blockEndX, blockEndY, coordStartX, coordStartY, coordEndX, coordEndY)
{
	var q = $('quilt').getCoordinates();
	
	///<summary>
	/// check to see if the top has space around it
	///</summary>
	if (blockStartY > (q.top - 400))
	{
		var numRows = blockStartY / imgHeight;		
		var numCols = (q.width / imgWidth) + 1;
		
		var xStart = blockStartX;
		var cxStart = coordStartX;
		
		while (xStart > 0) 
		{ 
			xStart -= imgWidth; 
			cxStart -= coordWidth;
		}
				
		var yStart = blockStartY;
		var cyStart = coordStartY;
				
		while (yStart > 0) 
		{ 
			yStart -= imgHeight;
			cyStart -= coordHeight; 
		}
				
		for (var r = 0; r < numRows; r++)
		{		
			var cX = xStart;
			var ccX = cxStart;
			for (var c = 0; c < numCols; c++)
			{
				addImg(cX, yStart, ccX, cyStart);
				cX += imgWidth;
				ccX += coordWidth;
			}
			yStart += imgHeight;
			cyStart += coordHeight;
		}		
	}
	
	///<summary>
	/// check to see if the left has space around it
	///</summary>	
	if (blockStartX > (q.left - 200))
	{
		var numRows = (blockEndY - blockStartY) / imgHeight;
		var numCols = blockStartX / imgWidth;
		
		var xStart = blockStartX;
		var cxStart = coordStartX;		
		while (xStart > 0) 
		{ 
			xStart -= imgWidth;
			cxStart -= coordWidth; 
		}
		
		var yStart = blockStartY;
		var cyStart = coordStartY;
		
		for (var r = 0; r < numRows; r++)
		{
			var cX = xStart;
			var ccX = cxStart;	
			for (var c = 0; c < numCols; c++)
			{
				addImg(cX, yStart, ccX, cyStart);
				cX += imgWidth;	
				ccX += coordWidth;			
			}
			yStart += imgHeight;
			cyStart += coordHeight;
		}
	}
	
	///<summary>
	/// check to see if the bottom has space around it
	///</summary>
	if (blockEndY < (q.bottom + 400))
	{
		var numRows = ((q.bottom + 400) - blockEndY) / imgHeight;
		var numCols = (q.width / imgWidth) + 1;
		
		var xStart = blockStartX;
		var cxStart = coordStartX;		
		while (xStart > 0) 
		{ 
			xStart -= imgWidth; 
			cxStart -= coordWidth;
		}
				
		var yStart = blockEndY;
		var cyStart = coordEndY;

		for (var r = 0; r < numRows; r++)
		{

			var cX = xStart;
			var ccX = cxStart;

			for (var c = 0; c < numCols; c++)
			{
				addImg(cX, yStart, ccX, cyStart);
				cX += imgWidth;	
				ccX += coordWidth;
			}
			yStart += imgHeight;
			cyStart += coordHeight;
		}
	}
	
	///<summary>
	/// check to see if the right has space around it
	///</summary>
	if (blockEndX < (q.right + 200))
	{
		var numRows = (blockEndY - blockStartY) / imgHeight;
		var numCols = ((q.right + 200) - blockEndX) / imgWidth;
		
		var xStart = blockEndX;
		var cxStart = coordEndX;
		var yStart = blockStartY;
		var cyStart = coordStartY;
		
		for (var r = 0; r < numRows; r++)
		{
			var cX = xStart;
			var ccX = cxStart;	
			for (var c = 0; c < numCols; c++)
			{
				addImg(cX, yStart, ccX, cyStart);
				cX += imgWidth;
				ccX += coordWidth;				
			}
			yStart += imgHeight;
			cyStart += coordHeight;
		}
	}
}

///<summary>
/// Event raised when the quilt is dragged
///</summary>
function QuiltMouseMove(event)
{
	if (drag)
	{
		var blockStartX = 99999;
		var blockStartY = 99999;
		var blockEndX = -99999;
		var blockEndY = -99999;
		
		var coordStartX = 99999;
		var coordStartY = 99999;
		var coordEndX = -99999;
		var coordEndY = -99999;
		
		var numBlockEndX = 0;
		var numBlockEndY = 0;
		
		$$('img.imageBox').each(function(p){
			
			///<summary>
			/// block to move all elements in the quilt to the new mouse position
			///</summary>		
			var y = event.client.y - dragStartYPos;
			var x = event.client.x - dragStartXPos;
			
			y += parseInt(p.getProperty('y'));
			x += parseInt(p.getProperty('x'));
			
			p.setStyles({
				'top': y+'px',
				'left': x+'px'
			});
			
			p.setProperties({
				'x':x,
				'y':y
			});
			
			///<summary>
			/// finally check if the block is visable in its new location
			/// if not remove, if it is check it and build the region which the block ocupies
			///</summary>		
			if (!IsVisible(p))
			{
				$('quilt').removeChild(p);				
			}
			else
			{
				///<summary>
				/// recompute the region
				///</summary>
				if (x < blockStartX)
				{
					blockStartX = x;
				}
				if (y < blockStartY)
				{
					blockStartY = y;
				}
				
				if ((x + imgWidth) > blockEndX)
				{
					blockEndX = (x + imgWidth);
					numBlockEndX = 1;
				}
				else if ((x + imgWidth) == blockEndX)
				{
					numBlockEndX += 1;
				}
				
				if ((y + imgHeight) > blockEndY)
				{
					blockEndY = (y + imgHeight);
					numBlockEndY = 1;
				}
				else if ((y + imgHeight) == blockEndY)
				{
					numBlockEndY += 1;
				}
				
				var cy = parseInt(p.getProperty('cy'));				
				var cx = parseInt(p.getProperty('cx'));
				
				///<summary>
				/// recompute the region
				///</summary>
				if (cx < coordStartX)
				{
					coordStartX = cx;
				}
				if (cy < coordStartY)
				{
					coordStartY = cy;
				}
				
				if ((cx + coordWidth) > coordEndX)
				{
					coordEndX = (cx + coordWidth);
				}
				
				if ((cy + coordHeight) > coordEndY)
				{
					coordEndY = (cy + coordHeight);
				}
			}
		});	


		//imagePin is for Pin Marker only
		$$('img.imagePin').each(function(p){
			
			///<summary>
			/// block to move all elements in thwe quilt to the new mouse position
			///</summary>		
			var y = event.client.y - dragStartYPos;
			var x = event.client.x - dragStartXPos;
			
			y += parseInt(p.getProperty('y'));
			x += parseInt(p.getProperty('x'));
			
			p.setStyles({
				'top': y+'px',
				'left': x+'px'
			});
			
			p.setProperties({
				'x':x,
				'y':y
			});
		});	
		
		if (numBlockEndX < 2)
		{
			blockEndX -= imgWidth;
			coordEndX -= coordWidth;
		}
		
		if (numBlockEndY < 2)
		{
			blockEndY -= imgHeight;
			coordEndY -= coordHeight;
		}
				
		///<summary>
		/// add in img's to fill the empty space made by the drag
		///</summary>
		addMissingBlocks(blockStartX, blockStartY, blockEndX, blockEndY, coordStartX, coordStartY, coordEndX, coordEndY);
		
		dragStartXPos = event.client.x;
		dragStartYPos = event.client.y;
	}
};

function clearCursor()
{
	document.body.style.cursor = 'auto;';
}

function setCursor(grabbing)
{
	if (window.ie)
	{
		if (grabbing)
		{
			$('quilt_dragLayer').setStyle('cursor', 'url("images/grabbing.cur"), default');
		}
		else
		{
			$('quilt_dragLayer').setStyle('cursor', 'url("images/grab.cur"), default');
		}
	}
	else
	{
	 	if (grabbing)
		{
			$('quilt_dragLayer').setStyle('cursor', 'url("images/grabbing.gif"), default');
		}
		else
		{
			$('quilt_dragLayer').setStyle('cursor', 'url("images/grab.gif"), default');
		}
	}
}

function QuiltMouseDown(event)
{	
	drag = true;
	dragStartXPos = event.client.x;
	dragStartYPos = event.client.y;
	
	setCursor(true);
};

function QuiltMouseUp(event)
{	
	drag = false;
	
	setCursor(false);
};

function QuiltMouseOver(event)
{
	setCursor(false);
};

function QuiltMouseOut(event)
{
	clearCursor();
};

function queryStr(string) 
{
	fullstring = window.location.search.substring(1);

	substring = fullstring.split("&");
	for (i=0;i<substring.length;i++) 
	{
		mystring = substring[i].split("=");
		if (mystring[0] == string) 
		{
			return mystring[1];
		}
	}
}