var map;
    var geocoder;
 	var icon;
	//var iconmini;
 	var slTotalPages;
	var totalNav;
	var theHeight;
 	
    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 4);
      }
    }

   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         //alert(address + ' not found');
       } else {
         searchLocationsNear(latlng);
       }
     });
     return false;
   }

	function searchLocationsNear(center) {
		
		//getting km or miles
		var radiusType = document.getElementById('radiusType').value
		if(radiusType == "km"){var radius = document.getElementById('radiusSelect').value/1.609344;}
		else{var radius = document.getElementById('radiusSelect').value;}
		
		
		var searchUrl = 'http://www.yogenfruz.com/storelocator/phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
		GDownloadUrl(searchUrl, function(data) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName('marker');
			map.clearOverlays();
	
			var sidebar = document.getElementById('slContainer');
			var theTotal = document.getElementById('theTotal');
	
			sidebar.innerHTML = '';
			theTotal.innerHTML = '';
	
			if (markers.length == 0) {
				theTotal.innerHTML = '<h2>' + markers.length + ' yogen fr<span class="logoPink">&uuml;</span>z found';
				map.setCenter(new GLatLng(40, -100), 4);
				return;
			}
			else{
				theTotal.innerHTML = '<h2>' + markers.length + ' yogen fr<span class="logoPink">&uuml;</span>z found';
			}
			var bounds = new GLatLngBounds();
			var icon = new GIcon();
			icon.image = "http://www.yogenfruz.com/storelocator/images/u_locator_marker.png";
			icon.iconSize = new GSize(73, 45);
			icon.iconAnchor = new GPoint(30, 36);
			icon.infoWindowAnchor = new GPoint(29, 20);
			
			//var iconmini = new GIcon();
			//iconmini.image = "http://www.yogenfruz.com/storelocator/images/u_locator_marker-bak.png";
			//iconmini.iconSize = new GSize(15, 30);
			//iconmini.iconAnchor = new GPoint(30, 36);
			//iconmini.infoWindowAnchor = new GPoint(29, 20);
			
			$(".storePager").html('<a href="#" class="slPrev">Prev</a> <a href="#" class="slNext">Next</a>');
			bindEvents();
			
			for (var i = 0; i < markers.length; i++) {
				var name = markers[i].getAttribute('name');
				var address = markers[i].getAttribute('address');
				
				//determin if its miles or km
				if(radiusType == "km"){var distance = parseFloat(markers[i].getAttribute('distance'))*1.609344;}
				else{var distance = parseFloat(markers[i].getAttribute('distance'));}
				var hours = markers[i].getAttribute('hours');
				var phone = markers[i].getAttribute('phone');
				var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
				parseFloat(markers[i].getAttribute('lng')));
				var storeID = markers[i].getAttribute('storeid');
				//var mini = markers[i].getAttribute("mini");
				//alert(mini);
				if (name.match("Mini") == "Mini") { var mini = "Yes"; }
				else { var mini = "No"; }
				
				//if (mini == "Yes") { 
					//var marker = createMarker(point, name, address, iconmini);
				//}
				//else {
					var marker = createMarker(point, name, address, icon, mini);
				//}
				//var marker = createMarker(point, name, address, icon);
				map.addOverlay(marker);
				var sidebarEntry = createSidebarEntry(marker, name, address, distance, hours, phone, center, markers[i].getAttribute('lat'), markers[i].getAttribute('lng'), storeID);
				sidebar.appendChild(sidebarEntry);
				bounds.extend(point);
			}
			map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
			$('#slContainer').css("top","5px");
			//theHeight = $("#sidebar").height();
			//$("#sidebar").css("height",theHeight);
			slTotalPages = parseInt(markers.length/3);
			if(markers.length%3 != 0){slTotalPages = ++slTotalPages;}
			
			$("#slPages").html('Page 1 of '+ slTotalPages);
		});
	}

