//This sets up our colored pins
var greenIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/green-marker.png',
  iconSize: [12, 12],
  iconAnchor: [6, 12],
  popupAnchor: [1, -12]
});
var greenIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/green-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var greenIcon = new L.Icon({
  iconUrl: 'Images/Pins/green-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var blueIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/blue-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var blueIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/blue-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var blueIcon = new L.Icon({
  iconUrl: 'Images/Pins/blue-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var grayIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/gray.png-marker',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var grayIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/gray-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var grayIcon = new L.Icon({
  iconUrl: 'Images/Pins/gray-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var redIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/red-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var redIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/red-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var redIcon = new L.Icon({
  iconUrl: 'Images/Pins/red-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var yellowIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/yellow-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var yellowIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/yellow-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var yellowIcon = new L.Icon({
  iconUrl: 'Images/Pins/yellow-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var platinumIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/platinum-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var platinumIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/platinum-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var platinumIcon = new L.Icon({
  iconUrl: 'Images/Pins/platinum-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var goldIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/gold-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var goldIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/gold-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var goldIcon = new L.Icon({
  iconUrl: 'Images/Pins/gold-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var silverIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/silver-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var silverIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/silver-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var silverIcon = new L.Icon({
  iconUrl: 'Images/Pins/silver-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var bronzeIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/bronze-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var bronzeIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/bronze-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var bronzeIcon = new L.Icon({
  iconUrl: 'Images/Pins/bronze-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32]
});
var blackIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/black-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var blackIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/black-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var blackIcon = new L.Icon({
  iconUrl: 'Images/Pins/black-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32],
  shadowSize: [59, 32]
});
var diamondIconSmall = new L.Icon({
  iconUrl: 'Images/Pins/diamond-marker.png',
  iconSize: [12, 12],
  iconAnchor: [8, 12],
  popupAnchor: [1, -12]
});
var diamondIconMedium = new L.Icon({
  iconUrl: 'Images/Pins/diamond-marker.png',
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  popupAnchor: [1, -20]
});
var diamondIcon = new L.Icon({
  iconUrl: 'Images/Pins/diamond-marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [1, -32],
  shadowSize: [59, 32]
});
window.L.CanvasIconLayer = layerFactory(L);
//This will let us use a map image that we have converted via Export>Zoomify in Photoshop
var expoMap = L.map('expoMap', {
  maxZoom: 5, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
  minZoom: 1,
  crs: L.CRS.Simple, //Set a flat projection, as we are projecting an image
  preferCanvas: true //Use canvas (to help with rendering large amount of markers)
});
//Loading the Zoomify tile layer, notice the URL
var expoLayer = L.tileLayer.zoomify('https://greatlakesift.org/SuppliersDay2024/Images/Map/{g}/{z}-{x}-{y}.jpg', {
  width: 1280,
  height: 1280,
  attribution: '&copy; <a href="http://iami411.org/" target="_BLANK">IAMI</a>'
}).addTo(expoMap);
//Setting the view to our layer bounds, set by our Zoomify plugin
expoMap.fitBounds(expoLayer.options.bounds);
var ciLayer = L.canvasIconLayer({}).addTo(expoMap);
ciLayer.addOnClickListener(onBoothClick);
function onBoothClick(e, r)
{
  showBoothPopup(r[0].data.boothInfo.booth)
}
//get list of our booths
var booths = [];
var markerArray = []; //This will store all our markers
loadBoothList();
//This will update icon size based on zoom level.
expoMap.on('zoomend', function() {
  removeMarkers();
  addMarkers(booths);
  //Now let's redraw our canvas markers
});
function removeMarkers()
{
  for (index = 0; index < markerArray.length; ++index) {
    ciLayer.removeMarker(markerArray[index]);
  }
  markerArray = []; 
}
function loadBoothList(loadType, onlyRegistered, IndustryType, Industries)
{
  removeMarkers();
  if (loadType == null) loadType = "All";
  if (onlyRegistered == null) onlyRegistered = "0";
  if (IndustryType == null) IndustryType = "Any";
  if (Industries == null) Industries = "";
  expo_post("loadBoothList.php", {loadType: loadType, onlyRegistered: onlyRegistered, IndustryType: IndustryType, Industries: Industries}, "#expoList").done(function(expodata) {
    booths = JSON.parse(expodata);
    addMarkers(booths);
    expo_post("loadSortedBooths.php", {loadType: loadType, IndustryType: IndustryType, Industries: Industries}, "none").done(function(expodata) {
      jQuery("#expoList").html(expodata);
    });
  });
}
function addMarkers(booths)
{
  for (var i = 0; i < booths.length; i++) {
      if (expoMap.getZoom() >= 3)
      {
        switch(booths[i].status)
        {
          case "9":
            defIcon = diamondIcon;
          break;
          case "8":
            defIcon = platinumIcon;
          break;
          case "7":
            defIcon = goldIcon;
          break;
          case "6":
            defIcon = silverIcon;
          break;
          case "5":
            defIcon = bronzeIcon;
          break;
          case "4":
            defIcon = redIcon;
          break;
          case "3":
            defIcon = blackIcon;
          break;
          case "2":
            defIcon = blackIcon;
          break;
          case "1":
            defIcon = blueIcon;
          break;
          case "0":
            defIcon = greenIcon;
          break;
        }  
      }else if (expoMap.getZoom() == 2){
        switch(booths[i].status)
        {
          case "9":
            defIcon = diamondIconMedium;
          break;
          case "8":
            defIcon = platinumIconMedium;
          break;
          case "7":
            defIcon = goldIconMedium;
          break;
          case "6":
            defIcon = silverIconMedium;
          break;
          case "5":
            defIcon = bronzeIconMedium;
          break;
          case "4":
            defIcon = redIconMedium;
          break;
          case "3":
            defIcon = blackIconMedium;
          break;
          case "2":
            defIcon = blackIconMedium;
          break;
          case "1":
            defIcon = blueIconMedium;
          break;
          case "0":
            defIcon = greenIconMedium;
          break;
        }  
      }else{
        switch(booths[i].status)
        {
          case "9":
            defIcon = diamondIconSmall;
          break;
          case "8":
            defIcon = platinumIconSmall;
          break;
          case "7":
            defIcon = goldIconSmall;
          break;
          case "6":
            defIcon = silverIconSmall;
          break;
          case "5":
            defIcon = bronzeIconSmall;
          break;
          case "4":
            defIcon = redIconSmall;
          break;
          case "3":
            defIcon = blackIconSmall;
          break;
          case "2":
            defIcon = blackIconSmall;
          break;
          case "1":
            defIcon = blueIconSmall;
          break;
          case "0":
            defIcon = greenIconSmall;
          break;
        }
      }
      marker = new L.marker([booths[i].lat,booths[i].lng], {icon: defIcon, boothInfo: booths[i]})
      .bindTooltip("<b>Booth " + booths[i].booth + ":</b> " + booths[i].company);
      marker.boothInfo = booths[i];
      marker.bindPopup("Loading");
      marker.on('click', function(e) {
        var marker = e.target;
        var popup = e.target.getPopup();
        popup.setContent(showLoading);
        popup.update();
        /*expo_post("loadBoothInfo.php", {boothNumber: marker.boothInfo.booth}, "none").done(function(expodata) {
          popup.setContent(expodata);
          popup.update();
        });*/ 
      });
      markerArray.push(marker);
    }
    ciLayer.addMarkers(markerArray);
    ciLayer.redraw();
}
function showBoothPopup(booth, infoID)
{
  for (index = 0; index < markerArray.length; ++index) {
    if (markerArray[index].boothInfo.booth == booth)
    {
      if (infoID == null) infoID = "";
      var marker = markerArray[index];
      var popup = marker.getPopup();
      marker.openPopup();
      popup.setContent(showLoading);
      popup.update();
      expo_post("loadBoothInfo.php", {boothNumber: booth, infoID: infoID}, "none").done(function(expodata) {
        popup.setContent(expodata);
        popup.update();
      });
      //Now zoom/pan to marker/popup
      var latLngs = [ popup.getLatLng() ];
      var markerBounds = L.latLng(latLngs);
      try
      {
        expoMap.setView(L.latLng(latLngs));
              }
      catch(e){}      
      break;
    }
  }
}