var wholepage = null;

function show_supported()
{
	// show the current browser and os and supported ones
	var br = '';
	if (ta_fb._br_aro) br += '"Arora"';
	if (ta_fb._br_mid) br += (br ===''?'':' and ')+'"Midori"';
	if (ta_fb._br_rek)  br += (br ===''?'':' and ')+ '"Rekonq"';
	if (ta_fb._br_dpnt)  br += (br ===''?'':' and ')+ '"Deepnet"';
	if (ta_fb._br_slep)  br += (br ===''?'':' and ')+ '"Sleipnir"';
	if (ta_fb._br_km)  br += (br ===''?'':' and ')+ '"K-Meleon"';
	if (ta_fb._br_max2)  br += (br ===''?'':' and ')+ '"Maxthon 2"';
	if (ta_fb._br_max3)  br += (br ===''?'':' and ')+ '"Maxthon 3"';
	if (ta_fb._br_orca)  br += (br ===''?'':' and ')+ '"Orca"';
	if (ta_fb._br_flck)  br += (br ===''?'':' and ')+ '"Flock"';
	if (ta_fb._br_aol)  br += (br ===''?'':' and ')+ '"AOL"';
	if (ta_fb._br_konq)  br += (br ===''?'':' and ')+ '"Konqueror"';
	if (ta_fb._br_avnt)  br += (br ===''?'':' and ')+ '"Avant"';
	if (ta_fb._br_chrm)  br += (br ===''?'':' and ')+ '"Chrome"';
	if (ta_fb._br_saf)  br += (br ===''?'':' and ')+ '"Safari"';
	if (ta_fb._br_op)  br += (br ===''?'':' and ')+ '"Opera"';
	if (ta_fb._br_ff3)  br += (br ===''?'':' and ')+ '"Firefox 3"';
	if (ta_fb._br_ff4)  br += (br ===''?'':' and ')+ '"Firefox 4"';
	if (ta_fb._br_ff5)  br += (br ===''?'':' and ')+ '"Firefox 5"';
	if (ta_fb._br_ff7)  br += (br ===''?'':' and ')+ '"Firefox 7"';
	if (ta_fb._br_ff8)  br += (br ===''?'':' and ')+ '"Firefox 8"';
	if (ta_fb._br_ff9)  br += (br ===''?'':' and ')+ '"Firefox 9"';
	if (ta_fb._br_epiph)  br += (br ===''?'':' and ')+ '"Epiphany"';
	if (ta_fb._br_sm)  br += (br ===''?'':' and ')+ '"SeaMonkey"';
	if (ta_fb._br_ns8)  br += (br ===''?'':' and ')+ '"Netscape 8"';
	if (ta_fb._br_ns9)  br += (br ===''?'':' and ')+ '"Netscape 9"';
	if (ta_fb._br_ie6)  br += (br ===''?'':' and ')+ '"Internet Explorer 6"';
	if (ta_fb._br_ie7)  br += (br ===''?'':' and ')+ '"Internet Explorer 7"';
	if (ta_fb._br_ie8)  br += (br ===''?'':' and ')+ '"Internet Explorer 8"';
	if (ta_fb._br_ie9)  br += (br ===''?'':' and ')+ '"Internet Explorer 9"';
	if (ta_fb._br_Unknown) br += '"UNKNOWN"';
	
	// build the supported browsers
	var supbr = '<br />&nbsp;<br />These are the browsers that support ta_fb.class.js:'+
		  '<div style="margin-left:20px;font-size:12px;"><table border="1" cellpadding="2" cellspacing="0">'+
		  '<tr>'+
		  '<td>Mozilla Firefox (windows, mac, linux)</td>'+
		  '<td>Internet Explorer 8/9 (windows)</td>'+
		  '<td>Safari (windows, mac)</td>'+
		  '</tr><tr>'+
		  '<td>Opera (windows, linux)</td>'+
		  '<td>Google Chrome (windows)</td>'+
		  '<td>Netscape 9 (windows)</td>'+
		  '</tr><tr>'+
		  '<td>Sea Monkey (windows, linux)</td>'+
		  '<td>K-Meleon (windows, mac, linux)</td>'+
		  '<td>Orca (windows)</td>'+
		  '</tr><tr>'+
		  '<td>Flock (windows)</td>'+
		  '<td>Sleipnir (windows)</td>'+
		  '<td>Maxthon 3.x (windows)</td>'+
		  '</tr><tr>'+
		  '<td>Epiphany (linux)</td>'+
		  '<td>Aurora (linux)</td>'+
		  '<td>Midori (linux)</td>'+
		  '</tr><tr>'+
		  '<td>rekonq (linux)</td>'+
		  '<td colspan="2">&nbsp;</td>'+
		  '</tr>'+
		  '</table></div>';
	
	
	ta_fb.pop_info('You appear to be using '+br+' on a "'+ta_fb._os_is+'" based platform.'+supbr);
}

