<!DOCTYPE html>
<html lang="ru">
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
	<script>
	var MyMap, myCollection=null, DriverNums,DriverLat, DriverLon, geoResult=null, router=null,RouterCollection=null;
	var	DriverMetka=null,DriverMetkaKey=0;
	var	CityListArray=['Кузнецк','Пенза'];
	var	CityKeyArray=[1,2];
	var	CityLonArray=[46.605079,45.008362];
	var	CityLatArray=[53.112369,53.202302];
	var ZoneRects=[];
	var ZoneList=[];
	var PolygonCollection=null;
	var n_otaxi_firefox;	//плагин
        ymaps.ready(init);
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            MyMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [53.200148, 45.014001],
                    zoom: 13,
					behaviors: ["default", "scrollZoom"]					
                });
        // Установка для карты ее центра и масштаба
		// Добавление стандартного набора кнопок
		MyMap.controls.add("mapTools");
		// Добавление кнопки изменения масштаба 
		MyMap.controls.add("zoomControl");
		// Добавление списка типов карты
		MyMap.controls.add("typeSelector");			
		//коллекция балунов с водителями
		myCollection= new ymaps.GeoObjectCollection()
		// Добавляем коллекцию геообъектов на карту.
		MyMap.geoObjects.add(myCollection);
		//коллекция полигонов
		PolygonCollection= new ymaps.GeoObjectCollection()
		MyMap.geoObjects.add(PolygonCollection);
		//запрос списка городов
		n_plugin_send_function('{"CMD":"CITIES"}');
}
	
function decimalToHexString(number)
{
    if (number < 0)
    {
    	number = 0xFFFFFFFF + number + 1;
    }
	var res=number.toString(16).toUpperCase();
	if (res.length==2) res=res+"0000"
	if (res.length==4) res=res+"00"
    return res;
}

//маршрут Откуда-Куда
function n_MakeRouteFunction(From, To)
{
        var res=new Array();
		//получаем массив маршрута из строк
		res[0]=From;
		res[1]=To;
		n_MakeRouteComplexFunction(res);
}

//сложный маршрут
function n_MakeRouteComplexFunction(Address) {
	var Result=0;
   if (Address!=""){
	document.getElementById("distance").innerHTML="";
	document.getElementById("ComplexTrack").innerHTML=Address;	
	//document.OTAXI_Form.from.value=CityFrom;
	//document.OTAXI_Form.to.value=CityTo;

    if(geoResult!=null)	MyMap.geoObjects.remove(geoResult);
	if(RouterCollection!=null) MyMap.geoObjects.remove(RouterCollection);
	 router=null;
	 geoResult=null;
	 RouterCollection=null;
     // Прокладывание маршрута
	 router = ymaps.route(Address, {
        /* Опции маршрутизатора:           - автоматически позиционировать карту */
        mapStateAutoApply: true 
    });
	
	 /* После того, как маршрут был построен, вызывается   callback-функция */ 
	router.then(function(route) {
		geoResult=route;
		/* Задание контента меток в начальной и           конечной точках */
        var points = route.getWayPoints();         
		points.get(0).properties.set("iconContent", "А");
        points.get(1).properties.set("iconContent", "Б");		
		// Добавление маршрута на карту
		MyMap.geoObjects.add(route);
		var distance = route.getLength();
		var distanceStr=distance.toFixed(0).toString();
		document.getElementById("distance").innerHTML = distanceStr;
		//передаем дистанцию в формате JSON в программу ОТАКСИ
		n_plugin_send_function('{"CMD":"GETKM","DISTANCE":"'+distanceStr+'"}');
		},
	    // Обработка ошибки
		function (error) {
			Result=1;
			alert("Возникла ошибка: " + error.message);
			return Result;
		}
	);
	};
   return Result;
}
//отправка строки в приложение
function n_plugin_send_function(json) {	
	n_otaxi_firefox = document.getElementById("n_otaxi_firefox");
	n_otaxi_firefox.n_plugin_send_json(json);
}
function n_GetDistanceFunction() {	
	//возврат длины маршрута в плагин
	if(document.getElementById("distance").innerHTML!="")
	{
		return (parseFloat(document.getElementById("distance").innerHTML)/1000);
	}
	else
	return 0;
}

