var sitePlanLocateImg, sitePlanImg, phasesBox, allPoints, legendDesktop, availabilityDesktop, housesBox, housesBoxFull, housesGallTitle, houseDetailbox;
// var urlToLoadSiteplan = "http://3.135.73.135/wp-content/themes/empire-theme/empire-touchscreen/lots.xml";
//var urlToLoadSiteplan = "http://3.135.73.135/general-services/?request=lots&tid=908";
// var urlToLoadSiteplan = "http://3.135.73.135/general-services/?request=lots&tid=47334";
// console.log("ready siteplan");
var XMLSiteplan;
var urlToLoadSiteplan;

var siteplanContent;

var isWeb = true;
var display_prices_siteplan = false;

var containerLeft;

var addedTop = 0;
//variables para el resize
// var screenHeight = jQuery(window).height();
// var screenWidth = jQuery(window).width();

function formatSiteplan(number) {
  var num = number.replace(/\,/g, '');
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
    num = num.split('').reverse().join('').replace(/^[\,]/, '');
  }
  return num;
}


jQuery(window).resize(function () {
  resizeSiteplan();
});

function createVarsSiteplan() {
  containerLeft = jQuery('#containerLeft');
  sitePlanLocateImg = jQuery('#sitePlanLocateImg');
  sitePlanImg = jQuery('#sitePlanImg');
  phasesBox = jQuery('#phasesBox');
  allPoints = jQuery('#allPoints');
  legendDesktop = jQuery('#legendDesktop');
  availabilityDesktop = jQuery('#availabilityDesktop');
  housesBox = jQuery('#housesBox');
  housesBoxFull = jQuery('#housesBoxFull');
  housesGallTitle = jQuery('#housesGallTitle');
  houseDetailbox = jQuery('#houseDetailbox');
  siteplanContent = jQuery('.siteplanContent');
  sectionSiteplan = jQuery('.sectionSiteplan');
}

function loadSiteplanXML() {
	console.log("loadSiteplanXML ajax: %o", urlToLoadSiteplan);
  jQuery.ajax({
    type: 'xml',
    url: urlToLoadSiteplan,
    method: "GET",
    dataType: "xml",
    success: function (receivedXML) {
      XMLSiteplan = receivedXML;
      loadSiteplan();
      resizeSiteplan();
    },
  });
}


function resizeSiteplan() {
//   console.log("resizeSiteplan");
  setTimeout(function () {
    if (screenWidth > 768) {
      if (screenWidth > screenHeight) { //landscape
        containerLeft.height("100%");
        jQuery("#containerRight").height("100%");
        jQuery("#siteplan").removeClass("largePortrait");

        if (isWeb) {
          //sectionSiteplan.height(screenHeight - 60 - addedTop).css("top", addedTop);
          sectionSiteplan.height(screenHeight - 60 - addedTop);
        }
      } else {//portrait

        jQuery("#siteplan").addClass("largePortrait");
        jQuery("#containerRight").height("auto");

        if (isWeb) {
          sectionSiteplan.height(screenHeight - 60 - addedTop).css("top", addedTop);
          containerLeft.height(screenHeight - 170);
        } else {
          containerLeft.height(screenHeight - jQuery("#containerRight").height() - 80);

        }
      }
    } else {
      jQuery("#siteplan").removeClass("largePortrait");
      if (screenWidth > screenHeight) { //landscape
        containerLeft.height(screenHeight - 120);
        jQuery("#containerRight").height(screenHeight + 60);
      } else { //portrait
        containerLeft.height(screenHeight - 170);
        jQuery("#containerRight").height("auto");
      }
      if (isWeb) {
        sectionSiteplan.height(screenWidth).css("top", addedTop);
      }

    }
    locateImageOn(sitePlanLocateImg, sitePlanImg, "img");
    locateContainerOn(sitePlanLocateImg, allPoints);

  }, 20);
}

var uniqueavailabilityOpts = ["Buildable Lot", "Move-In Ready", "Sold", "On Hold"];
var uniqueavailabilityOptsVars = ["available", "mooveinready", "sold", "hold"];

var catsAddedDisplay = "block";

