﻿var map;
var geocoder;

var clientPoint;
var containerControl;

var defaultDistance = '70';

function mapLoad() {
    if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 4);
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();

        containerControl = 'ctl00_ContentPlaceHolder1_';

        var lat = document.getElementById(containerControl + 'txtClientLatitude').value;
        var lng = document.getElementById(containerControl + 'txtClientLongitude').value;
        var distance = document.getElementById(containerControl + 'txtRadius').value;
               
        clientPoint = new GLatLng(lat, lng);
        if (clientPoint && lat != 0 && lng != 0) {
            searchStores(clientPoint, distance);
        }
    }
    document.getElementById('btnGo').focus();
    var address = document.getElementById(containerControl + 'addressInput');
    if(address)
    {
        address.value = getQueryVariable('zip');
        if (address.value.length > 0) {
            searchLocations(defaultDistance);
        }
     
    }
    
}

function searchLocations(distance) {
    if(distance == '' || distance < '0')
    {
        distance = defaultDistance;
    }
    var address = document.getElementById(containerControl + 'addressInput').value;
    geocoder.getLatLng(address, function(latlng) {
        if (!latlng) {
            alert(address + ' not found');
        } else {
            searchLocationsNear(latlng, distance);
        }
    });
}

function searchStores(point, distance) {
    searchLocationsNear(point, distance);
}

function searchLocationsNear(center, distance) {
    var radius = distance;  //document.getElementById('radiusSelect').value;
    var searchUrl = '/StoreProximity.aspx?lat=' + center.lat() + '&lng=' + center.lng() + '&rad=' + radius;
    GDownloadUrl(searchUrl, function(data, responseCode) {
        if (responseCode == 200) {
            var xml = GXml.parse(data);
            var markers = xml.documentElement.getElementsByTagName('store');
            map.clearOverlays();
            var allStoreCount = 0;
            var sidebar = document.getElementById('sidebar');
            sidebar.innerHTML = '';
            if (markers.length == 0) {
                sidebar.innerHTML = 'No results found.';
                map.setCenter(new GLatLng(40, -100), 4);
                return;
            }
            else {
                allStoreCount = markers[0].getAttribute('allStoreCount')
            }

            if (markers.length == allStoreCount) {
                map.setCenter(new GLatLng(39.83, -98.58), 3);

                var pNoCloseStores = document.createElement('p');
                pNoCloseStores.innerHTML = 'We apologize for the inconvenience, but we could not locate any 4 Wheel Parts stores in your area. Please try one of our 55 other national locations listed below.';

                var liNoCloseStores = document.createElement('li');
                liNoCloseStores.setAttribute('id', 'liNoCloseStoresMessage');
                liNoCloseStores.appendChild(pNoCloseStores);
                sidebar.appendChild(liNoCloseStores);
            }

            var bounds = new GLatLngBounds();
            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute('name');
                var address = markers[i].getAttribute('address');
                var distance = parseFloat(markers[i].getAttribute('distance'));
                var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
                var storeId = markers[i].getAttribute('storeId');
                var latLngString = markers[i].getAttribute('lat') + ',' + markers[i].getAttribute('lng');

                var marker = createMarker(point, name, address, storeId);
                map.addOverlay(marker);
                var sidebarEntry = createSidebarEntry(marker, name, address, distance, storeId, latLngString);
                sidebar.appendChild(sidebarEntry);
                bounds.extend(point);
            }

            var zoomLevel;
            zoomLevel = (markers.length <= 5 ? 9 : map.getBoundsZoomLevel(bounds));
            map.setCenter(bounds.getCenter(), zoomLevel);
        } else if (responseCode == -1) {
            alert('Data request timed out. Please try later.');
        } else {
            alert('Request resulted in error.');
        }
    });
}

function createMarker(point, name, address, storeId) {
    var marker = new GMarker(point);
    var latLngString = point.lat() + ',' + point.lng();
    var html = '<div id=\"divMapMarker\">'
            + '<b>' + name + '</b>'
            + '<p>' + address + '</p>' 
            + '<span><a href=\"/stores/Store-Info.aspx?sNo=' + storeId + '\">Store Profile</a></span>' 
            + '&nbsp;|&nbsp;'
            + '<span><a target=\"_blank\" href=\"http://maps.google.com/maps?q=' + latLngString + '(' + address + ')\">Get Directions</a></span>' 
            + '<br/>&nbsp;</div>';
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });
    GEvent.addListener(marker, 'dblclick', function() {
        map.setCenter(marker.getLatLng(), 15);
    });
    return marker;
}

