0byt3m1n1

Path: /data/17/1/18/11/1670011/user/1801231/htdocs/marketting/js/scripts/moz/ [ Home ]
File: table_edit.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=window.opener.oUtil.langDir;
  document.write("<scr"+"ipt src='../language/"+sLangDir+"/table_edit.js'></scr"+"ipt>");
</script>
<script language="JavaScript" src="color_picker.js"></script>
<script>writeTitle()</script>
<script language="JavaScript" src="table.js"></script>
<script>
var dialogArgument=['window.opener', 'window.opener'];

var activeModalWin;

document.onclick=hideAll;

function hideAll()
    {
    oColor1.hide();
    }
    
function modelessDialogShow(url,width,height)
    {
    var left = screen.availWidth/2 - width/2;
    var top = screen.availHeight/2 - height/2;
    window.open(url, "", "dependent=yes,width="+width+"px,height="+height+",left="+left+",top="+top);
    }
    
function modalDialogShow(url,width,height)
    {
    var left = screen.availWidth/2 - width/2;
    var top = screen.availHeight/2 - height/2;
    activeModalWin = window.open(url, "", "width="+width+"px,height="+height+",left="+left+",top="+top);
    window.onfocus = function(){if (activeModalWin.closed == false){activeModalWin.focus();};};
        
    }
    
function tabClick(n)
    {
    var tab1 = document.getElementById("tab1");
    var tab2 = document.getElementById("tab2");
    var tab3 = document.getElementById("tab3");
    var divAutoFit = document.getElementById("divAutoFit");
    var divProperties = document.getElementById("divProperties");
    var divStyle = document.getElementById("divStyle");
    
    tab1.removeAttribute("style");
    tab2.removeAttribute("style");
    tab3.removeAttribute("style");
    
    tab1.style.cursor  = "pointer";
    tab1.style.padding = "6px";
    tab2.style.cursor  = "pointer";
    tab2.style.padding = "6px";
    tab3.style.cursor  = "pointer";
    tab3.style.padding = "6px";
    
    switch(n)
        {
        case 1:    
            tab1.style.border="#D6D6E2 2px solid";
            tab1.style.borderBottom="none"; 
            tab1.style.background="#F2F1F8";
            tab1.style.cursor="";   
            
            tab2.style.border="#D6D6E2 2px solid";
            tab2.style.borderLeft="none";
            tab2.style.background="#E9E8F2";
            tab2.style.cursor="pointer";                       
            
            tab3.style.border="#D6D6E2 2px solid";
            tab3.style.borderLeft="none";
            tab3.style.background="#E9E8F2";
            tab3.style.cursor="pointer";
            
            divAutoFit.style.display="block"
            divProperties.style.display="none"
            divStyle.style.display="none"       
                    
            break;
        case 2:       
            tab1.style.border="#D6D6E2 2px solid";
            tab1.style.borderRight="none";
            tab1.style.background="#E9E8F2";
            tab1.style.cursor="pointer";
            
            tab2.style.border="#D6D6E2 2px solid";
            tab2.style.borderBottom="none";
            tab2.style.background="#F2F1F8";
            tab2.style.cursor="";       
            
            tab3.style.border="#D6D6E2 2px solid";
            tab3.style.borderLeft="none";
            tab3.style.background="#E9E8F2";
            tab3.style.cursor="pointer";   

            divAutoFit.style.display="none"
            divProperties.style.display="block" 
            divStyle.style.display="none"
                                    
            break;          
        case 3:         
            tab1.style.border="#D6D6E2 2px solid";
            tab1.style.borderRight="none";
            tab1.style.background="#E9E8F2";
            tab1.style.cursor="pointer";
            
            tab2.style.border="#D6D6E2 2px solid";
            tab2.style.borderRight="none";
            tab2.style.background="#E9E8F2";
            tab2.style.cursor="pointer";       
            
            tab3.style.border="#D6D6E2 2px solid";
            tab3.style.borderBottom="none";
            tab3.style.background="#F2F1F8";
            tab3.style.cursor="";

            divAutoFit.style.display="none"
            divProperties.style.display="none"  
            divStyle.style.display="block"
                                    
            break;          
        }
    }
    