function loadSiteplan() {
  var display_prices_node = jQuery(XMLSiteplan).find('display_prices');
  var hide_categories = jQuery(XMLSiteplan).find('hide_categories').text();

  //	var move_in_text = jQuery(XMLSiteplan).find('move_in_text').text();

  if (hide_categories == "1") {
    catsAddedDisplay = "none";
  }

  var buildable_text = jQuery(XMLSiteplan).find('buildable_lot_text').text();
  var move_in_text_comm = jQuery(XMLSiteplan).find('move_in_ready_text').text();
  var sold_text = jQuery(XMLSiteplan).find('sold_text').text();
  var hold_text = jQuery(XMLSiteplan).find('on_hold_text').text();

  uniqueavailabilityOpts[0] = buildable_text;
  uniqueavailabilityOpts[1] = move_in_text_comm;
  uniqueavailabilityOpts[2] = sold_text;
  uniqueavailabilityOpts[3] = hold_text;

  if (parseInt(display_prices_node.text()) == 1) {
    display_prices_siteplan = true;
  }
  // aqui
  var phases = jQuery(XMLSiteplan).find('phase');
  let phaseId;

  if (phases.length > 1) {
    let content = '<select onChange="changePhase(this.value)" name="phases" id="phasesSelect">';
    phases.each(function () {
      var name = jQuery(this).find('name');
      console.log(name.text());
      content += `<option value="${jQuery(this).attr('phase_id')}">${name.text()}</option>`
    });
    content += '</select>';
    phasesBox.html(content);
    phaseId = jQuery('#phasesSelect').val();
  } else {
    jQuery(".legendLine").css('display', 'none');
    phasesBox.css('display', 'none');
    phasesBox.prev().css('display', 'none');
    phases.each(function () {
      phaseId = jQuery(this).attr('phase_id');
    })
  }
  changePhase(phaseId);


}


var pzObj_siteplan;
// console.log("________________222");
function visibleZoom() {
  jQuery("#zoomInOutContainer").css("display", "block");
}

function zoomInSiteplan() {
  console.log("zoom in 4");
  //sitePlanImg.pinchzoomer({maxZoom:3, scaleMode:"smart"});
  pzObj_siteplan = PinchZoomer.get("sitePlanImg");
  pzObj_siteplan.zoomIn(0.3);
}
function zoomOutSiteplan() {
  console.log("zoom out 4");
  //sitePlanImg.pinchzoomer({maxZoom:3, scaleMode:"smart"});
  pzObj_siteplan = PinchZoomer.get("sitePlanImg");
  pzObj_siteplan.zoomOut(0.3);
}


var curHousesArray = [];



function lotCurHousesArray() {
  curHousesArray = [];
  allPoints.find(".lotPoint").each(function () {
    var related = jQuery(this).attr("data-related");
    var arr = related.split(",");
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] != "") {
        let homeID = arr[i];
        if (!curHousesArray.includes(homeID)) {
          curHousesArray.push(arr[i]);
        }
      }
    }

  });


}
function changePhase(phaseId) {
  closeHouseDetail();
  closeLotGallery();



  let newPhase = jQuery(XMLSiteplan).find('phase');
  jQuery('#phasesSelect').val(phaseId);

  newPhase.each(function () {
    if (jQuery(this).attr('phase_id') == phaseId) {
      //image
      let newImg = jQuery(this).find('phaseImg');
      loadImageSiteplan(newImg);

      //lots
      let Lots = jQuery(this).find('lots').find('Lot');
      var catArray = loadLotsSiteplan(Lots, phaseId)


      //Legend Info
      let Legend = jQuery(this).find('legend');
      var LegendTitle = Legend.find('title').text();
      let LegendItems = Legend.find('item');
      loadLegendSiteplan(LegendItems, LegendTitle, catArray);

      //Availability


      let lotAvailability = jQuery(this).find('lots').find('Lot');
      loadAvailabilitySiteplan(lotAvailability, phaseId);

      //loadGalleryHouses

    }
  });

}

function loadImageSiteplan($image) {
  allPoints.css({ "opacity": 0 });
  sitePlanImg.animate({ "opacity": 0 }, 50, function () {
    sitePlanLocateImg.attr('src', $image.text());
    sitePlanLocateImg.on('load', function () {
      allPoints.animate({ "opacity": 1 }, 450, function () {
        sitePlanImg.animate({ "opacity": 1 }, 250);
      });
      resizeSiteplan();
    });
  })
}

var hasHold = false;
var hasBuildable = false;
var hasQuick = false;
var hasSold = false;

