function doOnLoad()
//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
{
//doFormTab('FSstyleTabd', 'FSbackgroundSd', 'FdivSdX', 'oFdivSdX');

doStyle();

doTabTableForm('FSstyleTabT', 'fFStabHead', 'fFSborderW', 'fFSborderC', 'fFSborderS', 'fFSmargin'  );

//only show displayFS after applying style to children
var oFSdivNode = document.getElementById('displayFS');
oFSdivNode.style.display = "block";  

}

//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
function doFormTab($showForm, $hideForm1, $hideForm2, $hideForm3 )
//$showForm:  id of form (or containing div) to show
//$hideForm?: id of form (or containing div) to hide  
//assumption is that the forms are positioned in a layered manner, one on top of the other
{
var showF = $showForm;
var hideF1 = $hideForm1;
var hideF2 = $hideForm2;
var hideF3 = $hideForm3;
var showFnode = document.getElementById(showF);
var hideFnode1 = document.getElementById(hideF1);
var hideFnode2 = document.getElementById(hideF2);
var hideFnode3 = document.getElementById(hideF3);

showFnode.style.display = "block";
hideFnode1.style.display = "none";
hideFnode2.style.display = "none";
hideFnode3.style.display = "none";

}
//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
function doStyle()
//extracts style from form    
{
var calcImgSzA = new Array(2);

var Fcount = parseInt(document.getElementById('Fcount').value);
//alert ('fcount:' + Fcount);

var FSbkgdC = document.getElementById('FSbkgdC').value;
var FbkgdC = document.getElementById('FbkgdC').value;
var FimgBkgdC = document.getElementById('FimgBkgdC').value;

var FSborderW = parseInt(document.getElementById('FSborderW').value);
var FSborderC = document.getElementById('FSborderC').value;
var FcountX = parseInt(document.getElementById('FcountX').value);
var FmaxImgW = parseInt(document.getElementById('FmaxImgW').value);
var FmaxImgH = parseInt(document.getElementById('FmaxImgH').value);
var FbetweenX = parseInt(document.getElementById('FbetweenX').value);
var FbetweenY = parseInt(document.getElementById('FbetweenY').value);
var Ffontsz = document.getElementById('Ffontsz').value;
var FfontS = document.getElementById('FfontS').value;
var FfontC = document.getElementById('FfontC').value;
var FimgBordW = parseInt(document.getElementById('FimgBorderW').value);
var FimgBordC = document.getElementById('FimgBorderC').value;
var FimgBordS = document.getElementById('FimgBorderS').value;
var FborderW = parseInt(document.getElementById('FborderW').value);
var FborderC = document.getElementById('FborderC').value;

var oFSbkgdI = document.getElementById('oFSbkgdI').value;
var oFbkgdI = document.getElementById('oFbkgdI').value;
var oFimgBkgdI = document.getElementById('oFimgBkgdI').value;

var oFSbkgdIr = document.getElementById('oFSbkgdIr').value;
var oFbkgdIr = document.getElementById('oFbkgdIr').value;
var oFimgBkgdIr = document.getElementById('oFimgBkgdIr').value;

var oFSbkgdIp = document.getElementById('oFSbkgdIp').value;
var oFbkgdIp = document.getElementById('oFbkgdIp').value;
var oFimgBkgdIp = document.getElementById('oFimgBkgdIp').value;


var FSmargin = parseInt(document.getElementById('FSmargin').value);
var FSmarginX = parseInt(document.getElementById('FSmarginX').value);
var Fmargin = parseInt(document.getElementById('Fmargin').value);
var FmarginX = parseInt(document.getElementById('FmarginX').value);
var FimgMargin = parseInt(document.getElementById('FimgMargin').value);
var FimgMarginX = parseInt(document.getElementById('FimgMarginX').value);
var FnameH = parseInt(document.getElementById('FnameH').value);
var FSborderS = document.getElementById('FSborderS').value;
var FborderS = document.getElementById('FborderS').value;


//assumes I know the stylesheet I want is the 2nd style block
var styleRules = new Array();
if (document.styleSheets[1].cssRules)
{
//opera, FF do this
//  alert ('found styleSheets cssrules');
  styleRules = document.styleSheets[1].cssRules;
}
else if (document.styleSheets[1].rules)
{
//IE does this
//  alert ('found styleSheets rules');
  styleRules = document.styleSheets[1].rules;
}


var FimgDivW = FmaxImgW + (FimgBordW * 2) + (FimgMarginX * 2);
var FimgDivH = FmaxImgH + (FimgBordW * 2) + (FimgMargin * 2);

//alert ("FmaxImgW:" + FmaxImgW + ";  maxCalcImgW:" + maxCalcImgW);

//var FimgDivW = maxCalcImgW + (FimgBordW * 2) + (FimgMarginX * 2);
//var FimgDivH = maxCalcImgH + (FimgBordW * 2) + (FimgMargin * 2);


var FnameDivH = FnameH;   //add border in here later

//cacluated values single friend div
var FdivW = FimgDivW + (FmarginX * 2);
var FdivH = FimgDivH +  FnameDivH + (Fmargin * 2);

//border will be applied at the oFdiv level
//will force itself larger to accomodate inner border placed by IE
//however, IF we have an edge width AND a border we will need either 
// another div layer OR browser specific coding 
//If we have ONLY an image edge as the border we can accomodate with size



var oFdivW = FdivW  
var oFdivH = FdivH

// size we expect oFdiv to expand to when border applied
//  for border it will automatically expand to this size
     
var eXoFdivW = oFdivW + (2 * FborderW);
var eXoFdivH = oFdivH + (2 * FborderW);


//calculated values FSdiv and oFSdiv
var FcountY = Math.ceil(Fcount/FcountX);
var FSdivW = (eXoFdivW * FcountX)+ ((FcountX - 1) * FbetweenX) + (FSmarginX * 2) ;
var oFSdivW = FSdivW //auto expansion will occur for IE border

var FSdivH = (eXoFdivH * FcountY)+ ((FcountY - 1) * FbetweenY) + (FSmargin * 2) ;
var oFSdivH = FSdivH //auto expand for IE border


var FSborderSs = FSborderW + "px " + FSborderS + " " + FSborderC ; 
//oFSdiv

styleRules[0].style.backgroundColor = FSbkgdC;
styleRules[0].style.width = oFSdivW;
styleRules[0].style.height = oFSdivH;
styleRules[0].style.border = FSborderSs; 
 

//FSdiv

styleRules[1].style.backgroundColor = "transparent";
styleRules[1].style.width = FSdivW;
styleRules[1].style.height = FSdivH;
styleRules[1].style.top = 0;
styleRules[1].style.left = 0;

// add in top left to accomodate edge

var FborderSs = FborderW + "px " + FborderC + " " + FborderS;

//.oFdiv
styleRules[2].style.backgroundColor = FbkgdC;
styleRules[2].style.width = oFdivW;
styleRules[2].style.height = oFdivH;
styleRules[2].style.border = FborderSs; 


//.Flink  [3]
 
//.Fdiv  [4]
styleRules[4].style.backgroundColor = "transparent"; //temporary so I can see what is happening
styleRules[4].style.width = FdivW;
styleRules[4].style.height = FdivH;
styleRules[4].style.top = 0;
styleRules[4].style.left = 0;

//DIV.Fnm [5]
styleRules[5].style.height = FnameDivH;
styleRules[5].style.position = "relative";  //may change to absolute

//SPAN.Fnm [6]
styleRules[6].style.color = FfontC;
styleRules[6].style.fontSize = Ffontsz;
styleRules[6].style.fontFamily = FfontS;
styleRules[10].style.color=FfontC;
styleRules[10].style.fontSize = Ffontsz;
styleRules[10].style.fontFamily = FfontS;
styleRules[11].style.color=FfontC;
styleRules[11].style.fontSize = Ffontsz;
styleRules[11].style.fontFamily = FfontS;
styleRules[12].style.color=FfontC;
styleRules[12].style.fontSize = Ffontsz;
styleRules[12].style.fontFamily = FfontS;

//.FimgD  [7]
styleRules[7].style.backgroundColor = FimgBkgdC;
styleRules[7].style.position = "relative";  //may change to absolute

//.Fimg [8]
var FimgBordSs = FimgBordW + "px " + FimgBordS + " " + FimgBordC;

styleRules[8].style.top = FimgMargin; 
styleRules[8].style.left = FimgMarginX;
styleRules[8].style.border = FimgBordSs; 


//===================
var r = 1;
var c = 1;
var ptop = 0;
var pleft = 0;
var FimgDivW = 0;
var FimgDivH = 0;

//get individual image style stuff

var maxCalcImgW = 0;
var maxCalcImgH = 0;
for (i=0; i<Fcount; i++)
{
j = i + 1;


var FdivId = "Fdiv_" + j;
var oFdivId = "oFdiv_" + j;
var oFdivImgId = "oFdivImg_" + j;
var FimgDid = "FimgD_" + j;
var FimgDivImgId = "FimgDivImg_" + j;


var ffimgu = "ffimgu_" + j;
var ffimgw = "ffimgw_" + j;
var ffimgh = "ffimgh_" + j;

//for an image border is applied to OUTSIDE of image in all browsers?
//so Div is only needed to apply an image as the border
var FimgDivId = "FimgD_" + j;
var FimgId = "Fimg_" + j;

//stored in hidden form fields
var FimgU = document.getElementById(ffimgu).value;
var FimgW = document.getElementById(ffimgw).value;
var FimgH = document.getElementById(ffimgh).value;

//alert ("img " + FimgH + " x " + FimgW );

//Calculate the desired image size to use
calcImgSzA = max_img_size(FimgW, FimgH, FmaxImgW, FmaxImgH); 
var calcImgW = calcImgSzA[0];
var calcImgH = calcImgSzA[1];


if (calcImgW > maxCalcImgW)
{ 
  maxCalcImgW = calcImgW;
}

if (calcImgH > maxCalcImgH)
{ 
  maxCalcImgH = calcImgH;
}



//alert ("calc sizes: " + calcImgH + " x " + calcImgW);

//inline style for individual image
var imgNode = document.getElementById(FimgId);
imgNode.style.width = calcImgW;
imgNode.style.height = calcImgH;

//because we are going to absolute position the img, the div needs size

var imgDivNode = document.getElementById(FimgDivId);

FimgDivW = calcImgW + (FimgMarginX * 2) + (FimgBordW * 2);
FimgDivH = calcImgH + (FimgMargin * 2) + (FimgBordW * 2);


imgDivNode.style.width = FimgDivW;
imgDivNode.style.height = FimgDivH;

//alert ("oFdivId= " +  oFdivId);

var oFdivIdNode = document.getElementById(oFdivId);


//Ditch the margin logic.  It is not cross browser consistant
//go to absolute positioning of each oFdiv inside our FSdiv
//versatile for more friend space arrangements

//new absolute placement logic
//rectangle FcountX x FcountY 

//r = row   ptop = position top
//c = column pleft = position left

  ptop  = FSmargin + ( (eXoFdivH + FbetweenY) * ( r - 1 ));
  pleft = FSmarginX + ( (eXoFdivW + FbetweenX) * ( c - 1 ));

//alert (c + ";" + ptop + ";"  + pleft + ";" + FbetweenX + ";" + oFdivW);

  if ( ((j)/FcountX) == Math.floor((j)/FcountX))  //far right
  {  r++;
     c = 1;
  }
  else
  {
     c = c + 1;
  }

  oFdivIdNode.style.position = "absolute"; 
  oFdivIdNode.style.top = ptop;
  oFdivIdNode.style.left = pleft;


  doApplyBkgdImg(oFbkgdI, oFbkgdIr, oFbkgdIp, oFdivId, oFdivImgId, oFdivW, oFdivH );

  doApplyBkgdImg(oFimgBkgdI, oFimgBkgdIr, oFimgBkgdIp, FimgDid, FimgDivImgId, FimgDivW, FimgDivH );

} //end for
//===================

//var new_styleS = document.getElementById('fSstyle').innerHTML; 
//alert ('new_styleS');
//alert (new_styleS);
//alert ("goodby");


//apply background img style
doApplyBkgdImg(oFSbkgdI, oFSbkgdIr, oFSbkgdIp, "oFSdiv", "oFSdivImg", oFSdivW, oFSdivH );

//var eXoFdivW = oFdivW + (2 * FborderW);

}