function nMAP_SetPosition(Address)
{
	if (Address=="") return;
	document.getElementById("distance").innerHTML="";
	document.OTAXI_Form.from.value=Address;
	document.OTAXI_Form.to.value="";
	if(RouterCollection!=null) MyMap.geoObjects.remove(RouterCollection);
	RouterCollection=null;
	if(RouterCollection==null) RouterCollection = new ymaps.GeoObjectCollection();

    ymaps.geocode(Address, {results: 100}).then(function (res) {
                    RouterCollection.removeAll();
                    RouterCollection = res.geoObjects;
					if (res.geoObjects.getLength()) {
						MyMap.geoObjects.add(RouterCollection);
						var point = res.geoObjects.get(0);
						// Перемещаем карту с эффектом "полёта"
						MyMap.panTo(point.geometry.getCoordinates(), {flying: true,duration: 2000});
					}					
                },
				function (error) {
				// обработка ошибки
				alert("Возникла ошибка: " + error.message);
    }	);
}
function nMAP_RemoveRoute()
{
	//удаление маршрута с карты
    if(geoResult!=null)	MyMap.geoObjects.remove(geoResult);
	if(RouterCollection!=null) MyMap.geoObjects.remove(RouterCollection);
	if(DriverMetka!=null) MyMap.geoObjects.remove(DriverMetka);
	DriverMetkaKey=0;
	// Удаляем все полигоны из коллекции.
    if(PolygonCollection!=null)PolygonCollection.removeAll();
	
	 router=null;
	 geoResult=null;
	 RouterCollection=null;
	document.getElementById("distance").innerHTML="0";
	document.getElementById("ComplexTrack").innerHTML="---";
}	

function nMAP_SetCityClick()
{
	var dropdown = document.getElementById("CityList");
	var idx = dropdown.selectedIndex;
	var CityKeyX = dropdown.options[idx].value;
	
	nMAP_SetCity(CityKeyX);
	//передаем ключ города в формате JSON в программу ОТАКСИ
	n_plugin_send_function('{"CMD":"SETCITY","KEY":"'+CityKeyX+'"}');
}
function nMAP_SetCity(CityKey)
{
	var dropdown = document.getElementById("CityList");
	var idx = dropdown.selectedIndex;
	var CityKeyX = dropdown.options[idx].value;
	if(CityKeyX==CityKey) return;
	//устанавливаем текущий город по названию или из списка
	var CityLat=0;
	var CityLon=0;
	for(var i=0;i<CityKeyArray.length;i++)
	{
		if(CityKeyArray[i]==CityKey) 
				{
					CityLat=CityLatArray[i];
					CityLon=CityLonArray[i];
					break;
				}
	}
	if(CityKey!=0&& CityLat!=0&& CityLon!=0)
	{
		MyMap.panTo([CityLat,CityLon], {
			flying: true,                                
			duration: 2000                            
			});				
	}
}
//нажатие на кнопку загрузки зон
function nMAP_GetZoneRect()
{
	var dropdown = document.getElementById("CityList");
	var idx = dropdown.selectedIndex;
	var CityKeyX = dropdown.options[idx].value;
	//передаем ключ города в формате JSON в программу ОТАКСИ
	n_plugin_send_function('{"CMD":"ZONE_LIST","KEY":"'+CityKeyX+'"}');
}

