"use strict";

let cntNbr = [];
let cursor = '';
let geojson = []; /* geojson and countries are separate objects which match by name.  */
let geo = {}
let country = {};

let mapName = '';
let continent = {};
let map = {};

// let coords = {};           // hash of country name to coordinates

// todo:  highlight borders on mousein
//        add middle schools
//
// Todone: map names to print names
//        click on map selects
//        start with list open
//


function addActive(name, on = 0){
   if(on){
      geo.features[cntNbr[name]].properties.active = 1;
   } else {
      geo.features[cntNbr[name]].properties.active = 0;
   }
   map.getSource('highSchools').setData(geo);
   map.setFilter("activeHS", ["==", "active",0]);
   listSchools("high");
}

$(document).ready(function () {
   makeMap("schoolHigh");
   start_cursedSpeed();
   setTimeout(function() {if(map.setFilter){ map.setFilter("activeHS", ["==", "active",0]);schoolScreenOn();} else{console.log("wait2");}}, 1500);
   setTimeout(function() {if(map.setFilter){ map.setFilter("activeHS", ["==", "active",0]);schoolScreenOn();} else{console.log("wait3");}}, 3000);
   setTimeout(function() {if(map.setFilter){ map.setFilter("activeHS", ["==", "active",0]);schoolScreenOn();} else{console.log("wait4");}}, 6000);
});

// on map load 
setTimeout(function() { 
   document.getElementById("schoolbox").addEventListener('mouseleave', () => { console.log("leavleavleaveee leave"); 
   let elements = document.getElementsByClassName("highlighthover");
   if(elements[0]){elements[0].classList.remove("highlighthover");}
   map.setFilter("highschoolOutline", ["==", "name", ""]);
   }); }, 2222);
setTimeout(function() { 
   document.getElementById("schoolbox").addEventListener('mouseenter', () => { console.log("enter XXXXXXX XXXXXXX enter"); 
   let elements = document.getElementsByClassName("highlighthover");
   if(elements[0]){elements[0].classList.remove("highlighthover");}
   map.setFilter("highschoolOutline", ["==", "name", ""]);
   }); }, 2222);
    

function schoolScreenToggle() {
   if( document.getElementById("schoolbox").style.display === "block" ){
      schoolScreenOff();
   } else {
      schoolScreenOn();
   }
}

function schoolScreenOn() {
   document.getElementById("schoolbox").style.display = "block";
   listSchools("high");
}

function schoolScreenOff() {
   document.getElementById("schoolbox").style.display = "none";
}

function listSchools(level){
   $('#schoollist').empty();
   for(let c in continent.countries ){
      let name = continent.countries[c].name;
      if(  geojson[name].properties.active === 1  )  {
         $('#schoollist').append($('<li class=highlight id="'+ name +'">' + pname[name] + '</li>'));
      } else {
         $('#schoollist').append($('<li id="'+ name +'">' + pname[name] + '</li>' ));
      }
   }

   $('#schoollist li').click(function(){ 
      let name = $(this).attr('id');
      addActive( name,  !geo.features[cntNbr[name]].properties.active);
   });

   $('#schoollist li').mouseover(function(){
      let name = $(this).attr('id');
      map.setFilter("highschoolOutline", ["==", "name", name]);
      document.getElementById(name).classList.add("highlighthover");
   });

   $('#schoollist li').mouseout(function(){
      let name = $(this).attr('id');
      document.getElementById(name).classList.remove("highlighthover");
      map.setFilter("highschoolOutline", ["==", "name", ""]);
   });
}


function makeMap(map_name){
   let mapNamePlus = "/u/z/" + map_name + "/map.json"; 
   $.getJSON(mapNamePlus, function(data){
      continent = data;
      if (typeof continent.geojURL === "undefined") { continent.geojURL = "/u/z/" + map_name + "/geo.json"; }
      map = createMap( continent.geojURL, continent.style, map_name, continent.bounds, continent.maxzoom, continent.attribution );
      if( continent.bounds ){ map.fitBounds(data.bounds, {padding: 8}); }  // sets zoom map before placing the question popup.
      $.getJSON(continent.geojURL + "?1235", function(g){
         geo = g;
         for( let i=0; i < geo.features.length; i++ ){
            name = geo.features[i].properties.name;
            cntNbr[name] = i;
            geojson[name] = geo.features[i];
         }
      });
   });
   schoolScreenOff(); 

   return map;    // end makeMap
}  


function distanceBetween(p, p2) {
    let dx = p[0] - p2[0];
    let dy = p[1] - p2[1];
    return Math.sqrt(Math.pow( dx, 2) + Math.pow( dy, 2));
}