/************************
    COMMON
************************/
function GetElement(oElement,sMatchTag)
    {
    while (oElement!=null&&oElement.tagName!=sMatchTag)
        {
        if(oElement.tagName=="BODY")return null;
        oElement=oElement.parentNode;
        }
    return oElement;
    }

function GetElementById(id) {
    return document.getElementById(id);
}

/************************
    REAL TIME
************************/
function doWindowFocus()
    {   
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    }
function bodyOnLoad()
    {
    //tabClick(1);
    window.onfocus=doWindowFocus;
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    
    realTime();
    }

function realTime()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var oTable = window.opener.getSelectedElement(oSel);
    oTable = GetElement(oTable,"TABLE")
    //var oTable = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"));
    if (oTable == null) return;
    
    var inpAlign = GetElementById("inpAlign");
    var inpMarginLeft = GetElementById("inpMarginLeft");
    var inpMarginRight = GetElementById("inpMarginRight");
    var inpMarginTop = GetElementById("inpMarginTop");
    var inpMarginBottom = GetElementById("inpMarginBottom");
    var divPreviewTable = GetElementById("divPreviewTable");
    var inpBackgroundColor = GetElementById("inpBackgroundColor");
    var inpCollapse = GetElementById("inpCollapse");
    var inpCellSpacing = GetElementById("inpCellSpacing");
    var inpCellPadding = GetElementById("inpCellPadding");
    var inpCSSText = GetElementById("inpCSSText");
    var inpWidth = GetElementById("inpWidth");
    var inpHeight = GetElementById("inpHeight");
    var inpAutoFit1 = document.getElementsByName("inpAutoFit1");
    var inpAutoFit2 = document.getElementsByName("inpAutoFit2");
    var inpAutoFitMeasure1 = GetElementById("inpAutoFitMeasure1");
    var inpAutoFitMeasure2 = GetElementById("inpAutoFitMeasure2");
    var inpSummary = document.getElementById("inpSummary");  
    var inpCaption = document.getElementById("inpCaption");     
    
    //Align
    inpAlign.value = oTable.align;
    
    if(oTable.caption) inpCaption.value=oTable.caption.textContent;
    inpSummary.value=oTable.getAttribute("summary");
    
    //Margin
    //Berkaitan dgn "Not Available"
    if(oTable.style.marginLeft!="")
        {
        if(oTable.style.marginLeft.substr(oTable.style.marginLeft.length-2,2)!="px") inpMarginLeft.value = "na";
        else inpMarginLeft.value = oTable.style.marginLeft.substring(0,oTable.style.marginLeft.length-2);
        }
    else inpMarginLeft.value="";
    
    if(oTable.style.marginRight!="")
        {   
        if(oTable.style.marginRight.substr(oTable.style.marginRight.length-2,2)!="px") inpMarginRight.value = "na";
        else inpMarginRight.value = oTable.style.marginRight.substring(0,oTable.style.marginRight.length-2);
        }
    else inpMarginRight.value ="";
        
    if(oTable.style.marginTop!="")
        {       
        if(oTable.style.marginTop.substr(oTable.style.marginTop.length-2,2)!="px") inpMarginTop.value = "na";
        else inpMarginTop.value = oTable.style.marginTop.substring(0,oTable.style.marginTop.length-2);
        }
    else inpMarginTop.value ="";

    if(oTable.style.marginBottom!="")
        {       
        if(oTable.style.marginBottom.substr(oTable.style.marginBottom.length-2,2)!="px") inpMarginBottom.value = "na";
        else inpMarginBottom.value = oTable.style.marginBottom.substring(0,oTable.style.marginBottom.length-2);
        }
    else inpMarginBottom.value ="";
    
    
    //background (harus lebih dulu dari background color)
    if(oTable.style.backgroundImage=="")
        {
        if(oTable.style.background)
            {
            divPreviewTable.style.background="url('"+oTable.background+"')";
            }
        else
            {
            divPreviewTable.style.background="";
            }
        }
    else 
        {
        divPreviewTable.style.background=oTable.style.backgroundImage + " " + oTable.style.backgroundColor + " " + oTable.style.backgroundRepeat + " " + oTable.style.backgroundPosition;
        //ini sekaligus meng-apply color, dll
        }   
        
    //backgroundColor
    if(oTable.style.backgroundColor=="")
        {
        if(oTable.bgColor)
            {
            inpBackgroundColor.style.backgroundColor=oTable.bgColor;
            }
        else
            {
            inpBackgroundColor.style.backgroundColor="";
            }
        }
    else 
        {
        inpBackgroundColor.style.backgroundColor=oTable.style.backgroundColor;
        }
        
    if(oTable.style.borderCollapse=="collapse")
        {
        inpCollapse.value="Yes"
        }
    else
        {
        inpCollapse.value="No"
        }
    if(oTable.cellSpacing!="")
        {
        inpCellSpacing.value=oTable.cellSpacing;
        }
    else
        {
        inpCellSpacing.value=""
        }
    if(oTable.cellPadding!="")
        {
        inpCellPadding.value=oTable.cellPadding;
        }
    else
        {
        inpCellPadding.value=""
        }
    
    //CSS Text
    inpCSSText.value = oTable.style.cssText
    
    //Table Width
    inpWidth.value=="";//reset
    if(oTable.style.width == "")
        {
        var tabWidth = oTable.width;
        tabWidth = tabWidth == null ? "" : tabWidth
        if(tabWidth.substr(tabWidth.length-1,1)=="%")
            {
            if(tabWidth.substr(0,tabWidth.length-1)=="100")
                {
                inpAutoFit1[2].checked=true;
                }
            else
                {   
                inpAutoFit1[1].checked=true;
                inpAutoFitMeasure1.value = "%";
                inpWidth.value = tabWidth.substr(0,oTable.width.length-1)
                }
            }
        else if(tabWidth!="")
            {
            inpAutoFit1[1].checked=true;            
            inpAutoFitMeasure1.value = "px";
            inpWidth.value = tabWidth;
            }
        else
            {
            inpAutoFit1[0].checked=true;
            }
        }
    else
        {
        if(oTable.style.width.substr(oTable.style.width.length-2,2)=="px")
            {
            inpAutoFit1[1].checked=true;            
            inpAutoFitMeasure1.value = "px";
            inpWidth.value = oTable.style.width.substr(0,oTable.style.width.length-2);          
            }       
        if(oTable.style.width.substr(oTable.style.width.length-1,1)=="%")
            {
            if(oTable.style.width.substr(0,oTable.style.width.length-1)=="100")
                {
                inpAutoFit1[2].checked=true;
                }
            else
                {   
                inpAutoFit1[1].checked=true;
                inpAutoFitMeasure1.value = "%";
                inpWidth.value = oTable.style.width.substr(0,oTable.style.width.length-1)
                }
            }
        }
    
    //Table Height
    inpHeight.value=="";//reset
    if(oTable.style.height == "")
        {
        var tabHeight = oTable.getAttribute("height");
        tabHeight = tabHeight == null ? "": tabHeight
        if(tabHeight.substr(tabHeight.length-1,1)=="%")
            {
            if(tabHeight.substr(0, tabHeight.length-1)=="100")
                {
                inpAutoFit2[2].checked=true;
                }
            else
                {   
                inpAutoFit2[1].checked=true;
                inpAutoFitMeasure2.value = "%";
                inpHeight.value = tabHeight.substr(0, tabHeight.length-1)
                }
            }
        else if(tabHeight!="")
            {
            inpAutoFit2[1].checked=true;            
            inpAutoFitMeasure2.value = "px";
            inpHeight.value = tabHeight;
            }
        else
            {
            inpAutoFit2[0].checked=true;
            }
        }
    else
        {
        if(oTable.style.height.substr(oTable.style.height.length-2,2)=="px")
            {
            inpAutoFit2[1].checked=true;            
            inpAutoFitMeasure2.value = "px";
            inpHeight.value = oTable.style.height.substr(0,oTable.style.height.length-2);
            
            }       
        if(oTable.style.height.substr(oTable.style.height.length-1,1)=="%")
            {
            if(oTable.style.height.substr(0,oTable.style.height.length-1)=="100")
                {
                inpAutoFit2[2].checked=true;
                }
            else
                {   
                inpAutoFit2[1].checked=true;
                inpAutoFitMeasure2.value = "%";
                inpHeight.value = oTable.style.height.substr(0,oTable.style.height.length-1)
                }
            }
        }
    }
    