function init_the_page()
{
	// call the standard popup initialisation
	if (ta_fb.top_level_init('/shared/images/',	// path to where the images are
									'detail',			// name of div to add the popup divs to and use as base
									true,					// flag to indicate that we stop and fail if no ajax is possible
									pop_fnt_fam,		// font family index of font to use in information popups
															//		 1:'font-family:Times New Roman, serif;',
															//		 2:'font-family:Verdana, sans-serif;', <default>
															//		 3:'font-family:Comic Sans MS, sans-serif;',
															//		 4:'font-family:Trebuchet MS, sans-serif;',
															//		 5:'font-family:Georgia, serif;',
															//		 6:'font-family:Tahoma, sans-serif;',
															//		 7:'font-family:Helvetica, sans-serif;',
															//		 8:'font-family:Times, serif;',
															//		 9:'font-family:Arial, sans-serif;',
															//		10:'font-family:Arial Narrow, sans-serif;',
															//		11:'font-family:Courier New, monospace;'
									pop_fnt_siz,		// font size index of font to use in information popups
															//		 1:'font-size:10px;',
															//		 2:'font-size:12px;', <default>
															//		 3:'font-size:14px;',
															//		 4:'font-size:16px;',
															//		 5:'font-size:18px;',
															//		 6:'font-size:20px;',
															//		11:'font-size:10pt;',
															//		12:'font-size:12pt;',
															//		13:'font-size:14pt;',
															//		14:'font-size:16pt;',
															//		15:'font-size:18pt;',
															//		16:'font-size:20pt;'
									1,						// color combination index for information popup
															//		1:'green', <default>
															//		2:'blue',
															//		3:'brown',
															//		4:'pink',
															//		5:'purple',
															//		6:'black'
															//		7:'beige'
															//		8:'red'
									true,					// flag to indicate that a 'blankformhere' div should be created (default=false)
															//   the 'blankformhere' div is used for hidden forms that get dynamically created
									true,					// flag to indicate that we want to set the default button to
															//    be formatted the same as the info button (default=false)
									'admin_form',		// base form name for '<form ..' lines created by ta_fb functions that
															//    will add 1-7 to it (default='admin_form', eg. 'admin_form1' for 'ta_fb.start_form(1,"some title")
									'ta_inner_form',	// default inner form class for forms not created as numbered with ta_fb.start_form
															//   and shown through ta_fb.show_form, ta_fb.show_center_form, ta_fb.show_center_form_auto
															//   methods that use the 7 predefined forms
															//   (default='ta_inner_form', eg. 'ta_inner_form1' for 'ta_fb.start_form(1,"some title")
															//   the 'ta_inner_form1' thru 'ta_inner_form7' style classes are dynamically generated by ta_fb
									frm_fnt_fam,		// font family index of font to use in forms (same set as for popups, default is 2)
									frm_fnt_siz,		// font size index of font to use in forms (same set as for popups, default is 2)
									frm_brd_sty,		// border style for forms
															//		1:'border-style:solid;',
															//		2:'border-style:double;',
															//		3:'border-style:groove;',
															//		4:'border-style:ridge;',  <default>
															//		5:'border-style:dashed;',
															//		6:'border-style:dotted;',
									frm_brd_siz,		// border width for forms
															//		1:'border-width:1px;',
															//		2:'border-width:2px;',
															//		3:'border-width:3px;',
															//		4:'border-width:4px;',
															//		5:'border-width:5px;',
															//		6:'border-width:6px;',
															//		7:'border-width:7px;',
															//		8:'border-width:8px;'  <default>
									1,2,3,4,5,6,7,8	// color scheme for forms 1-7, the default color scheme is the same as the form number
															//   number (ie. form 1 is green, form 2 is blue, etc.)
															//   the colors are the same as the color schemes for info popup
															// It is assumed that if multiple numbered forms are opened, they are opened
															// starting at form 1 and going up.  When a higher numbered form is closed,
															// the form with the number with the next lower number that is open will
															// have the 'move' focus.
									)) {return true;}

	// the target div for ta_fb has style 'position:absolute' and a fixed location that is not at zero:zero,
	// so we don't want the offsets added when center positions are calculated
	ta_fb.ignore_top_offsets();
	ta_fb.ignore_scrolling(true);

	wholepage = ta_fb.get_object('wholepage');

	// create the color demos
	var r,c,nam,f,div,frm;
	f = 1;
	for (c=0;c<2;c++)
	{
		for (r=0;r<4;r++)
		{
			nam = 'c'+c+'_r'+r;
			div = ta_fb.get_object(nam);
			frm = '<div id="dummy_box'+f+'" name="dummy_box'+f+'" class="ta_base_form_'+ta_fb._form_color[f]+'">'+
					'<div class="form_header_'+ta_fb._form_color[f]+'" style="cursor:default;">&nbsp;&nbsp;Form when Color Scheme #'+f+', "'+ta_fb._form_color[f]+'"&nbsp;&nbsp;</div>'+_CR_+
					'<div style="padding:6px 6px 6px 6px;";>This is some text to show the colors</div>'+
					ta_fb.start_button_row(f,'Pop Me Up','do_pop_demo('+f+')')+
					ta_fb.finish_button_row(f,'do_info_pop('+f+')','Info Pop This Color')+
					'</div>';
			div.innerHTML = frm;
			f++;
		}
	}

	// build the form to change parameters
	frm = '<form id="do_me" name="do_me" method="post" action="'+doc_base+'" enctype="multipart/form-data">'+_CR_+
			'&nbsp;Form Setup:&nbsp;&nbsp;&nbsp;'+_CR_+
			'&nbsp;Font Family: <select id="frm_fnt_fam" name="frm_fnt_fam" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._fonts) frm += '<option value="'+c+'"'+(c==frm_fnt_fam?' selected':'')+'>'+ta_fb._fonts[c].split(':')[1].replace(';','')+'</option>'+_CR_;
	frm += '</select>&nbsp;'+_CR_+
			 'Size: <select id="frm_fnt_siz" name="frm_fnt_siz" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._sizes) frm += '<option value="'+c+'"'+(c==frm_fnt_siz?' selected':'')+'>'+ta_fb._sizes[c].split(':')[1].replace(';','')+'</option>'+_CR_;
	frm += '</select>&nbsp;&nbsp;&nbsp;'+_CR_+
			 '&nbsp;Border Style: <select id="frm_brd_sty" name="frm_brd_sty" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._form_brd_style) frm += '<option value="'+c+'"'+(c==frm_brd_sty?' selected':'')+'>'+ta_fb._form_brd_style[c].split(':')[1].replace(';','')+(c>6?' (css3)':'')+'</option>'+_CR_;
	frm += '</select>&nbsp;'+_CR_+
			 'Border size: <select id="frm_brd_siz" name="frm_brd_siz" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._form_brd_size) frm += '<option value="'+c+'"'+(c==frm_brd_siz?' selected':'')+'>'+ta_fb._form_brd_size[c].split(':')[1].replace(';','')+'</option>'+_CR_;
	frm += '</select><br />&nbsp;<br />'+_CR_+
			'&nbsp;Information Popup Setup:&nbsp;&nbsp;&nbsp;'+_CR_+
			'&nbsp;Font Family: <select id="pop_fnt_fam" name="pop_fnt_fam" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._fonts) frm += '<option value="'+c+'"'+(c==pop_fnt_fam?' selected':'')+'>'+ta_fb._fonts[c].split(':')[1].replace(';','')+'</option>'+_CR_;
	frm += '</select>&nbsp;'+_CR_+
			 'Size: <select id="pop_fnt_siz" name="pop_fnt_siz" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._sizes) frm += '<option value="'+c+'"'+(c==pop_fnt_siz?' selected':'')+'>'+ta_fb._sizes[c].split(':')[1].replace(';','')+'</option>'+_CR_;
	frm += '</select>&nbsp;&nbsp;&nbsp;'+_CR_+
			 'Color: <select id="pop_color" name="pop_color" style="font-size:10px;">'+_CR_;
	for (c in ta_fb._butt_names) frm += '<option value="'+c+'"'+(c==pop_color?' selected':'')+'>'+ta_fb._butt_names[c]+'</option>'+_CR_;
	frm += '</select>&nbsp;&nbsp;&nbsp;'+_CR_+
			 '<button>Apply the Settings</button>'+_CR_+
			 '</form>'+_CR_;

	// add a popup button
	frm += '<img style="cursor:pointer;position:absolute;top:4px;left:800px;" height="50" width="50" onclick="pop_information();" src="/shared/images/ta_bq_'+pop_color+'.png" />'+_CR_;
	div = ta_fb.get_object('the_form');
	div.innerHTML = frm;

	// show supported browsers
	if (!not_first) {show_supported();}
}

