<!DOCTYPE html>
<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>		
	<meta charset="utf-8">
	<title>Video o foto</title>
	<link href="css/style_menu.css" rel="stylesheet" type="text/css" />
	<link href="icon.css" media="screen" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
	<script src="http://localhost:3000/socket.io/lib/socket.io.js"></script>
	<script type="text/javascript" src="libs/recorder.js"></script>
	<script src="libs/whammy.js"></script>
</head>
<body>
<!-- <iframe src="menu.html" scrolling="" width="100%" height="260"></iframe> -->

<div class="wrap">
	<nav>
		<ul class="menu">
			
			<li><a href="/usuario"><span class="icon-github"> </span>Perfil</a>
			</li>
			<li><a href="/Anuncios"><span class="icon-users"></span>Donaciones</a>
			<li><a href="#"><span class="icon-film"> </span>Adopciones</a>
				<ul>
					<li><a href="/video">Hacer foto</a></li>
					<li><a href="/index">Hacer video</a></li>
					<li><a href="/upload">Subir archivo</a></li>
					<li><a href="/mos_foto">Animales en adopcion</a></li>
					<li><a href="/mos_video">Animales felices</a></li>
					
				</ul>
			</li>
			<li><a href="#"><span class="icon-home"></span>¿Quienes somos?</a>
				<ul>
					<li><a href="/Adopcion">Como adoptar</a></li>
					<li><a href="/Busqueda">Busqueda</a></li>
					<li><a href="#">¿Quieres ayudar?</a></li>
						<ul>
							<li><a href="/Socio">Socio</a></li>
							<li><a href="/Simpatizante">Simpatizante</a></li>
							<li><a href="/Voluntario">Voluntario</a></li>
						</ul>
				</ul>
			</li>
			<li><a href="#"><span class="icon-location"> </span>Animales perdidos</a>
				<ul>
					<li><a href="/Foto_loc">Foto con localización</a></li>
					<li><a href="/Galeria_Loc">¡Al rescate!</a></li>
				
				</ul>
			</li>
			<li><a href="#"><span class="icon-users"> </span>Códigos QR</a>
				<ul>
					<li><a href="/Lec_qr">Lector qr</a></li>
					<li><a href="/Cod_qr">Generar qr</a></li>
				</ul>
			</li>
			
			
			<li><a href="/logout">Salir</a></li>
			
		</ul>
		<div class="clearfix"> </div>	
	</nav>
	</div>	
		
<div class="center">
	<p id="status" style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa; rgba(256,256,256,8.0);'>Antes de hacer la foto rellenar los campos de informacion</p></br>
	<form>
	<p style= "font: oblique 120%;font-family:monospace;font-weight:bold;">Nombre del animal:<input id="nombre" name="nombre" type="text" required/></p>
	<p style= "font-family:monospace;font-weight:bold;">Edad del animal<input id="edad" type="date" name="edad" step="1" min="1990-01-01" max="2013-12-31"  required></p>
	<p style= "font-family:monospace;font-weight:bold;">Tipo de animal<input type="radio" id="tipo" name="tipo" value="Perro"/> Perro
	<input type="radio" name="tipo" id="tipo" value="gato"  checked/> Gato</p>
	<p style= "font-family:monospace;font-weight:bold;">Sexo del animal<input type="radio" id="sexo" name="sexo" value="macho" /> macho
	<input type="radio" name="sexo" id="sexo" value="hembra"  /> hembra</p>
	<br><p style= "font-family:monospace;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Historia de nuestro amiguito<br><input id="historia" type="text"  size="150" name="historia" style="height:100px;width:400px"/>
	<br><input type="button" value="Guardar datos" onclick="datos();"align="center"/>
	</form>
	<p id="status" style= "font-family:monospace;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Procesando</p>
	<progress id="progress" style="visibility: hidden;"> </progress><br/>
	<input class="uiButton" id="startButton" value="Start" type="button" onclick="startCapture();"/>
	<input class="uiButton" id="stopButton" value="Stop" type="button" onclick="stopCapture();" disabled="disabled"/>
	<input id='botonFoto' type='button' value = 'Foto' /><br/>
	<video width="320" height="240" id="campreview" autoplay> </video>
	<audio id ="audio" autoplay> </audio>
	</br>
	<div class="contenedor">
	<div class="titulo">Foto</div>
    <img src="" id='img' width='320' height='240'>
    <div>
