﻿


submitted = false;
autocompleter = null;

var refresh = true;
var lastswlat = 0;
var lastswlong = 0;
var lastnelat = 0;
var lastnelong = 0;

var selected_marker = null;


global_markers = new Array; // global
global_locations = new Array; // global
    var events = "";


function search_stores_initial() {

	if (GBrowserIsCompatible()) {
		Element.show('gmap');
		map = new GMap2(document.getElementById("map"));
		
		geocoder = new GClientGeocoder();
				
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());	
		//map.addControl(new GMapTypeControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 15)));

		        
  	    var get = '' + window.location.search;
	    var query = get.substring((get.indexOf('?'))+1);

	

	    if(query != '') {
            initialSearch(query); 
        } 
        else {
            map.setCenter(new GLatLng(38.41055825094609, -95.80078125));
		    map.setZoom(3);            
		    getPoints(map);
        }
        



        //Set event listeners for zooming, moving, and clicking
        GEvent.addListener(map, "moveend", function(){
          getPoints(map);

		//document.getElementById("message").innerHTML = "Current Marker: " + map.getCenter()

        });
        GEvent.addListener(map, "zoomend", function(){
          
   
          
          
          if (selected_marker != null)
          {
          	    var my_window = $('overlay');

              // Get the positioning right
	            var vert_loc = parseInt(map_point.y) - my_window.offsetHeight - 44;
	            my_window.style.top = vert_loc  + "px";
	            var horiz_loc = parseInt(map_point.x) - 55;
	            my_window.style.left = horiz_loc + "px";
            	
            	
	            var pan_to = new GLatLng( selected_marker.getPoint().lat(), selected_marker.getPoint().lng() )
            	
            	
	            var gPoint = map.fromLatLngToDivPixel(pan_to);
	            gPoint.x = gPoint.x + 55;
	            gPoint.y = gPoint.y - 85;
	            var new_point = map.fromDivPixelToLatLng(gPoint);

	            map.panTo( new_point );
	            
	            show_custom_info_window(selected_marker); //reposition window

	        }
	        else
	        {
	            close_window();
	        }
          
          
          
          refresh = true;
          getPoints(map);
          
          //updateSearchResultsOnUpdate();
          
          //if the marker went away (grouping, etc...) then close popup
          if (selected_marker != null)
          {
              if (global_markers[selected_marker.internal_id] == undefined)
              {
                close_window();
              }
          }
          
        });
 



        GEvent.addListener(map, "click", function(marker, point){
          if (!marker) {
            map.closeInfoWindow();
            //close_window();
          }
        });     
    }    
}

function updateSearchResultsOnUpdate()
{
    //if map is zoomed/dragged, we may need to remove some search results as they fall off the map.
//    var locations = $('results_list').getElementsByTagName('li');
//	for(i=0;i<locations.length;i++){
//		var location = locations[i];
//		if (global_markers[location.internal_id] == undefined)
//		{
//			$('results_list').removeChild(location);
//		}
//	}

}

function initialSearch(query)
{
	var pairs = query.split('&');
	var keys = new Array();
	for(var i in pairs){
		if(isNaN(i) == false){
			var pair = pairs[i];
			var vals = pair.split('=');
			keys[vals[0]] = vals[1];
		}
	}
	var search = document.forms["search_form"];
	
	if(keys['q'] != '' && keys['q'] != null){
		search.q.value = keys['q'].replace(/\%20/g,' ');
		search.q.value = search.q.value.replace(/\%2C/g,',');
		search.q.value = search.q.value.replace(/\+/g,' ');
	    get_search_results();
	}	
}