function do_pop_demo(f)
{
	var dat = 'You can move me about by clicking&nbsp;on the header, holding the button down,&nbsp;and moving.&nbsp;&nbsp;Drop by letting&nbsp;up on the mouse button.<br />&nbsp;<br />Including form header and excluding outer borders:<br />&nbsp;&nbsp;&nbsp;width=_WID2_<br />&nbsp;&nbsp;&nbsp;height=_HIH2_';
	var myfrm = ta_fb.start_form(f,'Form when Color Scheme #'+f+', "'+ta_fb._form_color[f]+'"','','width:400px;')+
					dat+
					'<div style="padding:6px 6px 6px 6px;";>the page scroll_left='+ta_fb.scroll_left()+'<br />'+
					'the page scroll_left='+ta_fb.scroll_top()+'</div>'+
					(f<8?ta_fb.start_button_row(f,'Show Next Level','do_pop_demo('+(f+1)+')')+ta_fb.finish_button_row(f,'','Close Me')
						 :ta_fb.start_button_row(f,'Close Everyone','close_all_pops()')+ta_fb.finish_button_row(f,'','Close Me'))+
					ta_fb.finish_form();

	var wh2 = ta_fb._forms[f].get_display_size(myfrm);
	myfrm = myfrm.replace('_WID2_',wh2[0]+'px');
	myfrm = myfrm.replace('_HIH2_',wh2[1]+'px');
	ta_fb.show_center_form_auto(f,myfrm);
}