</div>  
</div>  
<script>
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
window.requestAnimationFrame = (function(){
     return  window.requestAnimationFrame       || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || window.msRequestAnimationFrame;
    })();
 
var video;
var width;
var height;
var canvas;
var images = [];
var ctx;
var result;
var capture;
var loopnum;
var startTime;
var capturing = false;
var msgdiv;
var progress;
var startButton;
var stopButton;
var recorder; //Es nuestra variable para usar la libreria Recorder.js
var audio;  
var img;  
var output; 
var nombre;
var texto;
var tipo;
var edad;
var sexo;                 
var socket=io.connect("http://localhost3000");
 
    init();
    var onFailSoHard = function(e) {
        console.log('Rejected!', e);
      };
 	if(navigator.getUserMedia){
		    	navigator.getUserMedia({video:true}, function(stream){ //extraemos la info de la camara y lo añadimos al vídeo
		        	video.src = window.URL.createObjectURL(stream); //al atributo src que es donde el video recibe la info a reproducir
		           		//como el streaming no se puede pasar como tal tenemos que crear un objeto url lo que retorna una url adecuada
		            video.play();//para empezar a reproducir
		    },function(e){console.log(e);});
		    }
		   else alert('Tiene un navegador obsoleto, descargue chrome!');
    video.addEventListener('loadedmetadata',function(){
		canvas.width=video.videoWidth;
		console.log(canvas.width);
		console.log(video.videoHeight);
		canvas.height=video.videoHeight;
		},false);
/**
 * Set the HTML elements we need.
 */
var img;
function init() {
    video = document.getElementById('campreview');
    audio = document.getElementById('audio');
    canvas = document.createElement('canvas');
    ctx = canvas.getContext('2d');
    result = document.getElementById('result');
    msgdiv = document.getElementById('information');
    progress = document.getElementById('progress');
    startButton = document.getElementById('startButton');
    stopButton = document.getElementById('stopButton');
    foto=document.getElementById('img');
    //nombre=document.getElementById('nombre').value;
    
   
}
 
/**
 * Capture the next frame of the video.
 */

function nextFrame(){
    if(capturing){
        var imageData;
        ctx.drawImage(video, 0, 0, width, height);
        imageData = ctx.getImageData(0, 0, width, height);
        console.log(imageData);
        images.push({duration : new Date().getTime() - startTime, datas : imageData});
        startTime = new Date().getTime();
        requestAnimationFrame(nextFrame);
    }else{
        requestAnimationFrame(finalizeVideo);
    }
 
}
 
/**
 * Start the encoding of the captured frames.
 */
var capture;
var url_vid;
function finalizeVideo(){
    capture = new Whammy.Video();
    console.log("el video es este");
    console.log(capture);
    //url_vid= capture.toDataURL();
    //console.log(url_vid);
    //setMessage('Encoding video...');
    progress.max = images.length;
    showProgress(true);
    //result.src = window.URL.createObjectURL(capture);
    encodeVideo(capture, 0);
}
 
/**
 * Encode the captured frames.
 * 
 * @param capture
 * @param currentImage
 */
