var genderSelection = "Male";

function insertPreviewImage(layer, gender, color, slot) {
  var ids = { task: "getImage",
      layer: layer,
      gender: gender,
      color: color,
      slot: slot};

	jQuery.ajax({
		type: "post",
		url: "tools.php",
		data: ids,
		success: function(html) {
		      jQuery("#preview ."+layer.toLowerCase()).html(html);
		},
		error: function() {

		}
	});
}

function getCount() {
   var ids = { task: "getcount", linkid: 1 };
	jQuery.ajax({
		type: "post",
		url: "/commonTools.php",
		data: ids,
		success: function(html) {
         jQuery("#countInner").html(html);
		},
		error: function() {
		}
	});
  
}

function insertUL(layer, gender, color) {
  var ids = { task: "loadUL",
      layer: layer,
      gender: gender,
      color: color};
   jQuery("#loadingIndicator").html("<b>LOADING " + layer.toUpperCase() + "</b>");
   var noVisible = 3;
   if (layer=="Hair") noVisible = 6;
	jQuery.ajax({
		type: "post",
		url: "tools.php",
		data: ids,
		async: false,
		success: function(html) {
		      jQuery("#creator").append(html);
		      jQuery("#ul"+layer).hide();
		      createCarousel(layer, noVisible);
		      insertPreviewImage(layer,gender,color,0);
		      jQuery("#loadingIndicator").html("");
		},
		error: function() {
		}
	});
}

function createColorButtons(layer,gender) {
    var ids = { task: "getColors",
      layer: layer,
      gender: gender};
   jQuery("#loadingIndicator").html("<b>LOADING " + layer.toUpperCase() + "</b>");
   clayer = layer.toLowerCase() + "-cb";
   jQuery("#"+clayer).children().remove();
	jQuery.ajax({
		type: "post",
		url: "tools.php",
		data: ids,
		async: false,
		success: function(html) {
		   jQuery("#"+clayer).append(html);
		   jQuery("#"+clayer+" li").each(function(index) {
		      ccode = jQuery(this).html();
		      jQuery(this).html("<a href='#' style='background-color:#"+ccode+";' name='"+ccode+"'>&nbsp;&nbsp;</a>");
		      jQuery(this).children("a").click(function() {
		         insertUL(layer,gender,jQuery(this).attr("name"));
		      });
		      jQuery("#loadingIndicator").html("");
		   });
		},
		error: function() {
		}
	});
}

function createCarousel(layer, noVisible) {
   clayer = layer.toLowerCase() + "s";
   jQuery("#"+clayer).remove();

   jQuery("#c"+clayer)
      .append('<div class="innersel" id="' + clayer + '"><a href="#" class="prev">&nbsp</a><div class="carousel"></div><a href="#" class="next">&nbsp</a></div>');

   jQuery("#c"+clayer + " .carousel").append(jQuery("#ul"+layer));
   jQuery("#ul"+layer).show();
   var imgL = jQuery("#"+clayer+" img").length;
   var btnGo = [];
   jQuery("#"+clayer+" li img").each(function() {
      if (this.id!=undefined && this.id!="") btnGo.push("#"+this.id);
   }); 
   if (noVisible>imgL) {
         noVisible=imgL;         
   }
   
   var start = -1;
   if (layer=="Background") start=-2;
   jQuery("#"+clayer + " .carousel").jCarouselLite({
      btnNext: "#" + clayer + " .next",
      btnPrev: "#" + clayer + " .prev",
      mouseWheel: true,
      easing: "easeInBack",
      start: start,
      //btnGo: btnGo,
      afterEnd: function(a) {
         jQuery("img", a).each( function(index) {
            if (index==1) {
               jQuery(this).css("background-color","#ff9933");

               jQuery("#preview ." + layer.toLowerCase() + " img").replaceWith(jQuery(this).clone().css(
                  {'height' : '250px',
                   'width' : '250px',
                   'background-color' : ''}
               ));
            } else {
               jQuery(this).css("background-color","#ffffcc");
            }
        });
      },
      visible: noVisible
    });
}

function insertStartULs(gender) {
   // use 0 for color if the starting color is irrelevant
   // use color code to select a default starting color
   insertUL("Background", gender, 0);
   insertUL("Face", gender, "e9cfae");
   insertUL("Hair", gender, 0);
   insertUL("Brow", gender, 0);
   insertUL("Eye", gender, "008e34");
   insertUL("Nose", gender, 0);
   insertUL("Mouth", gender, 0);
   //insertUL("Tattoo", gender, 0);
   //insertUL("Helmet", gender, 0);
   insertUL("FacialHair", gender, 0);
   createColorButtons("Face",gender);
   createColorButtons("Eye",gender);
   createColorButtons("Hair",gender);
   //createColorButtons("Helmet",gender);
   //createColorButtons("Tattoo",gender);

}

function createCurrentImage() {
   var ids = { task: "createCurrent"};
   var cnt = 0;
   jQuery("#preview img").each(function() {
      ids[cnt]=jQuery(this).attr('src');
	  
      cnt++;
   });   
   jQuery("#loadingIndicator").html("<b>CREATING IMAGE</b>");
	jQuery.ajax({
		type: "post",
		url: "tools.php",
		data: ids,	
		success: function(html) {
	      jQuery("#result").html(html).slideUp().slideDown();
	      jQuery("#loadingIndicator").html("");
	      getCount();
		},
		error: function() {
		}
	});
    
}
function switchGender() {

   if (genderSelection=="Male") {
      genderSelection = "Female";
      insertStartULs("Female");
      jQuery("#selMale").click(function () {
         switchGender();
      }).fadeTo('slow',0.5).css('cursor', 'pointer');
      jQuery("#selFemale").unbind('click').fadeTo('slow',1).css('cursor', 'default'); 

   } else {
      genderSelection = "Male";
      insertStartULs("Male");
      jQuery("#selFemale").click(function () {
         switchGender();
      }).fadeTo('slow',0.5).css('cursor', 'pointer');
      jQuery("#selMale").unbind('click').fadeTo('slow',1).css('cursor', 'default');
   }
}
 
jQuery(document).ready(function(){
   jQuery("#createButton").click(function() {
         createCurrentImage();
   });
   jQuery("#selFemale").click(function () {
      switchGender();      
   });
   genderSelection = "Female";
   switchGender();
   getCount();
   tweetMemeButton();      
});