function close_all_pops()
{
	for (var f=1;f<=8;f++) ta_fb.close_form(f);
}

function do_info_pop(f)
{
	var myfrm = ta_fb.start_form(f,'Show ta_fb.pop_info() for Color Scheme #'+f+', "'+ta_fb._form_color[f]+'"')+
					'<div style="position:relative;width:730px;height:175px;padding:10px 0px 0px 0px;">'+
					'<div style="position:absolute;top:10px;left:10px;width:342px;height:165px;;border:'+ta_fb._form_color[f]+' inset 4px;background-color:#FFFFFF;"><center>image when "border-radius"<br /><b><i>NOT</i></b> supported by browser<br />&nbsp;<br /><img src="'+img_base+'ie_pop_'+f+'.jpg" width="318" height="96" border="0" align="middle" /><center></div>'+
					'<div style="position:absolute;top:10px;left:365px;width:342px;height:165px;border:'+ta_fb._form_color[f]+' inset 4px;background-color:#FFFFFF;"><center>image when "border-radius"<br />supported by browser<br />&nbsp;<br /><img src="'+img_base+'ff_pop_'+f+'.jpg" width="318" height="96" border="0" align="middle" /><center></div>'+
					'</div>'+
					'<div style="position:relative;width:730px;height:160px;padding:0px 0px 0px 0px;margin:10px 0px 10px 0px;";><center><iframe src="'+pop_demo+'?pop_fnt_col='+f+'&pop_color='+escape(ta_fb._info_butt[f])+'&pop_fnt_fam='+pop_fnt_fam+'&pop_fnt_siz='+pop_fnt_siz+'" frameborder="0" style="width:600px;height:160px;border:'+ta_fb._form_color[f]+' inset 4px;"></iframe></center></div>'+
					ta_fb.single_button_row(f,'ta_fb.close_form('+f+')','Close This Outer Box')+
					ta_fb.finish_form();

	ta_fb.show_center_form_auto(f,myfrm);
}

