var parameters;
var change = true;
window.addEvent('load', function()
{
	$('generar').addEvent('click', function(ev)
	{
		var event = new Event(ev);
		event.stop();
		if(change)
		{
			var styles = $$('.styles');
			var values = $$('.value');
			var customDuration = ($('duration').value).toInt();
			var customTransition = Fx['Transitions'][$('transitions').value];
			var tr = "";
			if($('types').value != 'none')
			{
				var customTransition = customTransition[$('types').value];
				var tr = "." + $('types').value;
			}
			var code = "var efectos = new Fx.Styles('prueba', {duration: " + customDuration + ", transition: Fx.Transitions." + $('transitions').value + tr + "});\n";
			code += "efectos.start(\n{\n";
			parameters = {};
			styles.each(function(elemento, indice)
			{
				parameters[elemento.value] = values[indice].value;
				code += "\t'" + elemento.value + "':'" + values[indice].value + "',\n";
			});
			code += "});";
			$('codigo-fuente').innerHTML = code;
			var efectos = new Fx.Styles('prueba', {duration: customDuration, transition: customTransition});	
			efectos.start(parameters);
			change = false;
		}
	});

	$('agregar').addEvent('click', function(ev)
	{
		var event = new Event(ev);
		event.stop();
		var nuevo = $('item').clone().injectInside('style-items');
		nuevo.id = '';
		var cerrar = new Element('a', 
		{
			'events':
			{
				'click':function()
				{
					nuevo.remove();
				}
			}
		});
		cerrar.adopt(new Element('img', {'src': 'http://www.jourmoly.com.ar/inc/cruz.gif', 'style': 'cursor:pointer;padding-left:2px;border:none'}));
		nuevo.adopt(cerrar);
		nuevo.addEvent('change', function()
		{
			change = true;
		});
		change = true;
	});

	$('reset').addEvent('click', function(ev)
	{
		var event = new Event(ev);
		event.stop();
		$('prueba').remove();
		var prueba = new Element('div', {'id': 'prueba'});
		prueba.appendText('Mootools');
		prueba.injectInside('probador');
		change = true;
	});

	$$('.styles').addEvent('change', function()
	{
		change = true;
	});

	$$('.value').addEvent('change', function()
	{
		change = true;
	});

	$('transitions').addEvent('change', function()
	{
		change = true;
		if(this.value == 'linear')
			$('types').selectedIndex = 'none';
	}.bind($('transitions')));

	$('duration').addEvent('change', function()
	{
		change = true;
	});

	$('types').addEvent('change', function()
	{
		change = true;
	});
});