function encodeVideo(capture, currentImage) {
    if (currentImage < images.length) {
        ctx.putImageData(images[currentImage].datas, 0, 0);
        capture.add(ctx, images[currentImage].duration);
        delete images[currentImage];
        progress.value = currentImage;
        currentImage++;
        setTimeout(function() {encodeVideo(capture, currentImage);}, 5);
    } else {
    	console.log("antes");
    	console.log(capture);
        output = capture.compile();
        console.log("Este es el vídeo");
        console.log(output);
        result.src = webkitURL.createObjectURL(output);
        //console.log(result);
        //setMessage('Finished');
        images = [];
        enableStartButton(true);
    }
}
 
/**
 * Initialize the canvas' size with the video's size.
 */
function initSize() {
    width = video.clientWidth;
    height = video.clientHeight;
    canvas.width = width;
    canvas.height = height;
}
 
/**
 * Initialize the css style of the buttons and the progress bar
 * when capturing.
 */
function initStyle() {
    //setMessage('Capturing...');
    showProgress(false);
    enableStartButton(false);
    enableStopButton(true);
}
 
/**
 * Start the video capture.
 */
function startCapture() {
    initSize();
    initStyle();
    capturing = true;
    startTime = new Date().getTime();
    nextFrame();
}
 
/**
 * Stop the video capture.
 */
function stopCapture() {
    capturing = false;
    enableStopButton(false);
    
}
 
/* *************************************************************
 *                   Styles functions
 * *************************************************************/
 
/**
 * Enable/Disable the start button.
 */
function enableStartButton(enabled) {
    startButton.disabled = !enabled;
}
 
/**
 * Enable/Disable the stop button.
 */
function enableStopButton(enabled) {
    stopButton.disabled = !enabled;
}
 
/**
 * Display/Hide the progress bar.
 */
function showProgress(show) {
    progress.style.visibility = show ? 'visible' : 'hidden';
}
 
var oCamara, 
    oFoto ,
    oContexto,
    w, h;
var url_img;
jQuery('#botonFoto').on('click', function(e){
	canvas.getContext('2d').drawImage(video,0,0); //que dibuje en las coordenadas 0 0 para que abarque todo el canvas
	imgData=canvas.toDataURL('image/png'); //toma lo del canvas y lo convierte en imagen
	console.log(imgData);
	foto.setAttribute('src',imgData);
	//imgData=canvas.toDataURL('image/png');
	url_img=canvas.toDataURL('image/jpeg',1);
	console.log(url_img);
 
});

function datos(){
	//if (document.elements[2].checked) { 
      //  tipo=document.elements[2].value;
       // console.log(tipo);
    //} 
    if(document.getElementById("tipo")[0]){
		tipo="perro";
	}
    else
    	tipo="gato";
    if(document.getElementById("sexo")[0]){
		sexo="macho";
	}
    else
    	sexo="hembra";
    texto=document.getElementById("historia").value;
    edad=document.getElementById("edad").value;
    nombre = document.getElementById("nombre").value;
    console.log(nombre);
    console.log(tipo);
    console.log(edad);
    console.log(texto);
}
function connect_foto() {
	
    console.log(imgData);
    console.log(nombre);
    console.log(texto);
    console.log(tipo);
    socket.emit('foto', imgData, nombre, texto, tipo, edad, sexo);
	console.log("ay");
    socket.on('procesado', function (data) {
    	document.getElementById('status').innerHTML = 'foto guardada ';
	});
};
var o;
function connect_video() {
     		
            //console.log(result);
    console.log(output);
    //o=JSON.stringify(capture);
    //console.log(o);
    console.log(capture);
    //var envio=ObjectToJSON();
    //console.log(envio);
    //var s=capture.prototype.toSource();
    //console.log(s);
	socket.emit('message', capture, nombre, texto);
	//o=JSON.stringify(capture);
	socket.on('video_guard', function (data) {
    	document.getElementById('status').innerHTML = 'video guardada ';
        console.log(2);
    });
};

</script>
<div class="center">
	<input type="submit" name="submit" value="Guardar_foto" class="button" onclick="connect_foto()"/>
	
</div>
</br>

</body>
</html>