/*
Ejemplo...

<html>
<head>
	<style>
	#caja_tal {background-color: gray; height: 300px;}
	.modulo_votacion {background-color: blue; padding:10px; width: 200px;}
	.modulo_votacion .barra_votacion{background-color: red; padding:10px; width: 120px; margin: 10px auto;}
	.modulo_votacion .barra_votacion img{margin-left: 5px;}
	#debug {font-size: 10px;}
	</style>
</head>
<body>
	<div id="caja_tal" onmouseover="trasto()"></div>
	<div id="debug"></div>
</body>
</html>
<script type="text/javascript" src="funciones_DOM.js"></script>
<script type="text/javascript" src="caja_votos.class.js"></script>
<script type="text/javascript">
function d(texto)
{
	document.getElementById('debug').appendChild(montar_elemento('div', null, texto, null));
}

function trasto()
{
	d('Se pasa sobre capa padre');
	var r=Math.floor(Math.random()*256);
	var g=Math.floor(Math.random()*256);
	var b=Math.floor(Math.random()*256);

	document.getElementById('caja_tal').style.backgroundColor='rgb('+r+', '+g+', '+b+')';

}

var URL_WEB='';

function votar(v_a, v_b)
{
	alert(v_a+' '+v_b);
}

var a=new Caja_votos('img/estrella_marron.png', 'img/estrella_negra.png', votar);
a.adjuntar(document.getElementById('caja_tal'));
</script>
*/

function Caja_votos(v_ruta_on, v_ruta_off, v_callback, v_estrellas, v_ambito_callback)
{
	//Elementos DOM.
	this.DOM_contenedor=null;	//El contenedor del modulo.
	this.DOM_barra_votos=null; 	//El contenedor de la barra de votos.

	//Propiedades...
	this.valor=null;
	this.votar_activo=true;
	this.cambiar_activo=true;
	this.ruta_on=v_ruta_on ? v_ruta_on : 'img/estrella_marron.png';
	this.ruta_off=v_ruta_off ? v_ruta_off : 'img/estrella_negra.png';
	this.callback=v_callback ? v_callback : function() {null};
	this.ambito_callback=v_ambito_callback ? v_ambito_callback : null;
	this.total_estrellas=v_estrellas ? v_estrellas : 5;
	this.array_estrellas=Array();
	
	this.crear();
}

Caja_votos.prototype.crear=function()
{
	var aquello=this;

	//El contenedor principal... Al salir de aquí 
	this.DOM_contenedor=montar_elemento('div', 'modulo_votacion', null, null);
	this.DOM_contenedor.onmouseout=function(event) {aquello.salir_de_modulo.call(aquello, event);};
	this.DOM_contenedor.onmouseover=function(event) {aquello.detener_propagacion(event);};

	this.DOM_barra_votos=montar_elemento('div', 'barra_votacion', null, this.DOM_contenedor);
	this.DOM_barra_votos.onmouseout=function(event) {aquello.salir_de_barra.call(aquello, event);};

	var i=1;
	
	for(i; i<=this.total_estrellas; i++)
	{
		this.array_estrellas.push(this.montar_estrella(i));
		this.DOM_barra_votos.appendChild(this.array_estrellas[i-1]);
	}
}

Caja_votos.prototype.adjuntar=function(v_padre)
{
	v_padre.appendChild(this.DOM_contenedor);
}

Caja_votos.prototype.montar_estrella=function(v_i)
{
	var aquello=this;
	var temp=montar_imagen(this.ruta_off, v_i, null, null, null);

	temp.onclick=function(event) 
	{
		if(!event)
		{
			event=window.event;
		}

		if(aquello.votar_activo) 
		{
			aquello.valor=v_i;

			if(aquello.ambito_callback)
			{		
	
				aquello.callback.call(aquello.ambito_callback, aquello, v_i);		
			}
			else
			{
				aquello.callback(aquello, v_i);
			}
		}

		aquello.detener_propagacion(event);
	};
	temp.onmouseover=function(event) {aquello.iluminar.call(aquello, v_i, event);};
	temp.onmouseout=function(event) {aquello.detener_propagacion(event);};

	return temp;
}

Caja_votos.prototype.iluminar=function(v_indice, evento, evitar_evento)
{
	if(this.cambiar_activo)
	{
		var i=0;

		for(i; i<v_indice; i++)
		{
			this.array_estrellas[i].src=this.ruta_on;
		}

		//El resto...
		for(i; i<this.total_estrellas; i++)
		{
			this.array_estrellas[i].src=this.ruta_off;
		}

		if(!evento && !evitar_evento)	//Para IE...
		{
			evento=window.event;
		}
	}

	if(!evitar_evento) this.detener_propagacion(evento);
}

Caja_votos.prototype.detener_propagacion=function(evento)
{
	if(!evento)	//Para Explorer: Si no hay evento se maneja con window.Event.
	{
		var evento=window.event;
		evento.cancelBubble=true;	//También para para explorer....
		evento.returnValue=false;
	}

	if(evento.stopPropagation) 	//Y ahora para fireFox...
	{
		evento.stopPropagation();
		evento.preventDefault();
	}
}

Caja_votos.prototype.salir_de_barra=function(evento)
{
	if(!evento)	//Para IE...
	{
		evento=window.event;
	}

	this.detener_propagacion(evento);

	var foco_original=evento.target || evento.srcElement;
	var nuevo_foco=evento.relatedTarget || evento.toElement;

	if(foco_original.hasChildNodes())
	{
		var i=0;
		var longitud=foco_original.childNodes.length;
		for(i; i<longitud; i++)
		{
			if(nuevo_foco==foco_original.childNodes[i])
			{		
				return false;
			}
		}		
	}

	this.iluminar(0, evento);
}

Caja_votos.prototype.salir_de_modulo=function(evento)
{
	null;
}

Caja_votos.prototype.intercambiar_voto=function()
{
	this.votar_activo=!this.votar_activo;
}

Caja_votos.prototype.intercambiar_cambiar=function()
{
	this.cambiar_activo=!this.cambiar_activo;
}

Caja_votos.prototype.destruir=function()
{
	var i;
	for(i=0; i<this.total_estrellas; i++)
	{
		this.array_estrellas[i].onmouseover=null;
		this.array_estrellas[i].onmouseout=null;
		this.array_estrellas[i].onclick=null;
	}

	eliminar_elemento(this.DOM_contenedor);
}

