var json;
var cities = {};
var map;
var markers = [];
var htmls = [];
var city_provinces = [];
var map_sidebar_html;
var current_empty_marker_slot = 0;
var master_hash_provinces_and_cities = [];
var temp_cities;
var delete_me = [];
var traegericon = new GIcon(G_DEFAULT_ICON);
traegericon.image = "/images/traegerlogo-point.gif";
traegericon.iconSize  = new GSize(17,24);
traegericon.shadow = "/map/csmshadow.png";
traegericon.shadowSize = new GSize(34,24);
csmanchor = new GPoint(8,25);
traegericon.iconAnchor = csmanchor;
/*
traegericon.shadowSize  = new GSize(21,19);
traegericon.shadowAnchor = new GSize(100,100);
*/

traegericon.iconAnchor = new GPoint(8,20);

function load_map() {
     console.log("Loading map...");
     map = new GMap2(document.getElementById("map"));
     // map.setMapType(G_NORMAL_MAP);
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     map.setCenter(new GLatLng(55.627996, -96.416016),4);
     console.log("Done.");
}

function place_tree() {
     console.log("placing tree...\n");
     // var json_url = "get_json.pl?dummy="+ new Date().getTime();
     var json_url = "get_json.pl";
     var place_text = "The map is loading. This is fast on newer browsers but on older browsers it can be very slow.<p></p>";
     var version = $.browser.version;
     if (version instanceof Object)
                 version=version.number();
     if ($.browser.msie && version < 7) {
          place_text += "<p>You are using a version of Internet Explorer lower than 7.";
          place_text += "This could mean you need to upgrade your browser or it could ";
          place_text += "mean that you are using an older computer. You will probably ";
          place_text += "experience a delay.</p>";
     }
     else {
          place_text += "Your browser version is ("+version+")";
     }
     $("#map").append("<div id='loading' style='width: 400px; height: 100px; position: absolute; left: 100px; background-color: red; font-size: xxlarge;'>"+place_text+"</div>");
     $.getJSON(json_url,null,show_json);
     console.log("done placing tree.\n");
}


function show_markers() {
     $.dump(markers);
}

function show_json(in_json,status) {
     console.log("show_json is running. put the loading message here");
     json = in_json;
     var overall_tree_html;
     $("#tree_pane").treeview();
          // console.log("Got locations ("+json+") " + json.text + " with length ("+json.length+") status was ("+status+")");
          // console.log("This is the dump:\n");
          // $.dump(json);
          // console.log("Done dumping.\n");
     var provinces = [];
     var unsort = [];
     var sort;
     for (var i in json) {
          unsort.push(i);
               // console.log("province_name is ("+i+") and the object is ("+json[i]+")");
     }
     var sorted_provinces = unsort.sort();
          // $.dump(sorted_provinces);
          // $.each(json, function (province_name,province) {
          // $.each(sorted_provinces, function (province_name,province) {
          // console.log("the length of the sorted provinces is " + sorted_provinces.length);
          // console.log("These are them:\n");
          for(var i=0;i<sorted_provinces.length; i++) {
               var province_name = sorted_provinces[i];
               $("#select_province").append("<option value\""+province_name+"\">"+province_name+"</option>"); 
               $("#loading").append("<br>Loading "+province_name);
               var province = json[province_name];
               console.log("Working on the province with the name ("+ province_name + "). It's this ("+province+")");
               var province_string = "<li class='closed'><span class='folder'>"+province_name+"</span><ul>";
               master_hash_provinces_and_cities[province_name] = [];
               // this is the province
               var unsorted_cities = [];
               var sorted_cities = [];
               for (var p in province) { unsorted_cities.push(p); }
               sorted_cities = unsorted_cities.sort();
               for (var j=0; j<sorted_cities.length; j++) {
                    var city_name = sorted_cities[j];
                    var location_string = province_name+":"+city_name;
                    master_hash_provinces_and_cities[province_name][city_name] = json[province_name][city_name];
                    // console.log("Working on the city " + city_name + " with location_string ("+location_string+")");
                    province_string += ("<li class='closed'><span class='folder' onclick='clicked_on_city(\""+city_name+"\",\""+province_name+"\")'); return true'>"+city_name+"</span><ul>");
                    city_provinces[location_string] = json[province_name][city_name];
                    var dealers = [];
                    var sorted_dealers = [];
                    $.each(json[province_name][city_name].dealers,function(dealer_name,dealer) {
                         // console.log("Working on the dealer named " + dealer_name);
                         var marker_text = "<b>"+dealer.phone+"</b><br />"+dealer.address+", "+dealer.city+", "+dealer.province+"<br />";
                         if (dealer.email != null ) {
                              marker += "<a href='mailto:"+dealer.email+"'>"+dealer.email+"</a>";
                         }
                         var marker = create_marker(dealer.latitude,dealer.longitude,dealer.name,marker_text)
                         // console.log("marker is (" + marker+ ") with number ("+marker.markernumber+")");
                         province_string += "<li><span class='file' onclick='console.log(\"You clicked on a dealer\"); myclick("+marker.markernumber+")'>"+dealer_name+"</span></li>";
                         map.addOverlay(marker);
                    }); 
                    province_string += ("</ul>");
               }
               province_string += "</ul></li>";
               overall_tree_html += province_string;
               // console.log("province_string is ("+province_string+")");
          }
     var magic = $(overall_tree_html).appendTo("#tree_pane");
     $("#tree_pane").treeview({
          animated: 7,
          add: magic
     });
     update_city($("#select_provinces :selected").text());
     console.log("show_json is done. remove the loading message.");
     $("#loading").remove();
}

