$(document).ready(function(){
	
	// Map position in DOM
	var map_container = 'google_map';
	var container = $('#'+map_container);

	// Data From DOM element
	var initLat = $(container).attr('lat'); // Lat
	var initLng = $(container).attr('lng'); // Lng
	var zoom = $(container).attr('zoom'); // Zoom
	var animation_after = parseInt($(container).attr('animation_after')); // Use Animation for some Special Markers
	var show_traffic = parseInt($(container).attr('show_traffic'));
	
	// Map Object
	var map;
	// Info Window, that used to show additional info when clicking on the Marker
	var info_window;
	// Markers, that have been already showen
	var markers_rendered = [];
	// Markers, that have been used animation event
	var markers_animated = [];
	// Init Lat & Lang
	var initLatlng = new google.maps.LatLng(initLat, initLng); // Kyiv
	// Options (we need to convert string to int for zoom)
	var myOptions = {
	  zoom: parseInt(zoom),
	  center: initLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  draggable:true
	}
	//->
	map = new google.maps.Map(document.getElementById(map_container), myOptions);
	//->
	if(show_traffic == 1){
		showRoadTraffic();
	}
	//->
	info_window = new google.maps.InfoWindow();
	
	// Render All Markers On The Map	
	function renderAllMarkers(clas)
	{
		// Clear Markers
		removeRenderedMarkers();
		
		$.each(markers,function(index,this_marker){
			var location = this_marker.location.split(',');
			var position = new google.maps.LatLng(location[0],location[1]);				
			var marker = new google.maps.Marker({
												position: position,
												map:map,
												title:this_marker.title,
												icon:this_marker.icon,
												animation: google.maps.Animation.DROP,
												animation_after:this_marker.animation,
												index:index});
			// Click On The Marker				
			google.maps.event.addListener(marker, 'click', openInfoWindow);
			
			// Rendered Markers Array
			markers_rendered.push(marker);					
		});
		
		addMarkersAnimation();
	}
	
	// Render Markers By Class
	function renderMarkersByClass(clas)
	{
		// Clear Markers
		removeRenderedMarkers();
		$.each(markers,function(index,this_marker){
			if(this_marker.data.clas == clas){
				var location = this_marker.location.split(',');
				var position = new google.maps.LatLng(location[0],location[1]);				
				var marker = new google.maps.Marker({
												position: position,
												map:map,
												title:this_marker.title,
												icon:this_marker.icon,
												animation: google.maps.Animation.DROP,
												animation_after:this_marker.animation,
												index:index});
				// Click On The Marker				
				google.maps.event.addListener(marker, 'click', openInfoWindow);
				
				// Rendered Markers Array
				markers_rendered.push(marker);
			}					
		});
		
		addMarkersAnimation();
	}

	// Adding Animation To The Markers :TODO:
	function addMarkersAnimation()
	{
		if(animation_after !== 1) return;
		
		$.each(markers_rendered,function(index,marker){
			if(marker.animation_after == 1){
				marker.setAnimation(google.maps.Animation.BOUNCE);
				markers_animated.push(marker);
			}			
		});
	}
	
	// Remove Animation From Markers
	function removeMarkersAnimation()
	{
		$.each(markers_animated,function(index,marker){
			marker.setAnimation(null);
		});
		markers_animated.length = 0;
	}
	
	// Remove Rendered Markers
	function removeRenderedMarkers()
	{
		$.each(markers_rendered,function(index,marker){
			marker.setMap(null);							 
		});
		markers_rendered.length = 0;
	}
	
	// InfoWindow
	function openInfoWindow()
	{
		info_window.setContent(markers[this.index].data.html);
		info_window.open(map,this);
		
		// Remove Animation From All Markers
		removeMarkersAnimation();
		
		if(this.getAnimation() != null){
			this.setAnimation(null);
		}else{
			this.setAnimation(google.maps.Animation.BOUNCE);
			markers_animated.push(this);
		}
	}
	
	// Show Traffic on The Roads
	function showRoadTraffic()
	{
		var trafficLayer = new google.maps.TrafficLayer();
		trafficLayer.setMap(map);
	}
	renderAllMarkers();

	$('#map_panel a[class_id]').click(function(){
		
		var class_id = $(this).attr('class_id');
		renderMarkersByClass(class_id);
		
		return false;
	});

	$('#map_panel .roads a').click(function(){
		
		showRoadTraffic();		
		return false;
	});

	
});