var posicionWebcam = 0;
var intervaloWebcam = null;

$(function() {
	$('#webcam').append($('<img src="' + generaRuta(posicionWebcam) + '" />'));

	var anterior = $('<a href="javascript:void(0)" id="anterior">Anterior</a>');
	anterior.click(function() {
		posicionWebcam--;
		if(posicionWebcam < 0) {
			posicionWebcam = 0;
		}
		$('#stop').click();
		actualizaWebcam();
	});
	$('#webcam').append(anterior);

      var siguiente = $('<a href="javascript:void(0)" id="siguiente">Siguiente</a>');
	siguiente.click(function() {
		posicionWebcam = (posicionWebcam + 1) % 24;
		$('#stop').click();
		actualizaWebcam();
	});
	$('#webcam').append(siguiente);

	var reproducir = $('<a href="javascript:void(0)" id="play">Reproducir</a>');
	reproducir.click(function() {
		$('#stop').click();
		$(this).hide();
		$('#stop').show();
		intervaloWebcam = setInterval(function() {
			posicionWebcam = (posicionWebcam + 1) % 24;
			actualizaWebcam();
		}, 2000);
	});
	$('#webcam').append(reproducir);

	var parar = $('<a href="javascript:void(0)" id="stop">Parar</a>')
	parar.click(function() {
		$('#play').show();
		$(this).hide();
		if(intervaloWebcam != null) {
			clearInterval(intervaloWebcam);
			intervaloWebcam = null;
		}
	});
	$('#webcam').append(parar);

	$('#play').click();
});

function actualizaWebcam() {
	$('#webcam img').attr('src', generaRuta(posicionWebcam));
}

function generaRuta(i) {
	return 'http://www.sierranevadaski.com/_extras/fotos_camaras/webcam_day/hour' + ((i < 10) ? ('0' + i) : i) + '.jpg';
}