var dl_aRadiusValues =
[
	[ "rad",   "All Border Corner Radii",           "border-radius",              "borderRadius",            "-moz-border-radius",             "MozBorderRadius",            "multiple", "" ],
	[ "radtl", "Top-Left Border Corner Radius",     "border-top-left-radius",     "borderTopLeftRadius",     "-moz-border-radius-topleft",     "MozBorderRadiusTopleft",     "single",   "top-left corner only" ],
	[ "radtr", "Top-Right Border Corner Radius",    "border-top-right-radius",    "borderTopRightRadius",    "-moz-border-radius-topright",    "MozBorderRadiusTopright",    "single",   "top-right corner only" ],
	[ "radbr", "Bottom-Right Border Corner Radius", "border-bottom-right-radius", "borderBottomRightRadius", "-moz-border-radius-bottomright", "MozBorderRadiusBottomright", "single",   "bottom-right corner only" ],
	[ "radbl", "Bottom-Left Border Corner Radius",  "border-bottom-left-radius",  "borderBottomLeftRadius",  "-moz-border-radius-bottomleft",  "MozBorderRadiusBottomleft",  "single",   "bottom-left corner only" ]
];
		
window.onload = function()
{
	var eSelect = document.getElementById( "dl_sel-radius" );
	var aRadiusValues = dl_aRadiusValues;
	var nRadiusValues = aRadiusValues.length;
	var aRadius, sKeyword, oOption;
	for( var i=0; i<nRadiusValues; i++ )
	{
		aRadius= aRadiusValues[ i ];
		sKeyword = aRadius[ 0 ];
		aRadiusValues[ sKeyword ] = aRadius;
		oOption = new Option( aRadius[ 1 ], sKeyword );
		oOption.sKeyWord = sKeyword;
		oOption.sCSSSyntax = aRadius[ 2 ];

		oOption.sCSSJSSyntax = aRadius[ 3 ];
		oOption.sMozSyntax = aRadius[ 4 ];
		oOption.sMozJSSyntax = aRadius[ 5 ];
		oOption.sInstType = aRadius[ 6 ];
		oOption.sAffects = aRadius[ 7 ];
		eSelect.options[ i ] = oOption;
	}
	eSelect.onchange = dl_doCorners;
	document.getElementById( "dl_button-apply" ).onclick =
	document.getElementById( "dl_button-apply1" ).onclick =
	document.getElementById( "dl_button-apply2" ).onclick = dl_applyRadius;
	document.getElementById( "dl_button-reset" ).onclick =
	document.getElementById( "dl_button-reset1" ).onclick =
	document.getElementById( "dl_button-reset2" ).onclick = dl_clearRadius;
	 eSelect.selectedIndex = 0;
	eSelect.onchange();
}

function dl_applyRadius()
{
	var eTarget = document.getElementById( this.getAttribute('div') );
	var sCSS = dl_getCSSSyntax();
	var sCSSJS = dl_getCSSJSSyntax();
	var sMoz = dl_getMozSyntax();
	var sMozJS = dl_getMozJSSyntax();
	var sValues = dl_getUserValue();

	dl_showCSSSyntax( sCSS, sValues );
	dl_showCSSJSSyntax( sCSSJS, sValues );
	dl_showMozSyntax( sMoz, sValues );
	dl_showMozJSSyntax( sMozJS, sValues );
	eTarget.style[ sCSSJS ] = sValues;
	eTarget.style[ sMozJS ] = sValues;
}