function stringify(coords) {
    var res = '';
	for (var i = 0; i<coords.length; i++) {
		var CoorArray=coords[i];
        if (typeof(CoorArray) == 'object') {
			for (j = 0; j<CoorArray.length; j++) {
            if(j>0) res += ',';
			res += '{"lon":"';
            res += CoorArray[j][1].toString();
            res+= '","lat":"';
            res += CoorArray[j][0].toString();
            res += '"}';
			}
			}
	}
	return res;
}
//сохраняем зону на сервере
function nMAP_SaveZoneRect()
{
	var dropdown = document.getElementById("ZoneList");
	var idx = dropdown.selectedIndex;
	ZoneKey = dropdown.options[idx].value;
	if(ZoneKey==0) return;
	for(i=0;i<ZoneList.length;i++) {
		if(ZoneList[i].KEY==ZoneKey){
			if(ZoneList[i].POLYGON!=null) {
			ZoneList[i].POLYGON.editor.stopEditing();
			var coords=ZoneList[i].POLYGON.geometry.getCoordinates();
			var rescoord=stringify(coords);
			//alert("получена строка2: " +  rescoord);
			//передаем координаты в формате JSON в программу ОТАКСИ
			n_plugin_send_function('{"CMD":"ZONE_RECT_SAVE","KEY":"'+ZoneKey+'","RECT":['+rescoord+']}');
			break;
		}
		}
	}
}

//изменение зоны в списке выбора
function nMAP_SetZone(KEY)
{

}
//редактор зоны
function nMAP_EditZoneRect()
{
	var dropdown = document.getElementById("ZoneList");
	var idx = dropdown.selectedIndex;
	ZoneKey = dropdown.options[idx].value;
	if(ZoneKey==0) return;
	for(i=0;i<ZoneList.length;i++) {
		if(ZoneList[i].KEY==ZoneKey){
			if(ZoneList[i].POLYGON!=null) ZoneList[i].POLYGON.editor.startDrawing();
				else
				{
				//создаем новый полигон и включаем ему режим редактирования
				var colorP='#'+decimalToHexString(ZoneList[i].COLOR);
				var myPolygon = new ymaps.Polygon([[]], {
						hintContent: ZoneList[i].NAME
					}, {			// Цвет заливки.
					fillColor: colorP,
					// Ширина обводки.
					strokeWidth: 5,
					opacity: 0.5
				});
				ZoneList[i].POLYGON=myPolygon;
				PolygonCollection.add(ZoneList[i].POLYGON);				
				ZoneList[i].POLYGON.editor.startDrawing();
				}
		}
	}
}