function clicked_on_city(thiscity,province) {
     console.log("thiscity is (" + thiscity + ") and the province is ("+province+")");
     // city = city_provinces[thiscity];
     temp_cities = master_hash_provinces_and_cities[province];
     var city = temp_cities[thiscity];
     console.log("Stop here");
     var lat = city.latitude;
     var lng = city.longitude;
     var zoom = city.zoom - 0;
     console.log("Going to the city (" + thiscity + ") with the zoom ("+zoom+")");
     console.log("("+lat+")("+lng+")("+zoom+")");
     var p_citycenter = new GLatLng(lat,lng);
     // map.setCenter(p_citycenter);
     map.setZoom(zoom);
     map.panTo(p_citycenter);
}


function create_marker (lat,lng,name,html) {
     // console.log("create_marker is creating with this info ("+lat+","+lng+","+name+","+html+")");
     var this_point = new GLatLng(lat,lng);
     var this_marker = new GMarker(this_point,{draggable: false, icon: traegericon});
     var text = name + "<br />" + (html || "");
     GEvent.addListener(this_marker, "click", function() {
          this_marker.openInfoWindowHtml(text);
     });
     markers[current_empty_marker_slot] = this_marker;
     htmls[current_empty_marker_slot] = text;
     this_marker.markernumber = current_empty_marker_slot;
     map_sidebar_html += '<li><a href="javascript:myclick(' + current_empty_marker_slot + ')">' + name + '</a><br>';
     current_empty_marker_slot++;
     return this_marker;
}

function myclick(i) {
     markers[i].openInfoWindowHtml(htmls[i]);
     var latlng = markers[i].getLatLng();
     map.setZoom(8);
     map.panTo(latlng);
}

function update_city() {
     var province_name = $("#select_province :selected").text();
     console.log("Updating the list of cities to reflect " + province_name + ".\n");
     temp_cities = master_hash_provinces_and_cities[province_name];
     // console.log("the length of cities is " + temp_cities.length);
     // $.dump(temp_cities);
     //for (i=0; i<temp_cities.length; cities++) {
     $("#select_city").html("<option>Select city</option>");
     for (var i in temp_cities) {
          var city_name = i;
          var text = "<option value=\""+city_name+"\">"+city_name+"</option>";
          // console.log("text is " + text);
          $("#select_city").append(text);
     }
}

function search_by_address(address) {
     var incoming2 = $("#search_address").attr('value');
     // console.log("incoming is ("+incoming+") and incoming2 is ("+incoming2+")");
     console.log("Searching for this: ("+address+")");
     var geocoder = new GClientGeocoder();
     geocoder.getLocations(address, function(code) {
          var statusCode = code.Status.code;
          console.log("return code for address alone ("+ address +") is " + statusCode);
          if (statusCode == 200 ) {
               var point = code.Placemark[0].Point.coordinates;
               var lng = point[0];
               var lat = point[1];
               console.log("found address here:"+lat+"\t"+lng);
               var marker = new GMarker(new GLatLng(lat,lng),{ draggable: true});
               map.addOverlay(marker);
               map.setCenter(marker.getPoint());
               map.setZoom(11);
               marker.openInfoWindowHtml("You<br /><b>"+address+"</b>");
          }
          else {
               $(row).find(".method").text("Address not found in google");
          }
 
     });
}