index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Where's My Address</title>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" />

    <!-- IntroJS -->
    <link rel="stylesheet" href="js/IntroJS/minified/introjs.min.css" />
    <script type="text/javascript" src="js/IntroJS/minified/intro.min.js"></script>

    <!-- site styles, overriding above -->
    <link rel="stylesheet" href="css/site.css" />
    <link href="css/style.css" rel="stylesheet">

    <!-- ESRI Mapping Stuff -->
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
    <link rel="stylesheet" href="js/OrthoButton/css/OrthoButton.css" />
    <script>
    var dojoConfig = {
        packages: [{
            name: "orthobutton",
            location: location.pathname.replace(/\/[^/]+$/, "") + '/js/OrthoButton/js'
        }]
    };
    </script>


        <!-- site styles, overriding above -->
    <link rel="stylesheet" href="css/site.css" />
    <link href="css/style.css" rel="stylesheet">
    

    <!-- D3 Stuff -->
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

    <script src="http://js.arcgis.com/3.10/"></script>

    <script src="js/UIController.js"></script>
    <script src="js/MapController.js"></script>
    <script src="js/SearchController.js"></script>
    <script src="js/ListController.js"></script>

    <script>
        var searchService = "http://hubmaps1.cityofboston.gov/samrest/api/search?text={0}&callback=?";
        var searchServiceBuilding = "http://hubmaps1.cityofboston.gov/samrest/api/address/?constrid={0}&callback=?";

        dojo.require("esri.map");
        dojo.require("esri.layers.ArcGISTiledMapServiceLayer");
        dojo.require("esri.layers.ArcGISDynamicMapServiceLayer");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.layers.GraphicsLayer");
        dojo.require("esri.tasks.query");
        dojo.require("esri.tasks.route");
        dojo.require("esri.tasks.QueryTask");
        dojo.require("esri.tasks.geometry");
        dojo.require("esri.graphic");
        dojo.require("esri.geometry.mathUtils");
        dojo.require("esri.geometry.ScreenPoint");
        dojo.require("esri.geometry.Geometry");
        dojo.require("esri.geometry.Point");
        dojo.require("esri.geometry.Polyline");
        dojo.require("esri.symbols.SimpleLineSymbol");
        dojo.require("esri.symbols.SimpleMarkerSymbol");
        dojo.require("esri.geometry.Extent");
        dojo.require("esri.SnappingManager");
        dojo.require("esri.InfoTemplate");
        dojo.require("esri.dijit.LocateButton");
        dojo.require("orthobutton.OrthoButton");
        dojo.require("dojo._base.connect");
        dojo.require("dojo._base.Color");
        dojo.require("dojo.domReady!");

        (function ($) {
            $.QueryString = (function (a) {
                if (a == "") return {};
                var b = {};
                for (var i = 0; i < a.length; ++i) {
                    var p = a[i].split('=');
                    if (p.length != 2) continue;
                    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
                }
                return b;
            })(window.location.search.substr(1).split('&'))
        })(jQuery);

        
        function startIntro() {

            var currentStep = 0;
            var timeout = null;
            var firstRun = true;

            var transitionTimes = {
                1: null,
                2: 8000,
                3: 8000,
                4: 16000,
                5: 16000,
                6: 16000,
                7: 16000,
                8: 16000,
                9: 32000
            }

            function recreateIntro() {
                var intro = introJs();
                var autoAdvance = firstRun;
                intro.onchange(function(targetElement) {
                    currentStep = intro._currentStep + 1;
                    clearTimeout(timeout);
                    if (autoAdvance && (transitionTimes[currentStep])) {
                        timeout = setTimeout(function() {
                            intro.nextStep();
                        }, transitionTimes[currentStep]);
                    }
                });
                intro.onexit(function() {
                    clearTimeout(timeout);
                })
                intro.setOptions({
                    skipLabel: 'Hide',
                    steps: [
                        {
                            intro: "<h1 class='introjs-header'>Find your Official Address</h1><p>The City of Boston needs your Official Address on your permit.<p>Your Official Address may not be the same as the street address you typically use. This tool will help you find your Official Address from your street address.</p><p><b>Please choose your Official Address with care</b>, or your permit application may be delayed.</p><br/><p>Click 'Next' when you are ready to continue.</p>"
                        },
                        {
                            intro: "<h1 class='introjs-header'>Getting help</h1><p>If you need a refresher, you can always access the help here.</p>",
                            element: document.querySelector('#btn-intro-help'),
                            position: 'left'
                        },
                        {
                            intro: "<h1 class='introjs-header'>Search in 1 of 2 ways...</h1>"
                        },
                        {
                            intro: "<h1 class='introjs-header'>Search by street address</h1><p>Type in your stress address and press 'Enter' or click the search button to continue.</p>",
                            element: document.querySelector('#search-bar')
                        },
                        {
                            intro: "<h1 class='introjs-header'>...or by clicking on the map</h1><p>Click a building or location on the map to search for nearby  addresses.</p>",
                        },
                        {
                            intro: "<h1 class='introjs-header'>Jump to your location</h1><p>Click here and the map will zoom to your current location if you allow your browser to share your location.</p>",
                            element: document.querySelector('#LocateButton')
                        },
                        {
                            intro: "<h1 class='introjs-header'>Search Results</h1><p>Address search results will be listed under the search box and displayed as pins on the map.</p><p>Select an address and verify its location on the map. If the address is correct, click the 'Confirm Address' button that appears.</p>",
                        }                
                    ]
                });
                
                // SET TO FALSE TO STOP AUTO-PLAY AFTER FIRST RUN
                // firstRun = false;
                return intro;
            }

            recreateIntro().start();

            // Re-open intro upon help button click
            $('#btn-intro-help').click(function(e) {

                // Causes non-autoplay from last slide
                // recreateIntro().goToStep(currentStep).start();

                // Causes non-autoplay from third slide (search in 1 of 2 ways...)
                var startingStep = (currentStep > 2) ? 3 : 1;
                recreateIntro().goToStep(startingStep).start();
            });
        }

        function init() {
            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            UIController.init();
            MapController.init();
            ListController.init();
            SearchController.init();

            $("#txtSearch").focus();

            startIntro();

        }

        dojo.ready(init);

        //loads jquery ui elements
        $(function () {
            console.log('index.html > init()');
        });
    </script>