//основная функция по приему JSON
function n_map_ParceJSON(pJSON)
{
	var parsedJSON = JSON.parse(pJSON);
	var CMD=parsedJSON.CMD;
	//alert("получена строка: " +  pJSON);
	//установка позиции по Город Улица Дом
	if(CMD=="SETPOSGEO")
	{
		var GeoStr=parsedJSON.CITY+","+parsedJSON.STREET+","+parsedJSON.HOUSE;
		//alert("получена строка: " +  GeoStr);
		nMAP_SetPosition(GeoStr);
	}
	else
	//получаем длину маршрута
	if(CMD=="GETKM")
	{
        var res=new Array();
	
		for(i=0;i<parsedJSON.ADDRESS.length;i++) {
			var addr=parsedJSON.ADDRESS[i];
			//получаем массив маршрута из строк
			res[i]=addr.CITY+", "+addr.STREET+", "+addr.HOUSE;
			}
		n_MakeRouteComplexFunction(res);
	}
	else
	//города
	if(CMD=="CITIES")
	{
        CityKeyArray.length=0;
		CityListArray.length=0;
		CityLonArray.length=0;
		CityLatArray.length=0;
		//чистимсписок городов
		var dropdown = document.getElementById("CityList");
		while(dropdown.options.length > 0) dropdown.remove(0);
		dropdown[dropdown.length] = new Option("---", 0);
	
		for(i=0;i<parsedJSON.CITIES.length;i++) {
			var city=parsedJSON.CITIES[i];
			//получаем массив маршрута из строк
			CityKeyArray[i]=parseInt(city.KEY);
			CityListArray[i]=city.NAME;
			if(city.LON!='') CityLonArray[i]=parseFloat(city.LON); else CityLonArray[i]=0;
			if(city.LAT!='') CityLatArray[i]=parseFloat(city.LAT); else CityLatArray[i]=0;
			dropdown[dropdown.length] = new Option(CityListArray[i], CityKeyArray[i]);
			}
		//alert("получена строка: " +  GeoStr);
		nMAP_SetCity(0);
	}		
	else
	//установка текущего города
	if(CMD=="SETCITY")
	{
		var CITY_KEY=parseInt(parsedJSON.KEY);	//ключ
		var CITY_NAME=parsedJSON.NAME;	//название города
		nMAP_SetCity(CITY_KEY);
		var dropdown = document.getElementById("CityList");
		dropdown.value=CITY_KEY;
	}
	else
	//отображаем метку с водителем
	if(CMD=="SHOWDRIVER")
	{
		var LAT=parseFloat(parsedJSON.LAT);
		var LON=parseFloat(parsedJSON.LON);
		if(DriverMetka!=null) MyMap.geoObjects.remove(DriverMetka);
		DriverMetkaKey=parsedJSON.KEY;
			var DriverInfo='Позывной '+parsedJSON.NUM+'<br>'+parsedJSON.INFO+'<br>';
			if(parsedJSON.FREE=="0")
				DriverInfo=DriverInfo+'<font color="red">Водитель занят.</font><br>';
				else
				DriverInfo=DriverInfo+'<font color="green">Водитель свободен.</font><br>';
			if(parsedJSON.ONLINE=="0"){
				DriverInfo=DriverInfo+'<font color="red">Не на линии!</font><br>'
			} else{
				DriverInfo=DriverInfo+'<font color="green">На линии!</font><br>'
			}
		DriverMetka = new ymaps.Placemark([LAT, LON], {
            // Свойства.
            hintContent: DriverInfo
        }, {
            // Опции.
            // Своё изображение иконки метки.
            iconImageHref: './taxi_green.png',
            // Размеры метки.
            iconImageSize: [72, 84],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-36, -84]
        });		
		MyMap.geoObjects.add(DriverMetka);
		MyMap.panTo([LAT,LON], {
			flying: true,                                
			duration: 1000                            
			});				
	}
	else
	//водители
	if(CMD=="DRIVERS")
	{		
		// Удаляем все метки из коллекции.
        myCollection.removeAll();
		var cb1=document.getElementById("isShowDrivers");
		if(cb1.checked)
		for(i=0;i<parsedJSON.DRIVERS.length;i++) {
			var drv=parsedJSON.DRIVERS[i];
			var lat=parseFloat(drv.LAT);
			var lon=parseFloat(drv.LON);
			var DriverInfo='Позывной '+drv.NUM+'<br>'+drv.INFO+'<br>';
			var StretchyIcon='twirl#greenStretchyIcon';
			if(drv.FREE=="0")
				DriverInfo=DriverInfo+'<font color="red">Водитель занят.</font><br>';
				else
				DriverInfo=DriverInfo+'<font color="green">Водитель свободен.</font><br>';
			if(drv.ONLINE=="0"){
				DriverInfo=DriverInfo+'<font color="red">Не на линии!</font><br>'
				if(drv.FREE=="0") StretchyIcon='twirl#blueStretchyIcon';
					else StretchyIcon='twirl#greyStretchyIcon';
			} else{
				DriverInfo=DriverInfo+'<font color="green">На линии!</font><br>'
				if(drv.FREE=="0") StretchyIcon='twirl#redStretchyIcon';
			}
			if (DriverMetkaKey!=drv.KEY){
				myPlacemark = new ymaps.Placemark([lat, lon], {
					iconContent: drv.NUM,
					balloonContent: DriverInfo,
					hintContent: 'Водитель'+drv.NUM
					}, {preset: StretchyIcon});
				myCollection.add(myPlacemark);
				//alert("получена строка: " +  DriverInfo);
			} else {			
			//крупная метка
				if(DriverMetka!=null) MyMap.geoObjects.remove(DriverMetka);
				DriverMetka = new ymaps.Placemark([lat, lon], {            hintContent: DriverInfo			}, {
					iconImageHref: './taxi_green.png',
					iconImageSize: [72, 84],
					iconImageOffset: [-36, -84]        });		
				MyMap.geoObjects.add(DriverMetka);
			}
		}
	}
	//многоугольники зон
	if(CMD=="ZONE_RECT_LIST")
	{
		// Удаляем все полигоны из коллекции.
        PolygonCollection.removeAll();
		ZoneRects.length=0;
		//получаем массив 
		for(i=0;i<parsedJSON.RECT.length;i++) {
			var Rect=parsedJSON.RECT[i];
			ZoneRects[i]=new Object();
			ZoneRects[i].KEY=parseInt(Rect.KEY);
			ZoneRects[i].ZONE=parseInt(Rect.ZONE);
			ZoneRects[i].GEO=parseInt(Rect.GEO);
			ZoneRects[i].LAT=parseFloat(Rect.LAT);
			ZoneRects[i].LON=parseFloat(Rect.LON);
			}
		for(i=0;i<ZoneList.length;i++) {
			var PolygonArray=new Array();
			//создаем массив с углами
			var isExist=false;
			for(j=0;j<ZoneRects.length;j++) {
				if(ZoneRects[j].ZONE==ZoneList[i].KEY) {
					PolygonArray.push([ZoneRects[j].LAT,ZoneRects[j].LON]);
					isExist=true;
				}
			}
			if(isExist){
				var colorP='#'+decimalToHexString(ZoneList[i].COLOR);
				//alert("получена строка: " +  colorP+"  "+ZoneList[i].COLOR);
				var myPolygon = new ymaps.Polygon([PolygonArray], {
						hintContent: ZoneList[i].NAME
					}, {			// Цвет заливки.
					fillColor: colorP,
					// Ширина обводки.
					strokeWidth: 5,
					opacity: 0.5
				});
				ZoneList[i].POLYGON=myPolygon;
				PolygonCollection.add(ZoneList[i].POLYGON);
			}
		}
	}
	//зоны
	if(CMD=="ZONE_LIST")
	{
		//чистимсписок городов
		var dropdown = document.getElementById("ZoneList");
		while(dropdown.options.length > 0) dropdown.remove(0);
		dropdown[dropdown.length] = new Option("---", 0);
		ZoneList.length=0;
		for(i=0;i<parsedJSON.ZONE.length;i++) {
			var ZONE=parsedJSON.ZONE[i];
			ZoneList[i]=new Object();
			ZoneList[i].KEY=parseInt(ZONE.KEY);
			ZoneList[i].NAME=ZONE.NAME;
			ZoneList[i].GEO=parseInt(ZONE.GEO);
			ZoneList[i].COLOR=parseInt(ZONE.COLOR);
			ZoneList[i].LAT=parseFloat(ZONE.LAT);
			ZoneList[i].LON=parseFloat(ZONE.LON);
			ZoneList[i].POLYGON=null;
			dropdown[dropdown.length] = new Option(ZoneList[i].NAME, ZoneList[i].KEY);
			}
		var dropdown2 = document.getElementById("CityList");
		var idx = dropdown2.selectedIndex;
		var CityKeyX = dropdown2.options[idx].value;
		//передаем ключ города в формате JSON в программу ОТАКСИ
		n_plugin_send_function('{"CMD":"ZONE_RECT_LIST","KEY":"'+CityKeyX+'"}');
	}	
	//сообщение из ОТАКСИ
	if(CMD=="SHOW_MESSAGE")
	{
		alert(parsedJSON.MESSAGE);
	}
	return 0;
}
    </script>
