!( function ( $, document, window, undefined ) {

    /**
     * Plugin name
     * @var string
     */
    var _pluginName = 'googleMapPlugin';

    /**
     * Constructor googleMapPlugin_plugin
     *
     * @param jQuery Element Wrapping container div
     * @return googleMapPlugin_plugin
     */
    var googleMapPlugin_plugin = function ( $element, options ) {

        // scope it
        var self = this;

        // store element
        self.$element = $element;

        // Default map options
        self.mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng( 0, 0 ),
            disableDefaultUI: false,
            streetViewControl: false,
            overviewMapControl: false,
            panControl: true,
            zoomControl: true,
            mapTypeControl: false,
            disableDoubleClickZoom: true,
            scrollwheel: true,
            draggable: true,
            disableDoubleClickZoom: false,
            suppressInfoWindows: false,
            markerIcon: {
                // VECTOR MARKER
                // path: google.maps.SymbolPath.CIRCLE,
                // fillColor: '#a21c26',
                // fillOpacity: 1,
                // scale: 8,
                // strokeColor: '#a21c26',
                // strokeWeight: 4

                // PNG ICON MARKER
                url: PATH_TO_ROOT + 'modules/base/assets/images/lib/google/g_mapicon4.png',
                size: new google.maps.Size( 185, 131 ),
                origin: new google.maps.Point( 0, 0 ),
                anchor: new google.maps.Point( 93, 120 )
            }
        };

        // options: merge custom options from inline-script on php page
        if ( googleMapsCustomOptions !== undefined ) {
            self.mapOptions = $.extend( {}, self.mapOptions, googleMapsCustomOptions );
        }

        // set height of maps viewport
        self.setHeight();

        // init googlemap on DOMLoad
        function initGoogleMaps() {
            self.initGoogleMaps( self.mapOptions.googleMapLocations );
        }
        google.maps.event.addDomListener( window, 'load', initGoogleMaps );
    };

    /**
     * Set height of container to height specified in data
     *
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.setHeight = function () {

        // scope it
        var self = this;

        // set height
        self.$element.height( self.mapOptions.height );
    };

    /**
     * Init googlemaps
     *
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.initGoogleMaps = function ( googleMapLocations ) {

        // scope it
        var self = this;

        // init the map
        self.map = new google.maps.Map( self.$element.get( 0 ), self.mapOptions );

        // init the map style
        self.map.mapTypes.set("styled_map", styledMapType);
        self.map.setMapTypeId("styled_map");

        // is a location list given?
        if ( googleMapLocations !== undefined ) {

            // draw markers on the map
            self.setMarkers( googleMapLocations );

            // optional: cluster the markers
            self.setMarkerClusters();
        }

        // on click of controls toggler
        $('body').on('click', '[data-map-control-toggler="true"]', function() {
            self.toggleMapControls();
        });

        // add event listening on window resizing
        $( window ).on( 'resize', function () {

            // reset height
            self.setHeight();

            // re-center map on window resize
            self.map.setCenter( self.mapOptions.center );
        } );

        // add event listening on window resizing
        $( window ).on( 'orientationchange', function () {

            // perform a new init
            self.initGoogleMaps();
        } );
    };

    /**
     * Set marker clusters
     *
     * @param {json} [locations] New marker locations
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.setMarkerClusters = function ( locations ) {

        var self = this;

        var markerClusterer = null;

        // create marker cluster (group markers when zoomed out)
        self.markerCluster = new MarkerClusterer( self.map, self.markers, {
            styles: [ {
                url: PATH_TO_ROOT + 'https://www.code.nl/hubfs/CODE/g_mapicon4.png',
                height: 45,
                width: 45,
                textColor: '#ffffff',
                textSize: 15,
                anchor: [ 13, 0 ]
            }, {
                url: PATH_TO_ROOT + 'https://www.code.nl/hubfs/CODE/g_mapicon4.png',
                height: 45,
                width: 45,
                textColor: '#ffffff',
                textSize: 15,
                anchor: [ 13, 0 ]
            }, {
                url: PATH_TO_ROOT + 'https://www.code.nl/hubfs/CODE/g_mapicon4.png',
                width: 45,
                height: 45,
                textColor: '#ffffff',
                textSize: 15,
                anchor: [ 13, 0 ]
            } ]
        } );
    };

    /**
     * Draw markers on the map
     *
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.setMarkers = function ( locations ) {

        // scope it
        var self = this;

        self.markers = [];

        // loop through locations
        for ( var i = 0; i < locations.length; i++ ) {

            var location = locations[ i ];

            var myLatLng = new google.maps.LatLng( location.latitude, location.longitude );

            // Add marker to the map
            var marker = new google.maps.Marker( {
                position: myLatLng,
                map: self.map,
                icon: self.mapOptions.markerIcon,
                title: location.title
            } );

            // if there need to be a infowindow rendered
            if ( typeof location.infowindow !== 'undefined' ) {
                var infowindow = new google.maps.InfoWindow( {
                    content: '<div class="maps-info">' + location.infowindow + '</div>',
                    boxStyle: {
                        background: "#ff0000",
                        opacity: 0.9,
                    }
                } );
                self.makeInfoWindowEvent( self.map, infowindow, marker );
            }

            self.markers.push( marker );
        }
    };

    /**
     * Redraw markers and clusters
     *
     * @param {json} [locations] New marker locations
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.resetMarkers = function ( locations ) {

        var self = this;

        // clear th marker clusters
        self.markerCluster.clearMarkers();

        // clear the markers
        for ( var i = 0; i < self.markers.length; i++ ) {
            self.markers[ i ].setMap( null );
        }

        // draw new markers on the map
        self.setMarkers( locations );

        // cluster the new markers
        self.setMarkerClusters();
    };

    /**
     * Make info window
     *
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.makeInfoWindowEvent = function ( map, infowindow, marker ) {
        google.maps.event.addListener( marker, 'click', function () {

            // open infowindow
            infowindow.open( map, marker );

            // close filter
            if ( $( window ).width() > 1280 ) {
                $( '#filter-slide-toggle .toggle' ).not( '.toggled' ).parent().trigger( 'click' );
            }

            // scroll to page bottom
            $( "html, body" ).animate( { scrollTop: $( window ).height() + "px" } );
        } );
    };

    /**
     * Toggle map controls
     *
     * @return void
     * @access public
     */
    googleMapPlugin_plugin.prototype.toggleMapControls = function () {

        // scope it
        var self = this;

        // set options for control
        self.map.setOptions({
            draggable: !self.map.draggable,
            scrollwheel: !self.map.scrollwheel,
            disableDoubleClickZoom: !self.map.disableDoubleClickZoom
        });
    };

    /**
     * googleMapPlugin plugin
     *
     * @return jQuery objects
     */
    $.fn.googleMapPlugin = function ( options ) {

        // put args in array
        var args = Array.prototype.slice.call( arguments, 1 );

        // initialize the items
        return this.each( function () {

            // store the element the plugin is set on
            var $element = $( this );

            // guard if plugin was already initted
            var instance = $element.data( 'plugin_' + _pluginName );

            // if plugin was not innited
            if ( !instance ) {

                // init plugin on element and set guard data on element
                $element.data( 'plugin_' + _pluginName, new googleMapPlugin_plugin( $element, options ) );
            } else {

                // if instance already created call method from plugin
                if ( typeof options === 'string' ) {
                    instance[ options ].apply( instance, args );
                }
            }
        } );
    };


} )( jQuery, document, window );