</head>

<body>
    <div id="fullPageDiv">
        <!--top bar-->
        <div class="topheader">
            <div class="panel panel-default">
                <div class="panel-body">
                    <button type="button" id="btn-intro-help" class="btn btn-default pull-right"><span class="glyphicon glyphicon-question-sign"></span></button>
                    <h1 id="app-logo">Find your Official Address</h1>
                </div>
            </div>
        </div><!--close topheader-->

        <div id="mapDiv">
            <div id="LocateButton"></div>
            <div id="OrthoButton"></div>
        </div>

        <!--search-->
        <div class="search">
            <div class="searchBar" id="search-bar">
                <!-- search bar-->
                    <input type="text" autocomplete = "off" id="txtSearch" placeholder="Search..." class="search-bar-input" required>
                    <!--search button-->
	                <button type="button" id="btnSearch" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>

	                <img id="imgLoadingSpinner" src="images/ajax-loader.gif" />

            </div><!--close row-->

        </div><!--close search-->
        <!--main page area-->
        <div class="result-content"></div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only"></span></button>
                    <h4 class="modal-title" id="myModalLabel">Confirm Address</h4>
                </div>
                <div class="modal-body">
                	<span class="confirmation-dialog"><h3>Are you sure this is the correct address?</h3></span>
                    <p class="confirmation-address-id"></p>
                    <p class="confirmation-full-address"></p>
                    <p class="confirmation-mailing-neighborhood"></p>
                    <p class="confirmation-zip-code"></p>
                    <br>
                    <p class="parcel-label">Parcel ID: </p>
                    <p class="confirmation-spatial-parcel-pid"></p>
                    <br>
                    <p class="parcel-label">SAM Address ID: </p>
                    <p class="confirmation-sam-id"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span></button>
                </div>

            </div>
        </div>
    </div>
        </div>

</body>

</html>