function createSidebarEntry(marker, name, address, distance, storeId, latLngString) {
    var li = document.createElement('li');
    var distanceString = null;

    distanceString = (distance != 0 ? '(' + distance.toFixed(1) + 'mi)' : '');
    
    //distance
    var smallDistance = document.createElement('small');
    smallDistance.appendChild(document.createTextNode(distanceString));
    
    //name
    var strongName = document.createElement('strong');
    var aName = document.createElement('a');
    GEvent.addDomListener(aName, 'click', function() {
        GEvent.trigger(marker, 'click');
    });
    aName.setAttribute('href', '#');
    aName.appendChild(document.createTextNode(name));
    strongName.appendChild(aName);
    
    
    //address
    var pAddress = document.createElement('p');
    pAddress.appendChild(document.createTextNode(address));
    
    //store url
    var spanStoreUrl = document.createElement('span');
    spanStoreUrl.setAttribute('class', 'icon_profile');
    var aStoreUrl = document.createElement('a');
    aStoreUrl.setAttribute('href', '/stores/Store-Info.aspx?sNo=' + storeId);
    aStoreUrl.appendChild(document.createTextNode('Store Profile'));
    spanStoreUrl.appendChild(aStoreUrl);
    
    //store lat lng
    var spanStoreLatLng = document.createElement('span');
    spanStoreLatLng.setAttribute('class', 'icon_direction');
    var aStoreLatLng = document.createElement('a');
    aStoreLatLng.setAttribute('target', '_blank');
    aStoreLatLng.setAttribute('href', 'http://maps.google.com/maps?q=' + latLngString + '(' + address + ')');
    aStoreLatLng.appendChild(document.createTextNode('Get Directions'));
    spanStoreLatLng.appendChild(aStoreLatLng);


    li.appendChild(smallDistance);
    li.appendChild(strongName);
    li.appendChild(pAddress);
    li.appendChild(spanStoreUrl);
    li.appendChild(spanStoreLatLng);

    //li.innerHTML = html;

    //var a = document.createElement('a');
    
    //div.style.cursor = 'pointer';
    /*li.style.marginBottom = '5px';
    GEvent.addDomListener(a, 'click', function() {
        GEvent.trigger(marker, 'click');
    });
    */
    
    GEvent.addDomListener(li, 'mouseover', function() {
        li.style.backgroundColor = '#eee';
    });
    GEvent.addDomListener(li, 'mouseout', function() {
        li.style.backgroundColor = '#fff';
    });

    //a.style.cursor = 'pointer';
    //a.appendChild(document.createTextNode('testlink'));
    //li.appendChild(a);

    return li;
}



function getNearStores(center, distance) {
    var radius = distance;  //document.getElementById('radiusSelect').value;
    var searchUrl = '/StoreProximity.aspx?lat=' + center.lat() + '&lng=' + center.lng() + '&rad=' + radius;
    GDownloadUrl(searchUrl, function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName('store');
        map.clearOverlays();

        var storePopup = document.getElementById('storePopup');
        storePopup.innerHTML = '';
        //total number of stores will be 64 if there's no store found in a given radius
        var html = '';
        html = '<div>There are ' + markers.length + ' available stores within ' + radius + ' miles</div><br />';
        if (markers.length == 64) {
            html = '<div style=\"color: red;\">There are no available stores within ' + radius + ' miles</div><br />Listing All 4wheelparts Locations:';
        }
        document.getElementById('lblMessage').innerHTML = html;
        
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute('name');
            var address = markers[i].getAttribute('address');
            var distance = parseFloat(markers[i].getAttribute('distance'));

            var storePopupEntry = createStorePopupEntry(name, address, distance);
            storePopup.appendChild(storePopupEntry);
        }

    })
}

function createStorePopupEntry(name, address, distance) {
    var div = document.createElement('div');
    var html = null;

    if (distance != 0) {
        html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
    }
    else {
        html = '<b>' + name + '</b><br />' + address;
    }

    div.innerHTML = html;
    //div.style.cursor = 'pointer';
    div.style.marginBottom = '5px';
    return div;
}

function onEnterKeyPress(e) {

    
    var unicode = e.keyCode ? e.keyCode : e.charCode

    if (unicode == 13) {
        document.getElementById('btnGo').focus();
        document.getElementById('btnGo').click();
    }

}

function unloadGMapsAPI() {
    GUnload();
}

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return '';
}