(function() {
    function floorPlanOption() {
        var self = this;
        self.name = ko.observable();
        self.isDefault = ko.observable(false);
        self.selected = ko.observable(false);
        self.elementID = ko.observable();

        self.isSelected = ko.computed(function(){

            if(self.selected()){

                document.getElementById(self.elementID()).style.display = "block";
            }else {
                document.getElementById(self.elementID()).style.display = "none";
            }

        });
    }

    function floorPlanOptionGroup() {
        var self = this;
        self.name = ko.observable();
        self.options = ko.observableArray();
        self.selectedOption = ko.observable();
        self.defaultOption = ko.observable();
        self.setSelectedOption = function(){
            ko.utils.arrayForEach(self.options(), function(option) {
                option().selected(false);
            });
            this.selected(true);
        }
    }

    function FloorPlan(data){
        var self = this;
        var floorPlanMapping = {

        };
        ko.mapping.fromJS(data, floorPlanMapping, self);
        self.floorPlanFile = ko.observable();
        self.optionGroups = ko.observableArray();
        self.rawSVG = ko.observable();
        if(self.svgFloorplanFileUrl() != false && self.svgFloorplanFileUrl() != null){
            // $.get(self.svgFloorplanFileUrl() )
            // .done(function( returnFile ) {
            //     self.rawSVG(returnFile.documentElement);
            //     returnFile = new XMLSerializer().serializeToString(returnFile.documentElement);
            //     self.floorPlanFile(returnFile);
            //     $(returnFile).find('#Options').children().each(function( index ) {
            //         // create new option group
            //         var optionGroup = ko.observable(new floorPlanOptionGroup());
            //         var groupName = $(this).data("name");
            //         optionGroup().name(groupName);
            //         $(this).children().each(function( index ) {
            //             var dataName = $(this).data("name");
            //             var elemID = $(this).attr('id');
            //             if(dataName != 'OptionIcon' && dataName != undefined){
            //                 // create new options
            //                 var option = ko.observable(new floorPlanOption());
            //                 // find out if its the default option
            //                 option().elementID(elemID);
            //                 reg = /default/i;
            //                 if(reg.test(dataName)){
            //                     option().isDefault(true);
            //                     option().selected(true);
            //                     optionGroup().selectedOption(option);
            //                     dataName = dataName.replace(/default/ig, "");
            //                 }
            //                 // remove default from name and add it to option
            //                 option().name(dataName);
            //                 optionGroup().options().push(option);

            //             }
            //         });
            //         self.optionGroups().push(optionGroup());
            //         // $(this).find(".OptionIcon" ).append('<ul data-bind="foreach:optionGroup().options()"><li data-bind="text: name"></li></ul>');
            //     });

            // });

        }
        self.creatingPDF = ko.observable(false);
        self.downloadPDF = function(){
            // self.creatingPDF(true);
            // // window.jsPDF = require('jspdf');
            // svg = $("#floorPlanFile svg")[0];
            // svg_to_pdf(svg, function (pdf) {
            //     download_pdf(self.name(), pdf.output('dataurlstring'));
            //     self.creatingPDF(false);
            // });
        }

        self.nameClass = ko.computed(function(){
            let n = self.name();
            nameClass = n.replace(/\s/g, '_')
            return nameClass;
        });

        self.numberWithCommas = function(x) {
            x=x.toString().replace('$', "");
            x=x.toString().replace('sqft', "");
            x=x.toString().replace('SQFT', "");
            x=x.toString().replace('sq.ft.', "");
            x=x.toString().replace('SQ.FT.', "");
            x=x.toString().replace(",", ",");
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        self.sqftFormatted = ko.computed(function(){
            formatSqft = self.sqft();
            return self.numberWithCommas(formatSqft);
        });
    }






    function Status(data){
        var self = this;
        var statusMapping = {
        };
        ko.mapping.fromJS(data, statusMapping, self);
    }



    function Lot(data, statuses){
        var self = this;
        var lotMapping = {
            'floorplan': {
                create: function(options) {
                    if(options.data != null){
                        return ko.observable(new FloorPlan(options.data));
                    }
                    else {
                        return ko.observable(null)
                    }

                }
            }
        };
        ko.mapping.fromJS(data, lotMapping, self);
        self.hasFloorPlan = ko.computed(function(){
            return (self.floorplan_id() != null?true:false);
        })
        // Set status to inactive if null
        if(self.status_id() == null){
            self.status_id(5)
        }

        self.statuses = statuses;

        self.numberWithCommas = function(x) {
            x=x.toString().replace('$', "");
            x=x.toString().replace(",", ",");
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        self.priceFormatted = ko.computed(function(){
            if(self.price() == 'tbd' || self.price() == 'TBD') {
                return 'TBD';
            }
            else if(self.price() == '0' || self.price() == '$0'){
                return 'TBD';
            }
            else {
                formatPrice = self.price();
                if(self.price() == 'TBD'){
                    return 'TBD'
                }
                else {
                    return '$'+self.numberWithCommas(formatPrice);
                }
            }
        });

        self.setStatus = ko.computed(function() {
            var search = self.status_id();
            return ko.utils.arrayFirst(self.statuses(), function(status) {
                return status().id() == self.status_id();
            });

        }, self);

        self.status = ko.computed(function(){
            return self.setStatus()().name();
        });

        self.statusClass = ko.computed(function(){
            let s = self.status();
            statusClass = s.replace(/\s/g, '_')
            return statusClass;
        });

        // SET JS ON LOT

        theLot =  document.getElementById('Lot_'+self.lotNumber());

        if(theLot == null){
            theLot = document.getElementById('Lot_'+self.lotNumber()+'_1_');
        }
        if(theLot!= null){
            theLot.setAttribute("data-lot-number", self.lotNumber());
            theLot.setAttribute("data-toggle","modal");
            theLot.setAttribute("data-target","#exampleModal");
            theLot.setAttribute("data-has-floor-plan",self.hasFloorPlan());

            theLot.classList.add(self.statusClass());
            theLot.classList.add(self.customClasses());
            // ADD FLOORPLAN CLASS
            if(self.hasFloorPlan()){
                theLot.classList.add('hasFloorPlan');
            }
            else {
                theLot.classList.add('noFloorPlan');
            }
        }

        self.showFloorplan = ko.observable(false);
        self.showSlideshow = ko.observable(true);
        self.showContactForm= ko.observable(false);


        self.setShowSlideshow = function(){
            self.showContactForm(false);
            self.showFloorplan(false);
            self.showSlideshow(true);
        }

        self.setShowFloorplan = function(){
            self.showContactForm(false);
            self.showSlideshow(false);
            self.showFloorplan(true);
        }


        self.setShowContactForm = function(){
            self.showSlideshow(false);
            self.showFloorplan(false);
            self.showContactForm(true);
        }
        // $('#lotPopup').on('hidden.bs.modal', function (e) {
        //     self.showContactForm(false);
        //     self.showFloorplan(false);
        //     self.showSlideshow(true);

        // })

    }


    /*
    Sitemap JS
    */


    function SiteMap(data){

        var self = this;
        var communityMapping = {

            'statuses': {
                create: function(options) {
                    return ko.observable(new Status(options.data));
                }
            },
            'homes': {
                create: function(options) {
                    return ko.observable(new Lot(options.data, self.statuses));
                }
            }
        };
        self.floorplanLots = ko.observableArray(); // SET FLOORPLAN LOTS TO ARRAY BEFORE MAPPING
        ko.mapping.fromJS(data, communityMapping, self);
        // self.setSelectedOption = function(){
        //     self.selectedOptionGroupName($(this).parent().data("name"));
        //     self.showOptionsPopup(true);
        // }
        self.setSiteMapOptions = function(){

            // $('#Options').children().each(function( index ) {
            //     // create new option group
            //     var optionGroup = ko.observable(new floorPlanOptionGroup());
            //     var groupName = $(this).data("name");
            //     optionGroup().name(groupName);
            //     $(this).children().each(function( index ) {
            //         var dataName = $(this).data("name");
            //         var elemID = $(this).attr('id');
            //         if(dataName != 'OptionIcon' && dataName != undefined){
            //             // create new options
            //             var option = ko.observable(new floorPlanOption());
            //             // find out if its the default option
            //             option().elementID(elemID);
            //             reg = /default/i;
            //             if(reg.test(dataName)){
            //                 option().isDefault(true);
            //                 option().selected(true);
            //                 optionGroup().selectedOption(option);
            //                 dataName = dataName.replace(/default/ig, "");
            //             }
            //             // remove default from name and add it to option
            //             option().name(dataName);
            //             optionGroup().options().push(option);

            //         }
            //     });
            //     self.optionGroups().push(optionGroup());
            //     // $(this).find(".OptionIcon" ).append('<ul data-bind="foreach:optionGroup().options()"><li data-bind="text: name"></li></ul>');
            // });
        }

        self.selectedLotID = ko.observable();
        self.selectedLot = ko.observable();
        self.slideshowImageIndex = ko.observable(0);


        // Next/previous controls

        self.jumpToSlide = function(slide){
            toSlide = ((self.selectedLot().floorplan().images().length > slide) && (slide >=0)?slide:0);
            self.slideshowImageIndex(toSlide);
        }

        self.nextSlide = function(){
            let newVal = self.slideshowImageIndex() + 1;
            self.slideshowImageIndex((newVal > (self.selectedLot().floorplan().images().length-1)?0:newVal));
        }
        self.prevSlide = function(){
            let newVal = self.slideshowImageIndex() - 1;
            self.slideshowImageIndex((newVal < 0 ?self.selectedLot().floorplan().images().length-1:newVal));
        }

        // Thumbnail image controls
        self.currentSlide = function(n) {
            self.showSlides(self.slideshowImageIndex(n));
        }

        self.selectedLotWatcher = ko.computed(function(){
            ko.utils.arrayForEach(self.homes(), function(home) {
                if(home().lotNumber() == self.selectedLotID()) {
                    self.slideshowImageIndex(0);

                    self.selectedLot(home());
                    setCLass( "g[id*='OptionIcon']",'OptionIcon');
                    setCLass( "g[id*='Default']",'default');



                    self.setSiteMapOptions();
                }
            });
        })
        // $('#lotPopup').on('hidden.bs.modal', function (e) {
        //     self.selectedLotID('')
        // })
        self.setSelectedLotFromHomeTile = function(lot){
            self.selectedLotID(lot.lotNumber());
        }
        self.showModal=ko.observable(false)
        self.hideModal = function(){
            self.showModal(false);
        }
        self.setSelectedLot = function(){
            lotNumber = this.getAttribute("data-lot-number");
            self.selectedLotID(lotNumber);
            self.showModal(true);
            return true;
        }
        self.optionGroups = ko.observableArray();
        self.showOptionsPopup = ko.observable(false);
        self.selectedOptionGroupName = ko.observable();
        self.selectedOptionGroup = ko.observable();
        self.selectedOptionGroupWatcher = ko.computed(function(){
            filter = self.selectedOptionGroupName();
            ko.utils.arrayForEach(self.optionGroups(), function(group) {
                if (group.name() == filter) {
                    self.selectedOptionGroup(group);
                }
            });
        });
        self.popupPositionLeft = ko.observable();
        self.popupPositionTop = ko.observable();

        self.closePopupOptions = function(){
            self.showOptionsPopup(false);
        }

        self.loadingHomes = ko.observable(true);

        self.visibleHomes = ko.computed(function(){
            if (!self.homes) {
                self.loadingHomes(false);
                return '[]';
            } else {
                var i=1;
                return ko.utils.arrayFilter(self.homes(), function(home) {
                    // SETS FLOOR PLAN NAME FOR ANY LOT ADDED
                    if(home().floorplan_id()!=null){
                        self.floorplanLots()['floorplan_'+home().floorplan().id()] = {"available":ko.observableArray([]), "coming_soon":ko.observableArray([])}
                    }

                    if(i==self.homes().length){
                        // TURNS OFF LOADING HOMES
                        self.loadingHomes(false);
                    }
                    i++;

                    if(home().status() == 'Sold'){
                        return false;
                    }
                    else if(home().status() == 'Inactive'){
                        return false;
                    }
                    else if(home().status() == 'Parking'){
                        return false;
                    }
                    else {
                        if(home().floorplan_id()!=null){
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                });
            }

        }).extend({ deferred: true });



        self.models = ko.computed(function(){
            return ko.utils.arrayFilter(self.visibleHomes(), function(home) {
                return home().status() == 'Model';
            });

        }).extend({ deferred: true });

        self.availableHomes = ko.computed(function(){

            return ko.utils.arrayFilter(self.visibleHomes(), function(home) {
                if(home().status() == 'Available'){
                    self.floorplanLots()['floorplan_'+home().floorplan().id()].available.push(home().lotNumber())
                    return true;
                }
                else {
                    return false
                }
            });

        }).extend({ deferred: true });

        self.comingSoonHomes = ko.computed(function(){

            return ko.utils.arrayFilter(self.visibleHomes(), function(home) {
                if(home().status() == 'Coming Soon'){
                    self.floorplanLots()['floorplan_'+home().floorplan().id()].coming_soon.push(home().lotNumber())
                    return true;
                }
                else {
                    return false
                }
            });

        }).extend({ deferred: true });

        self.comingSoonPlans = ko.dependentObservable(function() {
            var seen = [];
            return self.comingSoonHomes().filter(function(home) {
                return seen.indexOf(home().floorplan().name()) == -1 && seen.push(home().floorplan().name());
            });
        });
        self.clickDefault = function(){
            return true;
        }

        lotsWithPlans = document.getElementsByClassName("hasFloorPlan")

        for (let i = 0; i < lotsWithPlans.length; i++) {
            lotsWithPlans[i].addEventListener("click", self.setSelectedLot);
        }

        // $('.hasFloorPlan').on( "click", self.setSelectedLot );
        // $(document).on( "click", '.OptionIcon', self.setSelectedOption );
        sitemapDiv.style.display = "block";
    }

    function setCLass(selecter, className){
        let elements = document.querySelectorAll(selecter);
        len = elements !== null ? elements.length : 0,
        i = 0;
        for(i; i < len; i++) {
            elements[i].classList.add(className);
        }
    }

    function initSiteMap(siteMapJSON){
        console.log('init sitemap');
        setCLass("g[id*='Lot']", "lot");
        setCLass("g[id*='lot']", "lot");

        setCLass("g[id*='Sold']", "sold_text");
        setCLass("g[id*='sold']", "sold_text");

        setCLass("g[id*='Text']", "text");
        setCLass("g[id*='text']", "text");

        setCLass("path[id*='Text']", "text");
        setCLass("path[id*='text']", "text");

        setCLass("g[id*='Model']", "model_text");
        setCLass("g[id*='model']", "model_text");



        
        
        var isBound = function() {
            return !!ko.dataFor(sitemapDiv);
        };
        
        if(!isBound()){


            ko.bindingHandlers.fadeVisible = {
                init: function(element, valueAccessor) {
                    // Initially set the element to be instantly visible/hidden depending on the value
                    var value = valueAccessor();
                    $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
                },
                update: function(element, valueAccessor) {
                    // Whenever the value subsequently changes, slowly fade the element in or out
                    var value = valueAccessor();
                    ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut();
                }
            };
    
            ko.bindingHandlers.slideVisible = {
                init: function(element, valueAccessor) {
                    // Initially set the element to be instantly visible/hidden depending on the value
                    var value = valueAccessor();
                    $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
                },
                update: function(element, valueAccessor) {
                    // Whenever the value subsequently changes, slowly fade the element in or out
                    var value = valueAccessor();
                    ko.unwrap(value) ? $(element).slideDown() : $(element).slideUp();
                }
            };

            ko.applyBindings(new SiteMap(siteMapJSON));
        }


    } // end init sitemap



    var modal = `<!-- Modal -->
    <div id="smModal0001" style="width:100%; height:100vh; position:fixed; top:0; left:0; z-index:5000; display:none;" data-bind="'style':{display: (showModal()?'block':'none')}, if: showModal()">
        <div class="SMmodalDialog" role="document">
            <div class="SMmodalContent">
                <div data-bind="with:selectedLot">
                    <div class="SMmodalHeader ">
                        <button data-bind="click: $root.hideModal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="SMContentHolder">
                        <div class="modalSlideshowHolder">
                            <div class="SMhideMobile">

                                <div class="SMmodalPlanName">
                                    <h2 data-bind="text: floorplan().name()"></h2>
                                    <hr>
                                    <h4  data-bind="text: 'Lot '+lotNumber()"></h4>
                                </div>

                                <div class="SMplanDetails">
                                    <div class="SMplanDetail">
                                        <div class="SMdetailHeader">
                                            <div class="SMDetailLrg">
                                                <p>Bedroom</p>
                                            </div>
                                            <div class="SMDetailSml">
                                                <p>Bed.</p>
                                            </div>
                                        </div>
                                        <div class="SMdetailContent">
                                            <span data-bind="text: floorplan().bed"></span>
                                        </div>
                                    </div>
                                    <div class="SMplanDetail">
                                        <div class="SMdetailHeader">
                                            <div class="SMDetailLrg">
                                                <p>Bathroom</p>
                                            </div>
                                            <div class="SMDetailSml">
                                                <p>Bath.</p>
                                            </div>
                                        </div>
                                        <div class="SMdetailContent">
                                            <span data-bind="text: floorplan().bath"></span>
                                        </div>
                                    </div>
                                    <div class="SMplanDetail">
                                        <div class="SMdetailHeader">
                                            <div class="SMDetailLrg">
                                                <p>SqFt</p>
                                            </div>
                                            <div class="SMDetailSml">
                                                <p>SqFt</p>
                                            </div>
                                        </div>
                                        <div class="SMdetailContent">
                                            <span data-bind="text: floorplan().sqftFormatted"></span>
                                        </div>
                                    </div>
                                    <div class="SMplanDetail">
                                        <div class="SMdetailHeader">
                                            <div class="SMDetailLrg">
                                                <p>Garage</p>
                                            </div>
                                            <div class="SMDetailSml">
                                                <p>Garage</p>
                                            </div>
                                        </div>
                                        <div class="SMdetailContent">
                                            <span data-bind="text: floorplan().garage"></span>
                                        </div>
                                    </div>

                                    <div class="SMplanPricing">
                                        <div class="SMpricingContent">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 0C113.7 0 128 14.33 128 32V64H480C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H128V480C128 497.7 113.7 512 96 512C78.33 512 64 497.7 64 480V128H32C14.33 128 0 113.7 0 96C0 78.33 14.33 64 32 64H64V32C64 14.33 78.33 0 96 0zM448 160C465.7 160 480 174.3 480 192V352C480 369.7 465.7 384 448 384H192C174.3 384 160 369.7 160 352V192C160 174.3 174.3 160 192 160H448z"/></svg> <span data-bind="text: status"></span>
                                        </div>
                                    </div>

                                    <div class="SMplanPricing">
                                        <div class="SMpricingContent">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M48 32H197.5C214.5 32 230.7 38.74 242.7 50.75L418.7 226.7C443.7 251.7 443.7 292.3 418.7 317.3L285.3 450.7C260.3 475.7 219.7 475.7 194.7 450.7L18.75 274.7C6.743 262.7 0 246.5 0 229.5V80C0 53.49 21.49 32 48 32L48 32zM112 176C129.7 176 144 161.7 144 144C144 126.3 129.7 112 112 112C94.33 112 80 126.3 80 144C80 161.7 94.33 176 112 176z"/></svg> <span data-bind="text: price"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="SMslideshow-container" data-bind="visible: $data.showSlideshow(), css:{'noFloorPlanFile': !floorplan().floorPlanFile()}" >
                                <!-- ko foreach: floorplan().images() -->
                                <div class="SMSlides SMfade" data-bind="style: {display: ($root.slideshowImageIndex()==$index()?'flex':'none')}">
                                <div class="SMnumbertext"><span data-bind="text: $index() + 1"></span> / <span data-bind="text: $parent.floorplan().images().length"></span></div>
                                <img data-bind="attr: { src: url(), alt: alt() }" >
                                </div>
                                <!-- /ko -->
                                <!-- Next and previous buttons -->
                                <a class="SMprev" data-bind="click: $root.prevSlide" >&#10094;</a>
                                <a class="SMnext" data-bind="click: $root.nextSlide" >&#10095;</a>
                                <div class="SMDots" data-bind="foreach: floorplan().images()">
                                    <span class="SMdot" data-bind="css: { 'SMactive':  $root.slideshowImageIndex()==$index() }, click: $root.jumpToSlide.bind($data, $index())"></span>
                                </div>
                            </div>


                        </div>
                        <div id="SMmodalText">
                            <div class="SMplanContentHolder">
                                <div class="SMHideDesktop">
                                    <div class="SMmodalPlanName">
                                        <h2 data-bind="text: floorplan().name()"></h2>
                                        <hr>
                                        <h4  data-bind="text: 'Lot '+lotNumber()"></h4>
                                    </div>

                                    <div class="SMplanDetails">
                                        <div class="SMplanDetail">
                                            <div class="SMdetailHeader">
                                                <div class="SMDetailLrg">
                                                    <p>Bedroom</p>
                                                </div>
                                                <div class="SMDetailSml">
                                                    <p>Bed.</p>
                                                </div>
                                            </div>
                                            <div class="SMdetailContent">
                                                <span data-bind="text: floorplan().bed"></span>
                                            </div>
                                        </div>
                                        <div class="SMplanDetail">
                                            <div class="SMdetailHeader">
                                                <div class="SMDetailLrg">
                                                    <p>Bathroom</p>
                                                </div>
                                                <div class="SMDetailSml">
                                                    <p>Bath.</p>
                                                </div>
                                            </div>
                                            <div class="SMdetailContent">
                                                <span data-bind="text: floorplan().bath"></span>
                                            </div>
                                        </div>
                                        <div class="SMplanDetail">
                                            <div class="SMdetailHeader">
                                                <div class="SMDetailLrg">
                                                    <p>SQFT</p>
                                                </div>
                                                <div class="SMDetailSml">
                                                    <p>SQFT</p>
                                                </div>
                                            </div>
                                            <div class="SMdetailContent">
                                                <span data-bind="text: floorplan().sqftFormatted"></span>
                                            </div>
                                        </div>
                                        <div class="SMplanDetail">
                                            <div class="SMdetailHeader">
                                                <div class="SMDetailLrg">
                                                    <p>GARAGE</p>
                                                </div>
                                                <div class="SMDetailSml">
                                                    <p>GARAGE</p>
                                                </div>
                                            </div>
                                            <div class="SMdetailContent">
                                                <span data-bind="text: floorplan().garage"></span>
                                            </div>
                                        </div>

                                        <div class="SMplanPricing">
                                            <div class="SMpricingContent">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 0C113.7 0 128 14.33 128 32V64H480C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H128V480C128 497.7 113.7 512 96 512C78.33 512 64 497.7 64 480V128H32C14.33 128 0 113.7 0 96C0 78.33 14.33 64 32 64H64V32C64 14.33 78.33 0 96 0zM448 160C465.7 160 480 174.3 480 192V352C480 369.7 465.7 384 448 384H192C174.3 384 160 369.7 160 352V192C160 174.3 174.3 160 192 160H448z"/></svg> <span data-bind="text: status"></span>
                                            </div>
                                        </div>

                                        <div class="SMplanPricing">
                                            <div class="SMpricingContent">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M48 32H197.5C214.5 32 230.7 38.74 242.7 50.75L418.7 226.7C443.7 251.7 443.7 292.3 418.7 317.3L285.3 450.7C260.3 475.7 219.7 475.7 194.7 450.7L18.75 274.7C6.743 262.7 0 246.5 0 229.5V80C0 53.49 21.49 32 48 32L48 32zM112 176C129.7 176 144 161.7 144 144C144 126.3 129.7 112 112 112C94.33 112 80 126.3 80 144C80 161.7 94.33 176 112 176z"/></svg> <span data-bind="text: price"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="SMplanFeaturesDescription" class="SMtextPadding" >
                                    <div class="modelInfo" data-bind="if: floorplan().features().length>0">
                                        <h3>This plan features:</h3>
                                        <ul data-bind="foreach: floorplan().features()">
                                            <li data-bind="html:name"></li>
                                        </ul>
                                    </div>
                                    <div class="modelInfo" data-bind="if: (floorplan().description()!='' && floorplan().description()!=null)">
                                        <h3>Plan Description</h3>
                                        <div data-bind="html:floorplan().description()"></div>
                                    </div>

                                    <div class="col-12 py-3 px-0 otherLots" data-bind="visible: 1 < $root.floorplanLots()['floorplan_'+floorplan().id()].available().length" style="display:none;">
                                        <h6><span data-bind="visible: status() == 'Available'">Also </span>Available on Lots</h6>
                                        <!-- ko foreach: $root.floorplanLots()['floorplan_'+floorplan().id()].available() -->
                                            <span data-bind="visible: $data != $parent.lotNumber(), text: $data"></span>
                                        <!-- /ko  -->
                                    </div>
                                    <div class="col-12 py-3 px-0 otherLots" data-bind="visible: 1 < $root.floorplanLots()['floorplan_'+floorplan().id()].coming_soon().length" style="display:none;">
                                        <h6><span data-bind="visible: status() == 'Coming Soon'">Also </span>Coming Soon on Lots</h6>
                                        <!-- ko foreach: $root.floorplanLots()['floorplan_'+floorplan().id()].coming_soon() -->
                                            <span data-bind="visible: $data != $parent.lotNumber(), text: $data"></span>
                                        <!-- /ko  -->
                                    </div>
                                </div>

                                <div id="SMmodalTextFooter">
                                    <div data-bind="if: floorplan().threeDTour(), visible: floorplan().threeDTour() != ''" class="modelInfo SMplanPricing">
                                        <a class="" data-bind="attr: {href:floorplan().threeDTour()}" target="_blank">3D Tour</a>
                                    </div>
                                    <div class="modelInfo SMplanPricing">
                                        <a class="" target="_blank" data-bind="attr:{href: floorplan().floorplanFileUrl()}"  >Floor Plan</a>
                                    </div>
                                </div>





                                <!-- ko if: (showFloorplan() && floorplan().optionGroups().length > 0) -->
                                <div class="modalInfoContainer bg-red text-light text-center" >
                                    <div class="row">
                                        <div class="col-md-12 mx-0 px-0">
                                            <h5>Options</h5>
                                        </div>
                                    </div>
                                </div>
                                <!-- /ko -->
                                <div class="modalInfoContainer bg-secondary modalInfoScroll" data-bind="visible: showFloorplan()">

                                    <div class="row">

                                        <div class="col modelInfo mx-0 px-0	optionsHolder">
                                            <div data-bind="foreach: floorplan().optionGroups">
                                                <div><h6 data-bind="text: name" class="text-light"></h6></div>
                                                <ul data-bind="foreach: options" class="list-group list-group-flush">
                                                    <li data-bind="click: $parent.setSelectedOption, css:{'list-group-item-info selected': selected() }" class="list-group-item">
                                                        <span data-bind="text: name"></span>
                                                        <span class="badge badge-success" data-bind="visible: selected()"><i class="far fa-check"></i></span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div>
                                                <button class="btn btn-info" data-bind="visible: !floorplan().creatingPDF(), click: floorplan().downloadPDF">Download PDF <i class="fas fa-file-download"></i></button>
                                                <button class="btn btn-light" data-bind="visible: floorplan().creatingPDF()">GENERATING PDF
                                                <div class="spinner-border text-secondary" role="status">
                                                    <span class="sr-only"></span>
                                                </div>

                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>`;

    //JS
    const sitemapDiv = document.getElementById('svgMap');
    if(sitemapDiv == null){
        console.log('no sitemap found');
    }
    else {

        var knockoutLoad = document.createElement( "script" );
        knockoutLoad.src ='https://www.tailoredcommunities.com/js/knockout.js';
        const head = document.getElementsByTagName( "head" )[0];
        head.appendChild( knockoutLoad );

        var loadingContent = `<div class="text-center; width: 100%" style="text-align: center;"><h3>Loading</h3></div>`;
        sitemapID = sitemapDiv.dataset.sitemap
        sitemapDiv.innerHTML=loadingContent;
        let url = 'https://www.tayloredcommunities.com/community/sitemap/data/'+sitemapID+'?v1.0.0'
        console.log(sitemapID);
        fetch(url)
        .then(response => response.json())
        .then(data => {
            var sitemapData = data;
            fetch(data.siteMapFile)
            .then(response => response.text())
            .then(sitemap => {


                // CSS
                var link = document.createElement( "link" );
                link.href = 'https://www.tailoredcommunities.com/css/sitemap.css?v4'
                link.type = "text/css";
                link.rel = "stylesheet";
                link.media = "screen,print";
                // MODAL
                var modalDiv = document.createElement('div'); // is a node
                modalDiv.innerHTML = modal;
                modalDiv.classList.add('smModal');
                document.body.appendChild(modalDiv);

                head.appendChild( link );

                sitemapDiv.innerHTML = sitemap;

                initSiteMap(sitemapData);
            })
        })
    } // END CHECK FOR SITEMAP DIV
})() // END IIFE