function createMap(geoURL, mystyle, name, bounds, mz = 22, atr="wikimedia") {
   let shakeyflag = 0;
   var center = [0,0];
   let zoom = 13;
   let minzoom = 2;
   if( mystyle.includes("mapbox") ) {   // change to labeled.
      mystyle = 'https://api.maptiler.com/maps/1695cdd4-2994-448d-b3d4-7446f978cf03/style.json?key=7zhdu6GExk8YG7dFLoDE';    // mapTiler
   }
   if( bounds ){
      center = [(bounds[0][0]+bounds[1][0])/2, (bounds[0][1]+bounds[1][1])/2];
      zoom = 9.66 - (1.44 * Math.log2( distanceBetween( bounds[0], bounds[1] ) ));
   }
   maplibregl.accessToken = 'pk.eyJ1IjoiemVrZXNlbGJ5IiwiYSI6ImNpc2JycGc0MTAxNXAydnFvc2Z5eGpteHAifQ.QWjQ0kpS3usdtU-p83kC6w'; // good
   var map = new maplibregl.Map({
      container: 'mapid',
      style: mystyle,
      zoom: zoom,
      center: center,
      interactive: true
   });
   map.dragRotate.disable();
   map.on('dragend', function(){ shakeyflag = 0; });

   let url = '/u/z/schoolHigh/geo.json?999'; //  + continent.geojURL;
   map.on('load', function() {
      // show what school areas mouse is in.
      map.addSource('highSchools', {
         'type': 'geojson',
         'data':   geoURL
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'allHighSchools',
         'type':'fill',
         'source':'highSchools',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.01)',
            'fill-outline-color': 'rgba(2, 190, 1, 0.99)'
         },
         "filter": ["!=", "name", "nonexxx"]
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'highschoolOutline',
         'type':'line',
         'source':'highSchools',
         'paint':{
            'line-color': 'rgba(22, 22, 212, .8)',
            'line-width': 2.5
         },
         "filter": ["==", "name", "hoverNameHS"]
      });

      // When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
      let highName = "";
      map.on('mousemove', 'allHighSchools', (e) => {
         if(highName !== e.features[0].properties.name){
            let el;
            let matches =  document.getElementsByClassName("highlighthover");
            for(let i=0; i<matches.length; i++){
               matches[i].classList.remove("highlighthover");
               console.log("line 266 remove class");
            }

            highName = e.features[0].properties.name;
            setTimeout(function() {highName = "";}, 2500);
            document.getElementById(highName).classList.add("highlighthover");
            map.setFilter("highschoolOutline", ["==", "name", highName]);
         }
      });

      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      // show what school areas mouse is in.
      let midURL = "/u/z/schoolMiddle/geo.json";
      map.addSource('middleSchools', {
         'type': 'geojson',
         'data':   midURL
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'allMiddleSchools',
         'type':'fill',
         'source':'middleSchools',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.01)',
            'fill-outline-color': 'rgba(190, 4, 5, 0.2)'
         },
         "filter": ["!=", "name", "nonexxx"]
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'middleSchoolOutline',
         'type':'line',
         'source':'middleSchools',
         'paint':{
            'line-color': 'rgba(22, 22, 212, .8)',
            'line-width': 2.5
         },
         "filter": ["==", "name", "hoverNameHS"]
      });

      // When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
      let middleName = "";
      map.on('mousemove', 'allMiddleSchools', (e) => {
         if( middleName !== e.features[0].properties.name){
            middleName = e.features[0].properties.name;
            console.log("Midd: ", e.features[0].properties.name);
         }
      });

      //  //       // When the mouse leaves the state-fill layer, update the feature state of the previously hovered feature.
      //  map.on('mouseleave', 'allMiddleSchools', () => {
      //     middleName = "";
      //  });
      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      // show what elem school areas mouse is in.
      let elemURL = "/u/z/schoolElem/geo.json";
      map.addSource('elemSchools', {
         'type': 'geojson',
         'data':   elemURL
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'allElemSchools',
         'type':'fill',
         'source':'elemSchools',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.01)',
            'fill-outline-color': 'rgba(0, 0, 190, 0.2)'
         },
         "filter": ["!=", "name", "nonexxx"]
      });

      // When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
      let elemName = "";
      map.on('mousemove', 'allElemSchools', (e) => {
         if( elemName !== e.features[0].properties.name){
            elemName = e.features[0].properties.name;
            console.log("Elem: ", e.features[0].properties.name);
         }
      });
      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      let outerURL = "/u/z/otherCounties/geo.json";
      map.addSource('outerArea', {
         'type': 'geojson',
         'data': outerURL
      });

      map.addLayer({
         'id': 'outerArea',
         'type':'fill',
         'source':'outerArea',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.23)',
            'fill-outline-color': 'rgba(20, 40, 10, 0.99)'
         },
         "filter": ["!=", "active", "1"]
      });
      map.addLayer({
         'id': 'outerAreaBorder',
         'type':'line',
         'source':'outerArea',
         'paint':{
            'line-color': 'rgba(1, 196, 1, .5)',
            'line-width': 3
         },
         "filter": ["!=", "active", "1"]  // always on
      });
     map.on('mousemove', 'outerArea', (e) => {
           if(highName){
              document.getElementById(highName).classList.remove("highlighthover");
              map.setFilter("highschoolOutline", ["==", "name", ""]);
           }
           highName = "";
     });

     //  document.getElementById("schoolbox").addEventListener('mouseleave', () =>  console.log("LEAVLEAVLEAVEEE LEAVE"); 

      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'activeHS',
         'type':'fill',
         'source':'highSchools',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.13)',
            'fill-outline-color': 'rgba(20, 40, 10, 0.99)'
         },
         "filter": ["==", "active", "1"]
      });
      map.addLayer({                      // layers for highlighting map area / xountry.
         'id': 'activeMiddleS',
         'type':'fill',
         'source': 'middleSchools',
         'paint':{
            'fill-color': 'rgba(55, 55, 55, 0.13)',
            'fill-outline-color': 'rgba(20, 40, 10, 0.99)'
         },
         "filter": ["==", "active", "1"]
      });
      //     map.addLayer({
      //        'id': 'mapBorder',
      //        'type':'line',
      //        'source':'highSchools',
      //        'paint':{
      //              'line-color': 'rgba(1, 196, 1, .5)'
      //              ,'line-width': 6
      //         },
      //         "filter": ["==", "name", ""]
      //     });


      map.on('mousedown', function (e) {
         shakeyflag = 1;
         setTimeout(function(){shakeyflag=0}, 433);  // max time between mousedown/up to be a click
      });

      map.on('mouseup', 'allHighSchools', (e) => {
         if ( shakeyflag == 1 ) {
            let name = e.features[0].properties.name;
            addActive(name, !geo.features[cntNbr[name]].properties.active);
            document.getElementById(name).classList.add("highlighthover");
         }
      });

      var touchStartEvent;
      map.on('touchstart', function (e) {
         shakeyflag = 1;
         touchStartEvent = e;
         setTimeout(function(){shakeyflag=0}, 433);  // length of time between mousedown/up to be a click
      });
      map.on('touchend', function (e) {
         if ( shakeyflag == 1 ) {
            let name = e.features[0].properties.name;
            addActive(name, !geo.features[cntNbr[name]].properties.active);
            document.getElementById(name).classList.add("highlighthover");
         }
      });
   });

   return map;
}



