#[body]#
<style>
#newzoneedit {
	display: none;
}
</style>

<script type="text/javascript" src="js/jquery.ajaxform.js"></script>
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<h2 style="text-align: center;">{cur_cat_name}</h2>
<div style="width: 100%; margin-top: 10px;">
	<div id="map" style="width: 100%; height: 400px;"></div>
</div>
<script>
	var myMap;
	var myPolygon;
	var editBtn;
	var poligons = new Array();
	
	ymaps.ready(init);
	
	function init() {
	    myMap = new ymaps.Map('map', {
	        center: [59.939027,30.314454], 
	        zoom: 10,
	         controls: ['smallMapDefaultSet']
	    });
 		editBtn = new ymaps.control.Button(
 		 { 
 		  data: {
            content: "Создать участок",
	      },
          options: { 
                   maxWidth: 250
	   	  }
   	     }
        );
	    myMap.controls.add(editBtn, {float: 'left'});
		editBtn.events.add('click', function(e) {
			if (!editBtn.isSelected()) {
				editBtn.data.set('content', 'Завершить рисование');
				drawPolygon();
			} else {
				editBtn.data.set('content', 'Создать участок');
				stopDrawing();
			}
		});
		
		
		{rows}
 		
	}


	function drawPolygon() {
	    myPolygon = new ymaps.Polygon([], {}, {
	        editorDrawingCursor: "crosshair",
	        editorMaxPoints: 999,
	        fillColor: '#ed4543',
	        strokeColor: '#ed4543',
	        fillOpacity: 0.6,
	        strokeWidth: 1
	    });

	    myMap.geoObjects.add(myPolygon);
	
	   var stateMonitor = new ymaps.Monitor(myPolygon.editor.state);
       stateMonitor.add("drawing", function (newValue) {
	        myPolygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
       });
    
       myPolygon.editor.startDrawing();
	
	    myPolygon.events.add(['editorstatechange'], function(e) {
    	if ( e.originalEvent.originalEvent.originalEvent.newDrawing  == false && 
    			 e.originalEvent.originalEvent.originalEvent.oldDrawing == true ) { 

					editBtn.data.set('content', 'Создать зону');
					editBtn.deselect();
					
    			 	stopDrawing();
    			 }
		 });

	
	}
	
	function stopDrawing() {
		var coords = myPolygon.geometry.getCoordinates();
		myPolygon.editor.stopDrawing();
		myMap.geoObjects.remove(myPolygon);
		
		 $.post("?cat={cur_cat}&act=editgeom&id=0",
		         { geom: coords },
		         function(ret) {
					var data = jQuery.parseJSON(ret);
					console.log(data.id);
					console.log(data);
					if (data.id != 0 ) {

						addPolygon(coords, data.id, data.title);
					}
		         }
		        );
		
	}
	
	function addPolygon(coords, id, title) {
		$.get('?cat={cur_cat}&act=getForm&id=' + id, function( data ) {
				
				var params = jQuery.parseJSON(data);
				
				_addPolygonHtml(coords, id, params.title, params.html, params.color);
			}
		);
	}
	
	
	function _addPolygonHtml(coords, id, title, html, fillcolor = "#00FF00") {

		
		poligons[id] = new ymaps.GeoObject({
	        geometry: {
	            type: "Polygon",
	            coordinates: coords,
	            fillRule: "nonZero"
	        },
	        properties:{
	        	myid: id,
	        	balloonContentHeader: title,
	            balloonContent: html,
	            balloonContentFooter: '<a href="javascript:editPolygon('+id+');">Редактировать контур</a> | <a href="javascript:removePolygon('+id+');">Удалить зону</a>'
	        }
	    }, {
	        fillColor: fillcolor,
	        strokeColor: '#0000FF',
	        opacity: 0.5,
	        strokeWidth: 1,
	        strokeStyle: 'shortdash'
	    });
	    poligons[id].events.add(['editorstatechange'], function(e) {
	    
	    		if ( e.originalEvent.originalEvent.originalEvent.newDrawing  == false && 
	    			 e.originalEvent.originalEvent.originalEvent.oldDrawing == true ) { 
	    		
			    		if ( e.originalEvent.target ) {
			    				
					    		var id = e.originalEvent.target.properties.get('myid');
					    		var coords = e.originalEvent.target.geometry.getCoordinates();
					    		
					    		
					    		if (!id) stopDrawing();
					    		
					    		
								$.post("?cat={cur_cat}&act=editgeom&id=" + id,
								         { geom: coords },
								         function(ret) {
											var data = jQuery.parseJSON(ret);
											if (data.id != 0 ) {
												addPolygon(coords, data.id, data.title);
											}
								         }
								 );	
						 }	
				 }
	    	} 
	    );
	    myMap.geoObjects.add(poligons[id]);
	}
	
	function editPolygon(id) {
	   myPolygon = poligons[id];

	   myMap.geoObjects.add(myPolygon);
	
	   var stateMonitor = new ymaps.Monitor(myPolygon.editor.state);
       stateMonitor.add("drawing", function (newValue) {
	        myPolygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
       });
       
       myPolygon.editor.startDrawing();
	}

	function removePolygon(id) {
		$.get('?cat={cur_cat}&act=remove&id=' + id, function(data) {
			myMap.geoObjects.remove(poligons[id]);
		});
	}

	  function submit_form(id, idn) {
	      var options = {
		  	success: function( response ) {
		    	    
    				var params = jQuery.parseJSON(response);
					var data = params.html;

		    	    $('#resp' + idn ).html('<span style="color: green;">Данные сохранены</span>' + data );
		    	    
		    	    poligons[id].properties.set('balloonContent', data);
					poligons[id].options.set('fillColor', params.color);

		    	    //console.log(poligons[id]);
		  	}
		  };
    	$('#form' + idn).ajaxSubmit( options );
   	    $('#resp' + idn).html("<img src='img/loader.gif'>"); 

		return false;
	  }	
</script>
#[!body]#


#[row]#
addPolygon({coords}, {id}, "{title}");
#[!row]#