function loadLotsSiteplan($array, phaseId) {
  var lotName;
  var phasePosX, phasePosY;
  var catArray = [];

  allPoints.html('');
  if (phaseId == 0) {
    var phases = jQuery(XMLSiteplan).find('phase');
    phases.each(function () {
      phasePosX = jQuery(this).find('phasePosX');
      phasePosY = jQuery(this).find('phasePosY');

      phasePosX = phasePosX.text();
      phasePosY = phasePosY.text();

      if (phasePosX != '' || phasePosY != '') {
        let name = jQuery(this).find('name');
        let content = `<div onClick="changePhase(${jQuery(this).attr('phase_id')})" class="phasePoint" style="top:${phasePosY}%; left:${phasePosX}%;"><span class="phasePointer">${name.text()}</span></div>`
        allPoints.append(content);
        curHousesArray = [];
      }
    });
  } else {
    hasHold = false;
    hasBuildable = false;
    hasQuick = false;
    hasSold = false;

    $array.each(function () {
      let state = jQuery(this).attr('lot_ava');
      let cat = jQuery(this).find('Lot_area').text();
      let homeId;
      let lotPosX = jQuery(this).find('posX').text();
      let lotPosY = jQuery(this).find('posY').text();
      let availability = jQuery(this).find('availability').text();
      let isModelHome = jQuery(this).find('isModelHome').text();
      let color_point = jQuery(this).find('color_point').text();
      let size_point = jQuery(this).find('size_point').text();
      let stage = jQuery(this).find('stage').text();
      let lotId = jQuery(this).attr('lot_id');
      let houses = jQuery(this).find('houses');
      let eachHouse = jQuery(houses).find("house");

      if (catArray.indexOf(cat) === -1) {
        catArray.push(cat);
      }

      lotName = jQuery(this).find('Lot_name').text();
      homeId = jQuery(this).find('houses').find('house').attr('house_id');
      var actionOnClick = "";
      var classOnClick = "hasPointer";
      var relatedHomes = "";

      if (eachHouse.length == 0) {
        actionOnClick = "closeHouseDetail(); closeLotGallery();";
        classOnClick = "noPointer";
        relatedHomes = ",";
      } else if ((eachHouse.length == 1) && (color_point == "blue")) {
        actionOnClick = "openHouseDetailSiteplan('" + homeId + "','" + lotId + "');";

        jQuery(eachHouse).each(function () {
          relatedHomes += jQuery(this).attr("house_id") + ",";
        });

      } else {
        actionOnClick = "openLotGallery('" + lotName + "','" + lotId + "');";

        jQuery(eachHouse).each(function () {
          relatedHomes += jQuery(this).attr("house_id") + ",";
        });
      }
      if ((color_point == "red") || (color_point == "yellow") || (color_point == "black")) {
        actionOnClick = "closeHouseDetail(); closeLotGallery();";
        classOnClick = "noPointer";

        relatedHomes = ",";
      }

      if (color_point == "black") {
        hasHold = true;
      }

      if (color_point == "green" && stage !== 'Model') {
        hasBuildable = true;
      }

      if (color_point == "blue") {
        hasQuick = true;
      }

      if (color_point == "red") {
        hasSold = true;
      }

      let content = `<div data-lotid="${lotId}" data-name="${lotName}" data-related="${relatedHomes}" onClick="${actionOnClick}" 
      class="lotPoint ${availability == 'Active' ? 'available' : 'sold'} dot-${color_point} dot-${size_point} dot-${classOnClick} ${isModelHome == '1' ? 'modelHome' : ''}" style="top:${lotPosY}%; left:${lotPosX}%;"></div>`;
      allPoints.append(content);
      lotCurHousesArray();
    });
  }


  return catArray;
}

function loadLegendSiteplan($array, title, catArray) {
  var htmlLegend = ''
  htmlLegend += `<h2 class="legendTitles upp">${title}<span class="legendsChevron" onclick="openLegendMobile()"></span> </h2>`;
  htmlLegend += `<div class="legendCategoryContainer">`;
  $array.each(function (index) {
    let icon = jQuery(this).find('itemIcon').text();
    let name = jQuery(this).find('itemName').text();
    let color = jQuery(this).find('itemColor').text();
    let addedClass = "";

    if (!catArray.includes(name)) {
      addedClass = "inv";
    }
    if (index == 0) {
      htmlLegend += `<a class="categoryContSite active" id="modelHome">
                            <div class="selectCateSite icon"></div>
                            <div class="nameCateSite upp">${name}</div>
                          </a>`
    } else {
      htmlLegend += `<a class="categoryContSite active ${addedClass}" style="display:${catsAddedDisplay}">
                            <div class="selectCateSite ${icon != '' ? 'icon' : ''}" style="${color != '' ? 'background-color:' + color : 'background-image: url(' + icon + ')'}"></div>
                            <div class="nameCateSite upp">${name}</div>
                          </a>`
    }
  });
  htmlLegend += `</div>`;

  legendDesktop.html(htmlLegend);
}

function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
}

//console.log("_____________________ 1234");

