<?php 

Route::isJs(function(){
ce("maping")
->tpl(function(){
?>
<div>
	<div class="map" style="min-width: 200px;min-height: 200px;width: 100%;{{style}}"></div>
</div>
<?php
})
->body(function(){
?>
<script>
	app.directive('maping', function ($timeout,$compile) {
		return {
			restrict: 'EA',
			template:{{inject-tpl}},
			scope:{ngModel:"=?",adresse:"=?",refrech:"=?",readonly:"@?",style:"@?",mapInit:"&?"},
			replace:true,
			controller:function($scope){
				
			},
			link: function ($scope, iElement, iAttrs) {
				$scope.elm = $(".map",iElement).get(0);
				$scope.refrech = function(mode){
					$scope.ActMap(mode);
				}
				$scope.ActMap = function(mode){
					if (!$scope.readonly) {
						$scope.readonly = "false";
					}
					if (mode == "true") {
						$scope.readonly = "false";
					}
					if (mode == "false") {
						$scope.readonly = "true";
					}
					$timeout(function(){
						$scope.initModel();
						if (!$scope.ngModel || typeof $scope.ngModel != "object" || $scope.ngModel instanceof Array) {
							return;
						}
						$scope.map = new google.maps.Map($scope.elm, $scope.mapOptions);
						$scope.marker = new google.maps.Marker({
						    position: new google.maps.LatLng($scope.markerOptions.lat,$scope.markerOptions.lng),
						    map:  $scope.map
						});
						$scope.defineEvents();
						$scope.updatecontrol();
					},100);
				}
				$scope.updatecontrol = function(){
					if ($scope.map) {
						if ($scope.readonly == "true") {
							$scope.map.setOptions({
								draggable: false,
								scrollwheel: false,
								panControl: false
							});
						}else{
							$scope.map.setOptions({
								draggable: true,
								scrollwheel: true,
								panControl: true
							});
						}
					}
				}
				$scope.defineEvents = function(){
					var geocoder = new google.maps.Geocoder();
					google.maps.event.addListener($scope.map, 'click', function(e) {
						if ($scope.readonly == "true") return;
						$scope.marker.setPosition(e.latLng);
						$scope.ngModel.lat = e.latLng.lat();
						$scope.ngModel.lng = e.latLng.lng();
						geocoder.geocode({
						  'latLng': $scope.marker.getPosition()
						}, function (results, status) {
						  if (status === google.maps.GeocoderStatus.OK) {
						  	if (results.length) {
							    $scope.adresse = results[0].formatted_address;
							    $scope.$apply();
						  	}
						  }
						});
						$scope.$apply();
					});
					google.maps.event.addListener($scope.map, 'zoom_changed', function(e) {
						if ($scope.readonly == "true") return;
						$scope.ngModel.zoom = $scope.map.getZoom();
						$scope.$apply();
					});
				}
				$scope.initModel = function(){
					if (!$scope.ngModel || typeof $scope.ngModel != "object" || $scope.ngModel instanceof Array) {
						return;
						$scope.ngModel = {};
					}
					var zoomdefault = 8;
					if (angular.isUndefined($scope.ngModel.lat)) {
						$scope.ngModel.lat = 35.825192;
					}else{
						zoomdefault = 14;
					}
					if (angular.isUndefined($scope.ngModel.lng)) {
						$scope.ngModel.lng = 10.632080;
					}else{
						zoomdefault = 14;
					}
					if (angular.isUndefined($scope.ngModel.zoom)) {
						$scope.ngModel.zoom = zoomdefault;
					}
					$scope.mapOptions = {
						center : {lat:$scope.ngModel.lat * 1,lng:$scope.ngModel.lng * 1},
						zoom : $scope.ngModel.zoom,
						scrollwheel: false
					};
					$scope.markerOptions = {lat:$scope.ngModel.lat*1,lng:$scope.ngModel.lng*1};
				}
				$scope.ActMap();
			}
		};
	});
</script>
<?php
});

});