dojo.require("dojo.fx");
dojo.require("dojo.data.ItemFileReadStore");

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.Dialog");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Slider");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.ProgressBar");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuSeparator");

dojo.require("dojox.grid.DataGrid");

dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Scalebar");

var quickFind = {
    //builds the html for the widget
    buildUI: function () {
			dojo.byId("quickFind").innerHTML="";
            var header = new dijit.layout.ContentPane({
            id: "qf_Widget",
            title: "Quick Find Widget",
            content: 	"<div id=\"qf-wrap\">                                                                                                                                                                     " +
                        "    <div id=\"qf-header-top-sm\"></div>                                                                                                                                                            " +
                        "    <div id=\"sm-qf-quick-find\">																																						  " +
                        "          <div id=\"spacer\" style=\"height: 1px;\"></div><p>                                                                                                                                                                            " +
                        "            Quickly find your junk set out dates, garbage and recycling pick up days, and public safety information.                                                          " +
                        "           <p> 																																										  " +
                        "        <div id=\"sm-qf-input\">                                                                                                                                                            " +
                        "		 																																								  " +
                        "            <input style=\"height: 20px;  border:none !important; width: 136px; margin-left: 5px; vertical-align:top;                                                                                    " +
                        "                margin-top: 4px;font-family:Arial, Helvetica, Sans-Serif; font-size:12px;\" id=\"inAddress\" type=\"text\" dojotype=\"dijit.form.TextBox\" trim=\"true\"                                                                          " +
                        "                placeholder=\"Enter Street Address\" onkeyup=\"quickFind.autoComplete\" >  </input>                                                                                                   " +
                        "            <input id=\"doGeocodeBTN\" dojotype=\"dijit.form.Button\" type=\"button\" onclick=\"quickFind.addressGeocode(dijit.byId('inAddress').get('value'));\" style=\"width:36px; border:none !important; background:none; height:24px; \">" +
                        "                                                                                                                                                                                      " +						
                        "    <img src=\"/www.louisvilleky.gov/common/images/quickfind/clear.gif\" style=\" vertical-align:top; width:38px; border:none !important; height:26px; background:none \" /></input>                                                                                                                                                                         " +
                        "        </div>                                                                                                                                                                           " +
                        "        <div id=\"sm-addressAutoCompleteResultBox\">                                                                                                                                         " +
                        "            <div id=\"addressAutoCompleteResults\" style=\"width: 180px; height: 100px; background-color: #ffffff;                                                                        " +
                        "                overflow: auto;\">                                                                                                                                                       " +
                        "                <img src=\"/www.louisvilleky.gov/common/images/quickfind/loading.gif\" style=\"z-index: 100;\">                                                                          " +
                        "            </div>                                                                                                                                                                       " +
                        "        </div>                                                                                                                                                                           " +
                        "        <div id=\"sm-requestMessage\" style=\"display: none; text-align: left; color: black;\">                                                                                             " +
                        "        </div>                                                                                                                                                                           " +
                        "        <!--<div id=\"requestStatus\" style=\"display: none; width: 100px;\">                                                                                                                " +
                        "            <div dojotype=\"dijit.ProgressBar\" indeterminate=\"true\">                                                                                                                  " +
                        "            </div>                                                                                                                                                                       " +
                        "        </div>   -->                                                                                                                                                                        " +
                        "        <!-- ************************************************************************* -->                                                                                               " +
                        "        <!-- ***************************METROSERVICESREPORT.HTML*********************************** -->                                                                                  " +
                        "        <div id=\"qf-results\" style=\"display: none; margin-left:11px;\">                                                                                                                                 " +
                        "            <div id=\"metroServiceRequestStatus\" style=\"display: none; margin: 10px 0px 10px 0px;\">                                                                                   " +
                        "                <div dojotype=\"dijit.ProgressBar\" indeterminate=\"true\">                                                                                                              " +
                        "                </div>                                                                                                                                                                   " +
                        "            </div>                                                                                                                                                                       " +
                        "            <div id=\"QuickFind\" jsid=\"QuickFind\" dojotype=\"dijit.TitlePane\" title=\"\" open=\"true\">                                                                              " +
                        "                <table>                                                                                                                                                                  " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\">                                                                                                                                      " +
                        "                            Garbage Day:                                                                                                                                                 " +
                        "                        </td>                                                                                                                                                            " +
                        "                        <td id=\"GarbageDay\" class=\"reportText\">                                                                                                                      " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\">                                                                                                                                      " +
                        "                            Recycle Day/<br/>Yard Waste:                                                                                                                                                 " +
                        "                        </td>                                                                                                                                                            " +
                        "                        <td id=\"RecycleDay\" class=\"reportText\" valign=\"bottom\">                                                                                                                      " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\" style=\"width:90px;vertical-align:top;\">                                                                                             " +
                        "                            Junk Set-Out:                                                                                                                                                " +
                        "                        </td>																																							  " +
                        "					</tr>																																								  " +
                        "					<tr>																																								  " +																										 
                        "                        <td colspan=\"2\" id=\"JunkPickUp1\" class=\"reportText\">                                                                                                       " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td id=\"JunkPickUp2\" class=\"reportText\" colspan=\"2\">                                                                                                       " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>																																								  " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\">                                                                                                                                      " +
                        "                            Council District:                                                                                                                                            " +
                        "                        </td>                                                                                                                                                            " +
                        "                        <td id=\"CouncilDistrict\" class=\"reportText\">                                                                                                                 " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                </table>                                                                                                                                                                 " +
                        "            </div>                                                                                                                                                                       " +
                        "            <div id=\"EmergencyServices\" jsid=\"EmergencyServices\" dojotype=\"dijit.TitlePane\" title=\"\"                                                                             " +
                        "                open=\"true\">                                                                                                                                                           " +
                        "                <table>                                                                                                                                                                  " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\" style=\"vertical-align:top;\">                                                                                                        " +
                        "                            Police: &nbsp;&nbsp;&nbsp;                                                                                                                                   " +
                        "                        </td>                                                                                                                                                            " +
                        "                        <td id=\"PoliceDescription\" class=\"reportText\">                                                                                                               " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                    <tr>                                                                                                                                                                 " +
                        "                        <td class=\"reportHeader\">                                                                                                                                      " +
                        "                            Fire:																																						  " +
                        "                        </td>                                                                                                                                                            " +
                        "                        <td id=\"FireDistrict\" class=\"reportText\">                                                                                                                    " +
                        "                            &nbsp;                                                                                                                                                       " +
                        "                        </td>                                                                                                                                                            " +
                        "                    </tr>                                                                                                                                                                " +
                        "                </table>                                                                                                                                                                 " +
                        "            </div>                                                                                                                                                                       " +
                        "        </div>                                                                                                                                                                           " +
                        "        <!-- /#qf-results -->                                                                                                                                                            " +
                        "        <div id=\"sm-qf-mapit\">                                                                                                                                                            " +
                        "            <a href=\"http://mapit.louisvilleky.gov\">                                                                                                                                   " +
                        "                <img src=\"/www.louisvilleky.gov/common/images/quickfind/sm-qf-bottom2.gif\" border=\"0\" /></a></div>                                                                        " +
                        "    </div>                                                                                                                                                                               " +
                        " </div>                                                                                                                                                                                   " +
                        "<!-- /#qf-wrap -->                                                                                                                                                                       "

        }).placeAt(dojo.byId("quickFind"));

        window.quickFind.loadMapConfig();


    },

    //initial services needed for autocomplete
    buildMap: function () {
        if (quickFind.mapConfig.ProxyPage !== null) {
            esri.config.defaults.io.proxyUrl = quickFind.mapConfig.ProxyPage.url;
            esri.config.defaults.io.alwaysUseProxy = quickFind.mapConfig.ProxyPage.alwaysUseProxy;
        }
        quickFind.geometryService = new esri.tasks.GeometryService(quickFind.mapConfig.Server + quickFind.mapConfig.GeometryService);
        quickFind.autoCompleteQueryTask = new esri.tasks.QueryTask(quickFind.mapConfig.Server + quickFind.mapConfig.AutoCompleteQuery.url + "?token=" + quickFind.mapConfig.Token);
        quickFind.GeoCodeService = new esri.tasks.Locator(quickFind.mapConfig.Server + quickFind.mapConfig.GeoCodeService.url + "?token=" + quickFind.mapConfig.Token);



    },
    //Geocode the address
    addressGeocode: function (inAddress) {
        dijit.byId('inAddress').disabled = true;
        quickFind.clearMetroServiceReport();
        dojo.style("sm-requestMessage", "display", "none");
        dojo.style("sm-addressAutoCompleteResultBox", "display", "none");
        dojo.byId("sm-requestMessage").innerHTML = "";
        //dojo.style("requestStatus", "display", "block");
        var address = {
            Street: inAddress
        };
        quickFind.GeoCodeService.addressToLocations(address, [], quickFind.addressCandidates, quickFind.addressError);
    },

    addressCandidates: function (candidates) {
        //dojo.style("requestStatus", "display", "none");
        if (candidates.length > 0) {
            if (candidates[0].score == 100 || candidates[0].address.toLowerCase() == dijit.byId('inAddress').get('value').toLowerCase()) {
                quickFind.getMetroServiceReport(candidates[0].location.x, candidates[0].location.y);
                //quickFind.createAddressMarker(candidates[0].location.x, candidates[0].location.y, candidates[0].address);
            }
            else {
                var items = [];
                dojo.forEach(candidates, function (candidate, i) {
                    var item = {
                        address: candidate.address,
                        x: candidate.location.x,
                        y: candidate.location.y
                    };
                    items.push(item);
                });
                quickFind.didYouMeanStore = new dojo.data.ItemFileReadStore({
                    data: {
                        items: items
                    }
                });
                //quickFind.showDidYouMeanDlg();
            }
        }
        else {
            var items = [];
            quickFind.didYouMeanStore = new dojo.data.ItemFileReadStore({
                data: {
                    items: items
                }
            });

            quickFind.addressError(null);
           // quickFind.showDidYouMeanDlg();
        }
    },

    addressError: function (error) {
        //    dojo.byId('currentAddressServices').innerHTML = "Location Information";
        dijit.byId('inAddress').disabled = false;
        //dojo.style("requestStatus", "display", "none");
        dojo.style("sm-requestMessage", "display", "block");
        //dojo.style("addressAutoCompleteResultBox", "display", "none");
        dojo.byId("sm-requestMessage").innerHTML = "No suggestions found, please try the full <a href=\"http://mapit.louisvilleky.gov\" target=\"_blank\">Map It Application.<\a>";
        
    },

    //autocomplete calls
    autoComplete: function (evt) {
        if (dijit.byId("inAddress").get("value").length > 2) {
            dojo.style('sm-addressAutoCompleteResultBox', 'display', 'block');
            dojo.style('sm-requestMessage', 'display', 'none');
            dojo.style("qf-results", "display", "none");
            var query = new esri.tasks.Query();
            query.where = quickFind.mapConfig.AutoCompleteQuery.searchField + " like '" + dijit.byId("inAddress").get("value").toUpperCase() + "%'";
            query.outFields = quickFind.mapConfig.AutoCompleteQuery.outFields;
            query.returnGeometry = true;
            quickFind.autoCompleteQueryTask.execute(query, quickFind.autoCompleteQueryComplete, quickFind.autoCompleteError);
        }
        else {
            dojo.style('sm-addressAutoCompleteResultBox', 'display', 'none');
            dojo.byId("addressAutoCompleteResults").innerHTML = '<img src="/www.louisvilleky.gov/common/images/quickfind/loading.gif" style="position:absolute;left:90px; top:34px; z-index:100;">';
        }
    },


    autoCompleteQueryComplete: function (fset) {
        var addresses = dojo.map(fset.features, function (feature) {
             return "<tr onclick='quickFind.selectAddress(\"" + feature.attributes[quickFind.mapConfig.AutoCompleteQuery.searchField] + "\"," + feature.attributes.POINT_X + "," + feature.attributes.POINT_Y + ");'><td style='font-size:12px; color:#000000'>" + feature.attributes[quickFind.mapConfig.AutoCompleteQuery.searchField] + "</td></tr>";
        });
        if (addresses.length > 0) {
            dojo.byId("addressAutoCompleteResults").innerHTML = "<table class='addressResultTable'><tbody>" + addresses.join("") + "</tbody></table>";
        }
        else {
            dojo.byId("addressAutoCompleteResults").innerHTML = "No suggestions found, please try the full <a href=\"http://mapit.louisvilleky.gov\" target=\"_blank\">Map It Application.<\a>";
        }
    },

    //user selects address from menu
    selectAddress: function (address, x, y) {
        // var services = dijit.byId('servicesTAB');
        // dijit.byId('Tabs').selectChild(services);
        dijit.byId('inAddress').set('value', address);
        dojo.style('sm-addressAutoCompleteResultBox', 'display', 'none');
        dojo.byId("addressAutoCompleteResults").innerHTML = '<img src="/www.louisvilleky.gov/common/images/quickfind/loading.gif" style="position:absolute;left:90px; top:34px; z-index:100;">';
        quickFind.getMetroServiceReport(x, y);
        //        quickFind.createAddressMarker(x, y, address);
    },

    autoCompleteError: function (err) {
        console.log(err);
    },

    //get the metroservice report
    getMetroServiceReport: function (x, y) {
        // dojo.style("metroServiceRequestStatus", "display", "block");
        var requestHandle = esri.request({
            url: quickFind.mapConfig.Server + quickFind.mapConfig.MetroServicesReport + "?token=" + quickFind.mapConfig.Token,
            content: {
                InputPoint: dojo.toJson({
                    x: x,
                    y: y
                }),
                f: "json"
            },
            handleAs: "json",
            preventCache: true,
            callbackParamName: "callback",
            load: function (response, io) {
                quickFind.metroServiceReport = response;
                quickFind.showMetroServiceReport();
                dijit.byId('inAddress').disabled = false;
            },
            error: function (error, io) {
                console.log(error, io);
            }
        });
    },

    //show results on screen
    showMetroServiceReport: function () {
        //clear previous results
        quickFind.clearMetroServiceReport();
        
        //hide usd values incase next call is not in usd
        //dojo.style('QuickFind', 'display', 'none');
		
        dojo.style("qf-results", "display", "");

        //populate variables
        //var garbageDay = quickFind.metroServiceReport.GarbageDay;
        //var recycleDay = quickFind.metroServiceReport.RecycleDay;
        //var junkYear1 = quickFind.metroServiceReport.JunkYear1Date1 + ", " + quickFind.metroServiceReport.JunkYear1;
        //if junkyeardate2 is not populated - don't show
        if (quickFind.metroServiceReport.JunkYear2Date1 !='') {
			var junkYear2 = quickFind.metroServiceReport.JunkYear2Date1 + "," + quickFind.metroServiceReport.JunkYear2;
        }
        //populate police beat
        var Beat = quickFind.metroServiceReport.PoliceBeat;
        if (Beat !== "") {
            Beat = ", Beat " + Beat;
        }

        var police = (quickFind.metroServiceReport.PoliceDescription === "N/A") ? "Not Available" : '<a href="' + quickFind.metroServiceReport.PoliceWebsite + '" target="_blank">' + quickFind.metroServiceReport.PoliceDescription + Beat + '</a>';
        var fireDistrict = (quickFind.metroServiceReport.FireDistrict === "N/A") ? "Not Available" : '<a href="' + quickFind.metroServiceReport.FireWebsite + '" target="_blank">' + quickFind.metroServiceReport.FireDistrict + '</a>';

        //only populate html pickup days if they are in Urban Service District
        if (quickFind.metroServiceReport.InServiceDistrict == true) {
            //set style for the display
            //dojo.style('QuickFind', 'display', '');
            //populate the html           
            dojo.byId('GarbageDay').innerHTML = quickFind.metroServiceReport.GarbageDay;
            dojo.byId("RecycleDay").innerHTML = quickFind.metroServiceReport.RecycleDay;
            // dojo.byId("JunkPickUp").innerHTML = junkDay;
            ////var junkDate1Year1=""; 
            ////var junkDate2Year1=""; 
            ////var junkDate1Year2=""; 
            ////var junkDate2Year2=""; 
            ////var junk1="";
            ////var junk2="";
            
            ////junkDate1Year1=quickFind.metroServiceReport.JunkYear1Date1; 
            ////junkDate2Year1=quickFind.metroServiceReport.JunkYear1Date2; 
            ////junkDate1Year2=quickFind.metroServiceReport.JunkYear2Date1; 
            ////junkDate2Year2=quickFind.metroServiceReport.JunkYear2Date2; 
           
            
            ////if (junkDate1Year1!= '')
            //// {junk1=junkDate1Year1 + ", " + quickFind.metroServiceReport.JunkYear1;}
            ////if (junkDate1Year1 != '')
			////	{
			////		if (junk1 == "")
			////		{junk1 = junkDate2Year1 + ", " + quickFind.metroServiceReport.JunkYear1;}
			////		else  if (junkDate2Year1 !="")
			////		{junk1 += "<br/>" + junkDate2Year1 + ", " + quickFind.metroServiceReport.JunkYear1;}
			////	}
			////if (junkDate1Year2 != '')
			////	{junk2 = junkDate1Year2 + "," + quickFind.metroServiceReport.JunkYear2;}
			////if (junkDate2Year2 != '')
			////	{
			////	if (junk2=="")
			////	{ junk2=junkDate2Year2 + ", " + quickFind.metroServiceReport.JunkYear2;}
			////	else  if (junkDate2Year2 !="")
			////	{junk2 += "<br/>" + junkDate2Year2 + ", " + quickFind.metroServiceReport.JunkYear2;}
			////	}
			
            
            ////dojo.byId("JunkPickUp1").innerHTML = junk1;
            //// if (quickFind.metroServiceReport.JunkYear2Date1 !== '') {
            ////    dojo.byId("JunkPickUp2").innerHTML = junk2;
            ////    }
                
            var sJunk;
			var sDateFormat = "MMM d, yyyy";
			dojo.forEach(quickFind.metroServiceReport.JunkCollectionSchedule.ScheduledCollections, function (service, idx) {
			if (idx == 0) { sJunk = ""; } else { sJunk += "</br>"; }
					sJunk += dojo.date.locale.format(eval(service.BeginSetOutPeriod.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")), { datePattern: sDateFormat, selector: "date" })
                    + " to "
                    + dojo.date.locale.format(eval(service.EndSetOutPeriod.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")), { datePattern: sDateFormat, selector: "date" });
					});
			dojo.byId('JunkPickUp1').innerHTML = sJunk;

            
        }
        else {
            dojo.byId("GarbageDay").innerHTML = "Outside Service Area";
            dojo.byId("RecycleDay").innerHTML = "Outside Service Area";
            dojo.byId("JunkPickUp1").innerHTML = "Outside Service Area";
        }
		dojo.byId("CouncilDistrict").innerHTML = "<a href='" + quickFind.metroServiceReport.CouncilWebsite + "' target='_blank'>" + quickFind.metroServiceReport.CouncilDistrict + "</a>";
        dojo.byId("PoliceDescription").innerHTML = police;
        dojo.byId("FireDistrict").innerHTML = fireDistrict;
        //*********************************************************************************
    },

    clearMetroServiceReport: function () {

        dojo.query(".reportText").forEach(function (node, index, arr) {
            node.innerHTML = "";
        });
    },

    loadMapConfig: function () {
		dojo.xhrGet({
            url: "/www.louisvilleky.gov/json/config.json",
            handleAs: "json",
            preventCache: true,
            load: function (response) {
            quickFind.mapConfig = response;
            quickFind.buildMap();
            },
			error: function (error) {
				console.log(dojo.toJson(error, true));
            }
           
        });
    }
};

dojo.addOnLoad(quickFind.buildUI);