function prevItem(){
	if(totalNav == 0){$('#slContainer').animate({top:"5px"},300);}
	else{
		$('#slContainer').animate({top:"+=438px"},300); 
		--totalNav;
		slCurrentPages = Number(totalNav)+1;
		$("#slPages").html('Page ' + slCurrentPages + ' of '+ slTotalPages);
	}
	
	//console.log(totalNav);
	
	return false;
}

function nextItem() {
	if(totalNav < (slTotalPages-1)){
		$('#slContainer').animate({top:"-=438px"},300); 
		++totalNav;
		slCurrentPages = Number(totalNav)+1;
		$("#slPages").html('Page ' + slCurrentPages + ' of '+ slTotalPages);
	}
	else{}
	
	//console.log(totalNav);
	
	return false;
}
function bindEvents() {
	$('.slNavp').bind('click', prevItem);
	$('.slNavn').bind('click', nextItem);
	totalNav = 0;
}

function createMarker(point, name, address, icon, mini) {

	if (mini == "Yes") {
		var iconmini = new GIcon(icon);
	  	iconmini.image = "http://www.yogenfruz.com/storelocator/images/u_locator_marker_mini.png";
		iconmini.iconSize = new GSize(50, 45);
		iconmini.iconAnchor = new GPoint(30, 36);
		iconmini.infoWindowAnchor = new GPoint(19, 20);
		var marker = new GMarker(point, iconmini);
		//markerOptions = { icon:iconmini };
	}
	else {
		var marker = new GMarker(point, icon);
		//markerOptions = { icon };
	}
	//var marker = new GMarker(point, markerOptions);
	
	//var marker = new GMarker(point, icon);
	var html = '<b>' + name + '</b> <br/>' + address;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

function createSidebarEntry(marker, name, address, distance, hours, phone, center, mlat, mlng, id) {
	//driving Directions.
	var directionURL = 'http://maps.google.com/maps?saddr='+ center.lat() +','+ center.lng() +'('+ document.getElementById('addressInput').value +')&daddr='+mlat+','+mlng+'('+address+')';
	var fullDetails = 'http://www.yogenfruz.com/storelocator/allstores.php?store='+id;
	//var directionURL = 'http://maps.google.com/maps?q='+v.store.latitude+','+v.store.longitude+'('+encodeURI(v.store.address1+' '+v.store.city+', '+v.store.stateCode+' '+v.store.postalCode)+')';

	var div = document.createElement('div');
	//add the class name;
	div.className = "storeResult";
	var brokenname=name.split(" ");
	var newName;
	newName = ( brokenname[0] ? brokenname[0] : "" );
	newName = newName + ( brokenname[1] && brokenname[1] != "@"? " "+brokenname[1] : "" );
	newName = newName + ( brokenname[2] && brokenname[2] != "@"? " "+brokenname[2] : "" );
	//newName = newName + ( brokenname[3] && brokenname[3] != "@"? " "+brokenname[3] : "" );
	
	//$length =25;
	//$check = substr(name,$length,1);
	//if($check != " "){
		//while ( $check != " "){
			//$length = $length + 1 ;
			//$check = substr(name,$length,1);
		//}
	//}
	//newName = newName + substr(name, 0, $length);
	//newName = substr(name, 0, $length);

	var html = '<h3 style=/"font-size:10px;/">' + newName + '</h3> <p><strong>' + distance.toFixed(1) + document.getElementById('radiusType').value + '</strong></p><p>' + address + '</p><p>' + phone + '</p><p><a href="'+ directionURL +'" target="_blank">Get Driving Directions</a><br /><a href="'+ fullDetails +'" target="_blank">Full Store Details</a></p>';
	div.innerHTML = html;
	div.style.cursor = 'pointer';
	div.style.marginBottom = '5px';
	GEvent.addDomListener(div, 'click', function() {
		GEvent.trigger(marker, 'click');
	});
	GEvent.addDomListener(div, 'mouseover', function() {
		div.style.backgroundColor = '#eee';
	});
	GEvent.addDomListener(div, 'mouseout', function() {
		div.style.backgroundColor = '#fff';
	});
	return div;
}