function getPoints(map) {

  var center = map.getCenter();
  var bounds = map.getBounds();
  var mapsw = bounds.getSouthWest();
  var mapne = bounds.getNorthEast();
  var mapswlat = mapsw.lat();
  var mapswlong = mapsw.lng();
  var mapnelat = mapne.lat();
  var mapnelong = mapne.lng();
  
  var dataswlat = mapswlat - ((mapnelat-mapswlat)*2)/2;
  var dataswlong = mapswlong - ((mapnelong-mapswlong)*2)/2;
  var datanelat = mapnelat + ((mapnelat-mapswlat)*2)/2;
  var datanelong = mapnelong + ((mapnelong-mapswlong)*2)/2;


  if (refresh || mapswlat < lastswlat || mapswlong < lastswlong || mapnelat > lastnelat || mapnelong > lastnelong) {
    
        lastswlat = dataswlat;
        lastswlong = dataswlong;
        lastnelat = datanelat;
        lastnelong = datanelong;
    
    map.clearOverlays();
    global_markers.length = 0;
    
    var zoom = map.getZoom();   
    var url = "xml_cluster.aspx?zoom="+ zoom +"&swlat="+ mapswlat +"&swlng="+ mapswlong +"&nelat="+ mapnelat +"&nelng=" + mapnelong;

      

          //document.getElementById("message").innerHTML = "URL: " + url;      

    
    
    GDownloadUrl(url, function(data, responseCode) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("Location");
      
      //document.getElementById("message").innerHTML = "Locations: " + markers.length;      
   

      for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(parseFloat(markers[i].getAttribute("geo_lat")), parseFloat(markers[i].getAttribute("geo_lng")));
          map.addOverlay(addStore(point,markers[i]));           
      }
      //document.getElementById("events").innerHTML = "Marker Array Length: " + global_markers.length;


          updateSearchResultsOnUpdate();



    });
    refresh = false;
  } 
}		

function addStore(point, marker_xml){

    var type = marker_xml.getAttribute("type");
    var store_type = marker_xml.getAttribute("store_type");
      
 
	//document.getElementById("events").innerHTML += "Location: " + marker_xml.getAttribute("location_id");
    
    var icon = new GIcon();
    if (type == "cluster") {
        icon.image = "/stores/images/magnify.png";
        icon.iconSize = new GSize(30, 30);
        icon.iconAnchor = new GPoint(15, 15);
        icon.infoWindowAnchor = new GPoint(11, 1);
    }
    else {

	   	if ((marker_xml.getAttribute("isLoans") == "true") && (marker_xml.getAttribute("isWheels") == "true")){
			icon.image = "/stores/images/icon_store_both.png";			
		}else if (marker_xml.getAttribute("isLoans") == "true"){
			icon.image = "/stores/images/icon_store_loan.png";					
		}else if (marker_xml.getAttribute("isWheels") == "true"){
			icon.image = "/stores/images/icon_store_wheels.png";				
		}
		else
		{
			icon.image = "/stores/images/icon_store.png";
		}
        
        icon.iconSize = new GSize(25, 25);
        icon.iconAnchor = new GPoint(12, 25);
        icon.infoWindowAnchor = new GPoint(0, 0);       
    }
    
    var marker = new GMarker(point, icon);  
  
    var id = marker_xml.getAttribute("location_id");

    // Give the marker all of it's information
    marker.tabContent = new Object();
    
        
    marker.tabContent.location = marker_xml.getAttribute("address_1") + "<br >" + marker_xml.getAttribute("city") + ", " +  marker_xml.getAttribute("state") + " " + marker_xml.getAttribute("zip") + "<br >" + marker_xml.getAttribute("phone") + "<br/>";




if ((marker_xml.getAttribute("isLoans") == "true") || (marker_xml.getAttribute("isWheels") == "true")){

	marker.tabContent.location += "<br><strong>Services Offered: </strong><BR>";

	if (marker_xml.getAttribute("isLoans") == "true")
		marker.tabContent.location += "Pay Day Loans<BR>";
	if (marker_xml.getAttribute("isWheels") == "true")
		marker.tabContent.location += "Custom Wheels and Tires<BR>";
		

		
}

    marker.tabContent.location += "<BR><center><a href=\"/shop/?Id="+ marker_xml.getAttribute("location_id") +"\"><img src=\"/stores/images/select.png\"/></a></center><BR>";

	//marker.tabContent.location = marker.tabContent.


    
//	var get = '' + window.location.search;
//	var query = get.substring((get.indexOf('?'))+1);
//    if (query != '') {
//        marker.tabContent.location = marker.tabContent.location + "~ " + marker_xml.getAttribute("search_distance") + " miles: ";
//    }
    
    marker.tabContent.store_hours = "";
    marker.tabContent.store_hours = marker.tabContent.store_hours + "<p id='directions_subtab'>Start address:<br ><input id='to_addr' type='text' style='width:95%'><br ><button type='submit' class='directions' onclick=\"submit_gmap_form($('to_addr').value,'" + marker_xml.getAttribute("address_1") + " , " + marker_xml.getAttribute("city") + ", " +  marker_xml.getAttribute("state") + " " + marker_xml.getAttribute("zip") + "');\">Get Directions</button></p>";

   	


    marker.internal_id = marker_xml.getAttribute("location_id");
    marker.id = marker_xml.getAttribute("location_id");
	
    // Add the event listeners	
       if (type == "cluster") {
            GEvent.addListener(marker, "click", function() {
              close_window(); 
              selected_marker = null;          
              map.setCenter(marker.getPoint());
              map.zoomIn();
            });
   
      } else {
            GEvent.addListener(marker, "click", function() {
            	
            	//Start by clearing highlighted items on the left list
	            clear_location_highlights();

              show_custom_info_window(marker);
              

              
            });
            GEvent.addListener(marker, "click_action", function() {
                show_custom_info_window(marker);
                //document.getElementById("message").innerHTML = "Current Marker: " + selected_marker.tabContent.location;      

            });
      }

        // Return marker for gmaps
        global_markers[marker.internal_id] = marker;
   
	return marker
}


