var MarkerArray;
var productAppID;
var url = '/components/locator.cfc';
var data;
var map;
var geocoder;
var place;
var radius;
var recordCount;
var address;
var JSON;
var searching = false;
var originLat = 0;
var originLon = 0;
if (lowesOnly ==  undefined) {
	var lowesOnly = 'false';
}

function storeMarker(marker,html) {
	this.marker = marker;
	this.html = html;
}

function getStoreLocations() {
	radius = document.getElementById('Radius').value;
	recordCount = document.getElementById('RecordCount').value;
	SKUID = document.getElementById('SKUID').value;
	data = 'method=getNearestStores&_cf_nodebug=true&_cf_nocache=true&latitude=' + originLat
			+'&longitude=' + originLon
			+ '&radius=' + radius
			+ '&sku=' + SKUID
			+ '&recordCount=' + recordCount
			+ '&lowesOnly=' + lowesOnly
			+ '&address=' + address;
	document.getElementById('URL').value = url + '?' + data;
	responseText = $.ajax({
					type: "POST",
					url: url,
					data: data,
					datatype: "json",
					async: false
				 }).responseText;
	JSON = eval('(' + responseText + ')');
	if (JSON.DATA) {
		processData(responseText);
	}
}

function processData(responseText) {
	
	MarkerArray = new Array();
	var storeCount = document.getElementById('storeCount');
	var storeList = document.getElementById('storeList');
	var mapContainer = document.getElementById('mapContainer');
	
	var point;
	var marker;

	var output = '';
	var storeListItems = '';
	var storeLocation = '';
	var storeInfo = '';
	var tableHeaders = '';
	
	storeList.innerHTML = '';
	
	mapContainer.style.display = 'block';
	output = '<div><span style="font-weight:bold; font-size:1.3em;">' + JSON.DATA.length;
	if (lowesOnly == 'true') {
		output += ' LOWE\'S';
	}
	if (JSON.DATA.length == 1) {
		output += ' STORE FOUND';
	} else {
		output += ' STORES FOUND';
	}
	output += '</div>';
	output += '<div><span style="font-size:.9em; font-style:italic;"> within ' + radius + ' miles of <strong>' + address + '</strong></div>';
	storeCount.style.paddingBottom = '10px';
	storeCount.style.marginTop = '20px';
	storeCount.style.borderBottom = '1px dotted black';
	storeCount.innerHTML = output;
	storeList.style.overflow = 'auto';
	
	if (JSON.DATA.length > 0) {	
		if (JSON.DATA.length > 3) {	
			storeList.style.overflow = 'scroll';
		}
		
		/* JSON RETURN REFERENCE
			view sample json output at this address: /components/locator.cfc?method=getNearestStores&_cf_nodebug=true&_cf_nocache=true&latitude=33.22928&longitude=-117.023678&radius=25&productAppID=420&recordCount=5&lowesOnly=false
			JSON.DATA[i][0] = STOREID
			JSON.DATA[i][1] = NAME
			JSON.DATA[i][2] = ADDRESS1
			JSON.DATA[i][3] = ADDRESS2
			JSON.DATA[i][4] = CITY
			JSON.DATA[i][5] = STATE
			JSON.DATA[i][6] = ZIPCODE
			JSON.DATA[i][7] = PHONE
			JSON.DATA[i][8] = LATITUDE
			JSON.DATA[i][9] = LONGITUDE
			JSON.DATA[i][10] = DISTANCE (distance from origin in miles)
			JSON.DATA[i][11] = ORIGINLAT
			JSON.DATA[i][12] = ORIGINLON
			****** These are only returned with a square search ******
			JSON.DATA[i][13] = NORTH
			JSON.DATA[i][14] = SOUTH
			JSON.DATA[i][15] = EAST
			JSON.DATA[i][16] = WEST
			
		*/

		var N = JSON.DATA[0][13];
		var S = JSON.DATA[0][14];
		var E = JSON.DATA[0][15];
		var W = JSON.DATA[0][16];
		
		var NE = new GLatLng(N, E);
		var SW = new GLatLng(S, W);
		var bounds = new GLatLngBounds(SW, NE);
		var zoom = map.getBoundsZoomLevel(bounds);
		map.setZoom(zoom);
		
		for (var i=0; i < JSON.DATA.length; i++) {
		
			var storeid = JSON.DATA[i][0];
			var name = JSON.DATA[i][1];
			var address1 = JSON.DATA[i][2];
			var address2 = JSON.DATA[i][3];
			var city = JSON.DATA[i][4];
			var state = JSON.DATA[i][5];
			var zip = JSON.DATA[i][6];
			var phone = JSON.DATA[i][7];
			var lat = JSON.DATA[i][8];
			var lon = JSON.DATA[i][9];
			var dist = JSON.DATA[i][10];
			var displayName;
			var letter = String.fromCharCode("A".charCodeAt(0) + i);
			var markerImageURL = "http://www.google.com/mapfiles/marker" + letter + ".png";
			if (address2 == null) address2 = '';
			switch (name) {
				case 'Lowes':
					displayName = '<img src="/images/storeLocator/lowes.gif" alt="Lowe\'s" Title="Lowe\'s" /><br />';
					break;
				case 'Home Depot':
					displayName = '<img src="/images/storeLocator/homedepot.gif" alt="Home Depot" Title="Home Depot" /><br />';
					break;
				case 'Wal-Mart':
					displayName = '<img src="/images/storeLocator/walmart.gif" alt="Wal-Mart" Title="Wal-Mart" /><br />';
					break;
				default:
					displayName = '<strong>' + name + '</strong><br />';
			}
			storeInfo = displayName + address1 + address2 + '<br />'
						+ city + ', ' + state + ' ' + zip;
			point = new GLatLng(lat,lon);
			marker = createMarker(point,markerImageURL,storeInfo);
			// Create marker access for the store listing
			var mLen = MarkerArray.length;
			MarkerArray[mLen] = new storeMarker(marker,storeInfo);
			var mAttributes = ' onclick="MarkerArray[' + mLen + '].marker.openInfoWindowHtml(MarkerArray[' + mLen + '].html);"';
			mAttributes += ' style="cursor:pointer;cursor:hand;"';
			map.addOverlay(marker);
			
			storeLocation = '<td valign="top"'+mAttributes+'><img src="' + markerImageURL + '" alt="' + name + '" /></td>';
			storeLocation += '<td valign="top"'+mAttributes+'>';
			if (lowesOnly == 'false') {
				storeLocation += displayName;
			}
			storeLocation += address1;
			if (address2 != null && address2 != '') {
				storeLocation += ' ' + address2;
			}
			storeLocation += '<br />';
			storeLocation += city + ', ' + state + ' ' + zip;
			
			if (phone != null && phone != '') {
				storeLocation += '<br />' + phone;
			}
			
			storeLocation += '<br /><b>' + (Math.round(dist*10)/10) + ' miles</b><br />';
			if (i < JSON.DATA.length-1) {
				storeLocation += '<hr />';
			}
			storeLocation += '</td>';
			storeListItems += '<tr id="location'+i+'" style="vertical-align:middle;">' + storeLocation + '</tr>';
		}
		
		tableHeaders = '<tr>';
		tableHeaders += '<th>&nbsp;</th>';
		if (lowesOnly == 'false') {
			tableHeaders += '<th>Store Name</th>';
		}
		tableHeaders += '<th>Address</th>';
		tableHeaders += '<th>Phone #</th>';
		tableHeaders += '<th>Distance</th>';
		tableHeaders += '</tr>';
		
		storeList.innerHTML += '<table class="storeListingTable" cellspacing="0">'
							//+ tableHeaders
							+ storeListItems
							+ '</table>';
	} else {
		storeList.innerHTML = 'No stores found';
	}
	showLoaderImg(false);
	balanceColumns();//this function is in the global.js file
}

