var m1 = new Map('map', -23.563596, -46.653885, 16, 'roadmap');

function Map(id, latitude, longitude, zoom, mapType) {
    var _self = this;
    var latLng = new google.maps.LatLng(latitude, longitude);
    var _mapElement = document.getElementById(id);
    var _mapOptions = {
        zoom: zoom,
        center: latLng,
        mapTypeControl: false,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT },
        scaleControl: false,
		streetViewControl : false, 
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: mapType || 'roadmap'
    };
    var _map = new google.maps.Map(_mapElement, _mapOptions);
    var _markers = [];
    var _endCliente = document.getElementById('endCliente');
    var _endLoja = document.getElementById('endLoja');
    var _btBuscar = document.getElementById('btok');


    _btBuscar.onclick = function () {
        _self.findLocation(_endCliente, _endLoja);
    }


    this.findLocation = function (endCliente, endLoja) {
        _self.SetRoute(endCliente.value, endLoja);
    }

    /* Habilita Estilo */
    var mapStyle = [{
        featureType: "administrative.country",
        elementType: "geometry",
        stylers: [{ saturation: -100}]
    },
		{
		    featureType: "administrative.province",
		    elementType: "geometry",
		    stylers: [{ saturation: -100}]
		},
		{
		    featureType: "administrative",
		    elementType: "geometry",
		    stylers: [{ saturation: -99}]
		},
		{
		    featureType: "administrative.neighborhood",
		    elementType: "geometry",
		    stylers: [{ saturation: -100}]
		},
		{
		    featureType: "landscape.man_made",
		    elementType: "geometry",
		    stylers: [{ saturation: -99}]
		},
		{
		    featureType: "landscape.natural",
		    elementType: "geometry",
		    stylers: [{ saturation: -99}]
		},
		{
		    featureType: "road.highway",
		    elementType: "all",
		    stylers: [{ saturation: -97}]
		},
		{
		    featureType: "road.arterial",
		    elementType: "geometry",
		    stylers: [{ lightness: 96}]
		},
		{
		    featureType: "road.local",
		    elementType: "geometry",
		    stylers: [{ lightness: 100}]
		},
		{
		    featureType: "water",
		    elementType: "geometry",
		    stylers: [{ saturation: -67}]
		},
		{
		    featureType: "poi.park",
		    elementType: "all",
		    stylers: [
			{ saturation: -97 }
		]
		}, {
		    featureType: "poi.government",
		    elementType: "all",
		    stylers: [
			{ saturation: -100 }
		]
		}, {
		    featureType: "poi.attraction",
		    elementType: "all",
		    stylers: [
			{ saturation: -99 }
		]
		}, {
		    featureType: "administrative.land_parcel",
		    elementType: "all",
		    stylers: [
			{ saturation: -98 }
		]
		}, {
		    featureType: "poi.business",
		    elementType: "all",
		    stylers: [
		  { saturation: -99 }
		]
		}, {
		    featureType: "administrative.locality",
		    elementType: "all",
		    stylers: [
		  { saturation: -97 }
		]
		}, {
		    featureType: "poi.attraction",
		    elementType: "all",
		    stylers: [
		  { saturation: -96 }
		]
		}, {
		    featureType: "all",
		    elementType: "labels",
		    stylers: [
		  { saturation: -100 },
		  { visibility: "on" },
		  { lightness: 49 }
		]
		}, {
		    featureType: "road.highway",
		    elementType: "geometry",
		    stylers: [
		  { saturation: -89 },
		  { lightness: 60 }
		]
		}, {
		    featureType: "administrative",
		    elementType: "all",
		    stylers: [
		]
		}
	]
    var styledMapOptions = {
        map: _map,
        name: "Mercedes"
    }
    var MercedesMapType = new google.maps.StyledMapType(mapStyle, styledMapOptions);
    _map.mapTypes.set('Mercedes', MercedesMapType);
    _map.setMapTypeId('Mercedes');

    /* Habilita Rota */
    var polyOpts = { strokeColor: '#ff6600', strokeOpacity: 0.8 };
    var markerOpts = { icon: 'img/marker.png', size: '24,34' };
    var opts = { polylineOptions: polyOpts, markerOptions: markerOpts };
    directionsDisplay = new google.maps.DirectionsRenderer(opts);
    directionsDisplay.setMap(_map);

    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();

    this.SetCenter = function (latitude, longitude, zoom) {
        _map.setCenter(new google.maps.LatLng(latitude, longitude));
        if (zoom !== undefined)
            _map.setZoom(zoom);
    }

    this.SetMapType = function (mapType) {
        _map.setMapTypeId(mapType);
    }

    var _infos = [];

    this.SetRoute = function (origin, destination) {
        var c = destination.cord;
        var cord = c.split(',');
        var cordenadas = new google.maps.LatLng(cord[0], cord[1]);
        var infowindow = new google.maps.InfoWindow({
            position: cordenadas,
            content: destination.info
        });

        if (_infos.length > 0) {
            for (var i = 0; i < _infos.length; i++) {
                if (_infos[i].status == 'aberto') {
                    _infos[i].close(_map);
                    _infos[i].status = 'fechado';
                }
            }
        }

        var request = {
            origin: origin,
            destination: destination.end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        infowindow.status = 'aberto';
        _infos.push(infowindow);
        infowindow.open(_map);
    }
}