// JavaScript Document
function  displayPicsAjax(xml, textStatus)
{
	//removeWhitespace(xml);
	//alert("Got Here");
	var src = xml.getElementsByTagName("src");
	var parents = xml.getElementsByTagName("parents");
	var picOb;
	var height = xml.getElementsByTagName("height");
	var imgId = new Array('pic0', 'pic1', 'pic2', 'pic3', 'pic4');
	var textId = new Array('picText0', 'picText1', 'picText2', 'picText3', 'picText4');
	var pictureDirectory = 'kitten/assets/deleted/';
	//infoBox = document.getElementById("info");
	//infoBox.innerHTML = "Color: " + color + "    Pattern: " + pattern;
	//alert("Got Here2");
	for (var i=0; i < src.length; i++)
	{
		
		textOb = document.getElementById(textId[i]);
		textOb.innerHTML = "Parents: "  + parents[i].firstChild.data;
		picOb = document.getElementById(imgId[i]);
		//alert(src[i].firstChild.data);
		picOb.height=150;
		picOb.src = "assets/loading.gif";
		
		picOb.height = (src[i].firstChild.data == "none") ? 0 : height[i].firstChild.data;
		picOb.src = (src[i].firstChild.data == "none") ? "" : pictureDirectory + src[i].firstChild.data;
		picOb.width = 150;

		//alert(picOb.src + picOb.height + picOb.width);
						
	}
	while (i < 10)
	{
		picOb = document.getElementById(imgId[i]);
		picOb.src = "";
		picOb.height = 0;
		picOb.width=0;
		i++;
	
	}
}
//put all jQuery code in here
 $(document).ready(function(){
 
 $("#colors > div").fadeTo("fast", 0.3);
 $("#colors > div").addClass("NSColor");
 //$(".colorInfo").hide("fast");
 $(".colorStarter").show("fast");
	//$("#colors > #white").fadeTo("fast", 1.0);
	//$.post("assets/persiancatscolors/getimages.php", {color: "white"}, displayPicsAjax);
	//$("#white").removeClass("NSColor");
	//$("#white").addClass("SColor");
	//$(".white").show("fast");
	
 
$("#colors > div.NSColor").mouseover(function(){
	$(this).fadeTo("fast", 0.7);
  	event.preventDefault();
});

$("#colors > div.NSColor").mouseout(function(){
	$("#colors > div.NSColor").fadeTo("fast", 0.3);
	$("#colors > div.SColor").fadeTo("fast", 1.0);
});


$("#colors > div.NSColor").click(function(){
	

	var color;
	var infoClass;
	color = $(this).attr("id");
	//Change Color Selector 
	$("#colors > div.SColor").fadeTo("fast", 0.3);
	$("#colors > div.SColor").addClass("NSColor");
	$("#colors > div.SColor").removeClass("SColor");
	$(this).removeClass("NSColor");
	$(this).fadeTo("slow", 1.0);
	$(this).addClass("SColor");

	
	

	$.post("assets/persiancatscolors/getimages.php", {color: color}, displayPicsAjax);
	
	//show Cat Info
	$(".colorInfo").hide("fast");
	infoClass = "."+color;
	if(color == "black/red")
	{
		color="darkred";
		infoClass = ".blackred";
	}
	else if(color =="blue/cream")
	{
		color="lightblue";	
		infoClass =".bluecream";
	}
	else if (color == "white")
	{
		color="black";	
	}
	else if (color == "chocolate")
	{
		color = "saddlebrown";	
	}
	else if (color == "lilac")
	{
		color = "darkKhaki";	
	}
	
	$(infoClass).show("fast");
	$(infoClass).css({color:color});
	$("#mainpics > div > div").css({color:color});
 });
 
$("#pattern > div.NSPattern").mouseover(function(){
	$(this).fadeTo("fast", 0.7);
  	event.preventDefault();
});

$("#pattern > div.NSPattern").mouseout(function(){
	$("#pattern > div.NSPattern").fadeTo("fast", 0.3);
	$("#pattern > div.SPattern").fadeTo("fast", 1.0);
});


$("#pattern > div.NSPattern").click(function(){
	

	//var color;
	//var pattern;
	$("#pattern > div.SPattern").fadeTo("fast", 0.3);
	$("#pattern > div.SPattern").addClass("NSPattern");
	$("#pattern > div.SPattern").removeClass("SPattern");
	$(this).removeClass("NSPattern");
	$(this).fadeTo("slow", 1.0);
	$(this).addClass("SPattern");
	//color = $(this).attr("id");
	//pattern = $(
	//$.post("test.php", {color: color}, co);
 });

 
 });