ernestom · February 15, 2012 04:30
diff --git a/juego-caras.html b/juego-caras.html
 <!DOCTYPE html>
 <html><head><title>Caritas</title></head>
 <body>
 	<style>

 	body{ padding-left:50px;} 
 	#stage {
 	    border:1px solid #ccc;
 	    cursor:pointer;
 	    background:#eee;
 		padding:0px;
 		position:relative;
 	}
 	.hidden {
 		display:none;
 	}
 	.ok {
 		text-decoration:line-through;
 	}
 	</style>

 <h1>Juego de Caritas</h1>
 <div id="stage" class="hidden"></div>

 <select id="level">
 	<option>1</option>
 	<option>2</option>
 	<option>3</option>
 </select>

 <button id="start">Comenzar</button>

 <h2>Identifica a las siguientes celebridades:</h2>
 <ul id="answers" class="hidden">
 </ul>

 <script>
 var people = [
    {name: "Gary Oldman", slug: "gary-oldman", p: 13},
    {name: "Hugo Weaving", slug: "hugo-weaving", p: 12},
    {name: "Matt Damon", slug: "matt-damon", p: 12},
    {name: "Daniel Radcliffe", slug: "daniel-radcliffe", p: 11},
    {name: "Emma Watson", slug: "emma-watson", p: 11},
    {name: "Rupert Grint", slug: "rupert-grint", p: 10},
    {name: "Marion Cotillard", slug: "marion-cotillard", p: 9},
    {name: "Michael Caine", slug: "michael-caine", p: 9},
    {name: "Ken Jeong", slug: "ken-jeong", p: 8},
    {name: "Cameron Diaz", slug: "cameron-diaz", p: 8},
    {name: "Natalie Portman", slug: "natalie-portman", p: 8},
    {name: "Joan Cusack", slug: "joan-cusack", p: 8},
    {name: "Antonio Banderas", slug: "antonio-banderas", p: 8},
    {name: "Jude Law", slug: "jude-law", p: 8},
    {name: "Ewan McGregor", slug: "ewan-mcgregor", p: 7},
    {name: "Maggie Smith", slug: "maggie-smith", p: 7},
    {name: "Hank Azaria", slug: "hank-azaria", p: 7},
    {name: "Robert De Niro", slug: "robert-de-niro", p: 7},
    {name: "Liam Neeson", slug: "liam-neeson", p: 7},
    {name: "Brad Pitt", slug: "brad-pitt", p: 7},
    {name: "Michael Gambon", slug: "michael-gambon", p: 7},
    {name: "Helena Bonham Carter", slug: "helena-bonham-carter", p: 7} ,
    {name: "Tom Hardy", slug: "tom-hardy", p: 7},
    {name: "Seth Rogen", slug: "seth-rogen", p: 7},
    {name: "Johnny Depp", slug: "johnny-depp", p: 6},
    {name: "Bill Nighy", slug: "bill-nighy", p: 6},
    {name: "Zach Galifianakis", slug: "zach-galifianakis", p: 6},
    {name: "Ralph Fiennes", slug: "ralph-fiennes", p: 6},
    {name: "Simon Pegg", slug: "simon-pegg", p: 6},
    {name: "Jon Hamm", slug: "jon-hamm", p: 6},
    {name: "Milla Jovovich", slug: "milla-jovovich", p: 6},
    {name: "Vanessa Hudgens", slug: "vanessa-hudgens", p: 6},
    {name: "Nicolas Cage", slug: "nicolas-cage", p: 6},
    {name: "Jason Segel", slug: "jason-segel", p: 6},
    {name: "Tom Hanks", slug: "tom-hanks", p: 6},
    {name: "James McAvoy", slug: "james-mcavoy", p: 6},
    {name: "Joaquín Cosío", slug: "joaquin-cosio", p: 6},
    {name: "Justin Timberlake", slug: "justin-timberlake", p: 6},
    {name: "Dwayne Johnson", slug: "dwayne-johnson", p: 6},
    {name: "Sam Worthington", slug: "sam-worthington", p: 6},
    {name: "Salma Hayek", slug: "salma-hayek", p: 6},
    {name: "Anne Hathaway", slug: "anne-hathaway", p: 6},
    {name: "Daniel Craig", slug: "daniel-craig", p: 6},
    {name: "Jason Statham", slug: "jason-statham", p: 6},
    {name: "Alan Rickman", slug: "alan-rickman", p: 6},
    {name: "Christoph Waltz", slug: "christoph-waltz", p: 6},
    {name: "Danny McBride", slug: "danny-mcbride", p: 5},
    {name: "James Franco", slug: "james-franco", p: 5},
    {name: "Ciarán Hinds", slug: "ciaran-hinds", p: 5},
    {name: "Sigourney Weaver", slug: "sigourney-weaver", p: 5},
    {name: "Kate Winslet", slug: "kate-winslet", p: 5},
    {name: "Josh Duhamel", slug: "josh-duhamel", p: 5},
    {name: "Olivia Wilde", slug: "olivia-wilde", p: 5},
    {name: "Aaron Eckhart", slug: "aaron-eckhart", p: 5},
    {name: "Naomi Watts", slug: "naomi-watts", p: 5},
    {name: "Jack Black", slug: "jack-black", p: 5},
    {name: "Joseph Gordon-Levitt", slug: "joseph-gordon-levitt", p: 5} ,
    {name: "Stellan Skarsgard", slug: "stellan-skarsgard", p: 5},
    {name: "Jamie Bell", slug: "jamie-bell", p: 5},
    {name: "Shia LaBeouf", slug: "shia-labeouf", p: 5},
    {name: "Jim Broadbent", slug: "jim-broadbent", p: 5},
    {name: "Stephen Lang", slug: "stephen-lang", p: 5},
    {name: "Josh Hutcherson", slug: "josh-hutcherson", p: 5},
    {name: "Justin Long", slug: "justin-long", p: 5},
    {name: "Angelina Jolie", slug: "angelina-jolie", p: 5},
    {name: "Chris Evans", slug: "chris-evans", p: 5},
    {name: "David Yates", slug: "david-yates", p: 5},
    {name: "Jesse Eisenberg", slug: "jesse-eisenberg", p: 5},
    {name: "Colin Farrell", slug: "colin-farrell", p: 5},
    {name: "Dustin Hoffman", slug: "dustin-hoffman", p: 5},
    {name: "Jim Sturgess", slug: "jim-sturgess", p: 5},
    {name: "Morgan Freeman", slug: "morgan-freeman", p: 5},
    {name: "Amber Heard", slug: "amber-heard", p: 5},
    {name: "Jessica Alba", slug: "jessica-alba", p: 5},
    {name: "Laurence Fishburne", slug: "laurence-fishburne", p: 5},
    {name: "Leonardo DiCaprio", slug: "leonardo-dicaprio", p: 5},
    {name: "Ryan Gosling", slug: "ryan-gosling", p: 5},
    {name: "Tyrese Gibson", slug: "tyrese-gibson", p: 5},
    {name: "Richard Jenkins", slug: "richard-jenkins", p: 5},
    {name: "Robin Wright", slug: "robin-wright", p: 5},
    {name: "Scott Speedman", slug: "scott-speedman", p: 5},
    {name: "Anthony Hopkins", slug: "anthony-hopkins", p: 5},
    {name: "Michelle Rodriguez", slug: "michelle-rodriguez", p: 5},
    {name: "Owen Wilson", slug: "owen-wilson", p: 5},
    {name: "Jonah Hill", slug: "jonah-hill", p: 5},
    {name: "Lucy Liu", slug: "lucy-liu", p: 5},
    {name: "Emily Blunt", slug: "emily-blunt", p: 5},
    {name: "Stanley Tucci", slug: "stanley-tucci", p: 5},
    {name: "Tom Hiddleston", slug: "tom-hiddleston", p: 5},
    {name: "Kristen Wiig", slug: "kristen-wiig", p: 5},
    {name: "Mark Strong", slug: "mark-strong", p: 5},
    {name: "Russell Brand", slug: "russell-brand", p: 4},
    {name: "Giovanni Ribisi", slug: "giovanni-ribisi", p: 4},
    {name: "Geoffrey Rush", slug: "geoffrey-rush", p: 4},
    {name: "Freida Pinto", slug: "freida-pinto", p: 4},
    {name: "Robert Pattinson", slug: "robert-pattinson", p: 4},
    {name: "Chris Miller", slug: "chris-miller", p: 4},
    {name: "John Hurt", slug: "john-hurt", p: 4},
    {name: "Robbie Coltrane", slug: "robbie-coltrane", p: 4},
    {name: "Sofia Vergara", slug: "sofia-vergara", p: 4}
 ];


 ////////
 Array.prototype.shuffle = function() {
 	for (var i = 0, len = this.length; i < len; i++) {
        var rand = Math.floor(Math.random() * len);
 		var temp = this[i];
 		this[i] = this[rand];
 		this[rand] = temp;
 	}
 	return this;
 }
 /////////

 var options = {
    stageId:           'stage',
    canvasClass:       'canvas',
    cell:              {maxItems: 25, maxItemsPerRow: 5, width: 48, height: 48},
    imageUrl:          'http://c.cdn.entucine.com/enelcine/media/credits/credit-small-{URL}.jpg',
    defaultImageUrl:   'http://a.cdn.entucine.com/enelcine/frontend/img/default_small_credit.png',
    data:              people,
    star:              {density: 100, fillStyle: ['yellow', 'red', 'pink'], radio: 10, skinny: false, interval: 500},
    answers:           {required: 3}
 };


 // variables de interface
 var stage = document.getElementById(options.stageId),
 	selLevel = document.getElementById('level'),
 	btnStart = document.getElementById('start'),
 	ulAnswers = document.getElementById('answers');

 var expectedAnswers = [];


 function getData() {
 	options.data.shuffle();
 	var d = [];
 	var max = options.cell.maxItems;
 	// rebanamos data
 	if (max && max <= options.data.length) {
 		d = options.data.slice(0, max);
 	}
 	return d;
 }

 function createCanvas(name, w, h, absolute) {
 	var c = document.createElement('canvas');
 	c.width = w;
 	c.height = h;
 	c.className = options.canvasClass + ' ' + name;
 	if (absolute) {
 		c.style.position = 'absolute';
 		c.style.left = window.getComputedStyle(stage, null).getPropertyValue('padding-left');
 	}
 	stage.appendChild(c);
 	return c;
 }

 function init() {
 	stage.innerHTML = '';
 	expectedAnswers = [];
 	ulAnswers.innerHTML = '';
 	
 	var data = getData();
 	
 	// calcular dimensiones de canvas
 	var width = options.cell.maxItemsPerRow * options.cell.width;
 	var height = data.length / options.cell.maxItemsPerRow * options.cell.height;
 	
 	stage.style.width = width + 'px';
 	stage.style.height = height + 'px';
 	
 	// caritas
 	var bgCanvas = createCanvas('bg', width, height, false);
 	// estrellitas
 	var fgCanvas = createCanvas('fg', width, height, true);
 	
 	fillCanvasWithFaces(bgCanvas, data);
 	
 	setInterval(function() {
 		fillCanvasWithStars(fgCanvas);
 	}, options.star.interval);
 	
 	fgCanvas.addEventListener('mousedown', checkCanvasClick);
 	
 	// determinar las respuestas esperadas
 	
 	for (var i = 0; i < options.answers.required; i++) {
 		
 		// carita aleatoria
 		var rindex = Math.floor(Math.random() * data.length);
 		var answer = data[rindex];
 		answer.index = rindex;
 		console.log(answer);
 		expectedAnswers.push(answer);
 		
 		// mostrar las opciones al usuario
 		var li = document.createElement('li');
 		li.innerHTML = answer.name;
 		li.id = answer.slug;
 		ulAnswers.appendChild(li);
 	}
 }

 function getFaceIndexFromEvent(event) {
 	var x = event.offsetX || event.layerX,
 	 	y = event.offsetY || event.layerY;
 	
 	var cell = Math.floor(x / options.cell.width),
 	 	row = Math.floor(y / options.cell.height);
 	
 	return cell + (row * options.cell.maxItemsPerRow);
 }

 function checkCanvasClick(event) {
 	var answerClickIndex = getFaceIndexFromEvent(event);
 	console.log(answerClickIndex)
 	for (var i = 0; i < expectedAnswers.length; i++) {
 		var answer = expectedAnswers[i];
 		if (answer.index == answerClickIndex) {
 			document.getElementById(answer.slug).className = 'ok';
 			console.log('OK');
 			return;
 		}
 	}
 	console.log('Error')
 }

 function drawFace(canvas, imageUrl, x, y) {
 	var ctx = canvas.getContext('2d');
 	var image = new Image();
 	image.onload = function() {
 		ctx.drawImage(image, x, y);
 	};
 	image.onerror = function() {
 		var defaultImage = new Image();
 		defaultImage.onload = function() {
 			ctx.drawImage(defaultImage, x, y);	
 		}
 		defaultImage.src = options.defaultImageUrl;
 	}
 	image.src = imageUrl;
 }

 function fillCanvasWithFaces(canvas, data) {
 	for (var row = 0, cell = 0, i = 0, total = data.length; 
 		 i < total;
 		 i++) {
 			
 		var person = people[i];
 		var personImgUrl = options.imageUrl.replace('{URL}', person.slug)
 		
 		var offsetX = options.cell.width * cell;
 		var offsetY = options.cell.height * row;
 		
 		drawFace(canvas, personImgUrl, offsetX, offsetY);
 		//console.log(person.name, offsetX, offsetY, cell, row)
 		
 		// saltar de fila y resetear celda
 		if ((cell + 1) >= options.cell.maxItemsPerRow) {
 			cell = 0;
 			row++;
 		// saltar de celda
 		} else {
 			cell++;
 		}
 			
 	}
 }
 function fillCanvasWithStars(canvas) {
 	var ctx = canvas.getContext('2d');
 	var w = canvas.width,
 		h = canvas.height;
 	// borrar canvas
 	ctx.clearRect(0, 0, w, h);
 	
 	// pintar las estrellas en puntos aleatorios
 	for (var i = 0; i < options.star.density; i++) {
 		ctx.save();
 		// color aleatorio
 		options.star.fillStyle.shuffle();
 		var rcolor = options.star.fillStyle[0];
 		
 		ctx.fillStyle = rcolor;
 		// definir posición aleatoria
 		var rx = w - Math.floor(Math.random() * w);
 		var ry = w - Math.floor(Math.random() * w);
 		ctx.translate(rx, ry);
 		
 		var rradio = Math.floor(Math.random() * options.star.radio + 2);
 		
 		drawStar(canvas, rradio);
 		
 		ctx.restore()
 	}
 	
 }

 function drawStar(canvas, radio) {
 	var ctx = canvas.getContext('2d');
 	
 	ctx.save();
    ctx.beginPath()
    ctx.moveTo(radio, 0);
    for (i = 0; i < 9; i++){
        ctx.rotate(Math.PI / 5);
        if (i % 2 == 0) {
            ctx.lineTo((radio / (0.525731 + (options.star.skinny ? 1 : 0))) * 0.200811, 0);
        } else {
            ctx.lineTo(radio, 0);
        }
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
 }


 btnStart.addEventListener('click', function() {
 	
 	stage.className = '';
 	ulAnswers.className = '';
 	btnStart.innerHTML = 'Volver a empezar';
 	
 	// determinar dificultad según nivel
 	var level = selLevel.value;
 	if (level == 1) {
 		options.star.density = 20;
 		options.star.skinny = true;
 		options.cell.maxItems = 9;
 		options.cell.maxItemsPerRow = 3;
 		options.answers.required = 1;
 	}
 	if (level == 2) {
 		options.star.density = 40;
 		options.star.skinny = false;
 		options.cell.maxItems = 16;
 		options.cell.maxItemsPerRow = 4;
 		options.answers.required = 2;
 	}
 	if (level == 3) {
 		options.star.density = 80;
 		options.star.skinny = false;
 		options.cell.maxItems = 25;
 		options.cell.maxItemsPerRow = 5;
 		options.answers.required = 5;
 	}
 	
 	init();
 });



 </script>	
 </body>
 <html>
	<!DOCTYPE html>
	<html><head><title>Caritas</title></head>
	<body>
	<style>

	body{ padding-left:50px;}
	#stage {
	border:1px solid #ccc;
	cursor:pointer;
	background:#eee;
	padding:0px;
	position:relative;
	}
	.hidden {
	display:none;
	}
	.ok {
	text-decoration:line-through;
	}
	</style>

	<h1>Juego de Caritas</h1>
	<div id="stage" class="hidden"></div>

	<select id="level">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	</select>

	<button id="start">Comenzar</button>

	<h2>Identifica a las siguientes celebridades:</h2>
	<ul id="answers" class="hidden">
	</ul>

	<script>
	var people = [
	{name: "Gary Oldman", slug: "gary-oldman", p: 13},
	{name: "Hugo Weaving", slug: "hugo-weaving", p: 12},
	{name: "Matt Damon", slug: "matt-damon", p: 12},
	{name: "Daniel Radcliffe", slug: "daniel-radcliffe", p: 11},
	{name: "Emma Watson", slug: "emma-watson", p: 11},
	{name: "Rupert Grint", slug: "rupert-grint", p: 10},
	{name: "Marion Cotillard", slug: "marion-cotillard", p: 9},
	{name: "Michael Caine", slug: "michael-caine", p: 9},
	{name: "Ken Jeong", slug: "ken-jeong", p: 8},
	{name: "Cameron Diaz", slug: "cameron-diaz", p: 8},
	{name: "Natalie Portman", slug: "natalie-portman", p: 8},
	{name: "Joan Cusack", slug: "joan-cusack", p: 8},
	{name: "Antonio Banderas", slug: "antonio-banderas", p: 8},
	{name: "Jude Law", slug: "jude-law", p: 8},
	{name: "Ewan McGregor", slug: "ewan-mcgregor", p: 7},
	{name: "Maggie Smith", slug: "maggie-smith", p: 7},
	{name: "Hank Azaria", slug: "hank-azaria", p: 7},
	{name: "Robert De Niro", slug: "robert-de-niro", p: 7},
	{name: "Liam Neeson", slug: "liam-neeson", p: 7},
	{name: "Brad Pitt", slug: "brad-pitt", p: 7},
	{name: "Michael Gambon", slug: "michael-gambon", p: 7},
	{name: "Helena Bonham Carter", slug: "helena-bonham-carter", p: 7} ,
	{name: "Tom Hardy", slug: "tom-hardy", p: 7},
	{name: "Seth Rogen", slug: "seth-rogen", p: 7},
	{name: "Johnny Depp", slug: "johnny-depp", p: 6},
	{name: "Bill Nighy", slug: "bill-nighy", p: 6},
	{name: "Zach Galifianakis", slug: "zach-galifianakis", p: 6},
	{name: "Ralph Fiennes", slug: "ralph-fiennes", p: 6},
	{name: "Simon Pegg", slug: "simon-pegg", p: 6},
	{name: "Jon Hamm", slug: "jon-hamm", p: 6},
	{name: "Milla Jovovich", slug: "milla-jovovich", p: 6},
	{name: "Vanessa Hudgens", slug: "vanessa-hudgens", p: 6},
	{name: "Nicolas Cage", slug: "nicolas-cage", p: 6},
	{name: "Jason Segel", slug: "jason-segel", p: 6},
	{name: "Tom Hanks", slug: "tom-hanks", p: 6},
	{name: "James McAvoy", slug: "james-mcavoy", p: 6},
	{name: "Joaquín Cosío", slug: "joaquin-cosio", p: 6},
	{name: "Justin Timberlake", slug: "justin-timberlake", p: 6},
	{name: "Dwayne Johnson", slug: "dwayne-johnson", p: 6},
	{name: "Sam Worthington", slug: "sam-worthington", p: 6},
	{name: "Salma Hayek", slug: "salma-hayek", p: 6},
	{name: "Anne Hathaway", slug: "anne-hathaway", p: 6},
	{name: "Daniel Craig", slug: "daniel-craig", p: 6},
	{name: "Jason Statham", slug: "jason-statham", p: 6},
	{name: "Alan Rickman", slug: "alan-rickman", p: 6},
	{name: "Christoph Waltz", slug: "christoph-waltz", p: 6},
	{name: "Danny McBride", slug: "danny-mcbride", p: 5},
	{name: "James Franco", slug: "james-franco", p: 5},
	{name: "Ciarán Hinds", slug: "ciaran-hinds", p: 5},
	{name: "Sigourney Weaver", slug: "sigourney-weaver", p: 5},
	{name: "Kate Winslet", slug: "kate-winslet", p: 5},
	{name: "Josh Duhamel", slug: "josh-duhamel", p: 5},
	{name: "Olivia Wilde", slug: "olivia-wilde", p: 5},
	{name: "Aaron Eckhart", slug: "aaron-eckhart", p: 5},
	{name: "Naomi Watts", slug: "naomi-watts", p: 5},
	{name: "Jack Black", slug: "jack-black", p: 5},
	{name: "Joseph Gordon-Levitt", slug: "joseph-gordon-levitt", p: 5} ,
	{name: "Stellan Skarsgard", slug: "stellan-skarsgard", p: 5},
	{name: "Jamie Bell", slug: "jamie-bell", p: 5},
	{name: "Shia LaBeouf", slug: "shia-labeouf", p: 5},
	{name: "Jim Broadbent", slug: "jim-broadbent", p: 5},
	{name: "Stephen Lang", slug: "stephen-lang", p: 5},
	{name: "Josh Hutcherson", slug: "josh-hutcherson", p: 5},
	{name: "Justin Long", slug: "justin-long", p: 5},
	{name: "Angelina Jolie", slug: "angelina-jolie", p: 5},
	{name: "Chris Evans", slug: "chris-evans", p: 5},
	{name: "David Yates", slug: "david-yates", p: 5},
	{name: "Jesse Eisenberg", slug: "jesse-eisenberg", p: 5},
	{name: "Colin Farrell", slug: "colin-farrell", p: 5},
	{name: "Dustin Hoffman", slug: "dustin-hoffman", p: 5},
	{name: "Jim Sturgess", slug: "jim-sturgess", p: 5},
	{name: "Morgan Freeman", slug: "morgan-freeman", p: 5},
	{name: "Amber Heard", slug: "amber-heard", p: 5},
	{name: "Jessica Alba", slug: "jessica-alba", p: 5},
	{name: "Laurence Fishburne", slug: "laurence-fishburne", p: 5},
	{name: "Leonardo DiCaprio", slug: "leonardo-dicaprio", p: 5},
	{name: "Ryan Gosling", slug: "ryan-gosling", p: 5},
	{name: "Tyrese Gibson", slug: "tyrese-gibson", p: 5},
	{name: "Richard Jenkins", slug: "richard-jenkins", p: 5},
	{name: "Robin Wright", slug: "robin-wright", p: 5},
	{name: "Scott Speedman", slug: "scott-speedman", p: 5},
	{name: "Anthony Hopkins", slug: "anthony-hopkins", p: 5},
	{name: "Michelle Rodriguez", slug: "michelle-rodriguez", p: 5},
	{name: "Owen Wilson", slug: "owen-wilson", p: 5},
	{name: "Jonah Hill", slug: "jonah-hill", p: 5},
	{name: "Lucy Liu", slug: "lucy-liu", p: 5},
	{name: "Emily Blunt", slug: "emily-blunt", p: 5},
	{name: "Stanley Tucci", slug: "stanley-tucci", p: 5},
	{name: "Tom Hiddleston", slug: "tom-hiddleston", p: 5},
	{name: "Kristen Wiig", slug: "kristen-wiig", p: 5},
	{name: "Mark Strong", slug: "mark-strong", p: 5},
	{name: "Russell Brand", slug: "russell-brand", p: 4},
	{name: "Giovanni Ribisi", slug: "giovanni-ribisi", p: 4},
	{name: "Geoffrey Rush", slug: "geoffrey-rush", p: 4},
	{name: "Freida Pinto", slug: "freida-pinto", p: 4},
	{name: "Robert Pattinson", slug: "robert-pattinson", p: 4},
	{name: "Chris Miller", slug: "chris-miller", p: 4},
	{name: "John Hurt", slug: "john-hurt", p: 4},
	{name: "Robbie Coltrane", slug: "robbie-coltrane", p: 4},
	{name: "Sofia Vergara", slug: "sofia-vergara", p: 4}
	];


	////////
	Array.prototype.shuffle = function() {
	for (var i = 0, len = this.length; i < len; i++) {
	var rand = Math.floor(Math.random() * len);
	var temp = this[i];
	this[i] = this[rand];
	this[rand] = temp;
	}
	return this;
	}
	/////////

	var options = {
	stageId: 'stage',
	canvasClass: 'canvas',
	cell: {maxItems: 25, maxItemsPerRow: 5, width: 48, height: 48},
	imageUrl: 'http://c.cdn.entucine.com/enelcine/media/credits/credit-small-{URL}.jpg',
	defaultImageUrl: 'http://a.cdn.entucine.com/enelcine/frontend/img/default_small_credit.png',
	data: people,
	star: {density: 100, fillStyle: ['yellow', 'red', 'pink'], radio: 10, skinny: false, interval: 500},
	answers: {required: 3}
	};


	// variables de interface
	var stage = document.getElementById(options.stageId),
	selLevel = document.getElementById('level'),
	btnStart = document.getElementById('start'),
	ulAnswers = document.getElementById('answers');

	var expectedAnswers = [];


	function getData() {
	options.data.shuffle();
	var d = [];
	var max = options.cell.maxItems;
	// rebanamos data
	if (max && max <= options.data.length) {
	d = options.data.slice(0, max);
	}
	return d;
	}

	function createCanvas(name, w, h, absolute) {
	var c = document.createElement('canvas');
	c.width = w;
	c.height = h;
	c.className = options.canvasClass + ' ' + name;
	if (absolute) {
	c.style.position = 'absolute';
	c.style.left = window.getComputedStyle(stage, null).getPropertyValue('padding-left');
	}
	stage.appendChild(c);
	return c;
	}

	function init() {
	stage.innerHTML = '';
	expectedAnswers = [];
	ulAnswers.innerHTML = '';

	var data = getData();

	// calcular dimensiones de canvas
	var width = options.cell.maxItemsPerRow * options.cell.width;
	var height = data.length / options.cell.maxItemsPerRow * options.cell.height;

	stage.style.width = width + 'px';
	stage.style.height = height + 'px';

	// caritas
	var bgCanvas = createCanvas('bg', width, height, false);
	// estrellitas
	var fgCanvas = createCanvas('fg', width, height, true);

	fillCanvasWithFaces(bgCanvas, data);

	setInterval(function() {
	fillCanvasWithStars(fgCanvas);
	}, options.star.interval);

	fgCanvas.addEventListener('mousedown', checkCanvasClick);

	// determinar las respuestas esperadas

	for (var i = 0; i < options.answers.required; i++) {

	// carita aleatoria
	var rindex = Math.floor(Math.random() * data.length);
	var answer = data[rindex];
	answer.index = rindex;
	console.log(answer);
	expectedAnswers.push(answer);

	// mostrar las opciones al usuario
	var li = document.createElement('li');
	li.innerHTML = answer.name;
	li.id = answer.slug;
	ulAnswers.appendChild(li);
	}
	}

	function getFaceIndexFromEvent(event) {
	var x = event.offsetX \|\| event.layerX,
	y = event.offsetY \|\| event.layerY;

	var cell = Math.floor(x / options.cell.width),
	row = Math.floor(y / options.cell.height);

	return cell + (row * options.cell.maxItemsPerRow);
	}

	function checkCanvasClick(event) {
	var answerClickIndex = getFaceIndexFromEvent(event);
	console.log(answerClickIndex)
	for (var i = 0; i < expectedAnswers.length; i++) {
	var answer = expectedAnswers[i];
	if (answer.index == answerClickIndex) {
	document.getElementById(answer.slug).className = 'ok';
	console.log('OK');
	return;
	}
	}
	console.log('Error')
	}

	function drawFace(canvas, imageUrl, x, y) {
	var ctx = canvas.getContext('2d');
	var image = new Image();
	image.onload = function() {
	ctx.drawImage(image, x, y);
	};
	image.onerror = function() {
	var defaultImage = new Image();
	defaultImage.onload = function() {
	ctx.drawImage(defaultImage, x, y);
	}
	defaultImage.src = options.defaultImageUrl;
	}
	image.src = imageUrl;
	}

	function fillCanvasWithFaces(canvas, data) {
	for (var row = 0, cell = 0, i = 0, total = data.length;
	i < total;
	i++) {

	var person = people[i];
	var personImgUrl = options.imageUrl.replace('{URL}', person.slug)

	var offsetX = options.cell.width * cell;
	var offsetY = options.cell.height * row;

	drawFace(canvas, personImgUrl, offsetX, offsetY);
	//console.log(person.name, offsetX, offsetY, cell, row)

	// saltar de fila y resetear celda
	if ((cell + 1) >= options.cell.maxItemsPerRow) {
	cell = 0;
	row++;
	// saltar de celda
	} else {
	cell++;
	}

	}
	}
	function fillCanvasWithStars(canvas) {
	var ctx = canvas.getContext('2d');
	var w = canvas.width,
	h = canvas.height;
	// borrar canvas
	ctx.clearRect(0, 0, w, h);

	// pintar las estrellas en puntos aleatorios
	for (var i = 0; i < options.star.density; i++) {
	ctx.save();
	// color aleatorio
	options.star.fillStyle.shuffle();
	var rcolor = options.star.fillStyle[0];

	ctx.fillStyle = rcolor;
	// definir posición aleatoria
	var rx = w - Math.floor(Math.random() * w);
	var ry = w - Math.floor(Math.random() * w);
	ctx.translate(rx, ry);

	var rradio = Math.floor(Math.random() * options.star.radio + 2);

	drawStar(canvas, rradio);

	ctx.restore()
	}

	}

	function drawStar(canvas, radio) {
	var ctx = canvas.getContext('2d');

	ctx.save();
	ctx.beginPath()
	ctx.moveTo(radio, 0);
	for (i = 0; i < 9; i++){
	ctx.rotate(Math.PI / 5);
	if (i % 2 == 0) {
	ctx.lineTo((radio / (0.525731 + (options.star.skinny ? 1 : 0))) * 0.200811, 0);
	} else {
	ctx.lineTo(radio, 0);
	}
	}
	ctx.closePath();
	ctx.fill();
	ctx.restore();
	}


	btnStart.addEventListener('click', function() {

	stage.className = '';
	ulAnswers.className = '';
	btnStart.innerHTML = 'Volver a empezar';

	// determinar dificultad según nivel
	var level = selLevel.value;
	if (level == 1) {
	options.star.density = 20;
	options.star.skinny = true;
	options.cell.maxItems = 9;
	options.cell.maxItemsPerRow = 3;
	options.answers.required = 1;
	}
	if (level == 2) {
	options.star.density = 40;
	options.star.skinny = false;
	options.cell.maxItems = 16;
	options.cell.maxItemsPerRow = 4;
	options.answers.required = 2;
	}
	if (level == 3) {
	options.star.density = 80;
	options.star.skinny = false;
	options.cell.maxItems = 25;
	options.cell.maxItemsPerRow = 5;
	options.answers.required = 5;
	}

	init();
	});



	</script>
	</body>
	<html>