var SELECCION = false;
window.addEvent('domready', function(){
	$$('#seleccion li').addEvent('click', function(){
		if(SELECCION === true){
			if($('bal-sel')){
				var id = $('bal-sel').getProperty('baldosa');
				var imagen = $('imagen' + id).clone();
				this.set('html', '');
				this.appendChild(imagen);
			}
		}
	});
	$('pantalla_completa').addEvent('click', function(){
		$('valor3').set('value', '');
		var valores = new Array();
		var i = 0;
		$$('#seleccion li').each(function(li){
			var hijos = li.getChildren();
			if(hijos.length > 0){
				valores[i++] = hijos[0].getProperty('baldosa') + '_' + hijos[0].getProperty('rotar');
			}else{
				valores[i++] = "";
			}
		});
		$('valor3').set('value', valores.join("|"));
		$('tapiz-imagen').submit();
	});
	$('vaciar_tapiz').addEvent('click', function(){
		$$('#seleccion li').set('html', '');
	});
	$('guardar_tapiz').addEvent('click', function(){
		$('valor1').set('value', '');
		var valores = new Array();
		var i = 0;
		$$('#seleccion li').each(function(li){
			var hijos = li.getChildren();
			if(hijos.length > 0){
				valores[i++] = hijos[0].getProperty('baldosa') + '_' + hijos[0].getProperty('rotar');
			}else{
				valores[i++] = "";
			}
		});
		$('valor1').set('value', valores.join("|"));
		$('genera-imagen').submit();
	});
	$('imprimir_tapiz').addEvent('click', function(){
		$('valor2').set('value', '');
		var valores = new Array();
		var i = 0;
		$$('#seleccion li').each(function(li){
			var hijos = li.getChildren();
			if(hijos.length > 0){
				valores[i++] = hijos[0].getProperty('baldosa') + '_' + hijos[0].getProperty('rotar');
			}else{
				valores[i++] = "";
			}
		});
		$('valor2').set('value', valores.join("|"));
		$('imprime-imagen').submit();
	});
	$$('#familias li').addEvent('click', function(){
		var li = this;
		SELECCION = false;
		new Request({
			url:'lib/baldosas.php',
			method:'post',
			data:'id=' + this.getProperty('categoria'),
			onRequest: function(){
				$('colores').set('html', '<img src="Images/loading.gif" />');
			},
			onSuccess: function(responseText){
				$('colores').set('html', responseText);
				$$('#colores li').addEvent('mouseenter', function(){
					this.getElements('.left').setStyle('display', 'block');
					this.getElements('.right').setStyle('display', 'block');
					this.addClass("sel");
				});
				$$('#colores li').addEvent('mouseleave', function(){
					this.getElements('.left').setStyle('display', 'none');
					this.getElements('.right').setStyle('display', 'none');
					this.removeClass("sel");
				});
				$$('#colores li').addEvent('click', function(){
					$$('#colores li').each(function(li){
						li.getElements('.left').setStyle('display', 'none');
						li.getElements('.right').setStyle('display', 'none');
					});
					$$('#colores li').removeProperty('id');
					this.getElements('.left').setStyle('display', 'block');
					this.getElements('.right').setStyle('display', 'block');
					this.setProperty("id", "bal-sel");
					SELECCION = true;
				});
				$$('.right').addEvent('click', function(){
					var numero = this.getProperty('numero');
					$$('.rotando').setStyle('display', 'none');
					$('rotando' + numero).setStyle('display', 'block');
					var imagen = $('imagen' + numero).getProperty('imagen');
					var rotar = $('imagen' + numero + 'pos').get('value').toInt();
					if(rotar == -360 || rotar == 0 || rotar == 360) rotar = -90;
					else rotar += -90;
					SELECCION = false;
					new Asset.image("lib/rotar.php?imagen=" + imagen + "&rotar=" + rotar, {
						'class':'imagen',
						'rotar':rotar,
						'id':'imagen' + numero,
						'baldosa':numero,
						'imagen':imagen,
						onload: function(){
							//$('imagen' + numero).src = "lib/rotar.php?imagen=" + imagen + "&rotar=" + rotar;
							var li = $('imagen' + numero).getParent();
							$('imagen' + numero).destroy();
							$('rotando' + numero).setStyle('display', 'none');
							$('imagen' + numero + 'pos').set('value', rotar);
							//$('imagen' + numero).setProperty('rotar', rotar);
							SELECCION = true;
							this.inject(li, 'top');
						}
					});
				});
				$$('.left').addEvent('click', function(){
					var numero = this.getProperty('numero');
					$$('.rotando').setStyle('display', 'none');
					$('rotando' + numero).setStyle('display', 'block');
					var imagen = $('imagen' + numero).getProperty('imagen');
					var rotar = $('imagen' + numero + 'pos').get('value').toInt();
					if(rotar == 360 || rotar == 0) rotar = 90;
					else rotar += 90;
					SELECCION = false;
					new Asset.image("lib/rotar.php?imagen=" + imagen + "&rotar=" + rotar, {
						'class':'imagen',
						'rotar':rotar,
						'id':'imagen' + numero,
						'baldosa':numero,
						'imagen':imagen,
						onload: function(){
							//$('imagen' + numero).src = "lib/rotar.php?imagen=" + imagen + "&rotar=" + rotar;
							var li = $('imagen' + numero).getParent();
							$('imagen' + numero).destroy();
							$('rotando' + numero).setStyle('display', 'none');
							$('imagen' + numero + 'pos').set('value', rotar);
							SELECCION = true;
							//console.log(this)
							this.inject(li, 'top');
						}
					});
				});
				$$('#familias li').removeClass('sel');
				li.addClass('sel');
			}
		}).send();
	});
});