jQuery(document).ready(function() {
	coloresAccesiblesAleatorios();
});

function coloresAccesiblesAleatorios() {
	jQuery.extend({
		color1: null,
		
		colorAccesible: function() {
			if (jQuery.color1.length == 0) {
				jQuery('#color1 .colorBoxColor').toggleClass('loading');
				jQuery('#color1 .icon').addClass('loading').css('display', 'inline');
			} else {
				jQuery('#color1 p').html('#'+jQuery.color1);
				jQuery('#color1 .colorBoxColor').css('background-color', '#'+jQuery.color1);
			}
			jQuery('#color2 .colorBoxColor').toggleClass('loading');
			jQuery('#color2 .icon').addClass('loading').css('display', 'inline');
			var data = "color1="+jQuery.color1;
			jQuery.ajax({
				type: "POST",
				url: "ajax-coloraccesible",
				data: data,
				success: function(msg) {
					//alert (msg);
					var json = eval('(' + msg + ')');
					var result = json.result;
					
					var color1 = result[0];
					var color2 = result[1];
					
					jQuery('.icon').hide();
					
					if (color1 != null) {
						if (jQuery.color1.length == 0) {
							jQuery('#color1 p').html('#'+color1);
							jQuery('#color1 .colorBoxColor').css('background-color', '#'+color1);
							jQuery('#color1 .colorBoxColor').toggleClass('loading');
						}
						jQuery('#colorBase').val(color1);
						jQuery('#color2 p').html('#'+color2);
						jQuery('#color2 .colorBoxColor').css('background-color', '#'+color2);
						jQuery('#color2 .colorBoxColor').toggleClass('loading');
						
						jQuery("#texto").css('background-color', '#'+color1);
						jQuery("#texto").css('color', '#'+color2);
					} else {
						jQuery('#color2 p').html('#');
						jQuery('#color2 .icon').removeClass('loading').addClass('error').css('display', 'inline');
					}
					
				}
			});
		}
		
	});
	
	jQuery("button#go").bind("click", function() {
		if (!jQuery("#colorBase").validateColor()) return false;
		
		jQuery.color1 = jQuery("#colorBase").val();
		jQuery.colorAccesible();
	});
	
	jQuery("button#random").bind("click", function() {
		jQuery.color1 = '';
		jQuery.colorAccesible();
	});
}
