function selectImage(imgNum)

{

 var index;

 var obj;

var hp;hp="";for(index=1; index<=imgNum; index++){if(index==4)hp=hp+"<br><br>";hp=hp+"<table width=200 border=0 align=left bgcolor=\"#DFE3FF\"><tr bgcolor=#DFE3FF><td class=ordertext22 bgcolor=\"#DFE3FF\"><font color=717171 size=2 face=tahoma,arial>Character"+index+": <select class=ordertext22 name=\"charh"+index+"\" id=\"charh"+index+"\"><option value=''></option><option value=\"Santa Cap\">Santa Cap</option><option value=\"Ladies Santa Cap\">Ladies Santa Cap</option><option value=\"Elf Cap\">Elf Cap</option><option value=\"Stocking Cap\">Stocking Cap</option><option value=\"Pet Antlers\">Pet Antlers</option><option value=\"Yarmulke\">Yarmulke</option><option value=\"Red hair bow\">Red hair bow</option><option value=\"Same character\">Same character</option></select></font></td></tr></table>";

}if(document.getElementById("hats")){document.getElementById("hats").innerHTML=hp;}

 // put border around image that was selected

 for(index=1; index<=6; index++)

 {

  obj = document.getElementById("imgBorder" + index);

  if(obj)

  {

   if(imgNum == index)
{    
var ddd=obj.innerHTML;

var xx='<br><center>Good job, proceed to Step 2!</center>';
hh=ddd.search(/job/);

if(hh>0)
{

s=ddd.replace(/(Good job, proceed to Step 2!)/i,'');
obj.innerHTML=s;
}


obj.style.border = "2px solid blue";
ddd=obj.innerHTML;
obj.innerHTML=ddd+"<center><font color='blue' size='2'>Good job, proceed to Step 2!</font></center>";
}

//    obj.style.border = "2px solid blue";

   else
  {
    obj.style.border = "2px solid white";
var ddd=obj.innerHTML;

var xx='<br><center>Good job, proceed to Step 2!</center>';
hh=ddd.search(/job/);

if(hh>0)
{

s=ddd.replace(/(Good job, proceed to Step 2!)/i,'');
obj.innerHTML=s;
}
  } 
  }

 }



// show number of forms for each image

 for(index=1; index<=6; index++)

 {

  obj = document.getElementById("imgForm" + index);

  if(obj)

  {

   if(index <= imgNum)

    obj.style.display = "";

   else

    obj.style.display = "none";

  }

 }

 // save number of images selected

 document.form1.numImages1.value = imgNum;



 // show Accent Lines and personalization corresponding to the number of images

 if(document.getElementById('accentLineContainer'))

 {

  if(parseInt(imgNum) > 3 )

  {

    document.getElementById('accentLineContainer').innerHTML = getAccentLineHtml_Horiz();

    switchPreviews(2);

  }

  else

  {

   document.getElementById('accentLineContainer').innerHTML = getAccentLineHtml_Left();

   switchPreviews(1);

  }

 }

}

function hoverImg(imgNum, obj)
{
	if(document.form1.numImages1.value != imgNum)
		obj.style.border = "2px solid gold";
}
function unhoverImg(imgNum, obj)
{
	if(document.form1.numImages1.value != imgNum)
		obj.style.border = "2px solid white";
}

function selectImage1(imgNum)
{
 var index;
 var obj;

 // put border around image that was selected
 for(index=1; index<=6; index++)
 {
  obj = document.getElementById("imgBorder" + index);
  if(obj)
  {
   if(imgNum == index)
    obj.style.border = "2px solid blue";
   else
    obj.style.border = "2px solid white";
  }
 }

 // show number of forms for each image
 for(index=1; index<=6; index++)
 {
  obj = document.getElementById("imgForm" + index);
  if(obj)
  {
   if(index <= imgNum)
    obj.style.display = "";
   else
    obj.style.display = "none";
  }
 }

 // save number of images selected
 document.form1.numImages1.value = imgNum;

 // show Accent Lines and personalization corresponding to the number of images
 if(document.getElementById('accentLineContainer'))
 {
	 if(parseInt(imgNum) > 3 )
	 {
		  document.getElementById('accentLineContainer').innerHTML = getAccentLineHtml_Horiz();
		  switchPreviews(2);
	 }
	 else
	 {
	  document.getElementById('accentLineContainer').innerHTML = getAccentLineHtml_Left();
	  switchPreviews(1);
	 }
 }
}

function openImageSelector(imgNum)
{
 window.open("imageselector.php?id=" + imgNum, null, "width=750, height=600, menubar=0, scrollbars=1");
}