/************************
    APPLY
************************/
function doApply()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var oTable = window.opener.getSelectedElement(oSel);
    oTable = GetElement(oTable,"TABLE")
    if (oTable == null) return;
    
    var inpAlign = GetElementById("inpAlign");
    var inpMarginLeft = GetElementById("inpMarginLeft");
    var inpMarginRight = GetElementById("inpMarginRight");
    var inpMarginTop = GetElementById("inpMarginTop");
    var inpMarginBottom = GetElementById("inpMarginBottom");
    var divPreviewTable = GetElementById("divPreviewTable");
    var inpBackgroundColor = GetElementById("inpBackgroundColor");
    var inpCollapse = GetElementById("inpCollapse");
    var inpCellSpacing = GetElementById("inpCellSpacing");
    var inpCellPadding = GetElementById("inpCellPadding");
    var inpCSSText = GetElementById("inpCSSText");
    var inpWidth = GetElementById("inpWidth");
    var inpHeight = GetElementById("inpHeight");
    var inpAutoFit1 = document.getElementsByName("inpAutoFit1");
    var inpAutoFit2 = document.getElementsByName("inpAutoFit2");
    var inpAutoFitMeasure1 = GetElementById("inpAutoFitMeasure1");
    var inpAutoFitMeasure2 = GetElementById("inpAutoFitMeasure2");
    var inpBorder = GetElementById("inpBorder");
    var inpSummary = document.getElementById("inpSummary");  
    var inpCaption = document.getElementById("inpCaption");     
    
    window.opener.oUtil.obj.saveForUndo();
    
    oTable.style.cssText = inpCSSText.value;
    
    var divStyle = document.getElementById("divStyle");
    if(divStyle.style.display=="block")
    {
    realTime();
    return;
    }

    if(inpAutoFit1[0].checked)//AutoFit to contents
        {
        oTable.width = "";
        oTable.style.width = "";
        }
    if(inpAutoFit1[1].checked)//Fixed cell width
        {       
        if(inpWidth.value!="") 
            {
            oTable.width = "";
            oTable.style.width = inpWidth.value + inpAutoFitMeasure1.value;
            }
        }
    if(inpAutoFit1[2].checked)//AutoFit to window
        {
        oTable.width = "";
        oTable.style.width = "100%"; 
        }
        
    if(inpAutoFit2[0].checked)//AutoFit to contents
        {
        //oTable.height = "";
        oTable.removeAttribute("HEIGHT");
        oTable.style.height = "";
        }
    if(inpAutoFit2[1].checked)//Fixed cell height
        {       
        if(inpHeight.value!="")
            {
            //oTable.height = "";
            oTable.removeAttribute("HEIGHT");
            oTable.style.height = inpHeight.value + inpAutoFitMeasure2.value;
            }       
        }
    if(inpAutoFit2[2].checked)//AutoFit to window
        {
        //oTable.height = "";
        oTable.removeAttribute("HEIGHT");
        oTable.style.height = "100%"; 
        }

    oTable.align = inpAlign.value;

    //Berkaitan dgn "Not Available"
    if(inpMarginLeft.value!="na") oTable.style.marginLeft = inpMarginLeft.value; //by default satuanya pixel
    if(inpMarginRight.value!="na") oTable.style.marginRight = inpMarginRight.value;
    if(inpMarginTop.value!="na") oTable.style.marginTop = inpMarginTop.value;
    if(inpMarginBottom.value!="na") oTable.style.marginBottom = inpMarginBottom.value;
    
    //Background sec. umum harus lebih dulu, baru kmd background color.
    oTable.style.background=divPreviewTable.style.background;
    oTable.style.backgroundColor = inpBackgroundColor.style.backgroundColor;

    //Clean
    if(oTable.style.backgroundImage=="none" &&
        oTable.style.backgroundRepeat=="repeat" &&
        oTable.style.backgroundPosition=="0% 0%" &&
        oTable.style.backgroundAttachment=="scroll")
        {
        oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-IMAGE: none/,"")
        oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-REPEAT: repeat/,"")
        oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-POSITION: 0% 0%/,"")
        oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-ATTACHMENT: scroll/,"")
        }
    
    if(inpBorder.value!="")
    {
    if(inpBorder.value==0)oTable.style.border="none";
    else oTable.style.border = "black " + inpBorder.value + "px solid";
        for (var i=0;i<oTable.rows.length;i++)  
            {
            var oTR=oTable.rows[i];
            for (var j=0;j<oTR.cells.length;j++) 
                {
                var oTD=oTR.cells[j];
                if(inpBorder.value!=0)
                    oTD.style.border = "black " + inpBorder.value + "px solid";
                else
                    oTD.style.border = "none";
                }
            }
    }    
    
    if(inpCollapse.value=="Yes")
        {
        oTable.style.borderCollapse="collapse";
        }
    else
        {
        oTable.style.borderCollapse="";
        }
    if(inpCellSpacing.value!="")
        {
        oTable.cellSpacing=inpCellSpacing.value;
        }
    else
        {
        //oTable.cellSpacing=""
        oTable.removeAttribute("cellSpacing",0);
        }
    if(inpCellPadding.value!="")
        {
        oTable.cellPadding=inpCellPadding.value;
        
    for(var i=0;i<oTable.rows.length;i++)
      {
      var oTR=oTable.rows[i]
      for(var j=0;j<oTR.cells.length;j++)
        {
        var oTD=oTR.cells[j]
        oTD.style.padding=""
        }
      }
        }
    else
        {
        //oTable.cellPadding=""
        oTable.removeAttribute("cellPadding",0);
        }

    if(inpCaption.value!="") {
      if (!oTable.caption) {        
        var capt = document.createElement("CAPTION");
        capt.textContent=inpCaption.value;
        oTable.insertBefore(capt, oTable.firstChild);
      }      
    }
    if(inpSummary.value!="") {
      oTable.setAttribute("summary", inpSummary.value);
    }

            
    realTime()
    }
