window.addEvent('domready',function() {

 	//Recojo el tamaņo del viewport
 	var viewportSize = $('mibodi').getSize();

   //Recibimos el elemento canvas
   var micanvas = $('micanvas');

 	//console.log(viewportSize);
 	micanvas.setAttribute('width', viewportSize.x);
 	micanvas.setAttribute('height', viewportSize.y);
 	micanvas.setStyle('background-color','#242424');

	papel = micanvas.getContext("2d");

	var colores = [
	'rgba(70, 137, 102, 0.75)',
	'rgba(255, 240, 165, 0.75)',
	'rgba(255, 176, 59, 0.75)',
	'rgba(182, 73, 38, 0.75)',
	'rgba(142, 40, 0, 0.75)'
	];

	var pausa = 50;
	
	var patadegallo = function () {
		
		papel.fillStyle = "rgba(24, 24, 24, 0.06)";
		papel.fillRect(0, 0, viewportSize.x , viewportSize.y);
		papel.fill();

		var escala = $random(10,250);
		var partes = $random(2,16);
		var incremento = escala / partes / 2;
		xpos = $random(-1*escala, viewportSize.x - escala/2);
		ypos = $random(-1*escala, viewportSize.y - escala/2);

		var coordenadas = null;
		var coordenadas = [];
		
		for (i=0; i < partes; i++) {
			
			sx = xpos + (incremento*i);
			sy = ypos;
			dx = xpos + escala + (incremento*i);
			dy = ypos - escala;
			
			coordenadas.push(sx);
			coordenadas.push(sy);
			coordenadas.push(dx);
			coordenadas.push(dy);
		}

		for (i=0;i < partes;i++) {
			sx = xpos + escala;
			sy = ypos - (incremento*(partes-i));
			dx = xpos + escala*2;
			dy = ypos - escala - (incremento*(partes-i));
			
			coordenadas.push(sx);
			coordenadas.push(sy);
			coordenadas.push(dx);
			coordenadas.push(dy);
		}
		
		for (i=0; i < partes; i++) {
			sx = xpos + escala + (incremento*i);
			sy = ypos;
			dx = xpos + escala*2 + (incremento*i);
			dy = ypos - escala;
			
			coordenadas.push(sx);
			coordenadas.push(sy);
			coordenadas.push(dx);
			coordenadas.push(dy);
		}
		
		for (i=0;i < partes;i++) {
			sx = xpos + escala;
			sy = ypos + escala - (incremento*(partes-i));
			dx = xpos + escala*2;
			dy = ypos - (incremento*(partes-i));
			
			coordenadas.push(sx);
			coordenadas.push(sy);
			coordenadas.push(dx);
			coordenadas.push(dy);
		}
		
		//dibujaLinea.delay(100,null,coordenadas);
		tempcolor = colores[$random(0,colores.length-1)];
		(function(){ dibujaLinea(coordenadas,tempcolor); }).delay(pausa);
		
	}

	 var dibujaLinea = function(a,tempcolor) {
		

		if (a.length > 0) {
			var dy = a.pop();
			var dx = a.pop();
			var sy = a.pop();
			var sx = a.pop();
			
			papel.beginPath();
			papel.moveTo(sx,sy);
			papel.lineTo(dx,dy);
		
   		papel.closePath();
   		papel.lineWidth = 1;
			papel.lineCap = 'round';
			papel.strokeStyle = tempcolor; //$random(0,colores.length)
			papel.stroke();
			
			if (a.length > 0) {
				(function(){ dibujaLinea(a,tempcolor); }).delay(pausa);
			} else {
				//console.log('fin!')	;
				(function(){ patadegallo(); }).delay(500);
				
			}
			
		}
		
	}



	var esPar = function (value){
		if (value%2 == 0)
			return true;
		else
			return false;
	}


// COMIENZO  COMIENZO  COMIENZO  COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO
// COMIENZO  COMIENZO  COMIENZO  COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO
// COMIENZO  COMIENZO  COMIENZO  COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO COMIENZO

//patadegallo.delay(pausa);
patadegallo();

});