<style type="text/css">
body {
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;

}

.FormArea {
	width: 250px; height: 600px;
	position:absolute;
}

.fieldset{
background-color:#CCCCFF;
	border-radius: 7px;
}

.CityListSelect
{
width:217px;
}

.CityListLabel{ 
font-style: bold;
}
.FromLabel{ 
font-style: bold;
}
.ToLabel{ 
font-style: strong;
}

.ac_input {
width:210px;
}

.MapArea {
	margin-left: 260px;
}
#map{
}

.Route {
background-color:#CCCCFF;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
padding-top:3px;
}


.RouteBtn {
background-color:#330099;
padding:2px;
position:relative;
color:#fff;
font-size:12px;
border: solid 1px #330099;
background-image:
linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
border-radius: 7px;
width:70px;
}
 
.RouteBtn:active {
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
top:1px;
background-image:
linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
width:70px;
}

.RouteBtnArea {
clear:left;
width:220px;
}

.RouteChk {
clear:both;
}

.Zones {
background-color:#6699FF;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
padding-top:3px;
border-radius: 7px;
}

.Info {
background-color:#CCCCFF;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
padding-top:3px;
padding:10px;
width:225px;
margin-left:1px;
border: solid 1px #330099;
border-radius: 7px;
}

.ZonesHead {
padding:3px;
}

