//<![CDATA[
    var map;
    var geocoder;

    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), 3);
      }
    }

   function searchLocations(offset, search_input) {
     var address;
	 // check for default
 	 if (search_input != null){
	   address = search_input;
	 }
	 else { 
	 	address = document.getElementById('addressInput').value;
	 }

     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
         searchLocationsNear(address, latlng, offset);
		 generatePagination();
		 highlight(offset);
       }
     });
	 

	// Log query
	$.ajax({
		type: "POST",
		url: "/salon/index",
		dataType: "text",
		data: "search=" + address,
		success: function(response) {
			// response
		}
	});
	 
	 // prevent submit form
     return false;
   }



   function searchLocationsNear(address, center, offset) {
     var radius = document.getElementById('radiusSelect').value;
	 var products = checkboxsToArray(document.salon_search.products);
     var searchUrl = '/salon/results/search/'+ address + '/lat/' + center.lat() + '/lng/' + center.lng() + '/radius/' + radius + '/offset/' + offset + products;

     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var salons = xml.documentElement.getElementsByTagName('salon');
       map.clearOverlays();

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (salons.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(40, -100), 4);
         return;
       }

       var bounds = new GLatLngBounds();
	   var counter = 0;
       for (var i = 0; i < salons.length; i++) {
	     var image;
		 var icons = new Array('a','b','c','d','e')
         var name = salons[i].getAttribute('name')
         var address = salons[i].getAttribute('address');
		 var address2 = salons[i].getAttribute('city') + ', ' +
		 				salons[i].getAttribute('state') + ' ' +
						salons[i].getAttribute('zip')
		 var phone = salons[i].getAttribute('phone')
		 var website = salons[i].getAttribute('website')
		 if (website != 0) {
			website =  '<a href="http://' + website + '" target="_blank">' + website + '</a><br />';
		 } else {
			website = ''; 
		 }
		 var products = '<ul class="products_available">'
		 if (salons[i].getAttribute('iron') == 1) {
		 	products += '<li><img src="/images/salon/icons/vaporiron.gif" /></li>';
		 }
		 if (salons[i].getAttribute('kpak') == 1) {
		 	products += '<li><img src="/images/salon/icons/kpak.gif" /></li>';
		 }
		 if (salons[i].getAttribute('daily') == 1) {
		 	products += '<li><img src="/images/salon/icons/daily.gif" /></li>';
		 }
		 if (salons[i].getAttribute('moisture') == 1) {
		 	products += '<li><img src="/images/salon/icons/moisture.gif" /></li>';
		 }
		 if (salons[i].getAttribute('color') == 1) {
		 	products += '<li><img src="/images/salon/icons/color.gif" /></li>';
		 }
		 if (salons[i].getAttribute('body') == 1) {
		 	products += '<li><img src="/images/salon/icons/body.gif" /></li>';
		 }
		 if (salons[i].getAttribute('silk') == 1) {
		 	products += '<li><img src="/images/salon/icons/silk.gif" /></li>';
		 }
		 if (salons[i].getAttribute('style') == 1) {
		 	products += '<li><img src="/images/salon/icons/style.gif" /></li>';
		 }
		 if (salons[i].getAttribute('renu') == 1) {
		 	products += '<li><img src="/images/salon/icons/renu.gif" /></li>';
		 }
		 if (salons[i].getAttribute('design') == 1) {
		 	products += '<li><img src="/images/salon/icons/design.gif" /></li>';
		 }
		 if (salons[i].getAttribute('clinicure') == 1) {
		 	products += '<li><img src="/images/salon/icons/clinicure.gif" /></li>';
		 }
		 if (salons[i].getAttribute('therapy') == 1) {
		 	products += '<li><img src="/images/salon/icons/therapy.gif" /></li>';
		 }
		 if (salons[i].getAttribute('ice') == 1) {
		 	products += '<li><img src="/images/salon/icons/ice.gif" /></li>';
		 }
		 products += '</ul>';
         var pref = salons[i].getAttribute('pref')
         var distance = parseFloat(salons[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(salons[i].getAttribute('lat')),
                                 parseFloat(salons[i].getAttribute('lng')));

		 
		 var new_icon = new GIcon()
		 if (pref == 1) {
		 	image = "salon_icon.png"
		 } else {
		 	image = "salon_icon_"+icons[counter]+".png"
			counter++
		 }
         new_icon.image = "/images/" + image
		 new_icon.size = new GSize(45,38)
		 new_icon.iconAnchor = new GPoint(8,9)
		 new_icon.infoWindowAnchor = new GPoint(7,7)
		 
		 var opt
		 opt = {}
		 opt.icon = new_icon
		 opt.draggable = false
		 opt.clickable = true
		 opt.dragCrossMove = true
         
         var salon = createMarker(point, name, address, address2, opt);
         map.addOverlay(salon);
         var sidebarEntry = createSidebarEntry(salon, name, address, address2, distance, image, phone, website, products);        
		 sidebar.appendChild(sidebarEntry);
		 sidebar.style.height = '350px';
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }

    function createMarker(point, name, address, address2, opt) {
      var salon = new GMarker(point, opt);
      var html = '<b>' + name + '</b> <br/>' + address + '<br/>' + address2;
      GEvent.addListener(salon, 'click', function() {
        salon.openInfoWindowHtml(html);
      });
      return salon;
    }

    function createSidebarEntry(salon, name, address, address2, distance, icon, phone, website, products) {
      var div = document.createElement('div');
	  var directions = '<a href="http://maps.google.com/maps?f=d&hl=en&daddr=' + address + address2 + '&z=12&om=1" target="_blank">Get Directions</a>';
	  var html = '<div class="salon_col_1">';
      html += '<img src="/images/ns_' + icon + '" align="left" />';
	  html += '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address + '<br/>' + address2;
	  html += '</div>';
	  html += '<div class="salon_col_2">' + phone + '<br />' + website + directions + '</div>';
	  html += '<div class="salon_col_3">' + products + '</div>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
	  div.style.padding = '10px';
	  div.style.height = '50px';
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(salon, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }


	function generatePagination()
	{
		var searchText = document.getElementById('addressInput').value;
		var pagination = document.getElementById('pagination');
		var div = document.createElement('div');
		var html = '<ul><li><strong>Pages: </strong></li>'; 
		html += '<li><a id="page1" href="javascript:void(0);" onclick="searchLocations(0)">1</a></li>';
		html += '<li><a id="page2" href="javascript:void(0);" onclick="searchLocations(5)">2</a></li>';
		html += '<li><a id="page3" href="javascript:void(0);" onclick="searchLocations(10)">3</a></li>';
		html += '<li><a id="page4" href="javascript:void(0);" onclick="searchLocations(15)">4</a></li>';
		html += '<li><a id="page5" href="javascript:void(0);" onclick="searchLocations(20)">5</a></li>';
		html += '</ul>';
		div.innerHTML = html;
		
		pagination.innerHTML = div.innerHTML;
	}

	function highlight(current)
	{
		var pages = new Array('0', '5', '10', '15', '20');
		for (i = 0; i < pages.length; i++) {
			if (current == pages[i]) {
				var page = document.getElementById('page' + (i+1));
				page.style.color = "#000000";
				page.style.textDecoration = "none";
				page.style.fontWeight = "bold";
			}
		}
		
	}

	function checkboxsToArray(products)
	{
		var product = '';
		for (i = 0; i < products.length; i++) {
			if ( products[i].checked )
				product += '/' + products[i].value + '/1';
		}
		return product;
	}



    //]]>