var mapElementId = "map";
var initialPoint = new GLatLng(50.93027144685553, -0.2724158763885498);
var initialZoom = 17;


function showHide(elementid)
{
	if ($(elementid).style.display=='none')
	{
		$(elementid).style.display='block';
	}
	else
	{
		$(elementid).style.display='none';
	}
}

function getElementValue(xmlElement, elName)
{
	if (xmlElement.getElementsByTagName(elName)[0].childNodes[0])
	{
		return xmlElement.getElementsByTagName(elName)[0].childNodes[0].nodeValue;
	}
	else
	{
		return null;
	}
}

function getAttributeValue(xmlElement, attribName)
{

	if (xmlElement.getAttribute(attribName))
	{
		return xmlElement.getAttribute(attribName);
	}
	else
	{
		return null;
	}

}

function shop(shopxmlelement, idx)
{

	/* pick apart the xml and store the values in variables */
	/* need to gracefully handle the cases where elements are missing */
	
	// INITIALISE VARIABLES
	var bname = getElementValue(shopxmlelement, "business_name");
	var bimgurl = getElementValue(shopxmlelement, "img_url");
	var bopeningtimes = getElementValue(shopxmlelement, "business_hours");
	var blat = getAttributeValue(shopxmlelement, "lat");
	var blng = getAttributeValue(shopxmlelement, "lng");
	var bdesc = getElementValue(shopxmlelement, "description");

	

	// CREATE THE HTML TO DISPLAY IN THE MARKER BUBBLE

	var bubbleHtml = "";
	
	if (bimgurl)
	{
		bubbleHtml += "<img src='" + bimgurl + "' width='180' height='120' />";
	}
	bubbleHtml += "<p style=\"width:250px;\"><strong>" + bname + "</strong><br/>";
	bubbleHtml += bdesc + "<br/><br/>";
	bubbleHtml += "<strong>Opening times:</strong><br/>";
	bubbleHtml += bopeningtimes + "<br/>";
	bubbleHtml += "<a href='shoppage.aspx?shopid=" + idx + "'>Click here for more information</a></p>";

	/* set this shop objects properties */
	
	this.name=bname;
	this.lat=blat;
	this.lng=blng;
	this.htmlToDisplay = bubbleHtml;
	this.index = idx;
	this.markerindex=-1;
	
	this.printIt=function()
	{
		alert("name=" + this.name +'\n' + "lat=" + this.lat +'\n' + "lng=" + this.lng +'\n' + "htmlToDisplay=" + this.htmlToDisplay);
	}
}


var placesArray = new Array();


function loadShopsFromFile(fileurl)
{

      // 1 - shops
      
      if(window.XMLHttpRequest)
	  {
	   request = new XMLHttpRequest();
	  }
	  else if(window.ActiveXObject)
	  {
	   request = new ActiveXObject("MSXML2.XMLHTTP");
	  }

      request.open("GET", fileurl, true);

      request.onreadystatechange = function()
      {
	if (request.readyState == 4)
	{
		var xmlDoc = request.responseXML;
		
		var shops = xmlDoc.documentElement.getElementsByTagName("business"); // where type is 1
		var noOfShops = shops.length;
		var j=0;
		for (var i = 0; i < shops.length; i++)
		{
			//if (hasType(shops[i], 1))
			//{
				//alert(parseInt(shops[i].getElementsByTagName("type")[0].childNodes[0].nodeValue));
				if (shops[i].getAttribute("lat") && shops[i].getAttribute("lng"))
				{
					var blat = shops[i].getAttribute("lat");
					var blng = shops[i].getAttribute("lng");
					var bid = shops[i].getAttribute("id");
					if (blat!="#" && blng!="#")
					{
						placesArray[j] = new shop(shops[i], bid);
						j++;
					}
				}
			//}
		}

		makeMap();
		//printPlacesArray();

	}
      }

      request.send(null);
      
}


function printPlacesArray()
{
	for (var i=0; i<placesArray.length; i++)
	{
		placesArray[i].printIt();
	}
}



function showShop(shopId)
{
	var midx = -1;
	for (var i=0; i<placesArray.length; i++)
	{
		if (placesArray[i].index==shopId)
		{
			midx = placesArray[i].markerindex;
		}
	}
	
	if (midx>-1)
	{
		autoNavigateById(midx, 16);
	}
}

function start()
{
	loadShopsFromFile("../xml/shops.xml");
	
}