//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
function doDelFlag($node)
{
//Update the hidden field, to flag this node for delete, then render this node hidden.
//node will be deleted later
//alert ("GoodBy Friend");

var tnode = $node;
var input_tags = tnode.getElementsByTagName("input");

input_tags[9].value="DELETE"

var temp = "9 value:" + input_tags[9].value

//alert (temp)

//alter style of this node to display:none
//turn below on AFTER trouble shooting.
//tnode.setAttribute("style", "display:none; background-color:yellow")
tnode.style.display='none'
tnode.style.background='yellow'


}
//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

function doAddAddFriend()
//clone of divnode will be inserted at end of pdivnode
{
//determine how many div nodes form already has
var pdivnode = document.getElementById("pDiv");
var div_tags = pdivnode.getElementsByTagName("div");

//below does not get the correct count in IE but did work in FF
//var fdiv_tags = document.getElementsByName("fdiv"); 

//assumption that I have ONE and EXACTLY ONE p tag per friend.
var p_tags = pdivnode.getElementsByTagName("p");
var fcount = p_tags.length;

var teststr = "fdiv count = " + fcount;
//alert (teststr);

var dls = String(fcount);

var divnode = document.getElementById("fdiv0");

var newdivnode =divnode.cloneNode(true);

//set id
newdivnode.id = 'fdiv' + dls;
newdivnode.style.display="block";

var input_tags = newdivnode.getElementsByTagName("input");
input_tags[0].id='ffidnn_' + dls;
input_tags[0].name='ffidnn_' + dls;

input_tags[2].id='fnamenn_' + dls;
input_tags[2].name='fnamenn_' + dls;

input_tags[3].id='fimgunn_' + dls;
input_tags[3].name='fimgunn_' + dls;

input_tags[4].id='fimg2unn_' + dls;
input_tags[4].name='fimg2unn_' + dls;

input_tags[6].id='furlnn_' + dls;
input_tags[6].name='furlnn_' + dls;

input_tags[7].id='findexnn_' + dls;
input_tags[7].name='findexnn_' + dls;
input_tags[7].value= dls;

input_tags[8].id='presubmitnn_' + dls;
input_tags[8].name='presubmitnn_' + dls;

var pdivnode = document.getElementById("pDiv");
//pdivnode.style.background='pink';

pdivnode.appendChild(newdivnode);

//alert ("We Are Here");
}
//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

//dom_add_img_update_button($doma['dom'], $divnode, "Update Image");
function doUpdateImg($node)
{
// update the displayed image, based on the data in the img url field
// assumes that the friend image is in the first image within the div node
// assumes that the field which holds the url of the image is the 2nd input in the div node.

var tnode = $node;
var input_tags = tnode.getElementsByTagName("input");
var new_img = input_tags[3].value;
//alert (new_img);

var img_tags = tnode.getElementsByTagName("img");
img_tags[0].src = new_img;

}

//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
function doPreSubmit($node, $from)
{
//Update the field, to indicate where the submit came from
//used for submit buttons which come with each individual friend div
//alert ("GoodBy World");

//determine how many div nodes form already has
//var formnode = document.getElementById("friendInputForm");
//var div_tags = formnode.getElementsByTagName("div");
//var div_length = div_tags.length;

var tnode = $node;
var input_tags = tnode.getElementsByTagName("input");

$test = input_tags[7].value + ";" + input_tags[8].value + ";"

//alert ($test);

input_tags[8].value=$from;

//alert ($from);

}
//iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii