$(document).ready(function(){
					
			/* Etiquetas más utilizadas */
			var $video_box = $('#video-box'),
				$video_id = $('#video-id'),
				$upload_wrapper = $("#upload-wrapper"),
				$message = $("#message"),
				$espectacular = $('.espectacular'),
				$espectacular_msg = $('#espectacular-msg'),
				$loader = $('.loader'),
				$enlace = $('input#enlace'),
				$spots = $('#spots');
			
			/*
			*	APP AJAX methods
			*/
			APP.post = function(url, data, call){
			
				$loader.css('display', 'block');
			
				$.ajax({
					url: url,
					data: data,
					type: 'POST',
					dataType: 'JSON',
					success: function(data){
					
						call(data);
						$loader.css('display', 'none');
					
					},
					error: function(e, err, ethrown){
					
						/*console.log(e);
						console.log(err);
						console.log(ethrown);*/
					
					}
				});
			
			};
			
			/* Guarda los datos del video que se está viendo */
			APP.video.data = undefined;
			
			/*
			*	Carga un video en el reproductor
			*/
			APP.video.show = function(video){
			
				APP.video.data = video;
				$video_box.attr('src', video.url + '?autoplay=1');
				$video_id.attr('value', video.video_id);
				$espectacular.css('visibility', 'visible');
				$espectacular_msg.text('¿Qué piensas de este video?');
				$enlace.attr('value', APP.video.data.url);
			
			};
			
			/*
			*	Obtiene un video aleatorio
			*/
			APP.video.random = function(){
			
				APP.post('random.php', {}, function(data){
					APP.video.show(data.result);
				});				
			
			};
			
			/*
			*	Agrega un espectacular a un video
			*/
			APP.video.like = function(){
				
				var id = parseInt($video_id.attr('value'));

				APP.post('like.php', {'video_id': id}, function(data){
					
					if(data.result){
					
						$espectacular.css('visibility', 'hidden');
						$espectacular_msg.text(data.mensaje);
						
						
					}
					
				});
				
			
			};
			
			/*
			*	Comparte el video en Redes Sociales
			*/
			APP.video.share = function(social){
			
				var facebook_url = 'http://www.facebook.com/sharer.php?u=',
					twitter_url = 'http://twitter.com/intent/tweet?text=Cheka este video de longboard chull&via=javichitone&url=',
					final_url = '';
					
				if(social == 'Facebook')
					final_url = facebook_url + APP.video.data.url;
				else if(social == 'Twitter')
					final_url = twitter_url + APP.video.data.url;
					
				window.open(final_url, 'share', 'toolbar=0,status=0,width=600,height=400');
			
			};
						
			/*
			*	Cierra el uploader de Videos
			*/
			APP.uploader.close = function(){
			
				$upload_wrapper.slideUp(400);
				$('input#url').attr('value', '');
				$message.fadeOut(300);
				$message.empty();		
			
			};
			
			
			/* MAPA */
			APP.map.data = null;
			
			//CLick Handler del mapa
			APP.map.clickHandler = null;
			
			//LatLng del Spot una vez agregado
			APP.map.spotLatLng = null;
			
			//Marcardor del spot agregado
			APP.map.marker = null;
			
			//Todos los Marcadores del mapa
			APP.map.allMarkers = [];
			
			/*
			* Carga el mapa
			*/
			APP.map.init = function(){
			
				var latlng = new google.maps.LatLng(-12.169388071013927, -76.99309519468993);
				var myOptions = { zoom:11, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
				APP.map.data = new google.maps.Map(document.getElementById("map"), myOptions);
				
			};
			
			/*
			*	Agrega un marcador al mapa
			*/
			APP.map.addMarker = function(location){
				
				APP.map.spotLatLng = location; //Coloca el LatLng del Spot agregado
				APP.spot.data.direccion = APP.map.geocode(location); //Halla la direccion del Spot
				APP.map.marker = new google.maps.Marker({ position: location, map: APP.map.data	}); //Crea un marcador
				
				APP.map.data.setCenter(location); //Centra el mapa en el spot agregado
				APP.map.marker.setDraggable(true); // Permite arrastrar el spot una vez agregado al mapa
						
				
				//Desliza el formulario
				APP.spot.closeFormMessage();
				$('#addSpot-button').slideUp('slow');
				$('#addSpot-form-data').slideDown('slow');
				
				//Quita el clickHandler del mapa
				google.maps.event.removeListener(APP.map.clickHandler);
				
			};
			
			/*
			* Recibe un LatLng y devuelve su dirección
			*/
			APP.map.geocode = function(location){
			
				var geocoder = new google.maps.Geocoder();
			
				geocoder.geocode({ 'location': location }, function(results, status) {											
					if (status == google.maps.GeocoderStatus.OK) {
						
						//Se encontró la dirección
						APP.spot.data.direccion = results[0].formatted_address;
						
					} else {
						
						/* Error Hallando la dirección */
						alert("No se puede hallar la dirección del Spot. Reubícalo.");
					
					}
				});
			
			};
			
			/*
			*	Handler para el click en un .spot
			*/
			$('#spots .spot').live('click', function(){
				APP.map.data.setCenter(new google.maps.LatLng($(this).attr('data-lat'), $(this).attr('data-lng')));
				APP.map.data.setZoom(13);
			});
			
			/* SPOT */
			APP.spot.data = {};
			
			APP.spot.showFormMessage = function(){
				$('.alert').fadeIn(200);
				//Agrega el click Handler
				APP.map.clickHandler = google.maps.event.addListener(APP.map.data, 'click', function(e) { APP.map.addMarker(e.latLng); });
			};
			
			APP.spot.closeFormMessage = function(){
				$('.alert').slideUp(200);
			};
			
			APP.spot.closeForm = function(){
			
				$(':input','#addSpot-form').not(':button, :submit, :reset, :hidden').val('');
				//Inicializo los datos en null
				APP.map.spotLatLng = null;
				APP.spot.data.direccion = null;
				
				if(APP.map.marker != null){
					//Quito el marcador del mapa
					APP.map.marker.setMap(null);
					//Configuro el marcador en null
					APP.map.marker = null;
				}
				
				//Animo el formulario
				$('#addSpot-form-data').slideUp('slow');
				$('#addSpot-button').slideDown('slow');
				
			};
			
			/*
			* Obtiene todos los spots de la base de datos y los muestra
			*/
			APP.spot.getAll = function(){
			
				$.ajax({
					url: 'get_spots.php',
					dataType: 'JSON',
					type: 'GET',
					success: function(data){
						
						if(data.result){
						
							var results = "";
						
							$.each(data.spots, function(i, spot){
							
								console.log(spot);
								
								results += "<div id='" + spot.id + "' data-lat='" + spot.lat + "' data-lng='" + spot.lng + "' class='spot'>" 
											+	"<div class='social'>"
											+		"<div class='espectacular-spot radius' title='Espectacular'>" + spot.count + "</div>"
											+	"</div>"
											+	"<div class='data'>"
											+ 		"<div class='nombre'>" + spot.nombre + "</div>" 
											+ 		"<div class='direccion'>" + spot.direccion + "</div>" 
											+ 		"<div class='descripcion'>" + spot.descripcion + "</div>" 
											+	"</div>"
											+	"<div class='clear'></div>"
											+ "</div>";

								var marker = new google.maps.Marker({ position: new google.maps.LatLng(spot.lat, spot.lng), map: APP.map.data, title: spot.nombre });
								APP.map.allMarkers.push(marker);
							
							});
							
							$('#spots').prepend(results);
							
							
						}
					
					}
				});
			
			};
			
			/* 
			*	Agrega Spot a la Base de datos
			*/
			$('#addSpot-form').bind('submit', function(){
			
				var data = $(this).serialize();
				data += '&direccion=' + APP.spot.data.direccion;
				data += '&lat=' + APP.map.spotLatLng.Ha;
				data += '&lng=' + APP.map.spotLatLng.Ia;
				
				APP.post('upload_spot.php', data, function(data){
				
					if(data.result){						
						
						var spot = "<div class='spot'>" 
									+	"<div class='social'>"
									+		"<div class='espectacular-spot radius' title='Espectacular'>" + data.spot.count + "</div>"
									+	"</div>"
									+	"<div class='data'>"
									+ 		"<div class='nombre'>" + data.spot.nombre + "</div>" 
									+ 		"<div class='direccion'>" + data.spot.direccion + "</div>" 
									+ 		"<div class='descripcion'>" + data.spot.descripcion + "</div>" 
									+	"</div>"
									+	"<div class='clear'></div>"
									+ "</div>";
						
						$spots.prepend($(spot).css('display', 'none').fadeIn(800));
						
						//Inicializo el marcador
						var infowindow = new google.maps.InfoWindow({ content: spot });
						
						google.maps.event.addListener(APP.map.marker, 'click', function() {
						  infowindow.open(APP.map.data, APP.map.marker);
						});
						
						APP.map.marker.setDraggable(false);
						APP.map.allMarkers.push(APP.map.marker);
						
						APP.map.marker = null; //Inicializo el marcador en null
						APP.spot.closeForm(); //Cierra y limpia el formulario
					
					}
					else{
						alert(data.error);
					}
				
				});
				
				return false;
			
			});
			
			/*
			*	Agrega Video a la Base de Datos
			*/
			$('a#uploadUrl').bind('click', function(){
						
				var url = $('input#url').attr('value');
				$message.empty();
				
				APP.post('upload.php', {'url': url}, function(data){
				
					var message = "";
					
					if(data.result == true){
					
						$upload_wrapper.slideUp(300);
						
						message = "<h4>" + data.mensaje + "</h4>"
									+ "<a href='javascript:void(0)' onclick='APP.video.show(" + data.video + ");'>Mira el video</a> o <a href='javascript:void(0);' onclick='APP.uploader.close();'>Cancela</a>";
						
					}
					else{
						message = "<p class='error'>" + data.error + "</p>";
					}
					
					$message.append(message).fadeIn(300);
				
				})
			
			});
		
			/* Cambia de video */
			$("a#next-video").bind('click', function(){			
				APP.video.random();					
			});
					
			//Muestra el formulario al presionar Subir Video
			$("a#subir").bind('click', function(){
				$upload_wrapper.slideDown(500);
			});
								
			/* Muestra un video aleatorio la primera vez */
			APP.video.random();

});