let mouseX, mouseY;             // fat cursor when fast.
let dX = 0, dY = 0;
let prevX = 0, prevY = 0;
let fatCurs = 0;
$(document).mousemove(function(e) {
   mouseX = e.pageX;
   mouseY = e.pageY;
});

function start_cursedSpeed() {                    // started and cleared by stop/start timer
   let cursedSpeed = setInterval(function(){
      dX = prevX - mouseX;
      dY = prevY - mouseY;
      prevX = mouseX;
      prevY = mouseY;
      let dis = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
      if( dis > 100 ){
         if( fatCurs == 0 ){
            $('.maplibregl-canvas-container').css('cursor', 'cell');
            fatCurs = 1;
         }
      } else if( dis < 50 && fatCurs == 1 ) {
         fatCurs = 0;
         setTimeout(function() { $('.maplibregl-canvas-container').css('cursor', cursor); }, 333);
      }
   }, 200);
}

// ------------------------------ end timer funcs --------------------------------------------------------------



function flash_lines(name){
   setTimeout(function(){
      map.setFilter("showLineR", ["==", "name", '']);
      setTimeout(function(){ map.setFilter("showLineR", ["==", "name", name]); }, 400);
   }, 300);
}

function flash_area(name){
   setTimeout(function(){
      map.setPaintProperty('countryNameBadOutline', 'line-color', 'rgba(5, 2, 2, 0.6)');
      setTimeout(function(){
         map.setPaintProperty('countryNameBadOutline', 'line-color',  'rgba(5, 2, 2, 2)');
      }, 400);
   }, 300);
}