function loadAvailabilitySiteplan($array, phaseId) {

  /*
  var availabilityOpts = [];
  let uniqueavailabilityOpts;
  $array.each(function(){
    if(phaseId != 0){
      let availability = jQuery(this).find('availability').text();
      availabilityOpts.push(availability);
    }
  });
  uniqueavailabilityOpts = availabilityOpts.filter(onlyUnique);

  if(phaseId != 0){
    let availabilityhtml = `<div class="legendLine"></div>
    <h2 class="legendTitles upp">Availability</h2>`
    jQuery(uniqueavailabilityOpts).each(function(index, el){
      availabilityhtml += `<a class="categoryContSite" id="homeAvailable">
      <div class="selectCateSite availability ${el == 'Active' ? 'available' : 'sold' }"></div>
      <div class="nameCateSite regular upp">${el == 'Active' ? 'available': 'sold' }</div>
      </a>`
    });
    availabilityDesktop.html(availabilityhtml);
  }else{
    let availabilityhtml = ''
    availabilityDesktop.html(availabilityhtml);
  }*/













  if (phaseId != 0) {
    let availabilityhtml = '<div class="legendLine"></div>';
    availabilityhtml += '<h2 class="legendTitles upp">Availability</h2>';
    jQuery(uniqueavailabilityOpts).each(function (index, el) {
      availabilityhtml += '<a class="categoryContSite" id="homeAvailable-' + uniqueavailabilityOptsVars[index] + '">';
      availabilityhtml += '<div class="selectCateSite availability ' + uniqueavailabilityOptsVars[index] + '"></div>';
      availabilityhtml += '<div class="nameCateSite nameCateSiteAvailability regular upp">' + uniqueavailabilityOpts[index] + '</div>';
      availabilityhtml += '</a>';
    });
    availabilityDesktop.html(availabilityhtml);
  } else {
    let availabilityhtml = ''
    availabilityDesktop.html(availabilityhtml);
  }

  if (hasHold) {
    jQuery("#homeAvailable-hold").css("display", "block");
  } else {
    jQuery("#homeAvailable-hold").css("display", "none");
  }
  if (hasBuildable) {
    jQuery("#homeAvailable-available").css("display", "block");
  } else {
    jQuery("#homeAvailable-available").css("display", "none");
  }
  if (hasQuick) {
    jQuery("#homeAvailable-mooveinready").css("display", "block");
  } else {
    jQuery("#homeAvailable-mooveinready").css("display", "none");
  }
  if (hasSold) {
    jQuery("#homeAvailable-sold").css("display", "block");
  } else {
    jQuery("#homeAvailable-sold").css("display", "none");
  }



}
var currentHouses, currentPhase, currentLot;

function openLotGallery(name, lotID) {
  housesGallTitle.html(`AVAILABLE FOR LOT ${name}`);
  currentLot = name;
  let phases = jQuery(XMLSiteplan).find('phase');
  let phaseId;
  if (phases.length > 1) {
    phaseId = jQuery('#phasesSelect').val();
  }
  else {
    phases.each(function () {
      phaseId = jQuery(this).attr('phase_id');
    })
  }
  //loadHomes
  closeHouseDetail();
  closeLotGallery();
  setTimeout(function () {
    phases.each(function () {
      if (jQuery(this).attr('phase_id') == phaseId) {
        currentPhase = jQuery(this).find('name').text();
        let lot = jQuery(this).find('lots').find('Lot');
        lot.each(function () {
          let nameLot = jQuery(this).find('Lot_name');
          let idLot = jQuery(this).attr('lot_id');
          if (nameLot.text() == name && idLot == lotID) {
            let houses = jQuery(this).find('houses').find('house');


            currentHouses = houses;
            houses.each(function () {
              let houseURL = jQuery(this).find('houseURL').text();

              let idHome = jQuery(this).attr('house_id');

              let strLaunch = 'onClick="launchUnit(\'' + idHome + '\');"';

              let price = jQuery(this).find('housePrice').text();

              let garageCont = jQuery(this).find('houseGarages').text();
              let html = '';

              if (isWeb) {
                html += `<a target="_blank" href="${houseURL}" class="floorContSiteplan">`;
              } else {
                html += `<a href="javascript:void(0)" ` + strLaunch + ` class="floorContSiteplan">`;
              }
              var itemsPrice = 1;
              if ((price != 0) && (display_prices_siteplan)) {
                itemsPrice++;
              }
              var nameH = jQuery(this).find('houseName').text();
              html += `<div class="floorImg">
                  <img src="${jQuery(this).find('houseImg').text()}" class="floorImgInner">
                </div>
                <div class="floorAme">
                  <h4 class="floorTitleSiteplan ">${nameH.replace(" | ", "<br>")}</h4>

					<div  class="contInfoCard" style="--items: ${itemsPrice}">`;

              if ((price != 0) && (display_prices_siteplan)) {
                html += `<div class="priceMgn">
									<h4 class="houseCat upp">Price</h4>
									<h4 class="floorTitleSiteplan">$ ${formatSiteplan(jQuery(this).find('housePrice').text())}</h4>
								</div>`;
              }

              html += `<div class="priceMgn">
								<h4 class="houseCat upp">sq.ft.</h4>
								<h4 class="floorTitleSiteplan sizeClass">${formatSiteplan(jQuery(this).find('houseSize').text())}</h4>
							  </div>

					</div>`;
              var itemsCount = 2;
              if (garageCont > 0) {
                itemsCount += 1;
              }
              var hasHalf = false;
              if (jQuery(this).find('bathrooms_half').text() != '' && jQuery(this).find('bathrooms_half').text() != 0) {
                hasHalf = true;
                itemsCount += 1;
              }

              html += `<div class="houseLineSiteplan"></div>
					<div class="contInfoCard" style="--items: ${itemsCount}">
						<div class="floorIconMin houselineVer snack">
							<h4 class="houseCat upp">BEDS</h4>
							<h4 class="houseCat">${jQuery(this).find('houseBeds').text()}</h4>
						  </div>
						  <div class="floorIconMin houselineVer snack ">
							<h4 class="houseCat upp">BATHS</h4>
							<h4 class="houseCat">${jQuery(this).find('bathrooms_single').text()}</h4>
						  </div>
						  <div class="floorIconMin houselineVer snack " style="display:${hasHalf ? 'block' : 'none'}">
							<h4 class="houseCat upp">HALF&nbsp;BATHS</h4>
							<h4 class="houseCat">${jQuery(this).find('bathrooms_half').text()}</h4>
						  </div>
						  <div class="floorIconMin houselineVer snack" style="display:${garageCont == 0 ? 'none' : 'block'}">
							<h4 class="houseCat upp">GARAGES</h4>
							<h4 class="houseCat">${jQuery(this).find('houseGarages').text()}</h4>
						  </div>
						</div>
                </div>
              </a>`;
              housesBoxFull.append(html);
            })
            makeGallerySiteplan();
            housesBox.addClass('active');
          }
        });
      }
    });
  }, 300);
}

