var mapviewer, searcher, loading, markers, search, pre_search, container, bounds, lat, lon;
            var address_qs, street, town, address_qs_value, street_value, town_value, address_select, disabled, return_fields, submitbtn, submit1, result_set_size, small_pan_zoom_widget;
            var funcRef = resultsLoaded;
            var rfs = ['client_id', 'name', 'street', 'town', 'pc', 'lat', 'lon', 'monfri', 'sat', 'sun', 'disablednew', 'id'];
            var rfs1 = ['client_id', 'street', 'town', 'pc'];
                        
            function onLoad() {
                mapviewer = MMFactory.createViewer(document.getElementById('mapviewer'));
                mapviewer.goToPosition(new MMLocation(new MMLatLon(51.518235, -0.111258), 15));
                var overview = new MMOverviewWidget();
                mapviewer.addWidget(overview);
                mapviewer.removeWidget(overview);
                mapviewer.addWidget(new MMPanZoomWidget());
        
                address_qs = document.getElementById('address_qs');
                address_select = document.getElementById('address_select');
                street = document.getElementById('street');
                town = document.getElementById('town');
                disabled = document.getElementById('disabled2');
                submitbtn = document.getElementById('submitbtn');
                submit1 = document.getElementById('submit1');
                loading = document.getElementById('loading');
                loadingStatus(false);
              }

              function setZoom(lon, lat) {
                  mapviewer.goToPosition(new MMLocation(new MMLatLon(lon, lat)), 18);
                }
               
              function openInfoBox(type, target) {
                if (target.infoBoxOpened()) {
                    target.closeInfoBox();
                }
                else {
                    target.openInfoBox();
                }
             }

            function loadingStatus(bool) {
                // If we're loading values we want to disable the form elements
                // and display a spinning icon to show activity
                address_qs.disabled = bool;
                address_select.disabled = bool;
                town.disabled = bool;
                street.disabled = bool;
                disabled.disabled = bool;
                submitbtn.disabled = bool;
                submit1.disabled = bool;
                loading.style.display = bool ? 'block' : 'none';
            }

            function createMarker(location, display_name, num, icon) {
                // Creates marker
                var icon = new MMIcon('images/c.gif');
                icon.iconSize = new MMDimensions(24, 25);
                icon.iconAnchor = new MMPoint(16, 16);
                icon.infoBoxAnchor = new MMPoint(9, 0);
                icon.textDimensions = new MMDimensions(50, 18);
                var marker = mapviewer.createMarker(location, {'icon': icon });
                marker.setInfoBoxContent('<p>' + display_name + '<' + '/p>');
                return marker;
            }

            function initSearch() {
                cleanUp();
                searcher = MMFactory.createSearchRequester(funcRef);
                search = new MMSearch();
                var bounds = new MMBounds();
                search.return_fields = rfs;                

                //create link for yellow box
                //address_qs_value = document.getElementById('address_qs').value;
                //street_value = document.getElementById('street').value;
                //town_value = document.getElementById('town').value;
                //document.getElementById("link").innerHTML = "<a href='http://www.multimap.com/clients/browse.cgi?client=tfl_new&amp;client=tfl_new&amp;addr2=" + street_value + "&amp;db=GB" + "&amp;addr3=" + town_value + "&amp;submit2=search&amp;pc=" + address_qs_value + "'>Find out where you will be able to pay the charge from 31 October onwards.</a>";
                //document.getElementById('yellowblock').style.display = 'block';         
                
               if (address_select.options && address_select.options.length > 1) {
                       var coords = address_select.options[address_select.selectedIndex].value.split(',');
                       search.point = new MMLocation(new MMLatLon(coords[0], coords[1]));
                            search.result_set_size = 20;
                            document.getElementById('mapviewer').style.display = 'block';
                            loadingStatus(true);
                            searcher.search(search);
                            document.getElementById('address_matches').style.display = 'none';
                            document.getElementById('buttons').style.display = 'none';
                            document.getElementById('searchfields').style.display = 'block';
                            document.getElementById('searchagain').style.display = 'block';
                            mapviewer.getCurrentPosition();
                } else if (address_qs.value != '') {
                      search.address = new MMAddress({ qs: address_qs.value, country_code: 'uk' });
                            search.result_set_size = 20;
                            document.getElementById('mapviewer').style.display = 'block';
                            loadingStatus(true);
                            searcher.search(search);
                            document.getElementById('searchfields').style.display = 'none';
                            document.getElementById('searchagain').style.display = 'block';
                            mapviewer.getCurrentPosition();
               } else if (street.value != '') {
                     search.address = new MMAddress({ qs: street.value, country_code: 'uk' });
                     if (address_select.options && address_select.options.length < 1) { 
                            search.result_set_size = 20;
                            document.getElementById('mapviewer').style.display = 'block';
                            loadingStatus(true);
                            searcher.search(search);
                            document.getElementById('address_text').style.display = 'none';
                            document.getElementById('searchagain').style.display = 'block';
                            mapviewer.getCurrentPosition();
                     }
               } else if (town.value != '') {
                    search.address = new MMAddress({ qs: town.value, country_code: 'uk' });
                            search.result_set_size = 20;
                            document.getElementById('mapviewer').style.display = 'block';
                            loadingStatus(true);
                            searcher.search(search);
                            document.getElementById('address_text').style.display = 'none';
                            document.getElementById('searchagain').style.display = 'block';
                            mapviewer.getCurrentPosition();
                } else {
                    search.point = mapviewer.getCurrentPosition();
                            search.result_set_size = 20;
                            document.getElementById('mapviewer').style.display = 'block';
                            loadingStatus(true);
                            searcher.search(search);
                            document.getElementById('address_text').style.display = 'none';
                            document.getElementById('searchagain').style.display = 'block';
                            mapviewer.getCurrentPosition();
                }
            }

            function cleanUp() {
                // Clean up the HTML containers
                var message = document.getElementById('message');
                while (message.firstChild) {
                     message.removeChild(message.firstChild);
                }
                message.style.display = 'none';
                var record_list = document.getElementById('recordlistdiv');
                while (record_list.firstChild) {
                    record_list.removeChild(record_list.firstChild);
                }
                mapviewer.removeAllOverlays();

                markers = new Array();
            }

            function resultsLoaded() {
                // Process search results
                var container = document.getElementById('recordlistdiv');
                loadingStatus(false);

                if (searcher.error_code) {

                    if (searcher.error_code == 'MM_GEOCODE_MULTIPLE_MATCHES') {
                        processGeocodingErrors(searcher.result_set);
                    } else if (searcher.error_code == 'MM_GEOCODE_NO_MATCHES') {
                        alert("No matches could be found for your input address.");
                    } else {
                        alert(searcher.error_code + ': ' + searcher.error_explanation);
                    }
                    return;
                }

                var results_returned = 1;

                //  Create divs
                var el = document.createElement('div');
                el.id = 'recordlist';

                var start_index_value = 1;
                if (search.start_index && Number(search.start_index) > 0) {
                    start_index_value = Number(search.start_index);
                }
                
                // for each record set
                for (var count = 0, l = searcher.record_sets.length; count < l; count++) {

                    // for each record
                    if (searcher.record_sets[count].error) {
                        var err = '';
                        if (searcher.record_sets[count].error.error_explanation) {
                            err = searcher.record_sets[count].error.error_explanation;
                        } else {
                            err = 'Your request failed. Error code: ' + searcher.record_sets[count].error.error_code;
                        }
                        alert(err);
                        return;
                    }

                    if (searcher.record_sets[count].records) {

                        for (var record_count = 0, rl = searcher.record_sets[count].records.length; record_count < rl; record_count++) {
                            var record = searcher.record_sets[count].records[record_count];
                            var tr = handleRecord(record, start_index_value + record_count);
                            el.appendChild(tr);
                        }

                    } else {

                        var total = searcher.record_sets[count].totalRecordCount;
                        el = document.createElement('p');
                        if (total > 0) {
                            el.appendChild(document.createTextNode('Total results found: ' + total));
                        } else {
                            el.appendChild(document.createTextNode('No results returned'));
                        }
                        results_returned = 0;
                    }

                }
                container.appendChild(el);
                if (results_returned == 1) {
                    mapviewer.goToPosition(mapviewer.getAutoScaleLocation(markers));
                }

            }
            function handleRecord(record, num) {
                var recordid = record.id;
                var marker_text = '<p><strong>' + num + '. ';
                marker_text += record.name + '</strong><br/>';
                for (i = 0, j = 0; i < rfs.length; i++) {
                    if (record[rfs1[i]]) {
                        if (j > 0) marker_text += '<br/> ';
                        marker_text += record[rfs1[i]];
                        j++;
                    }
                }
                marker_text += '<' + '/p>';
                marker_text += '<a href="http://classic.multimap.com/clients/content.cgi?client=percept_mob_en&page=mm2m_submit&url=http://classic.multimap.com/clients/browse.cgi?client=percept_mob_en&f_id=' + recordid + '" style="text-decoration:underline;">Send to Mobile</a>';
                
                if (record.point) {
                    var marker = createMarker(record.point, marker_text, num);
                    markers.push(marker);
                }
                var anchor = document.createElement('a');
                anchor.href = '#';
                anchor.setAttribute("style", "color:#000;");
                anchor.record_id = record.id;
                anchor.appendChild(document.createTextNode(record.name));
                anchor.onclick = function() { openInfoBox('click', marker); };
                var tr = document.createElement('div');
                tr.setAttribute("class", "tableblock");
                tr.setAttribute("className", "tableblock");
                
                var tds1 = [
                    anchor
                ];
                var tds2 = [
                    //document.createTextNode(record.street),
                    //document.createTextNode('Opening Times '),
                    //document.createTextNode(record.town),
                    //document.createTextNode('Mon-Fri: ' + record.monfri)
                    record.street + '<br/>' + record.town + '<br/>' + record.pc + '<br/>' + 'Disabled Access? ' + record.disablednew
                ];

                var tds3 = [
                    'Opening Times ' + '<br/>' + 'Mon-Fri: ' + record.monfri + '<br/>' + 'Sat: ' + record.sat + '<br/>' + 'Sun: ' + record.sun
                    //document.createTextNode('Sat: ' + record.sat),
                    //document.createTextNode('Disabled Access? ' + record.disablednew),
                    //document.createTextNode('Sun: ' + record.sun)

                ];

                var tds4 = [
                    document.createTextNode('')
                ];
                
                for (i = 0; i < tds1.length; i++) {
                    var div = document.createElement('div');
                    div.setAttribute("className", "outlay");
                    div.setAttribute("class", "outlay");
                    var td = document.createElement('span');
                    div.appendChild(td);
                    td.setAttribute("className", "inneroutlay");
                    td.setAttribute("class", "inneroutlay");
                    td.appendChild(document.createTextNode(num + ' . '));
                    td.appendChild(tds1[i]);
                    
                    
                    var anchor = document.createElement('a');
                    //anchor.href = '#';
                    anchor.setAttribute("href", "javascript:setZoom" + record.point + "; scroll(0,0)");
                    anchor.setAttribute("className", "view");
                    anchor.setAttribute("class", "view");
                    //anchor.setAttribute("onClick", "setZoom" + record.point + ";");
                    anchor.innerHTML = 'View close-up map';
                    div.appendChild(td);
                    div.appendChild(anchor);
                    tr.appendChild(div);
                 }

                for (i = 0; i < tds2.length; i++) {
                    var td = document.createElement('div');
                    td.setAttribute("class", "floatleft");
                    td.setAttribute("className", "floatleft");
                    td.innerHTML = tds2[i];
                    //td.appendChild(tds2[i]);
                    tr.appendChild(td);
                }

                for (i = 0; i < tds3.length; i++) {
                    var td = document.createElement('div');
                    td.setAttribute("class", "floatleft");
                    td.setAttribute("className", "floatleft");
                    td.innerHTML = tds3[i];
                    //td.appendChild(tds3[i]);
                    tr.appendChild(td);
                }

                
                    var div = document.createElement('div');
                    div.setAttribute("class", "floatleftwide");
                    div.setAttribute("className", "floatleftwide");
                    var img = document.createElement('img');
                    img.setAttribute("src", "images/phone.gif");
                    img.setAttribute("alt", "send this information to your mobile");
                    var anchor = document.createElement('a');
                    anchor.href='http://classic.multimap.com/clients/content.cgi?client=percept_mob_en&page=mm2m_submit&url=http://classic.multimap.com/clients/browse.cgi?client=percept_mob_en&f_id=' + recordid;
                    anchor.innerHTML = '&#160;&#160;Send this information to my mobile phone';
                    div.appendChild(img);
                    div.appendChild(anchor);
                    tr.appendChild(div);
              return tr;
            }

            function formatInt(num, min_width) {
                // Format Integer to specified width (adding leading zeros)
                var str = num.toString();
                while (str.length < min_width) {
                    str = '0' + str;
                }
                return str;
            }

            function processGeocodingErrors(result_set) {

                for (var j = 0; j < result_set.length; j++) {
                    var displayName = result_set[j].address.display_name;
                    var point = result_set[j].coords;
                    var option = document.createElement('option');
                    option.value = point.lat + ',' + point.lon;
                    option.appendChild(document.createTextNode(displayName));
                    address_select.appendChild(option);
                    address_select.selectedIndex = 0;
                }
                document.getElementById('address_matches').style.display = 'block';
                document.getElementById('address_text').style.display = 'none';
            }

            function cleanMultipleMatches() {
                while (address_select.firstChild) {
                    address_select.removeChild(address_select.firstChild);
                }
                address_qs.value = '';
                street.value = '';
                town.value = '';
                document.getElementById('address_matches').style.display = 'none';
                document.getElementById('address_text').style.display = 'block';
            }

            MMAttachEvent(window, 'load', onLoad);