var Moovy = function() {

	this.map = null;
	
	this.vehicleMarkers = [];
	this.markerImages = [];
	this.markerGlowImages = [];
	this.trackLayers = [];
	
	this.vehicles = null;
	this.vehicleInfo = null;
	this.vehiclePositions = null;
	
	this.timerUpdate = null;
	
	this.initialized = false;
	this.loadingInfo = false;
	this.followVehicle = 0;
	this.currentVehicle = 0;
	this.timerDelay = 5000;
	
	this.getVehicleList = function() {
		$.getJSON('/api/vehicle/list', function(data) {
			if (data.status == 'ok') {
				moovy.vehicles = data.items;
				if (moovy.initialized == false) {
					moovy.renderVehicleList();
					moovy.renderVehicleMarkers();
					moovy.initialized = true;
				} else {
					moovy.updateVehicleList();
				}
			}
		});
	}
	
	this.renderVehicleList = function() {
		$.each(this.vehicles, function(i, vehicle) {
			if (typeof(vehicle) != 'undefined') {
				var line = '<li id="vehicle-' + i + '"></li>';
				$('#vehicles-list').html('').append(line);

				$('#vehicle-' + i).live('click', function () {
					moovy.setActiveVehicle(i);
				});
			}
		});
		
		this.updateVehicleList();
		
		$('#vehicles-list-loading').hide();
		$('#vehicles-list').fadeIn(200);
	}
	
	this.updateVehicleList = function() {
		$.each(this.vehicles, function(i, vehicle) {
			if (typeof(vehicle) != 'undefined') {
				var line = '';
				var status = '';
				var gsm = '<img src="/assets/img/icons/gsm-' + vehicle.gsm + '.png" />';
				var gps = (vehicle.gsm != 'fail') ? '<img src="/assets/img/icons/gps-' + vehicle.gps + '.png" />' : '';
				
				line += '<small class="number gray">' + i + '</small>';
				
				line += '<strong style="background-image: url(/assets/img/markers/' + vehicle.marker + '.png);">' + vehicle.model + ' «' + vehicle.nickname + '» ' + gsm + '' + gps + '</strong>';
				
				var info = '';
				var date = '';
				if (vehicle.date != null) {
					if (vehicle.gsm == 'fail') {
						status = '<span class="error">Нет GSM-сигнала</span>';
					} else if (vehicle.gps == 'fail') {
						status = '<span class="error">Нет GPS-сигнала</span>';
					} else {
						if (vehicle.speed > 0)
							status = '<span class="moving">Едет ' + vehicle.speed + ' км/ч</span>';
						else
							status = '<span class="stop">Стоит</span></span>';
					}
				} else {
					status = '<span class="error">Данные не поступают</span>';
				}
				date = '<div class="date">' + ((vehicle.date != null) ? vehicle.date : 'никогда') + '</div>';
				
				line += '<div class="status">' + status + date + ' </div>';
				$('#vehicle-' + i).html('').append(line);
			}
		});
	}
	
	this.renderVehicleMarkers = function() {
		$.each(this.vehicles, function(i, vehicle) {
			moovy.vehicleMarkers[i] = new google.maps.Marker({
				map: moovy.map,
				icon: moovy.markerImages[vehicle.pin],
				title: vehicle.model
			});
			
			var line = '';
			var status = '';
			var gsm = '<img src="/assets/img/icons/gsm-' + vehicle.gsm + '.png" />';
			var gps = (vehicle.gsm != 'fail') ? '<img src="/assets/img/icons/gps-' + vehicle.gps + '.png" />' : '';
			
			line += '<strong style="background-image: url(/assets/img/markers/' + vehicle.marker + '.png);">' + vehicle.model + ' «' + vehicle.nickname + '» ' + gsm + '' + gps + '</strong>';
			
			var info = '';
			var date = '';
			if (vehicle.date != null) {
				if (vehicle.gsm == 'fail') {
					status = '<span class="error">Нет GSM-сигнала</span>';
				} else if (vehicle.gps == 'fail') {
					status = '<span class="error">Нет GPS-сигнала</span>';
				} else {
					if (vehicle.speed > 0)
						status = '<span class="moving">Едет ' + vehicle.speed + ' км/ч</span>';
					else
						status = '<span class="stop">Стоит</span></span>';
				}
			} else {
				status = '<span class="error">Данные не поступают</span>';
			}
			date = '<div class="date">' + ((vehicle.date != null) ? vehicle.date : 'никогда') + '</div>';
			
			line += '<div class="status">' + status + date + ' </div>';

			var boxText = document.createElement("div");
			boxText.className = "panel";
			boxText.innerHTML = line;
			
			var myOptions = {
				content: boxText,
				disableAutoPan: false,
				maxWidth: 0,
				pixelOffset: new google.maps.Size(-110, -105),
				zIndex: null,
				boxStyle: {
					width: "220px"
				},
				closeBoxMargin: "10px 2px 2px 2px",
				closeBoxURL: "/assets/img/infobox-close.png",
				infoBoxClearance: new google.maps.Size(1, 1),
				isHidden: false,
				pane: "floatPane",
				enableEventPropagation: false
			};

			var ib = new InfoBox(myOptions);
			//ib.open(moovy.map, moovy.vehicleMarkers[i]);
			
			google.maps.event.addListener(moovy.vehicleMarkers[i], 'click', function(e) {
				ib.open(moovy.map, this);
			});
		});
		moovy.getVehiclePositions();
	}
	
	this.setActiveVehicle = function(vehicleN) {		
		if (this.currentVehicle == vehicleN) {
			$('#vehicle-' + this.currentVehicle).removeClass('active');
			this.trackLayers[vehicleN].setMap(null);
			//this.vehicleMarkers[vehicleN].setShadow();
			this.currentVehicle = 0;
			$('.widget-vehicle-info').hide();
		} else {
			$('#vehicle-' + this.currentVehicle).removeClass('active');
			$('#vehicle-' + vehicleN).addClass('active');
			
			this.currentVehicle = vehicleN;
			var newPosition = this.vehicleMarkers[vehicleN].getPosition();
			if (typeof(newPosition) != 'undefined') {
				//this.vehicleMarkers[vehicleN].setShadow(this.markerGlowImages['orange']);
				this.map.panTo(this.vehicleMarkers[vehicleN].getPosition());
				//this.map.setZoom(14);
			}
			
			this.renderPath(vehicleN);
			this.getInfo(vehicleN, true);
		}
	}
	
	this.renderPath = function(vehicleN, color) {
		var kmlUrl = 'http://moovy.ru/kml/get/?nocache=' + (new Date()).valueOf();
		
		this.trackLayers[vehicleN] = new google.maps.KmlLayer(kmlUrl, {
			preserveViewport: true
		});
		this.trackLayers[vehicleN].setMap(this.map);
	}
	
	this.getInfo = function(vehicleN, redraw) {
		vehicleN = typeof(vehicleN) != 'undefined' ? vehicleN : this.currentVehicle;
		redraw = typeof(redraw) != 'undefined' ? redraw : false;
		
		if (vehicleN > 0) {
			this.loadingInfo = true;
	
			if (redraw) {
				$('#vehicle-info').hide();
				$('.widget-vehicle-info').show();
				$('#vehicle-info-loading').show();
			} else {
				//$('#vehicle-info-loading-small').show();
			}
			$.getJSON('/api/vehicle/info/' + vehicleN, function(data) {
				if (data.status = 'ok') {
					moovy.vehicleInfo = data.items;
					moovy.renderInfo();
				}
				moovy.loadingInfo = false;
			});
		}
	}
	
	this.renderInfo = function() {
		var item = this.vehicleInfo[this.currentVehicle];
		var line = '';
		
		if (typeof(item) != 'undefined') {
			line += '<dt>Скорость:</dt><dd>' + item.speed + ' км/ч</dd>';
			line += '<dt>Курс:</dt><dd>' + item.course + '°</dd>';
			line += '<dt>Путь:</dt><dd>' + item.distance + ' км</dd>';
			line += '<dt>Расход топлива:</dt><dd>' + item.consumption_lt + ' л</dd>'
			line += '<dt>Затраты:</dt><dd>' + item.consumption_rub + ' руб.</dd>';
			$('#vehicle-info').html('').append(line);
		} else {
			line += '<dt>Ошибко</dt><dd>Не удалось загрузить ололо</dd>';
			$('#vehicle-info').html('').append(line);
		}

		$('#vehicle-info-loading').hide();
		$('#vehicle-info').fadeIn(200);
		//$('#vehicle-info-loading-small').hide();
	}
	
	this.getVehiclePositions = function () {
		$.getJSON('/api/vehicle/positions', function(data) {
			if (data.status = 'ok') {
				moovy.vehiclePositions = data.items;
				moovy.updateVehicleMarkers();
			}
		});
	}
	
	this.updateVehicleMarkers = function () {
		$.each(this.vehiclePositions, function(i, item) {
			moovy.vehicleMarkers[i].setPosition(new google.maps.LatLng(moovy.vehiclePositions[i].lat, moovy.vehiclePositions[i].lng));
			
			if (i == moovy.followVehicle) {
				moovy.map.panTo(newPosition);
				moovy.map.setZoom(16);
			}
		});
	}
	
	this._init = function() {
		var initLatLng = new google.maps.LatLng(55.754796, 37.621479); // Moscow
		var mapOptions = {
			zoom: 11,
			center: initLatLng,
			streetViewControl: false,
			mapTypeControl: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

		// Set Markers
		this.markerImages['truck'] = new google.maps.MarkerImage('/assets/img/markers/truck.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));
		this.markerImages['sable'] = new google.maps.MarkerImage('/assets/img/markers/sable.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));
		this.markerImages['gazelle'] = new google.maps.MarkerImage('/assets/img/markers/gazelle.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));
		this.markerImages['bmw-x3'] = new google.maps.MarkerImage('/assets/img/markers/bmw-x3.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));
		this.markerImages['citroen-c4'] = new google.maps.MarkerImage('/assets/img/markers/citroen-c4.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));
		
		this.markerImages['gray-1'] = new google.maps.MarkerImage('/assets/img/pins/gray-1.png', new google.maps.Size(24, 36), new google.maps.Point(0, 0), new google.maps.Point(12, 36));
		
		this.markerGlowImages['orange'] = new google.maps.MarkerImage('/assets/img/markers/glow-orange.png', new google.maps.Size(32, 32),new google.maps.Point(0, 0), new google.maps.Point(16, 16));
		
		// Get Vehicle List
		this.getVehicleList();

		// Init Autoupdate
		this.timerUpdate = setInterval(function() {
			moovy.getVehicleList();
			moovy.getVehiclePositions();
			moovy.getInfo();
		}, this.timerDelay);
	}
	
	this.log = function(msg) {
		if (window.console) {
			window.console.log(msg);
		} else {
			return;
		};
	}
	
}

moovy = new Moovy();

$(document).ready(function() {

	moovy._init();

});