$(document).ready(function(){

	//1. Utwórz kalendarz do wybierania daty obserwacji.
		$("#datepicker").datepicker({ changeMonth: true, changeYear: true});


	//2. Utwórz ciekawsze dla użytkowników przyciski radiowe do wybierania rodzaju zwierzęcia.
		$( "#type_select" ).buttonset();
		
	//3. Utwórz suwaki do wprowadzania danych liczbowych dotyczących odległości od zwierzęcia, jego masy i wysokości.

		//3a. slide_dist
		$( "#slide_dist" ).slider({
			value:0,
			min: 0,
			max: 150,
			step: 3,
			slide: function( event, ui ) {
				$( "#distance" ).val( ui.value);
			}
		});
	$( "#distance" ).val( $( "#slide_dist" ).slider( "value" ));
		
		
		
		//3b. slide_weight
		
		$( "#slide_weight" ).slider({
			value:0,
			min: 0,
			max: 2000,
			step: 2,
			slide: function( event, ui ) {
				$( "#weight" ).val( ui.value);
			}
		});
		
		$( "#weight" ).val( $( "#slide_weight" ).slider( "value" ));
        
		//3c.  slide_height
		$( "#slide_height" ).slider({
			value:0,
			min: 0,
			max: 6,
			step: 0.25,
			slide: function( event, ui ) {
				$( "#height" ).val( ui.value);
			}
		});
		
        $( "#height" ).val( $( "#slide_height" ).slider( "value" ));
        
		//3d. szerokość geograficzna
		
		$( "#slide_lat" ).slider({
			value:0,
			min: -90,
			max: 90,
			step: 0.00001,
			slide: function( event, ui ) {
				$( "#latitude" ).val( ui.value);
			}
		});
		
		//3e. długość geograficzna
		
		$( "#slide_long" ).slider({
			value:0,
			min: -180,
			max: 180,
			step: 0.00001,
			slide: function( event, ui ) {
				$( "#longitude" ).val( ui.value);
			}
		});

	//4. Utwórz interfejs z mikserem kolorów do wprowadzania barwy zwierzęcia.
	
	function refreshSwatch() {

		var	red = $( "#red" ).slider( "value" );
		var	green = $( "#green" ).slider( "value" );
		var	blue = $( "#blue" ).slider( "value" );
		var	my_rgb = "rgb(" + red + "," + green + "," + blue + ")"; 
			
			$( "#swatch" ).css( "background-color", my_rgb );
			$( "#red_val" ).val(red );
			$( "#blue_val" ).val( blue);
			$( "#green_val" ).val( green);
			$( "#color_val" ).val( my_rgb);		
	}

	$( "#red, #green, #blue" ).slider({
		orientation: "horizontal",	
		range: "min", 
		max: 255, 
		value: 127, 
		slide: refreshSwatch,
		change: refreshSwatch
	});
						
	

	$( "#red" ).slider( "value", 127 );
	$( "#green" ).slider( "value", 127 );
	$( "#blue" ).slider( "value", 127 );



	//5. Utwórz ładniejszy przycisk do przesyłania danych z formularza z obserwacją.
	$("button:submit").button();
		
	$("#frmAddSighting").submit(function(){
		return false;
	});
	
	$('#btnSave').click(function() {

		var data = $("#frmAddSighting :input").serializeArray();

		$.post($("#frmAddSighting").attr('action'), data, function(json){
			
			if (json.status == "fail") {
				alert(json.message);
			}else if (json.status == "success") {
				alert(json.message);
			}else{alert("Nic się nie stało!");}
		}, "json");

	});	
	
});//koniec doc ready