</script>
</head>
<body onload="loadTxt();bodyOnLoad();tabClick(1)" style="overflow:hidden;">

<table width=100% height=100% align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding-top:15px;padding-left:13px;padding-right:13px;padding-bottom:0px;height:100%">

    <table cellpadding=0 cellspacing=0 style="width:100%;">
    <tr>
    <td id=tab1 style="cursor:pointer;padding:6px;border:#D6D6E2 2px solid;background-color:#F2F1F8;" onclick="tabClick(1)" nowrap><b><span name=txtLang id=txtLang>AutoFit</span></b></td>
    <td id=tab2 style="cursor:pointer;padding:6px;border:#D6D6E2 2px solid;background:gainsboro;background:#E9E8F2" onclick="tabClick(2)" nowrap><b><span name=txtLang id=txtLang>Properties</span></b></td>
    <td id=tab3 style="cursor:pointer;padding:6px;border:#D6D6E2 2px solid;background:gainsboro;background:#E9E8F2" onclick="tabClick(3)" nowrap><b><span name=txtLang id=txtLang>Style</span></b></td>
    <td style="border-bottom:#D6D6E2 2px solid;" width=100%>&nbsp;</td>
    </tr>
    </table>
    

    <table cellpadding=0 cellspacing=0 style="border:#D6D6E2 2px solid;border-top:none;width:100%;height:208;background:#F2F1F8;">
    <tr>
    <td style="padding:5px;padding-right:0px" valign=top nowrap>

    <!-- AUTOFIT -->
    <div id=divAutoFit style="display:none;">
    
        <div style="margin-bottom:7px;margin-top:3px;">
            <span name=txtLang id=txtLang>Width</span>:</div>
        <input type="radio" class=inpRdo name="inpAutoFit1">
            <span name=txtLang id=txtLang>AutoFit to contents</span><br>
        <input type="radio" class=inpRdo name="inpAutoFit1">
            <span name=txtLang id=txtLang>Fixed table width</span>:  
        <input type="text" name="inpWidth" id="inpWidth" size=3 onblur="document.getElementsByName('inpAutoFit1')[1].checked=true" class="inpTxt">
        <select ID="inpAutoFitMeasure1" name="inpAutoFitMeasure1" class="inpSel">
            <option value="px" name="optLang" id="optLang">pixels</option>
            <option value="%" name="optLang" id="optLang">percent</option>
        </select><br>
        <span style="height:18px"></span>
        <input type="radio" class=inpRdo name="inpAutoFit1">
            <span name=txtLang id=txtLang>AutoFit to window</span>
        
        <br><br>
        
        <div style="margin-bottom:7px;margin-top:3px;">
            <span name=txtLang id=txtLang>Height</span>:</div>
        <input type="radio" class=inpRdo name="inpAutoFit2">
            <span name=txtLang id=txtLang>AutoFit to contents</span><br>
        <input type="radio" class=inpRdo name="inpAutoFit2">
            <span name=txtLang id=txtLang>Fixed table height</span>: 
        <input type="text" name="inpHeight" id="inpHeight" size=3 onblur="document.getElementsByName('inpAutoFit2')[1].checked=true" class="inpTxt">
        <select ID="inpAutoFitMeasure2" name="inpAutoFitMeasure2" class="inpSel">
            <option value="px" name="optLang" id="optLang">pixels</option>
            <option value="%" name="optLang" id="optLang">percent</option>
        </select><br>
        <span style="height:18px"></span>
        <input type="radio" class=inpRdo name="inpAutoFit2">
            <span name=txtLang id=txtLang>AutoFit to window</span>
            
    </div>

    <!-- PROPERTIES -->
    <div id="divProperties" style="display:none;">
        <table>
        <tr>
        <td>
            <span name=txtLang id=txtLang>Alignment</span>: 
        </td>
        <td colspan=2>
            <select name="inpAlign" id="inpAlign" style="width:100%" class="inpSel">
        <option value="" name="optLang" id="optLang" selected> </option>
                <option value="left" name="optLang" id="optLang">left</option>
                <option value="center" name="optLang" id="optLang">center</option>
                <option value="right" name="optLang" id="optLang">right</option>
            </select>
        </td>
        </tr>
        
        <tr>
        <td>
            <span name=txtLang id=txtLang>Margin</span>   
        </td>
        <td colspan=2>
            <table cellpadding=2 cellspacing=0>
            <tr>
            <td><span name=txtLang id=txtLang>Left</span>:</td>
            <td><input type="text" id="inpMarginLeft" name="inpMarginLeft" size=3 class="inpTxt"></td>
            <td> px</td>
            <td>&nbsp;&nbsp;</td>
            <td align=right><span name=txtLang id=txtLang>Right</span>:</td>
            <td><input type="text" name="inpMarginRight" id="inpMarginRight" size=3 class="inpTxt"></td>
            <td> px</td>
            </tr>
            <tr>
            <td><span name=txtLang id=txtLang>Top</span>:</td>
            <td><input type="text" name="inpMarginTop" id="inpMarginTop" size=3 class="inpTxt"></td>
            <td> px</td>
            <td>&nbsp;&nbsp;</td>
            <td align=right><span name=txtLang id=txtLang>Bottom</span>:</td>
            <td><input type="text" name="inpMarginBottom" id="inpMarginBottom" size=3 class="inpTxt"></td>
            <td> px</td>
            </tr>
            </table>
        </td>
        </tr>

        <tr>
        <td>
            <span name=txtLang id=txtLang>Borders</span>: 
        </td>
        <td colspan=2 nowrap>
            <select ID="inpBorder" NAME="inpBorder" class="inpSel">
                <option value="" selected></option>
                <option value=0 name="optLang" id="optLang">No Border</option>
                <option value=1>1px</option>
                <option value=2>2px</option>
                <option value=3>3px</option>
                <option value=4>4px</option>
                <option value=5>5px</option>
            </select>&nbsp;&nbsp;&nbsp;
            <span name=txtLang id=txtLang>Collapse</span>:
            <select name="inpCollapse" ID="inpCollapse" class="inpSel">
                <option value="Yes" name="optLang" id="optLang">Yes</option>
                <option value="No" name="optLang" id="optLang">No</option>
            </select>
        </td>
        </tr>
        
        <tr>
        <td style="padding-top:5;padding-bottom:5">
            <span name=txtLang id=txtLang>Background</span>: 
        </td>
        <td style="padding-top:5;padding-bottom:5">
            <span style="background:#ffffff"><span id="inpBackgroundColor" style="border:gray 1px solid;width:20;margin-right:3;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
            <input type=button name=btnPick id=btnPick value=Pick onclick="oColor1.show(this);event.cancelBubble=true;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">

            <script>
            var oColor1 = new ColorPicker("oColor1");
            oColor1.onPickColor = new Function("document.getElementById('inpBackgroundColor').style.backgroundColor=oColor1.color;");
            oColor1.onRemoveColor = new Function("document.getElementById('inpBackgroundColor').style.backgroundColor='';");
            oColor1.align="left";
            oColor1.txtCustomColors=getTxt("Custom Colors");
            oColor1.txtMoreColors=getTxt("More Colors...");
            oColor1.RENDER();
            </script>   
        
            <table id=divPreviewTable name=divPreviewTable style="display:none;"><tr><td></td></tr></table>
            <input type="button" name=btnImage id=btnImage value="Image" onclick="modalDialogShow('image_background.htm?divPreviewTable', 380, 150);" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        </td>
        <td>&nbsp;</td>
        </tr>
        
        <tr>
        <td nowrap>
            <span name=txtLang id=txtLang>Cell Spacing</span>:
        </td>
        <td>
            <input type="text" ID="inpCellSpacing" NAME="inpCellSpacing" size=1 class="inpTxt"> px
        </td>
        <td>&nbsp;</td>
        </tr>   
        <tr>
        <td nowrap>
            <span name=txtLang id=txtLang>Cell Padding</span>:
        </td>
        <td>
            <input type="text" id="inpCellPadding" name="inpCellPadding" size=1 class="inpTxt"> px
        </td>
        <td>&nbsp;</td>
        </tr>
        <tr>
          <td><span id="txtLang" name=txtLang>Caption</span>:</td>
          <td colspan='2'><input type="text" id="inpCaption" name="inpCaption" size="40" value=""></td>
        </tr>
        <tr>
          <td><span id="txtLang" name=txtLang>Summary</span>:</td>
          <td colspan='2'><input type="text" id="inpSummary" name="inpSummary" size="40" value=""></td>
        </tr>        
        </table>
    </div>
    
    <!-- CSS -->
    <div id="divStyle" style="display:none;">
        <div style="margin-bottom:9;margin-top:3;margin-left:4;margin-right:9">
        <span name=txtLang id=txtLang>CSS Text</span>: <br>
        <textarea name="inpCSSText" id="inpCSSText" style="width:100%;height:158;font-family:verdana;font-size:10px" class="inpTxt"></textarea>
        </div>  
    </div>


    </td>
    </tr>
    </table>

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-right:13;padding-top:7;padding-bottom:7;" align="right">
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply();window.focus();" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>