{% extends "eZDemoBundle::pagelayout.html.twig" %}

{% block content %}
    <section class="content-view-full">
        <div class="place-list-form">
            <form action="">
                <p>
                    <select id="max-dist-place-list" disabled="disabled">
                        <option value="10000">{{ 'within 10000km'|trans }}</option>
                        <option value="1000">{{ 'within 1000km'|trans }}</option>
                        <option value="100">{{ 'within 100km'|trans }}</option>
                        <option value="10">{{ 'within 10km'|trans }}</option>
                        <option value="1">{{ 'within 1km'|trans }}</option>
                        <option value="0">{{ 'Show all places'|trans }}</option>
                    </select>
                </p>
                <p>
                    <button class="btn btn-warning btn-large" id="sort-place-list" disabled="disabled">
                        {{ 'Show places'|trans }}
                    </button>
                </p>
                <p>
                    <button class="btn btn-warning btn-large" id="gmap-place-list" disabled="disabled">
                        {{ 'View on Map'|trans }}
                    </button>
                    <div id="buttonContentMapHidden" class="place-list-content-hidden">
                        {{ 'Hide Map'|trans }}
                    </div>
                </p>
            </form>
            <p id="sort-place-list-errors" class="place-list-text-error"></p>
            <p class="jsenable-place-list-info place-list-text-info">
                {{ 'Javascript must be enabled in order to use the place list feature'|trans }}
            </p>
        </div>

        <div class="row">
            <div class="span9 place-list-name">
                <h1>{{ ez_render_field( content, 'name') }}</h1>

                <div id="place-list-gmap-container" class="place-list-gmap"  >
                    <div id="maplocation-map" class="place-list-map-size"></div>
                </div>
                <div id="place-list-container">
                    {{ render( controller(
                            'eZDemoBundle:Place:listPlaceList',
                                { 'locationId': location.id }
                            )
                        )
                    }}
                </div>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>
        YUI(YUI3_config).use('io-base', 'node', function(Y) {
            //Generating URL with keys values that will be replaced when clicking
            var uriTemplate = '{{ path(
                        'ezpublish_ezdemo_ajax_sorted_place_list',
                        {'locationId': location.id, 'latitude': 'key_lat', 'longitude': 'key_lon','maxDist': 'key_dist'}
                        ) }}',
                noGeoLocateMsg = '{{ 'Geolocation feature is not available on your browser, please consider updating it.'|trans }}',
                disabledGeoLocateMsg = '{{ 'Geolocation feature is disabled on your browser. Check the permission settings to allow it.'|trans }}',
                ajaxErrorMsg = '{{ 'Your request has failed, please try again later.'|trans }}',
                container = Y.one('#place-list-container'),
                sortedPlaceButton = Y.one('#sort-place-list'),
                displayMapButton = Y.one('#gmap-place-list'),
                errorContainer = Y.one('#sort-place-list-errors'),
                distanceList = Y.one('#max-dist-place-list'),
                mapContainer = Y.one('#place-list-gmap-container'),
                buttonContentVisibleMap = displayMapButton.getContent(),
                buttonContentHiddenMap = Y.one('#buttonContentMapHidden').getContent(),
                markers=[];

            if ("geolocation" in navigator) {
                sortedPlaceButton.set('disabled', false);
                displayMapButton.set('disabled', false);
                distanceList.set('disabled', false);
            } else {
                errorContainer.setHTML(noGeoLocateMsg);
            }

            displayMapButton.on('click', function (e) {
                var placeList = Y.all('.place-list-item'),
                    mapView,
                    i;

                e.preventDefault();
                //The marker's array is reseted before each map init
                markers = [];
                mapView = function(mapId, latitude, longitude) {
                    var map = new google.maps.Map(document.getElementById(mapId), {
                                center: new google.maps.LatLng(latitude, longitude),
                                zoom: 13,
                                draggable: true,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }),
                        infowindow = new google.maps.InfoWindow(),
                        latlngbounds = new google.maps.LatLngBounds();
                    //Markers are made from the data-attributes of the place list displayed
                    placeList.each(function (place) {
                        var marker = new google.maps.Marker( {
                            position: new google.maps.LatLng(
                                place.getData('place-lat'),
                                place.getData('place-long')
                            ),
                            title: place.getData('place-name'),
                            animation: google.maps.Animation.DROP
                        } );
                        markers.push(marker);
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.setContent(place.one('.infobox-content').getContent());
                            infowindow.setPosition(this.position);
                            infowindow.open(map, this);
                        } );
                    });
                    if( markers.length ) {
                        for (i = 0; i < markers.length; i++) {
                            markers[i].setMap(map);
                            // extend bounds with the position of the marker
                            latlngbounds.extend(markers[i].position);
                        }
                        // finally extend bounds with the map center
                        latlngbounds.extend(map.center);
                        map.fitBounds(latlngbounds);
                    }
                };

                navigator.geolocation.getCurrentPosition(function(position) {
                    mapView("maplocation-map", position.coords.latitude, position.coords.longitude);
                } );

                if (mapContainer.hasClass("place-list-gmap")) {
                    displayMapButton.setHTML(buttonContentHiddenMap);
                } else {
                    displayMapButton.setHTML(buttonContentVisibleMap);
                }

                mapContainer.toggleClass("place-list-gmap");
            });

            sortedPlaceButton.on('click', function (e) {

                e.preventDefault();
                container.addClass('place-list-loading');

                navigator.geolocation.getCurrentPosition(function (position) {
                    var maxDist = distanceList.get('value'),
                        uri;
                    //Case maxdist == 0 allows to show all places (unsorted list)
                    if (maxDist == 0) {
                        uri = '{{ path('ezpublish_ezdemo_ajax_default_placeList',{ 'locationId': location.id } ) }}';
                    } else {
                        uri = uriTemplate.replace('key_lat', position.coords.latitude).replace('key_lon', position.coords.longitude).replace('key_dist', maxDist);
                    }
                    var config = {
                        method: 'GET',
                        on: {
                            success: function (id, response) {
                                container.setHTML(response.responseText);
                                container.removeClass('place-list-loading');
                                //if map open we update it and keep it open
                                if(!mapContainer.hasClass("place-list-gmap")) {
                                    displayMapButton.invoke('click');
                                    mapContainer.toggleClass("place-list-gmap");
                                    displayMapButton.setHTML(buttonContentHiddenMap);
                                }
                            },
                            failure: function (id, response) {
                                container.removeClass('place-list-loading');
                                errorContainer.setHTML(ajaxErrorMsg);
                            }
                        }
                    };
                    Y.io( uri, config );
                }, function () {
                    container.removeClass('place-list-loading');
                    errorContainer.setHTML(disabledGeoLocateMsg);
                }, {timeout:3000});
            });
        });
    </script>
{% endblock %}