var currentMap = "theActualMap";
var currentForm;
var currentFormPrefix = "locator-";

function geocoder_search() 
{
    geosearch = new VMGeoSearch();
    myaddress = new VMAddress();

    myaddress.city = document.getElementById(currentFormPrefix + 'town').value;
    myaddress.zipCode = document.getElementById(currentFormPrefix + 'postcode').value;
    myaddress.countryISOCode = document.getElementById(currentFormPrefix + 'country').value;

    geosearch.addEventHandler("onCallBack", display_ambiguity);
    geosearch.search(myaddress);
}

function display_ambiguity() 
{
        if (geosearch.results.length < 1) 
        {
            alert("No results found. Please try another search.");
        } else {
            poi_definition(0);
        }
}

function poi_definition(idx) {
    poiDefinition = new VMPOIDefinition();
    poiDefinition.addEventHandler("onCallBack", poi_search);
    poiDefinition.getDefinition("149825");
}

function poi_search() {
    myPOIsearch = new VMPOISearch(poiDefinition);

    // START CRITERIA SEARCH
    if (document.getElementById("selected-boots").checked == true) {
        poiDefinition.setCriteria(1, 1, true);
    }
    if (document.getElementById("selected-dermablend").checked == true) {
        poiDefinition.setCriteria(2, 1, true);
    }
    if (document.getElementById("selected-freesamples").checked == true) {
        poiDefinition.setCriteria(3, 1, true);
    }
    if (document.getElementById("selected-vichyconsult").checked == true) {
        poiDefinition.setCriteria(5, 1, true);
    }
    if (document.getElementById("selected-dermo-analyser").checked == true) {
        poiDefinition.setCriteria(4, 1, true);
    }
    //if (document.forms['geocoder_form'].elements['c6'].checked == true)
    //{
    //poiDefinition.setCriteria(6,1,true);
    //}
    // END OF CRITERIA SEARCH	

    //poiDefinition.setCriteria(3, 1, true);
    myPOIsearch.addEventHandler("onCallBack", poi_result);
    myPOIsearch.search(geosearch.results[0].coords);
}

var count = 1;
var pageCount = 1;
var currentResultsPage = 1;

function poi_result() {

    if (myPOIsearch.result.VMPOIs.length > 0) {

        $('step-findpharmacy').setStyle("display", "none");
        $('step-localevents').setStyle("display", "none");
        $('step-searchresults').setStyle("display", "block");
        $('step-map').setStyle("display", "block");
    
        myPOIlist = myPOIsearch.result;

        document.getElementById(currentMap).innerHTML = "";
        map = new VMMap(document.getElementById(currentMap));

        var poiBubbleHtml;
        var searchResultsHtml = "<div id='searchResultsPage1'>";
        var pagingHtml = '<ul><li class="prev"><a href="#" class="textBased" onclick="previousResultsPage();">Prev</a></li><li class="pages">';
        

        for (i = 0; i < myPOIsearch.result.VMPOIs.length; i++) {
            var myPOIlayer;
            myicon = new VMIcon("/local/en-gb/sections/map_icon.png", -18, -20);

            //DISTANCE DISPLAY
            var distance = parseFloat("0.0");
            distance = myPOIsearch.result.VMPOIs[i].distance;
            if (distance < 1000) {
                distance = Math.round(distance * 0.914);
                distance += "yd";
            }
            else {
                distance = Math.round(distance / 160.9) / 10 + "mi";
            }
            //DISTANCE DISPLAY
            
            
            searchResultsHtml += '<div class="blockTheme searchItem"><div class="pointer"><div class="number">' + count + '</div></div>';
            searchResultsHtml += '<div class="info"><ul>';
            searchResultsHtml += '<li class="storeName"><a id="mapSearchResult' + count + '" href="#" onclick="showPoi(' + (count-1) + ');">' + myPOIsearch.result.VMPOIs[i].name + '</a></li>';
            searchResultsHtml += '<li class="storeLocation">' + myPOIsearch.result.VMPOIs[i].city + '</li>';
            searchResultsHtml += '<li class="storeDistance">Distance: ' + distance + '</li>';
            searchResultsHtml += '<li class="storeMoreInfo"><a id="mapSearchResultLink' + count + '" href="#" onclick="showPoi(' + (count-1) + ');">More info...</a></li>';
            searchResultsHtml += '</ul></div></div>';

            if (count % 4 == 0) {
                pageCount++;
                searchResultsHtml += '</div><div id="searchResultsPage' + pageCount + '" style="display:none;">';
            }

            poiBubbleHtml = "<div style=\"width:200px\">";
            poiBubbleHtml += "<span class=\"titre2\">" + (i + 1) + "&nbsp;&nbsp;" + myPOIsearch.result.VMPOIs[i].name + "</span>";
            poiBubbleHtml += "<p style='text-align:left; width:70px;'>" + myPOIsearch.result.VMPOIs[i].address + "<br />";
            poiBubbleHtml += myPOIsearch.result.VMPOIs[i].zipCode + "&nbsp;-&nbsp;";
            poiBubbleHtml += myPOIsearch.result.VMPOIs[i].city + "</p>";
            poiBubbleHtml += "<div><a href=\"#\" class=\"bt\" onclick=\"showPoi(" + count + ");\">Zoom</a></div>";
            poiBubbleHtml += "</div>";

            myPOIlayer = new VMIconLayer(myPOIsearch.result.VMPOIs[i].coords, myicon, poiBubbleHtml);
            //myPOIlayer.setExpandLayer(poiBubbleHtml);
            map.addLayer(myPOIlayer);

            var myPOIlayer_number;
            myPOIlayer_number = new VMLayer(myPOIsearch.result.VMPOIs[i].coords, i, -8, -15);
            myPOIlayer_number.setHTML("<div style='color: White; padding-left: 6px; padding-top:2px; font-size:15px; font-weight:bold;'>" + (i + 1) + "</div>");
            map.addLayer(myPOIlayer_number);

            count++;

        }

        for (j = 0; j < pageCount; j++) {
            pagingHtml += '<a href="#" onclick="showResultsPage(' + (j + 1) + ');" id="searchResultsLink' + (j + 1) + '">' + (j + 1) + '</a>';
        }

        searchResultsHtml += '</div>';
        document.getElementById("mapSearchResults").innerHTML = searchResultsHtml;
        pagingHtml += '</li><li class="next"><a href="#" class="textBased" onclick="nextResultsPage();">Next</a></li></ul>';
        if (pageCount == 1) { pagingHtml = ''; }
        document.getElementById("pagingLinks").innerHTML = pagingHtml;
        document.getElementById("topLinks").innerHTML = '<a class="textBased" href="/local/en-gb/sections/store-locator.aspx">Return to Search</a>';

        map.drawMapFromLayers();
        map.activateSatelliteHybrid(true);
        map.activateShowPois(true);
        map.showMapTools();
    }
    else {
        alert("No results found. Please try another search.");
    }
}

