/*/===!===!===!===!===!===!===!===!===!===!===!===!===!===!===!===!/*/
/*-| Variables |-*/
/*/===!===!===!===!===!===!===!===!===!===!===!===!===!===!===!/*/

let defIcon


//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: 2,
    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://leift.org/SuppliersDay2025/Images/Map/{g}/{z}-{x}-{y}.jpg', {
    width: 3500,
    height: 3500,
    attribution: '&copy; <a href="https://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);
expoMap.setView( { lat:-64.919792175293, lng:157.43179587693} ); // This will set the map to where the full map shows.  Change lat/lng as needed getting the values from the edit map admin area.
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 ( let 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;
        }
    }
}