function createMarker(point,markerImageURL,html) {

	var baseIcon = new GIcon(G_DEFAULT_ICON);
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	
	var letteredIcon = new GIcon(baseIcon);
	letteredIcon.image = markerImageURL;
	markerOptions = { icon:letteredIcon };
	
	var marker = new GMarker(point, markerOptions);
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
	});
	
	return marker;
}

function initializeGoogleMap() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		map.setCenter(new GLatLng(34, 0), 1);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
	}
}

function addAddressToMap(response) {
	if (!response || response.Status.code != 200) {
		searching = false;
		showLoaderImg(false);
		alert("Sorry, we were unable to locate that address");
	} else {
		if (map == null) {
			initializeGoogleMap();
		}
		place = response.Placemark[0];
		map.clearOverlays();
		point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
		marker = new GMarker(point);
		map.setCenter(point,10);
		originLat = place.Point.coordinates[1];
		originLon = place.Point.coordinates[0];
		getStoreLocations();
	}
}	

function showLocation() {
	showLoaderImg(true);
	$('#map').show();
	address = document.getElementById('Address').value;
	geocoder = new GClientGeocoder();
	geocoder.getLocations(address, addAddressToMap);
}

function showLoaderImg(bool) {
	searchButton = document.getElementById('searchButton');
	loaderImg = document.getElementById('loaderImg');
	//loaderImg.focus();
	if (bool) {
		loaderImg.style.display = 'inline';
		searchButton.style.display = 'none';
	} else {
		loaderImg.style.display = 'none';
		searchButton.style.display = 'inline';
	}
}

function showMap(bool) {
	if (bool) {
		$('#map_canvas').slideDown('slow');
	} else {
		$('#map_canvas').slideUp('slow');
	}
}

function setFieldProps(field,hasFocus) {
	var defaultVal = 'Type Your Address or Zip Code';
	if (hasFocus)  {
		field.style.color = 'black';
		if (field.value == defaultVal) {
			field.value = '';
		}
	} else {
		field.style.color = 'gray';
		if (field.value == '') {
			field.value = defaultVal;
		}
	}
}