function dl_clearRadius()
{
	var eTarget = document.getElementById( this.getAttribute('div') );
	eTarget.style.borderTopLeftRadius = "0px";
	eTarget.style.borderTopRightRadius = "0px";
	eTarget.style.borderBottomLeftRadius = "0px";
	eTarget.style.borderBottomRightRadius = "0px";
	eTarget.style.MozBorderRadiusTopleft = "0px";
	eTarget.style.MozBorderRadiusTopright = "0px";
	eTarget.style.MozBorderRadiusBottomleft = "0px";
	eTarget.style.MozBorderRadiusBottomright = "0px";


}
function dl_doCorners()
{
	var nSelectedIndex = this.selectedIndex;
	if( nSelectedIndex == -1 ){ return };
	var oOption = this.options[ nSelectedIndex ];
	var aValues = oOption[ oOption.value ];

	dl_setCSSSyntax( oOption.sCSSSyntax );
	dl_setCSSJSSyntax( oOption.sCSSJSSyntax );
	dl_setMozSyntax(  oOption.sMozSyntax );
	dl_setMozJSSyntax(   oOption.sMozJSSyntax  );

	dl_setAffects( oOption.sAffects );


	dl_showInstructions( oOption.sInstType );
}

function dl_setAffects( sAffects )
{
	var eAffect0  = document.getElementById( "td-affect0" );	
	var eAffect1 = document.getElementById( "td-affect1" );
	eAffect0.innerHTML = sAffects;
	eAffect1.innerHTML = sAffects;

}

function dl_showInstructions( sInstType )
{
	var eSpanSingle   = document.getElementById( "dl_table-single" );	
	var eSpanMultiple = document.getElementById( "dl_table-multiple" );

	if ( sInstType == "multiple" )
	{
		eSpanSingle.style.display = "none";
		eSpanMultiple.style.display = "block";
	}
	else
	{
		eSpanSingle.style.display = "block";
		eSpanMultiple.style.display = "none";
	}
}

function dl_setCSSSyntax( sSyntax )
{
	dl_setInput( "dl_inp-CSS", sSyntax );
}

function dl_setCSSJSSyntax( sSyntax )
{
	dl_setInput( "dl_inp-CSSJS", sSyntax );
}

function dl_setMozSyntax( sSyntax )
{
	dl_setInput( "dl_inp-Moz", sSyntax );
}

function dl_setMozJSSyntax( sSyntax )
{
	dl_setInput( "dl_inp-MozJS", sSyntax );
}

function dl_setInput( sInputId, sText )
{
	var eInput = document.getElementById( sInputId );
	eInput.value = sText.replace(/^[\s\t]*|[\s\t]*$/g,"");
}
function dl_setTD( sTDId, sText )
{
	var eTD = document.getElementById( sTDId );
	eTD.innerHTML = sText;
}

function dl_getCSSSyntax()
{
	return dl_getInput( "dl_inp-CSS" );
}
function dl_getCSSJSSyntax()
{
	return dl_getInput( "dl_inp-CSSJS" );
}


function dl_getMozSyntax()
{
	return dl_getInput( "dl_inp-Moz" );
}

function dl_getMozJSSyntax()
{
	return dl_getInput( "dl_inp-MozJS" );
}

function dl_getInput( sInputId )
{
	var eInput = document.getElementById( sInputId );
	return eInput.value;
}


function dl_getUserValue()
{
	var eInput = document.getElementById( "dl_inp-User" );
	return eInput.value;
}
function dl_showCSSSyntax( sCSS, sValues )
{	
	var sSyntax = sCSS + " : " + sValues + ";";
	dl_setTD( 'dl_inp-CSSS', sSyntax );
}

function dl_showCSSJSSyntax( sCSSJS, sValues )
{	
	var sSyntax = '<i>element</i>.style.'+sCSSJS + ' = "' + sValues + '";';
	dl_setTD( 'dl_inp-CSSJSS', sSyntax );
}

function dl_showMozSyntax( sMoz, sValues )
{	
	var sSyntax = sMoz + " : " + sValues + ";";
	dl_setTD( 'dl_inp-MozS', sSyntax );
}

function dl_showMozJSSyntax( sJS, sValues )
{
	var sSyntax = '<i>element</i>.style.'+sJS + ' = "' + sValues + '";';
	dl_setTD( 'dl_inp-MozJSS', sSyntax );
}