// write the transparency boxes (should be run on load)
// This requires dojo - include dojo.js
// if "word-wrap: break-word;" is not on, longer text can break this box in older versions of IE
function writeTBox(className, box, border, bgColor, minLengthPx, topW, bottomW, leftW, rightW, bleftPos, brightPos)
{	lBorderLeft = bleftPos;
	rBorderLeft = brightPos-bleftPos;
	
	if( $.browser.msie )
	{	minLengthPx = Math.floor(minLengthPx/1.8);
		bottomMargin = -1;
		bottomPadding = 1;
		bbMarginTop = 1;
		idMarginBottom = -1;
	}else
	{	bottomMargin = 0;
		bottomPadding = 0;
		bbMarginTop = 0;
		idMarginBottom = 0;
	}
	
	if( $.browser.msie && jQuery.browser.version < 7 )
	{	setHeight="height:1px;";			// fixes rendering issues apparently
	}else
	{	setHeight="";
	}
	
	// set up style info
	bt = 	'background:url('+box+') no-repeat 100% 0;	\
			margin:0 0 0 '+minLengthPx+'px;				\
			height:'+topW+'px;';
	btdiv = 'height:'+topW+'px;							\
			position:relative;							\
			width:'+minLengthPx+'px;					\
			left:-'+minLengthPx+'px;					\
			background:url('+box+') no-repeat 0 0;';
	bb = 	'background:url('+box+') no-repeat 100% 100%;\
			margin:'+bbMarginTop+' 0 0 '+minLengthPx+'px;\
			height:'+bottomW+'px;';
	bbdiv = 'height:'+bottomW+'px;						\
			position:relative;							\
			width:'+minLengthPx+'px;					\
			left:-'+minLengthPx+'px;					\
			background:url('+box+') no-repeat 0 100%;';
	i1 = 	'padding:0 0 0 '+leftW+'px;					\
			background:url('+border+') repeat-y 0 0;	\
			position:relative;							\
			left:'+lBorderLeft+'px;';
	i2 = 	'padding:0 '+rightW+'px '+bottomPadding+'px 0;\
			margin-bottom: '+bottomMargin+'px;			\
			background:url('+border+') repeat-y 100% 0;	\
			position:relative;							\
			left:'+rBorderLeft+'px;';
	i3 = 	'background:'+bgColor+';					\
			border:1px solid '+bgColor+';				\
			border-width:1px 0;							\
			margin: 0 0 '+idMarginBottom+'px 0;			\
			padding:0 10px;'
			+setHeight;
		
	// write the styles for the box (if not IE 6 or below)		
	if( $.browser.msie  )
	{}
	else
	{	$("head").append
		(	'<style type="text/css" >						\
			/* Rules for the top corners and border */		\
			.'+className+'bt 								\
			{	'+bt+'										\
			}												\
			.'+className+'bt div 							\
			{	'+btdiv+'									\
			}												\
															\
			/* Rules for the bottom corners and border */	\
			.'+className+'bb 								\
			{	'+bb+'										\
			}												\
			.'+className+'bb div 							\
			{	'+bbdiv+'									\
			}												\
															\
			/* Insert the left border */					\
			.'+className+'i1 								\
			{	'+i1+'										\
			}												\
			/* Insert the right border */					\
			.'+className+'i2 {								\
				'+i2+'										\
				}											\
			/* Wrapper for the content. Use it to set the background colour 	\
			and insert some padding between the borders and the content. */		\
			.'+className+'i3 {													\
				'+i3+
				'}																\
			/* CSS for the box ends here */										\
			</style>															\
			'
		);
	}
	
	// mod the nodes that have the box class
	if(className.length>0)	// make sure this contains a string
	{	$("."+className +" script").remove();	// remove any inner scripts so they don't run again
		
		if( $.browser.msie )
		{	htmlChangedA = 
				'<div class="png_bg" style="'+bt+'"> <div class="png_bg" style="'+btdiv+'"></div> </div>				\
					<div class="png_bg" style="'+i1+'"><div class="png_bg" style="'+i2+'"><div class="png_bg" style="'+i3+'">'
			htmlChangedB =
					'</div></div></div>												\
				<div class="png_bg" style="'+bb+'"> <div class="png_bg" style="'+bbdiv+'"></div> </div>	';
		}else
		{	htmlChangedA =
				'<div class="'+className+'bt"> <div></div> </div>				\
					<div class="'+className+'i1"><div class="'+className+'i2"><div class="'+className+'i3">'
			htmlChangedB =
					'</div></div></div>												\
				<div class="'+className+'bb"> <div></div> </div>	' 
		}
		
		$("."+className).each(function(i)
		{	$(this).html(htmlChangedA + $(this).html() + htmlChangedB);
		});
	}
}