function showResultsPage(i) {
    for (j = 0; j < pageCount; j++) {
        if ((j + 1) == i) {
            //console.log('searchResultsPage' + (j + 1));
            $('searchResultsPage' + (j + 1)).setStyle("display", "block");
            $('searchResultsLink' + (j + 1)).addClass("selected");
        } else {
            $('searchResultsPage' + (j + 1)).setStyle("display", "none");
            $('searchResultsLink' + (j + 1)).removeClass("selected");
        }
    }
    currentResultsPage = i;
}

function nextResultsPage(i) {
    if (currentResultsPage + 1 < (pageCount + 1)) {
        showResultsPage(currentResultsPage + 1);
    }
}

function previousResultsPage(i) {
    if (currentResultsPage - 1 > 0) {
        showResultsPage(currentResultsPage - 1);
    }
}

function showPoi(poiNum) {
    

    document.getElementById(currentMap).innerHTML = "";

    map = new VMMap(document.getElementById(currentMap));
    map.drawMap(myPOIsearch.result.VMPOIs[poiNum].coords, 16);

    itiPoint = myPOIsearch.result.VMPOIs[poiNum].coords;

    myiconlayer = new VMIconLayer(myPOIsearch.result.VMPOIs[poiNum].coords, myicon);
    map.addLayer(myiconlayer);
    map.activateSatelliteHybrid(true);
    map.activateShowPois(true);
    map.showMapTools();

    var poidetailsHtml;
    
    //CRITERIA DISPLAY
	    k=0;
	    var myPOICriteria = "";
	    
	    while (k < myPOIsearch.result.VMPOIs[poiNum].metaNums.length)
	    	{
	    	if ((myPOIsearch.result.VMPOIs[poiNum].definition.getCriteriaByNum(k+1))&&(myPOIsearch.result.VMPOIs[poiNum].definition.getCriteriaByNum(k+1).isDisplay) && (myPOIsearch.result.VMPOIs[poiNum].metaNums[k] != 0))
	        {
	          myPOICriteria += "<li> / " + myPOIsearch.result.VMPOIs[poiNum].definition.getCriteriaByNum(k+1).getLibValue(1) + "</li>";
	    		}
	    		k++;
	    	}
	    		
	    if (k == 0) {
	    	myPOICriteria = "";
	    }


    poidetailsHtml = '<div class="blockTheme searchItem"><div class="pointer"><div class="number">' + (poiNum + 1) + '</div></div> <div class="info"><ul>';

    //CRITERIA DISPLAY
    
     var distance = parseFloat("0.0");
            distance = myPOIsearch.result.VMPOIs[poiNum].distance;
            if (distance < 1000) {
                distance = Math.round(distance * 0.914);
                distance += "yd";
            }
            else {
                distance = Math.round(distance / 160.9) / 10 + "mi";
            }


                           poidetailsHtml += '<li class="storeName">' + myPOIsearch.result.VMPOIs[poiNum].name + '</li>';
                            poidetailsHtml += '<li class="storeLocation">' + myPOIsearch.result.VMPOIs[poiNum].city + '</li>';
                            poidetailsHtml += '<li class="storeDistance"><span style="color:#333333;font-weight:bold;">Distance:</span>' + distance + '</li>';
                            poidetailsHtml += '<li class="storeAddress">' + myPOIsearch.result.VMPOIs[poiNum].address + '</li>';
                            if (k > 0) { poidetailsHtml += '<li class="storeMoreLinks"><span style="color:#333333;font-weight:bold;">The following products<br/>and services are available</span>'; }
                            	poidetailsHtml += '<ul class="servicesAvailable">';
                            	poidetailsHtml += myPOICriteria;
                                poidetailsHtml += '</ul>';
                            poidetailsHtml += '</li>';
                        poidetailsHtml += '</ul>';
                   poidetailsHtml += ' </div>';

                   document.getElementById("mapSearchResults").innerHTML = poidetailsHtml;	
     //document.getElementById("topLinks").innerHTML = '<a href="#" onclick="geocoder_search();">Back to search results</a>';
                   document.getElementById("pagingLinks").innerHTML = '<a class="textBased" href="/local/en-gb/sections/store-locator.aspx">Return to Search</a>';
                   document.getElementById("topLinks").innerHTML = '<a class="textBased" href="/local/en-gb/sections/store-locator.aspx">Back to search results</a>';
    
    

}