function pop_information()
{
	var myfrm = ta_fb.start_form(pop_color,'Information About the ta_fb javascript class','','width:850px;font-size:12px;')+
					'<div style="position:relative;height:520px;width:100%;font-size:12px;overflow:auto;">'+_CR_+
					'All popups on this page are dynamically generated in javascript using the ta_fb class.<br />&nbsp;<br />'+_CR_+
					'The popup you see when you click on one of the "Info Pop This Color" uses an iframe to display a short page that uses the color scheme of the button for the color scheme of the information popup it shows.  Only one color scheme selection is allowed in a web page for the information popup.<br />&nbsp;<br />'+_CR_+
					'This popup is generated using ta_fb functions for the header, close button and display.<br />&nbsp;<br />'+_CR_+
					'The "ta_fb.start_form" function takes the form number (for this - "Color" selected for info pop), text for the header ("Information About ...") and any optional styles to apply to the stuff displayed under the header (for this - "width:850px;font-size:12px;").<br />&nbsp;<br />'+_CR_+
					'The "ta_fb.start_form" function does the following:<br />'+_CR_+
					'1. create the header with the correct id to be recognized for moving it (which the ta_fb class handles)<br />'+_CR_+
					'2. start the form using either the default "admin_form" or the default base form set when "ta_fb.top_level_init" was called plus the form number, or the form name passed as the third calling paramater<br />'+_CR_+
					'3. start a &lt;div&gt; with the default style of "padding:0px 8px 0px 8px;" plus any option style elements passed in<br />&nbsp;<br />'+_CR_+
					'It assumes that if the form actually needs to be submitted, it is handled by a function associated with a button. The form statement will look something like:<br />'+
					'&nbsp;&nbsp;&lt;form id="admin_form1" name="admin_form1" method="post" onsubmit="return false;" enctype="multipart/form-data"&gt;<br />&nbsp;<br />'+_CR_+
					'&nbsp;&nbsp;Enter Some Text <input type="text" name="txt_inp" id="txt_inp" size="50" maxlength="50" onkeypress="return ta_fb.handle_one_line(this,50,event);" />'+_CR_+
					'&nbsp;&nbsp;Enter A Number <input type="text" name="num_inp" id="num_inp" size="10" maxlength="10" onkeypress="return ta_fb.handle_maxc_num(this,0,10,null,event);" /> (from 20 to 30)<br />&nbsp;<br />'+_CR_+
					'The two inputs above use "onkeypress" functions in ta_fb that limit the content and size of the inputs.<br />&nbsp;<br />'+_CR_+
					'The two buttons below were created using other ta_fb functions.  One starts a row for buttons with &lt;center&gt; and creates the first button.  The other finishes a button row with the last button input and adds &lt;/center&gt;.  There are other functions for adding buttons in between or for creating a button row with only one button.  All the functions take the button text and function call as parameters.  The close button row has defaults of "Close" and "ta_fb.close_form(&lt;form number&gt;);".<br />&nbsp;<br />'+_CR_+
					'There are functions for various types of input handling, validating fields (a good e-mail address validator is included), checking for blank or non-selected, cleaning fields in place to remove leading/trailing/duplicate blanks, removing leading "http://" and "https://", checking for an number in range, and a bunch of others.<br />&nbsp;<br />'+_CR_+
					'There are functions to extract the selected value in a list, return the selected radio button value and the set of checkbox items checked from a group and one for ticking a specified radio button value and clearing the others in a set.<br />&nbsp;<br />'+_CR_+
					'There are a bunch of functions for doing ajax processing.<br />&nbsp;<br />'+_CR_+
					'Everything will pop up warnings if something is bad or goes wrong (try not entering something in the input fields above and submitting the form).<br />&nbsp;<br />'+_CR_+
					'There is much more in the class, but only so much reading you want to do right now.<br />&nbsp;<br />'+_CR_+
					'</div>'+_CR_+
					ta_fb.start_button_row(pop_color,'"Submit" Me','show_submit()')+
					ta_fb.add_form_button(pop_color,'Show Supported Browsers','show_supported()')+
					ta_fb.finish_button_row(pop_color,'','Close Me!')+
					ta_fb.finish_form();

	ta_fb.show_center_form_auto(pop_color,myfrm);
}

function show_submit()
{
	// get the form
	var frm = document.forms['admin_form'+pop_color];

	// clean some strings (general trim)
	ta_fb.clean_form_field(frm.txt_inp);

	// check for blanks
	if (ta_fb.no_blank_allowed(frm.txt_inp,'Text')) return;
	if (ta_fb.no_blank_allowed(frm.num_inp,'Number')) return;

	// check the range of the number
	if (ta_fb.validate_integer_range(frm.num_inp,'Number',20,30)) return;

	// grab values
	var txt_inp = frm.txt_inp.value;
	var num_inp = frm.num_inp.value;

	// ok, close the box
	ta_fb.close_form(1);

	// display what they did
	ta_fb.pop_info('You entered "'+txt_inp+'" for the text<br />and "'+num_inp+'" for the number');
}