function addSearchResult(marker_xml){
	
	//---------------------------------------------------------
	// BEGIN - add the store to the locations sidebar
	//---------------------------------------------------------
	
	var location = document.createElement("li");
	location.internal_id =  marker_xml.getAttribute("location_id");
	location.id = "location_" + location.internal_id;
	
	var class_names = ""; // Need to create these...
	if ($('results_list').getElementsByTagName('li').length == 0){ // This is the first location
		class_names += " first";
	}
	location.style.className = class_names;
	

//	// The title
//	var title = document.createElement("h4");
//	title.appendChild(document.createTextNode(title));
//	title.firstChild.nodeValue = marker_xml.getAttribute("Name");
//	location.appendChild(title);
	
	// The address
	var address = document.createElement("p");
	address.innerHTML = "<span style=\"font-weight:bold;\">" + marker_xml.getAttribute("address_1") + "</span><br >" + marker_xml.getAttribute("city") + ", " +  marker_xml.getAttribute("state") + " " + marker_xml.getAttribute("zip");
	
   
    
    //Add the distance
	address.innerHTML = address.innerHTML  + "<br/><span class=\"miles\">~" + marker_xml.getAttribute("search_distance") + " miles</span>";

	location.appendChild(address);
	
	global_locations[location.internal_id] = location;
	// Attach the whole thing
	$('results_list').appendChild(location);
	
	//highlight_locations(); // Re-highlight locations
	
	//---------------------------------------------------------
	// END - add the store to the locations sidebar
	//---------------------------------------------------------

}

first_load = true;
//map = false; // global




function search_stores(xml_location, start) {

	if (GBrowserIsCompatible()) {
	// Initialize the map
		Element.show('gmap');
		
				
		//Power the store locations through XML
		GDownloadUrl(xml_location, function(data, responseCode) {
	        
			
	
			var xml = GXml.parse(data);
		
			
			if(xml.getElementsByTagName("Location").length > 0)
			{			
				document.getElementById("results_heading").innerHTML = "";
				
				
				$('results_list').className = "locations";
				// Set the center of the map
				var default_location = xml.documentElement.getElementsByTagName("default_location")[0];
				
				
				//map.setCenter(new GLatLng(default_location.getAttribute("geo_lat"), default_location.getAttribute("geo_lng")));
	
				// Put city and state in search results
				var citystate = default_location.getAttribute("city");
				//document.getElementById("results_heading").innerHTML = "Locations near " + citystate;
				
				// Set the markers
				var markers = xml.documentElement.getElementsByTagName("Location");
				var bounds = new GLatLngBounds;
				
				// Figure out start and end
				// start from function call
				if (markers.length <= 5 || (start + 5) >= markers.length){ end = markers.length; }else{ end = start + 5; }
				var marknum = 0;
				
				
				for (var i = start; i < end; i++) {
					var point = new GLatLng(parseFloat(markers[i].getAttribute("geo_lat")), parseFloat(markers[i].getAttribute("geo_lng")));

				    addSearchResult(markers[i]);

					//Add the point & extend the neccecary bounds
					bounds.extend(point);
				}		
	
				// Put in the paging links
				$('page_nav').innerHTML = "";
				if (start > 0){
					paging_prev = document.createElement("a");
					paging_prev.appendChild(document.createTextNode("Previous"));
					paging_prev.className = "prevlink";
					paging_prev.href = "#";
					paging_prev.onclick = function(){ prev_page(); return false; }
					$('page_nav').appendChild(paging_prev)
				}
				if (start > 0 && ((page_num + 1) < markers.length/6)){
					separator = document.createTextNode(' | ');
					$('page_nav').appendChild(separator);
				}
				if ((page_num + 1) < markers.length/6){
					paging_next = document.createElement("a");
					paging_next.appendChild(document.createTextNode("Next"));
					paging_next.className = "nextlink";
					paging_next.href = "#";
					paging_next.onclick = function(){ next_page(); return false; }
					$('page_nav').appendChild(paging_next)
				}
														
				// Set the zoom level & center to encompass all		
				var center_point = new GLatLng( (bounds.getSouthWest().lat() + bounds.getNorthEast().lat())/2, (bounds.getSouthWest().lng() + bounds.getNorthEast().lng())/2);
				map.setCenter(center_point, map.getBoundsZoomLevel(bounds));
				
				Effect.Fade('activity',{duration: 0.25, queue: 'front'});	
	
			
									
			}				
			else //if(xml.getElementsByTagName("noresult_xml").length > 0)
			{
				search_stores_initial();
				document.getElementById("results_heading").innerHTML = "<span class=\"noresults\">No stores were found near the zip code or city you've entered.<br/><br/>Please try again.</span>";
				$('page_nav').innerHTML = "";
				//var noresult = document.createElement("ul");
				//noresult.id = "none";
				//$('results_list').appendChild(noresult)	
			}
			
			//detect if IE7
			var agent 	= navigator.userAgent.toLowerCase();
			var isIE7		= (agent.indexOf('msie 7') != -1);
			
			
			if (is_ie || isIE7){				
				Effect.BlindDown('results', {afterFinish: function(){$('results').style.height = "1%";}}); // IE weirdness
			}else{
				Effect.BlindDown('results');
				Effect.Fade('activity',{duration: 0.25, queue: 'end'});
			}
	
		    highlight_locations(); // Re-highlight locations

			submitted = false;
			
		}); // end GDownloadUrl
		
	} else { // Browser is not compatable
	}
}








Event.observe (window,'load',search_stores_initial,false);
Event.observe (window,'load',highlight_locations,false);
Event.observe (window,'load',set_search_form,false);	
Event.observe (window,'load',set_advsearch_slider,false);	
Event.observe (window,'unload',GUnload,false); // Prevent memory leaks
		
/**** Other Functions ****/

selected_location = false;
function highlight_locations(){
	var locations = $('results_list').getElementsByTagName('li');
	for(i=0;i<locations.length;i++){
		var location = locations[i];
		//deactivate_marker(locations[i]); //default
		// Hover
		location.onmouseover = function(){ Element.addClassName(this, 'hover') }
		location.onmouseout = function(){ Element.removeClassName(this, 'hover') }
		// Active
		location.onclick = function(){ 
			activate_marker(this);
		}
	}
}

function clear_location_highlights() {
    var locations = $('results_list').getElementsByTagName('li');
	for(i=0;i<locations.length;i++){
		var location = locations[i];
		deactivate_marker(locations[i]);	
	}
	
	selected_marker = null;
}

		
function activate_marker(element){
	if (selected_location == element){ return false; }
    
	if (global_markers[element.internal_id] == undefined)
	{  
	    //A result was clicked, but the map marker must be in a cluster   
	    
	    var search = document.forms[0];	
	    search.q.value = element;
	    get_search_results();
	}

	Element.addClassName(element, 'selected'); 
    GEvent.trigger(global_markers[element.internal_id], "click_action");
    if (selected_location){ Element.removeClassName(selected_location, 'selected'); } 
    selected_location = element; 

}
		
function deactivate_marker(element){
	Element.removeClassName(element, 'selected');
	selected_location = false;
}
		
// Adv search sliding
function set_advsearch_slider(){
	if (!$('advsearch')) return false;
	
	$('advsearch').onclick = function(){
		if (!this.active){
			if (is_ie){
		
				Effect.BlindDown('advsearch-content', {afterFinish: function(){$('advsearch-content').style.height = "1%";}}); // IE weirdness
			}else{
				Effect.BlindDown('advsearch-content');
			}
			Element.addClassName(this, 'active');
			
			this.active = true;
			return false;
		}else{
			Effect.BlindUp('advsearch-content');
			Element.removeClassName(this, 'active');
			this.active = false;
			return false;
		}
	}
}

	
	
		
// Search form
query = false; // global for paging
page_num = false; // global
function set_search_form(){
	if (!$('search_form')) return false;
	$('search_form').onsubmit = get_search_results;
}


var get_search_results = function(){
    selected_marker = null;

    //alert('submitted? ' + submitted);
    
	if(!submitted) {
		submitted = true;		
		close_window(); //Close any open overlays		
		Effect.Appear('activity',{duration: 0.25, queue: 'front'});
		
		var search_phrase = $('search_form').q.value;
		
		$('results_list').innerHTML = '';
		page_num = 0;
		
		//Default query
		query = $('search_form').getAttribute('remoteaction') + '?' + Form.serialize($('search_form')) + '&results=15';
		
		
		//Try to geocode client side... if successful overwrite above value.
		if (geocoder) {
			geocoder.getLatLng(
			  search_phrase,
			  function(point) {
				if (point) {				 
					//alert(point);				
					query = $('search_form').getAttribute('remoteaction') + '?lat='+ point.y +'&lng=' + point.x + '&results=15';
					search_stores(query, page_num);
				}else{
					search_stores(query, page_num);
				}
			  }
			);
		}else{
			search_stores(query, page_num);
		}	
	}
	return false;
}

		
function next_page(){
	//Effect.BlindUp('gmapwrap', {afterFinish: function(){$('gmapwrap').style.display = 'block';$('gmapwrap').style.visibility = 'hidden';}});			
	Effect.Appear('activity',{duration: 0.25, queue: 'front'});
	Effect.BlindUp('results', {afterFinish: function(){
	
	// Clear the locations list
	$('results_list').innerHTML = "";
	page_num++;
	first_load = false;
	search_stores(query, (page_num)*7);
	
	}});
}

function prev_page(){
	//Effect.BlindUp('gmapwrap', {afterFinish: function(){$('gmapwrap').style.display = 'block';$('gmapwrap').style.visibility = 'hidden';}});			
	Effect.Appear('activity',{duration: 0.25, queue: 'front'});
	Effect.BlindUp('results', {afterFinish: function(){
	
	// Clear the locations list
	$('results_list').innerHTML = "";
	page_num--;
	first_load = false;
	search_stores(query, (page_num)*7);
	
	}});
}
		
