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

/* INICIALIZAR */
var VIEWPORTSIZE = $('mibodi').getSize();
//VIEWPORTSIZE.x = 640;
//VIEWPORTSIZE.y =480;


var MI_CANVAS = $('micanvas');
MI_CANVAS.setAttribute('width', VIEWPORTSIZE.x); /* VIEWPORTSIZE.x */
MI_CANVAS.setAttribute('height', VIEWPORTSIZE.y); /* VIEWPORTSIZE.y */
MI_CANVAS.setStyle('background-color','#242424');

var ctx = MI_CANVAS.getContext('2d');

/* EVENTO PARA TENER LAS COORDENADAS DE RATÓN */
var MOUSEX = 0;
var MOUSEY = 0;

$('mibodi').addEvent('click',function(event){
	
    MOUSEX = event.page.x;
    MOUSEY = event.page.y;

		if ((MOUSEX > VIEWPORTSIZE.x-140) && (MOUSEY > VIEWPORTSIZE.y-140)) {
			ctx.fillStyle = 'rgba(36,36,36,1)';
			ctx.fillRect (0, 0, VIEWPORTSIZE.x, VIEWPORTSIZE.y); //CLEAR CANVAS
			circuloA.r = (VIEWPORTSIZE.y/12) + (VIEWPORTSIZE.y/2.5) * Math.random();
			circuloB.r = (VIEWPORTSIZE.y/12) + (VIEWPORTSIZE.y/2.5) * Math.random();
			circuloC.r = (VIEWPORTSIZE.y/12) + (VIEWPORTSIZE.y/2.5) * Math.random();
			
			circuloA.angulo_inc = 3 * Math.random();
			circuloB.angulo_inc = 3 * Math.random();
			circuloC.angulo_inc = 3 * Math.random();
			
			ctx.drawImage(imagen, VIEWPORTSIZE.x-130 , VIEWPORTSIZE.y-94-40, 92, 94);
		}

});

$('mibodi').addEvent('mousemove',function(event){
	
    MOUSEX = event.page.x;
    MOUSEY = event.page.y;

		if ((MOUSEX > VIEWPORTSIZE.x-140) && (MOUSEY > VIEWPORTSIZE.y-140)) {
			$('mibodi').setStyle('cursor','pointer');
		} else {
			$('mibodi').setStyle('cursor','auto');
		}

});

var FPS = 100;
var SECONDS_BETWEEN_FRAMES = 1000 / FPS;
var TOTAL_T = 0;
var TIMER = 0;
var ANGULO = 0;
//var SCENE = new sceneO();
var HUE = 2;
var HUE_inc = 0.1;


//CARGAR IMAGEN
var imagen = new Image();
imagen.src = "/img/random.png";

/* -------------------------------------------------------------------------- */
//CLASSES Y FUNCIONES
function sceneO() {

	this.numElementos = 0;
	this.objetos = new Array();
	
	this.add = function(elemento) {
		this.objetos.push(elemento);
		this.numElementos++;
	}
	
	this.update = function() {
		for ( var i=0, len=this.objetos.length; i<len; ++i ){
  		this.objetos[i].render();
		}
	}	
} //sceneO

function plot(x,y, r) {
	this.x = x;
	this.y = y;
	this.r = r;

 	ctx.beginPath();
 	ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
 	ctx.fill();
} //plot

//OBJETO CIRCULO
function circulo(x,y,r,pr,angulo_inc) {
	this.x = x;
	this.y = y;
	this.r = r;
	this.angulo = Math.floor(Math.random()*360);
	this.angulo_inc = angulo_inc;
	
	this.render = function () {
		this.angulo = this.angulo + this.angulo_inc;
		
		this.xp = this.x + this.r*Math.cos(de_ra(this.angulo));
		this.yp = this.y + this.r*Math.sin(de_ra(this.angulo));
	
		ctx.fillStyle = 'rgba(192,192,192,1)';
		plot(this.xp, this.yp, pr);
	}
} //circulo

//CIRCULOS QUE CREAREMOS
circuloA = new circulo(VIEWPORTSIZE.x/2,VIEWPORTSIZE.y/2, VIEWPORTSIZE.y/4, 1, 0.05);
circuloB = new circulo(VIEWPORTSIZE.x/2,VIEWPORTSIZE.y/2, VIEWPORTSIZE.y/6, 1, 0.4);
circuloC = new circulo(VIEWPORTSIZE.x/2,VIEWPORTSIZE.y/2, VIEWPORTSIZE.y/8, 1, 2);


function ra_de(valor) {
	var pi = Math.PI;
	var ra_de = valor*(180/pi);
	return ra_de;
}
function de_ra(valor) {
	var pi = Math.PI;
	var de_ra = valor*(pi/180);
	return de_ra;
}

/* -------------------------------------------------------------------------- */
//FUNCIÓN DE INICIALIZACIÓN

function init(){
	
	ctx.fillStyle = 'rgba(36,36,36,1)';
	//ctx.clearRect (0, 0, 512, 512); //CLEAR CANVAS
	
	ctx.drawImage(imagen, VIEWPORTSIZE.x-130 , VIEWPORTSIZE.y-94-40, 92, 94);
	
 	setInterval(draw, SECONDS_BETWEEN_FRAMES);//
} //INIT

/* -------------------------------------------------------------------------- */
//FUNCIÓN DE DIBUJADO
function draw() {

	//ctx.fillStyle = 'rgba(36,36,36,0.004)';
	//ctx.fillRect (0, 0, VIEWPORTSIZE.x, VIEWPORTSIZE.y); //CLEAR CANVAS
	//ctx.drawImage(imagen, VIEWPORTSIZE.x-130 , VIEWPORTSIZE.y-94-40, 92, 94);

	circuloA.render();
	
	circuloB.render();
	
	circuloC.render();
	
	circuloB.x = circuloA.xp;
	circuloB.y = circuloA.yp;
	
	circuloC.x = circuloB.xp;
	circuloC.y = circuloB.yp;
	
	//ctx.moveTo(circuloA.x, circuloA.y);
  ctx.moveTo(circuloB.x, circuloB.y);
  ctx.lineTo(circuloC.x, circuloC.y);
  ctx.lineTo(circuloC.xp, circuloC.yp);

  ctx.strokeStyle = 'hsla(' + HUE + ', 84%, 69%, 0.1)';
  //ctx.strokeStyle = 'rgba(177,34,28,0.1)';
	ctx.stroke();

	HUE = HUE + HUE_inc;
	if (HUE > 369) { HUE = 0; }
	
} //DRAW

/* -------------------------------------------------------------------------- */
//INICIALIZA EL DIBUJADO
imagen.onload = function(){
	init();
}

});//domeady