.ZoneList {
width:215px;
}

.ClearLine{
clear:both;
height:5px;
}

.ZonesBtnArea {
clear:left;
width:220px;
}

.ZonesBtn {
background-color:#0033FF;
padding:1px;
position:relative;
color:#fff;
font-size:12px;
border: solid 1px #0033FF;
background-image:
linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
border-radius: 7px;
width:70px;
}
 
.ZonesBtn:active {
padding-bottom:1px;
padding-left:1px;
padding-right:1px;
padding-top:1px;
top:1px;
background-image:
linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
width:70px;
}



</style>
	</head>

	<body>
			<form class="FormArea" name="OTAXI_Form" action="action" method="get">
				<fieldset class="fieldset">
				<div class="Route">
					<label class="CityListLabel" for="CityList">Город/район:</label>
					<select class="CityListSelect" name="CityList" id="CityList" onChange="nMAP_SetCityClick()">
						<option value="0">---</option>
						<option value="1">Белгородская обл., Алексеевка</option>
						<option value="2">Пенза</option>
					</select>
					<div class="ClearLine"></div>
					<label class="FromLabel" for="from">Откуда:</label>
					<input class="ac_input" autocomplete="off" id="from" name="from" type="text" size="32">					
					<div class="ClearLine"></div>
					<label class="ToLabel" for="to">Куда:</label>					
					<input class="ac_input" autocomplete="off" id="to" name="to" type="text" size="32">
					<div class="ClearLine"></div>
					<div class="RouteBtnArea">
						<input class="RouteBtn" type="button" onclick="nMAP_SetPosition(document.OTAXI_Form.from.value)" value="Перейти"/>
						<input class="RouteBtn" value="Маршрут" onclick="n_MakeRouteFunction(document.OTAXI_Form.from.value,document.OTAXI_Form.to.value)" type="button">
						<input class="RouteBtn" value="Убрать" onclick="nMAP_RemoveRoute()" type="button">
					</div>
					<div class="ClearLine"></div>
					<input class="RouteChk" type="checkbox" id="isShowDrivers" name="isShowDrivers" checked="checked">
					<label for="isShowDrivers">Показать водителей</label><br>
				</div>
				<div class="ClearLine"></div>
				<div class="Zones">
					<div class="ZonesHead"><label for="ZoneList">Зоны:</label></div>
					<select class="ZoneList" name="ZoneList" id="ZoneList" onChange="nMAP_SetZone(0)">
						<option value="0">не загружены</option>
					</select>
					<div class="ClearLine"></div>
					<div class="ZonesBtnArea">
						<input class="ZonesBtn" type="button" onclick="nMAP_GetZoneRect()" value="Загрузить" />
						<input class="ZonesBtn" type="button" onclick="nMAP_EditZoneRect()" value="Редактор" />
						<input class="ZonesBtn" type="button" onclick="nMAP_SaveZoneRect()" value="Сохранить"/>
					</div>
				</div>
			</fieldset>
			<div class="Info">
				<div class="RouteInfo"><strong>Расстояние:</strong><span id="distance"></span>0m</div>
				<div class="ClearLine"></div>
				<div class="RouteInfo"><strong>Маршрут:</strong><span id="ComplexTrack">---</span></div>
			</div>
		</div>
		</form>
		

		<div class="MapArea">
			<div id="map" style="width:100%;height:800px"></div>
			<div><embed type="application/n_otaxi_firefox" id="n_otaxi_firefox" width=640 height=20></div>
		</div>	

	</body>

</html>