function change_tab(element, type){
	var my_window = $('overlay');
	var my_tab = $('overlay_tab');
	var alltabs = my_window.getElementsByTagName('ul')[0];
	// Unselect tabs
	var tabs = element.parentNode.parentNode.getElementsByTagName("a");
	for(i=0;i<tabs.length;i++){
		tab = tabs[i];
		Element.removeClassName(tab, 'selected');
	}
	// Select tab
	Element.addClassName(element, 'selected');
	
	if (type == 'store_hours'){
		//bring second tab forward
		Element.removeClassName(alltabs,'tabs');
		Element.addClassName(alltabs,'tabs2');
		my_tab.innerHTML = my_window.marker.tabContent.store_hours;
		setTimeout("$('to_addr').focus()", 500);
	}else{
		//bring first tab forward
		Element.removeClassName(alltabs,'tabs2');
		Element.addClassName(alltabs,'tabs');
		my_tab.innerHTML = my_window.marker.tabContent.location;
	}
	position_window(my_window, my_window.marker);
	
	return false;
}

function close_window(){
    if ($('overlay')) {
	    $('overlay').style.display = 'none';
	    deactivate_marker( $("location_" + $('overlay').marker.internal_id) );
	}	
	return false;
}






//-------------------------------------
//-
//- POPUP WINDOW AFTER CLICK
//-
//-------------------------------------
		
function show_custom_info_window(marker){
	
	selected_marker = marker;
	
	map_point = map.fromLatLngToDivPixel(marker.getPoint());

	
	if (!$('overlay')){ // need to create the overlay inside the map pane
		var new_obj = document.createElement("div");
		new_obj.style.display = 'none';
		new_obj.innerHTML = $('overlay_temp').innerHTML;
		new_obj.getElementsByTagName('div')[0].id = 'overlay_tab';
		new_obj.id = 'overlay';
		document.body.appendChild(new_obj);
	}
	
	var my_window = $('overlay');
	
	
	// Attach the marker
	my_window.marker = marker;

	// make sure the first tab is in front
	var alltabs = my_window.getElementsByTagName('ul')[0];
	Element.removeClassName(alltabs,'tabs2');
	Element.addClassName(alltabs,'tabs');

	// Unselect tabs
	var tabs = alltabs.getElementsByTagName("a");
	for(i=0;i<tabs.length;i++){
		tab = tabs[i];
		Element.removeClassName(tab, 'selected');
	}
	// Select tab
	Element.addClassName(tabs[0], 'selected');
	
	// Populate content
	var my_tab = $('overlay_tab');
	my_tab.innerHTML = marker.tabContent.location;

	
	// Stick it to the map
	map.getPane(G_MAP_MARKER_PANE).appendChild(my_window);
	my_window.style.display = 'block';
	
	position_window(my_window, marker);
	
	highlight_locations();
	
}	
		
function position_window(my_window, marker){

	// Get the positioning right
	var vert_loc = parseInt(map_point.y) - my_window.offsetHeight - 20;
	my_window.style.top = vert_loc  + "px";
	var horiz_loc = parseInt(map_point.x) - 55;
	my_window.style.left = horiz_loc + "px";
	
	
	var pan_to = new GLatLng( marker.getPoint().lat(), marker.getPoint().lng() )
	
	
	var gPoint = map.fromLatLngToDivPixel(pan_to);
	gPoint.x = gPoint.x + 55;
	gPoint.y = gPoint.y - 85;
	var new_point = map.fromDivPixelToLatLng(gPoint);

	map.panTo( new_point );
	
} 
		
function submit_gmap_form(from_addr, to_addr){    
	var query = "from: " + from_addr + " to: " + to_addr;
	$('gmaps_form_query').value = query;
	$('gmaps_form').submit();
	return false;
}