// shows the image after selection
function fillImage(imgNum, src)
{
 var obj;

 obj = document.getElementById("imgSelected" + imgNum);
 if(obj)
 {
  obj.innerHTML = "<img id='selectedImage" + imgNum + "' src='" + src + "'>";
 }

 // check image type... then display form
 var isMale = ( src.indexOf('male')!=-1 && src.indexOf('female')==-1) ? true : false;
 var isFemale = ( src.indexOf('female')!=-1) ? true : false;
 var isBaby = ( src.indexOf('baby')!=-1) ? true : false;
 var isPet = ( src.indexOf('dog')!=-1 || src.indexOf('cats_other')!=-1) ? true : false;
 var isSpeechBubble = ( src.indexOf('storymakers')!=-1 && src.indexOf('BUBBLE')!=-1) ? true : false;
 var isStoryMaker = ( src.indexOf('storymakers')!=-1 && src.indexOf('BUBBLE')==-1) ? true : false;

 // get individual forms
 if(isMale) document.getElementById('attribute' + imgNum).innerHTML = getMaleForm(imgNum);
 if(isFemale) document.getElementById('attribute' + imgNum).innerHTML = getFemaleForm(imgNum);
 if(isBaby) document.getElementById('attribute' + imgNum).innerHTML = getBabyForm(imgNum);
 if(isPet) document.getElementById('attribute' + imgNum).innerHTML = getPetForm(imgNum);
 //if(isStoryMaker) document.getElementById('attribute' + imgNum).innerHTML = getStoryForm(imgNum);
 if(isSpeechBubble) document.getElementById('attribute' + imgNum).innerHTML = getSpeechForm(imgNum);

 // show/hide forms bsed on directory if this is a storymaker
 if(isStoryMaker)
 {
 	 var numColors = 0;
	 if(src.indexOf('/1/') != -1) numColors=1;
	 if(src.indexOf('/2/') != -1) numColors=2;
	 if(src.indexOf('/3/') != -1) numColors=3;

	 switch(numColors){
	 case 0:
		document.getElementById('attribute' + imgNum).innerHTML = getStoryForm0(imgNum);
		break;
 	 case 1:
		document.getElementById('attribute' + imgNum).innerHTML = getStoryForm1(imgNum);
 		break;
 	 case 3:
		document.getElementById('attribute' + imgNum).innerHTML = getStoryForm3(imgNum);
 		break;
 	 default:
		break;
	 }
 }


 // show/hide colors bsed on directory if this is a pet
 if(isPet)
 {
 	 var numColors = 0;
	 if(src.indexOf('/1/') != -1) numColors=1;
	 if(src.indexOf('/2/') != -1) numColors=2;
	 if(src.indexOf('/3/') != -1) numColors=3;

	 switch(numColors){
	 case 0:
		if(document.getElementById('colorHeader' + imgNum)) document.getElementById('colorHeader' + imgNum).style.display = "none";
		if(document.getElementById('colorBody' + imgNum)) document.getElementById('colorBody' + imgNum).style.display = "none";
		if(document.getElementById('colora' + imgNum)) document.getElementById('colora' + imgNum).style.display = "none";
	 case 1:
		if(document.getElementById('colorBDiv' + imgNum)) document.getElementById('colorBDiv' + imgNum).style.display = "none";
	 case 2:
		if(document.getElementById('colorCDiv' + imgNum)) document.getElementById('colorCDiv' + imgNum).style.display = "none";
	 default:
		break;
	 }
 }
}

function writeForm(imgNum, backColor)
{
 document.write("<tr id='imgForm" + imgNum + "' style='display:none'>");
 document.write(" <td bgcolor='" + backColor + "' valign='top'>");
 document.write(" <table width='100' class='ordertext2' cellspacing='0'>");
 document.write(" <tr bgcolor='" + backColor + "' >");
 document.write("  <td align='center'><b>Image " + imgNum + "</b></td>");
 document.write(" </tr>");
 document.write(" <tr bgcolor='" + backColor + "'>");
 document.write("  <td valign='top' align='center'><a href='' onclick='openImageSelector(" + imgNum + "); return false;'><div id='imgSelected" + imgNum + "'><img src='cats_other/mouse.gif'></div>Click to<br>Select Image</a></td>");
 document.write(" </tr>");
 document.write(" </table>");
 document.write(" </td>");
 document.write(" <td bgcolor='" + backColor + "' valign='top'><div id='attribute" + imgNum + "'></td>");
 document.write("</tr>");
}