var key                   = 0;
var autoStart             = '';
var directionsService     = new google.maps.DirectionsService();
var map                   = new Array();
var mapDirections         = new Array();
var googleMapsStart       = new Array();
var googleMapsDestination = new Array();
var googleMapsIcons       = new Array();
var printMaps             = false;
var zoomValue;
var zoom;
var activeMap      = 'false';
var directionPanel = 'false';
var printMaps = false;

/**
 * googleMaps
 * @param none
 * @return
**/
function googleMaps() {
    var keyValue = $('#table_compare_routes .latLng').length;
    var mapOptions = {
        zoom                    : 15,
        scrollwheel             : false,
        navigationControl       : true,
        mapTypeControl          : false,
        scaleControl            : false,
        draggable               : true,
        mapTypeId               : google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {  
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeControlOptions   : {  
            style: google.maps.MapTypeControlStyle.ZOOM_PAN
        }
    };
    for(var i = 0; i < keyValue; i++) {
        /**
         * Merchant destination points 
        **/
        var obj = document.getElementById('destination_' + i);
        if(obj) {
            googleMapsDestination[i] = obj.value;
            var merchant             = googleMapsDestination[i];
            var merchantSplit        = merchant.split(",");
            
            mapOptions.center        = new google.maps.LatLng(merchantSplit[0], merchantSplit[1]);
            
            map[i]                   = new google.maps.Map(document.getElementById('google_maps_' + i), mapOptions);
            mapDirections[i]         = new google.maps.DirectionsRenderer();
            mapDirections[i].setMap(map[i]);
            
            /**
             * Merchant Icons
             */
            var img = document.getElementById('img_' + i).src;
            var img = img.split('/');
            img.reverse();
            
            var latLng = googleMapsDestination[i].split(",");
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(latLng[0], latLng[1]),
                map     : map[i],
                icon    : '/media/merchant_markers/' + img[0]
            });
            marker.zIndex = 1000;
        }
    }
}

$().ready(function(){
    //Zoomtrigger
    $('.zoomTrigger').toggle(function(){
        var key = $(this).attr('rel');
        if(activeMap == 'false') {
            $('#google_maps_wrapper_' + key)
                .addClass('activeMap')
                $(this).html('Verklein Route');
                activeMap = 'true';
                
                $(('#google_maps_wrapper_' + key) + ' .google_maps'            ).css('border', '0');
                $(('#google_maps_wrapper_' + key) + ' .direction_panel_trigger').css('display', 'block');
                
                //GoogleMaps refresh  na map resize
                google.maps.event.trigger(map[key], 'resize');
        }
        else {
            alert('U heeft al een Route vergroot');
        }
    }, function(){
       var key = $(this).attr('rel');
       if(directionPanel == 'false') {
           $('#google_maps_wrapper_' + key)
               .removeClass('activeMap');
               $(('#google_maps_wrapper_' + key) + ' .direction_panel_trigger').css('display', 'none');
               $(('#google_maps_wrapper_' + key) + ' .print_maps'             ).css('display', 'none');
               $(('#google_maps_wrapper_' + key) + ' .google_maps'            ).css('border', '2px solid #ccc');
               $(this).html('Vergroot Route');
               activeMap = 'false';
        } 
        else {
            alert('U moet eerst het paneel minimaliseren!');
        }
    });
    //Direction panel
    $('.direction_panel_trigger').toggle(function(){
        var key = $(this).attr('rel');
        $('#direction_panel_' + key)
            .addClass('direction_panel_active');
            $('#direction_panel_' + key).slideDown();
            $(('#google_maps_wrapper_' + key) + ' .print_maps').slideDown();
            //Googlemaps directionPanel
            mapDirections[key].setPanel(document.getElementById('direction_panel_' + key));
            directionPanel = 'true';
            $(this).html('Verklein route paneel');
    }, function(){
       var key = $(this).attr('rel');
       $('#directuin_panel_' + key)
           $('#direction_panel_' + key).slideUp();
           $(('#google_maps_wrapper_' + key) + ' .print_maps').slideUp();
           directionPanel = 'false';
           $(this).html('Vergroot route paneel');
    });
    
    $('.print_maps').click(function() {
        if(printMaps == true) {
            window.print();
        }
    });
});

/**
 * calcRoute
 * @param none
 * @return
**/
function setDirections(start, key) {
    /**
     * Startingpoint
    **/
    
    var request = {
        origin:start, 
        destination:googleMapsDestination[key],
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    
    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //Afstand in kilometers van start punt naar eindbestemming (merchant)
            var distance = (result.routes[0].legs[0].distance.value / 1000);
            distance = distance.toFixed(2);
            $('#distance_' + key).html('<span>' + distance + ' km' + '</span>');

            //PrintMaps
            $('.print_maps').css('background', 'url(/img/detail_icons.png) 0 -100px no-repeat');
            printMaps = true;
            //PrintMaps
            
            mapDirections[key].setDirections(result);
            setDirections(start, key + 1);
        }
    });
}