var housesImgArr;

function openHouseDetailSiteplan(idHouse, lotID) {
  houseDetailbox.html('');
  closeHouseDetail();
  closeLotGallery();

  let phases = jQuery(XMLSiteplan).find('phase');
  if (phases.length > 1) {
    phaseId = jQuery('#phasesSelect').val();
  }
  else {
    phases.each(function () {
      phaseId = jQuery(this).attr('phase_id');
    })
  }






  setTimeout(function () {
    console.log("_______ open 2");
    phases.each(function () {
      currentPhase = jQuery(this).find('name').text();
      let lot = jQuery(this).find('lots').find('Lot');
      lot.each(function () {
        if (jQuery(this).attr('lot_id') == lotID) {
          currentLot = jQuery(this).find('Lot_name').text();
          let house = jQuery(this).find('houses').find('house');
          house.each(function () {
            if (jQuery(this).attr('house_id') == idHouse) {
              let garageCont = jQuery(this).find('houseGarages').text();
              let price = jQuery(this).find('housePrice').text();
              let houseURL = jQuery(this).find('houseURL').text();
              let move_ready_text = jQuery(this).find('move_ready_text').text();
              let move_ready_color = jQuery(this).find('move_ready_color').text();
              let collection = jQuery(this).find('houseCollection').text();
              //let move_ready_text = "Ready in November 2021";
              //let move_ready_color = "Orange";
              housesImgArr = jQuery(this).find('houseGallery').find('houseGalImg');
              let hasGallery = false;

              if (housesImgArr.length > 0) {
                hasGallery = true;
              }

              let htmlDetails = `<div class="closeLotGallery" onclick="closeHouseDetail()">
              <span class="closeLineSiteplan"></span>
              <span class="closeLineSiteplan second"></span>
            </div>
        
            <div id="houseDetailLeft" class="hasGallery-${hasGallery}">`;

              if ((move_ready_text) && (move_ready_text != "")) {
                htmlDetails += `<div class="houseMoveInContentSP houseMoveInContent-${move_ready_color}">${move_ready_text}</div>`;
              }

              htmlDetails += `<div id="detailImgLeft" style="background-image: url(${jQuery(this).find('houseImg').text()})" class="detailsImg">
				</div>`;

              if (hasGallery) {
                htmlDetails += `<div id="detailImgRight" style="background-image: url(${jQuery(housesImgArr[0]).text()})" class="detailsImg"></div>
              <div id="detailImgRight2" style="background-image: url(${jQuery(housesImgArr[1]).text()})" class="detailsImg"></div>`;
              }
              var nameH = jQuery(this).find('houseName').text();
              htmlDetails += `</div>
        
            <div id="houseDetailRight">
              <div class="outerSiteplan">
                <div class="middle">
                  <div class="nameCardMvr">${nameH.replace(" | ", "<br>")}</div>
                  <div class="secTextCardMvr">${collection}</div>
                  <div class="thirdTextCardMvr misRight" style="display: ${jQuery(this).find('houseMls').text() == '' ? 'none' : 'inline-block'}">MLS# ${jQuery(this).find('houseMls').text()}</div>`;
              //                  <h2 class="detailAdress upp">${nameH.replace(" | ","<br>")}</h2>`;

              if ((price != 0) && (display_prices_siteplan)) {
                let oldPrice = jQuery(this).find('houseOldPrice').text();
                htmlDetails += `<div class="contSecCardMvr">
                                        <div class="contPriceCardMvr">
											${oldPrice != 0 ? '<div class="oldPriceCardMvr">$ ' + formatSiteplan(oldPrice) + '</div>' : ''}
                                            <div class="priceCardMvr${oldPrice != 0 ? '' : ' NotPreviusPrice'}">$ ${formatSiteplan(jQuery(this).find('housePrice').text())}</div>
                                        </div>
                                      </div>`;
                //					  htmlDetails += `<h2 class="detailsPrice">$ ${formatSiteplan(jQuery(this).find('housePrice').text())}</h2>`;
              }

              var counColumns = 0;
              var hBeds = jQuery(this).find('houseBeds').text();
              var hashBeds = false;
              var hBaths = jQuery(this).find('bathrooms_single').text();
              var hashBaths = false;
              var hBathsHalf = jQuery(this).find('bathrooms_half').text();
              var hashBathsHalf = false;
              var hGarage = jQuery(this).find('houseGarages').text();
              var hashGarage = false;
              var hSize = jQuery(this).find('houseSize').text();
              var hashSize = false;
              if (hBeds != undefined && hBeds != '' && hBeds != 0) {
                hashBeds = true;
                counColumns++;
              }
              if (hBaths != undefined && hBaths != '' && hBaths != 0) {
                hashBaths = true;
                counColumns++;
              }
              if (hBathsHalf != undefined && hBathsHalf != '' && hBathsHalf != 0) {
                hashBathsHalf = true;
                counColumns++;
              }
              if (hGarage != undefined && hGarage != '' && hGarage != 0) {
                hashGarage = true;
                counColumns++;
              }
              if (hSize != undefined && hSize != '' && hSize != 0) {
                hashSize = true;
                counColumns++;
              }

              //                  htmlDetails += `<div class="detailPhaseBox">
              //                    <h3 class="detailsPhaseLot">${currentPhase} - ${currentLot}</h3>
              //                    <h3 class="detailsSerial upp" style="display: ${jQuery(this).find('houseMls').text() == '' ? 'none' : 'block'}">Mls <br>${jQuery(this).find('houseMls').text()}</h3>
              //                  </div><div class="detailsLine"></div>
              //                  <div class="contInfoCard" style="--items:${counColumns}">
              //                  <div class="detailslineVer" style="display: ${hashBeds ? 'block' : 'none'}">
              //                    <h4 class="detailsCat upp">Beds</h4>
              //                    <h4 class="detailsCat">${hBeds}</h4>
              //                  </div>
              //                  <div class="detailslineVer" style="display: ${hashBaths ? 'block' : 'none'}">
              //                    <h4 class="detailsCat upp">Baths</h4>
              //                    <h4 class="detailsCat">${hBaths}</h4>
              //                  </div>
              //                  <div class="detailslineVer" style="display: ${hashBathsHalf ? 'block' : 'none'}">
              //                    <h4 class="detailsCat upp">Half Baths</h4>
              //                    <h4 class="detailsCat">${hBathsHalf}</h4>
              //                  </div>
              //                  <div class="detailslineVer" style="display: ${hashGarage ? 'block' : 'none'}">
              //                    <h4 class="detailsCat upp">Garages</h4>
              //                    <h4 class="detailsCat">${hGarage}</h4>
              //                  </div>
              //                  <div class="detailslineVer last" style="display: ${hashSize ? 'block' : 'none'}">
              //                    <h4 class="detailsCat upp">sq.ft</h4>
              //                    <h4 class="detailsCat">${formatSiteplan(hSize)}</h4>
              //                  </div>
              //                </div>`;
              htmlDetails += `<div class="contThdCardMvr" style="--items: ${counColumns}">
                                    <div class="itemCardMvr" style="display: ${hashBeds ? 'block' : 'none'}">
                                        <div class="nameItemCardMvr">BEDS</div>
                                        <div class="descItemCardMvr">${hBeds}</div>
                                    </div>
                                    <div class="itemCardMvr" style="display: ${hashBaths ? 'block' : 'none'}">
                                        <div class="nameItemCardMvr">BATHS</div>
                                        <div class="descItemCardMvr">${hBaths}</div>
                                    </div>        
                                    <div class="itemCardMvr" style="display: ${hashBathsHalf ? 'block' : 'none'}">
                                        <div class="nameItemCardMvr">HALF&nbsp;BATHS</div>
                                        <div class="descItemCardMvr">${hBathsHalf}</div>
                                    </div>
                                    <div class="itemCardMvr" style="display: ${hashGarage ? 'block' : 'none'}">
                                        <div class="nameItemCardMvr">GARAGES</div>
                                        <div class="descItemCardMvr">${hGarage}</div>
                                    </div>
                                    <div class="itemCardMvr" style="display: ${hashSize ? 'block' : 'none'}">
                                        <div class="nameItemCardMvr">SQ.FT.</div>
                                        <div class="descItemCardMvr">${formatSiteplan(hSize)}</div>
                                    </div>
                                </div>              
                  <div id="detailsBtnBox" ${houseURL == "" || houseURL == undefined ? `class="noBtn"` : ``}">
                    <div class="detailsBtn upp" id="viewBtn">`;


              if (isWeb) {
                if (houseURL !== "" && houseURL !== undefined) {
                  htmlDetails += `<a target="_blank" href="${houseURL}" class="aniTran">View details</a>`;
                  htmlDetails += `<a target="_blank" href="${houseURL}" class="aniTran mobile">Details</a>`;
                }

              } else {
                if (houseURL !== "" && houseURL !== undefined) {
                  htmlDetails += `<a href="javascript:void(0)" onclick="launchUnit('${idHouse}')" class="aniTran">View details</a>`;
                  htmlDetails += `<a href="javascript:void(0)" onclick="launchUnit('${idHouse}')" class="aniTran mobile">Details</a>`;
                }
              }





              htmlDetails += `</div>
                    
                  </div>
                </div>
              </div>
              
            </div>`
              houseDetailbox.html(htmlDetails);
              houseDetailbox.addClass('active');
            }
          });
        }
      });
    });
  }, 300);
}
/*
<div class="detailsBtn upp" id="requestBtn">
                      <a href="javascript:void(0)">Request info</a>
                    </div>
*/
function makeGallerySiteplan() {
  /*housesBoxFull.slick({
    infinite: true,
    slidesToShow: 5,
    swipeToSlide: true 
  });*/

  housesBoxFull.slick({
    infinite: true,
    slidesToShow: 5,
    swipeToSlide: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });

}