function inside(point, geo) {
   if( typeof geo === "undefined" || typeof geo.type === "undefined" ){
       return false;
   }
   if( geo.type === "Polygon" ){
      return inside_polygon(point, geo.coordinates[0]);
   }
   else if( geo.type === "MultiPolygon" ){
      for (let k=0; k < geo.coordinates.length; k++ ){
         if (inside_polygon(point, geo.coordinates[k][0])) {
            return true;
         }
      }
   }
   return false;
}

function inside_polygon(point, vs) {
   var x = point[0], y = point[1];
   var inside = false;
   for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
      var xi = vs[i][0], yi = vs[i][1];
      var xj = vs[j][0], yj = vs[j][1];

      var intersect = ((yi > y) != (yj > y))
         && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) inside = !inside;
   }
   return inside;
}


// pname["# hash of name to print name:
let pname = {
   "crestv": "Crestview Elem",
   "greerms": "Greer Mid",
   "greerhs": "Greer High",
   "stone": "Stone Elem Acad",
   "league": "League Mid Acad",
   "gvilleh": "Greenville High Acad",
   "cone": "Cherrydale Elem",
   "lakeview": "Lakeview Mid",
   "bereah": "Berea High",
   "dchapel": "Duncan Chapel Elem",
   "trest": "Travelers Rest",
   "mtnview": "Mountain View Elem",
   "bridgems": "Blue Ridge Mid",
   "bridgehs": "Blue Ridge High",
   "forksh": "Fork Shoals Elem",
   "chandler": "Ralph Chandler Mid at Fork Shoals",
   "wdmonth": "Woodmont High",
   "wdmontm": "Woodmont Mid",
   "ellenw": "Ellen Woodside Elem",
   "plaine": "Plain Elem",
   "brysonm": "Bryson Mid",
   "hillcrest": "Hillcrest High",
   "bells": "Bells Crossing Elem",
   "riverms": "Riverside Mid",
   "mauldinh": "Mauldin High",
   "sueclev": "Sue Cleveland",
   "welcome": "Welcome Elem",
   "twood": "Tanglewood Mid",
   "carolina": "Carolina High Acad",
   "woodland": "Woodland Elem",
   "rsidehs": "Riverside High",
   "ccreek": "Chandler Creek Elem",
   "skyland": "Skyland Elem",
   "tigervil": "Tigerville Elem",
   "lforest": "Lake Forest Elem",
   "whhs": "Wade Hampton",
   "sevier": "Sevier Mid",
   "sumdrive": "Summit Dr Elem",
   "enorthst": "East North St Elem Acad",
   "gvillem": "Greenville Mid Acad",
   "acircle": "Augusta Circle Elem",
   "hughes": "Hughes Mid Acad",
   "hollise": "Hollis Elem Acad",
   "beream": "Berea Mid",
   "scollins": "Sara Collins Elem",
   "beck": "Beck International Academy",
   "jlmann": "J L Mann High Acad",
   "slaterma": "Slater Marietta Elem",
   "northwst": "Northwest Mid",
   "taylorse": "Taylors Elem",
   "gbrier": "Greenbrier Elem",
   "hillcrm": "Hillcrest Mid",
   "monarch": "Monarch Elem",
   "mauldinm": "Mauldin Mid",
   "heritage": "Heritage Elem",
   "bethel": "Bethel Elem",
   "armstrng": "Armstrong Elem",
   "gordon": "Rudolph G Gordon School",
   "gordon": "Rudolph G Gordon School",
   "fihs": "Fountain Inn",
   "mitchell": "Mitchell Rd Elem",
   "eastside": "Eastside High",
   "parise": "Paris Elem",
   "pelhamrd": "Pelham Rd Elem",
   "monaview": "Monaview Elem",
   "blythe": "Blythe Elem Acad",
   "southside": "Southside High",
   "gateway": "Gateway Elem",
   "bvista": "Buena Vista Elem",
   "northwd": "Northwood Mid",
   "mauldine": "Mauldin Elem",
   "ftinn": "Fountain Inn Elem",
   "egantt": "Robert Cashion Elem",
   "brysone": "Bryson Elem",
   "oakview": "Oakview Elem",
   "alexand": "Alexander Elem",
   "grove": "Grove Elem",
   "kerns": "Thomas E Kerns Elem",
   "simville": "Simpsonville Elem",
   "bglenn": "Brook Glenn Elem",
   "bereae": "Berea Elem",
   "westclif": "Westcliffe Elem",
   "bcreek": "Brushy Creek Elem",
   "ajw": "AJ Whittenberg Elem",
   "fisher": "DR PHINNIZE J FISHER MIDDLE",
};