function closeLotGallery() {

  housesBoxFull.hasClass('slick-initialized') ? housesBoxFull.slick('unslick') : '';
  housesBoxFull.html('');
  housesBox.removeClass('active');
}

function closeHouseDetail() {
  houseDetailbox.removeClass('active');
}









function locateImageOn(_imageObject, _container, _locateType, _animated, _isRecursive) {
  //_imageObject -> obj jquery de la imagen
  //_container -> obj jquery del papa en donde lo quiere centrar
  //_locateType = "img es contain o bg es cover"


  if (typeof _isRecursive === 'undefined') {
    _isRecursive = false;
  }


  if (typeof _imageObject === 'undefined') {

  } else {
    if (_isRecursive != true) {
    //   console.log("actually doing Locate Image On");
      var _containerWidth, _containerHeight, _imageRealHeight, _imageRealWidth, _imageRatio, _containerRatio, _ratio, _imageHeight, _imageWidth, _imageTop, _imageLeft


      _containerWidth = _container.width();
      _containerHeight = _container.height();

      if (typeof _imageObject.attr("src") !== 'undefined') {
        var theImage = new Image();
        theImage.src = _imageObject.attr("src");

        _imageRealWidth = theImage.width;
        _imageRealHeight = theImage.height;
      } else {
        _imageRealWidth = _imageObject.width();
        _imageRealHeight = _imageObject.height();
      }

      _imageRatio = _imageRealHeight / _imageRealWidth;
      _containerRatio = _containerHeight / _containerWidth;


      /*_imageRealHeight = _imageObject.height();
      _imageRealWidth = _imageObject.width();*/

      _imageRatio = _imageRealHeight / _imageRealWidth;
      _containerRatio = _containerHeight / _containerWidth;
      if ((_imageRealHeight == 0) || (_imageRealWidth == 0)) {
        /*_imageObject.css("opacity",0).load(function(e) {
        locateImageOn(jQuery(this), _container, _locateType, _animated)
        jQuery(this).clearQueue().animate({opacity:1}, 300);
        });*/

        _imageObject.css("opacity", 0).on('load', function () {
          locateImageOn(jQuery(this), _container, _locateType, _animated, true)
          jQuery(this).clearQueue().animate({
            opacity: 1
          }, 300);
        }).each(function () {
          if (this.complete) jQuery(this).load();
        });

        _imageHeight = "auto";
        _imageWidth = "auto";
        _animated = false
        _ratio = 1;
        _imageTop = 0;
        _imageLeft = 0;
      } else {
        if (_locateType == "bg") {
          if (_imageRatio < _containerRatio) {
            _imageHeight = _containerHeight;
            _ratio = _containerHeight / _imageRealHeight;
            _imageWidth = _imageRealWidth * _ratio;
          } else {
            _imageWidth = _containerWidth;
            _ratio = _containerWidth / _imageRealWidth;
            _imageHeight = _imageRealHeight * _ratio;
          }

          _imageTop = (_containerHeight - _imageHeight) * 0.5;
          _imageLeft = (_containerWidth - _imageWidth) * 0.5;
        } else if (_locateType == "img") {
          if (_imageRatio > _containerRatio) {
            _imageHeight = _containerHeight;
            _ratio = _containerHeight / _imageRealHeight;
            _imageWidth = _imageRealWidth * _ratio;
          } else {
            _imageWidth = _containerWidth;
            _ratio = _containerWidth / _imageRealWidth;
            _imageHeight = _imageRealHeight * _ratio;
          }

          _imageTop = (_containerHeight - _imageHeight) * 0.5;
          _imageLeft = (_containerWidth - _imageWidth) * 0.5;
        } else if (_locateType == "bottom") {
          if (_imageRatio < _containerRatio) {
            _imageHeight = _containerHeight;
            _ratio = _containerHeight / _imageRealHeight;
            _imageWidth = _imageRealWidth * _ratio;
          } else {
            _imageWidth = _containerWidth;
            _ratio = _containerWidth / _imageRealWidth;
            _imageHeight = _imageRealHeight * _ratio;
          }

          _imageTop = (_containerHeight - _imageHeight);
          _imageLeft = (_containerWidth - _imageWidth) * 0.5;
        } else if (_locateType == "top") {
          if (_imageRatio < _containerRatio) {
            _imageHeight = _containerHeight;
            _ratio = _containerHeight / _imageRealHeight;
            _imageWidth = _imageRealWidth * _ratio;
          } else {
            _imageWidth = _containerWidth;
            _ratio = _containerWidth / _imageRealWidth;
            _imageHeight = _imageRealHeight * _ratio;
          }

          _imageTop = 0;
          _imageLeft = (_containerWidth - _imageWidth) * 0.5;
        } else {

          if (_imageRatio > _containerRatio) {
            _imageHeight = _containerHeight;
            _ratio = _containerHeight / _imageRealHeight;
            _imageWidth = _imageRealWidth * _ratio;
          } else {
            _imageWidth = _containerWidth;
            _ratio = _containerWidth / _imageRealWidth;
            _imageHeight = _imageRealHeight * _ratio;
          }

          _imageTop = (_containerHeight - _imageHeight) * 0.5;
          _imageLeft = (_containerWidth - _imageWidth) * 0.5;

        }
      }
      if (_animated) {
        _imageObject.clearQueue().animate({
          width: _imageWidth,
          height: _imageHeight,
          top: _imageTop,
          left: _imageLeft
        }, 400);
      } else {
        _imageObject.width(_imageWidth).height(_imageHeight).css({
          "top": _imageTop,
          "left": _imageLeft
        });

        /* jQuery("#masterPlanPhases").width(_imageWidth).height(_imageHeight).css({
          "top": _imageTop,
          "left": _imageLeft
        }); */

      }
    }
  }
}

function locateContainerOn(_image, _container) {

  let imgWidth = _image.width();
  let imgHeight = _image.height();
  let imgLeft = _image.css("left");
  let imgTop = _image.css("top");

  _container.width(imgWidth);
  _container.height(imgHeight);
  _container.css("left", imgLeft);
  _container.css("top", imgTop);

}

function openLegendMobile() {
  if (jQuery('#availabilityDesktop').hasClass('active')) {
    jQuery('.legendCategoryContainer').removeClass('active');
    jQuery('#availabilityDesktop').removeClass('active');
    jQuery('.legendsChevron').removeClass('active');
  } else {
    jQuery('.legendCategoryContainer').addClass('active');
    jQuery('#availabilityDesktop').addClass('active');
    jQuery('.legendsChevron').addClass('active');
  }
}
jQuery(document).on('ready', function () {
  createVarsSiteplan();

  // loadSiteplanXML();


});