/*** Color Picker Object ***/
var arrColorPickerObjects=[];
function ColorPicker(sName,sParent)
    {
    this.oParent=sParent;
    if(sParent)
        {
        this.oName=sParent+"."+sName;
        this.oRenderName=sName+sParent;
        }
    else
        {
        this.oName=sName;
        this.oRenderName=sName;
        }
    arrColorPickerObjects.push(this.oName);

    this.url="color_picker.htm";
    this.onShow=function(){return true;};
    this.onHide=function(){return true;};
    this.onPickColor=function(){return true;};
    this.onRemoveColor=function(){return true;};
    this.onMoreColor=function(){return true;};  
    this.show=showColorPicker;
    this.hide=hideColorPicker;
    this.hideAll=hideColorPickerAll;
    this.color;
    this.customColors=[];
    this.refreshCustomColor=refreshCustomColor;
    this.isActive=false;
    this.txtCustomColors="Custom Colors";
    this.txtMoreColors="More Colors...";
    this.align="left";
    this.currColor="#ffffff";//default current color
    this.RENDER=drawColorPicker;
    }
    
function drawColorPicker()
    {   
    var arrColors=[["#800000","#8b4513","#006400","#2f4f4f","#000080","#4b0082","#800080","#000000"],
                ["#ff0000","#daa520","#6b8e23","#708090","#0000cd","#483d8b","#c71585","#696969"],
                ["#ff4500","#ffa500","#808000","#4682b4","#1e90ff","#9400d3","#ff1493","#a9a9a9"],
                ["#ff6347","#ffd700","#32cd32","#87ceeb","#00bfff","#9370db","#ff69b4","#dcdcdc"],
                ["#ffdab9","#ffffe0","#98fb98","#e0ffff","#87cefa","#e6e6fa","#dda0dd","#ffffff"]]
    var sHTMLColor="<table id=dropColor"+this.oRenderName+" style=\"z-index:1;display:none;position:absolute;border:#9b95a6 1px solid;cursor:default;background-color:#E9E8F2;padding:2px\" unselectable=on cellpadding=0 cellspacing=0 width=145px><tr><td unselectable=on>"
    sHTMLColor+="<table align=center cellpadding=0 cellspacing=0 border=0 unselectable=on>";
    for(var i=0;i<arrColors.length;i++)
        {
        sHTMLColor+="<tr>";
        for(var j=0;j<arrColors[i].length;j++)
            sHTMLColor+="<td onclick=\""+this.oName+".color='"+arrColors[i][j]+"';"+this.oName+".onPickColor();"+this.oName+".currColor='"+arrColors[i][j]+"';"+this.oName+".hideAll()\" onmouseover=\"this.style.border='#777777 1px solid'\" onmouseout=\"this.style.border='#E9E8F2 1px solid'\" style=\"cursor:default;padding:1px;border:#E9E8F2 1px solid;\" unselectable=on>"+
                "<table style='margin:0px;width:13px;height:13px;background:"+arrColors[i][j]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
                "<tr><td unselectable=on></td></tr>"+
                "</table></td>";
        sHTMLColor+="</tr>";        
        }
    
    //~~~ custom colors ~~~~
    sHTMLColor+="<tr><td colspan=8 id=idCustomColor"+this.oRenderName+"></td></tr>";
    
    //~~~ remove color & more colors ~~~~
    sHTMLColor+= "<tr>";
    sHTMLColor+= "<td unselectable=on>"+
        "<table style='margin-left:1px;width:14px;height:14px;background:#E9E8F2;' cellpadding=0 cellspacing=0 unselectable=on>"+
        "<tr><td onclick=\""+this.oName+".onRemoveColor();"+this.oName+".currColor='';"+this.oName+".hideAll()\" onmouseover=\"this.style.border='#777777 1px solid'\" onmouseout=\"this.style.border='white 1px solid'\" style=\"cursor:default;padding:1px;border:white 1px solid;font-family:verdana;font-size:10px;font-color:black;line-height:9px;\" align=center valign=top unselectable=on>x</td></tr>"+
        "</table></td>";
    sHTMLColor+= "<td colspan=7 unselectable=on>"+
        "<table style='margin:1px;width:117px;height:16px;background:#E9E8F2;border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
        "<tr><td id='"+this.oName+"moreColTd' onclick=\""+this.oName+".onMoreColor();"+this.oName+".hideAll();modalDialogShow('"+this.url+"?" +this.oName+ "', 442, 380)\" onmouseover=\"this.style.border='#777777 1px solid';this.style.background='#8d9aa7';this.style.color='#ffffff'\" onmouseout=\"this.style.border='#E9E8F2 1px solid';this.style.background='#E9E8F2';this.style.color='#000000'\" style=\"cursor:default;font-family:verdana;font-size:9px;font-color:black;line-height:9px;padding:1px\" align=center valign=top nowrap unselectable=on>"+this.txtMoreColors+"</td></tr>"+
        "</table></td>";
    sHTMLColor+= "</tr>";
    
    sHTMLColor+= "</table>";            
    sHTMLColor+="</td></tr></table>";
    document.write(sHTMLColor);
    }
    
function refreshCustomColor()
    {
    var arg = eval(dialogArgument[0]);
    var arg2 = eval(dialogArgument[1]);
    if(arg.oUtil)//[CUSTOM]
        this.customColors=arg.oUtil.obj.customColors;//[CUSTOM] (Get from public definition)
    else //text2.htm [CUSTOM]
        this.customColors=arg2.oUtil.obj.customColors;//[CUSTOM] (Get from public definition)

    if(this.customColors.length==0)
        {
        document.getElementById("idCustomColor"+this.oRenderName).innerHTML="";
        return;
        }
    sHTML="<table cellpadding=0 cellspacing=0 width=100%><tr><td colspan=8 style=\"font-family:verdana;font-size:9px;font-color:black;line-height:9px;padding:1\">"+this.txtCustomColors+":</td></tr></table>"
    sHTML+="<table cellpadding=0 cellspacing=0><tr>";   
    for(var i=0;i<this.customColors.length;i++)
        {
        if(i<22)
            {
            if(i==8||i==16||i==24||i==32)sHTML+="</tr></table><table cellpadding=0 cellspacing=0><tr>"  
            sHTML+="<td onclick=\""+this.oName+".color='"+this.customColors[i]+"';"+this.oName+".onPickColor()\" onmouseover=\"this.style.border='#777777 1px solid'\" onmouseout=\"this.style.border='#E9E8F2 1px solid'\" style=\"cursor:default;padding:1px;border:#E9E8F2 1px solid;\" unselectable=on>"+
                "   <table  style='margin:0;width:13;height:13;background:"+this.customColors[i]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
                "   <tr><td unselectable=on></td></tr>"+
                "   </table>"+
                "</td>";
            }           
        }
    sHTML+="</tr></table>";
    document.getElementById("idCustomColor"+this.oRenderName).innerHTML=sHTML;
    }
function showColorPicker(oEl)
    {
    this.onShow();
    
    this.hideAll();

    var box=document.getElementById("dropColor"+this.oRenderName);

    //remove hilite
    var allTds = box.getElementsByTagName("TD");
    for (var i = 0; i<allTds.length; i++) {
        allTds[i].style.border="#E9E8F2 1px solid";
        if (allTds[i].id==this.oName+"moreColTd") {
            allTds[i].style.border="#E9E8F2 1px solid";
            allTds[i].style.background="#E9E8F2";
            allTds[i].style.color="#000000";
        }
    }

    box.style.display="block";
    var nTop=0;
    var nLeft=0;

    oElTmp=oEl;
    while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
        {
        if(oElTmp.style.top!="")
            nTop+=oElTmp.style.top.substring(1,oElTmp.style.top.length-2)*1;
        else nTop+=oElTmp.offsetTop;
        oElTmp = oElTmp.offsetParent;
        }

    oElTmp=oEl;
    while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
        {
        if(oElTmp.style.left!="")
            nLeft+=oElTmp.style.left.substring(1,oElTmp.style.left.length-2)*1;
        else nLeft+=oElTmp.offsetLeft;
        oElTmp=oElTmp.offsetParent;
        }
    
    if(this.align=="left")
        box.style.left=nLeft;
    else//right
        box.style.left=nLeft-143+oEl.offsetWidth;
        
    //box.style.top=nTop+1;//[CUSTOM]
    box.style.top=nTop+1+oEl.offsetHeight;//[CUSTOM]

    this.isActive=true;
    
    this.refreshCustomColor();
    }
function hideColorPicker()
    {
    this.onHide();

    var box=document.getElementById("dropColor"+this.oRenderName);
    box.style.display="none";
    this.isActive=false;
    }
function hideColorPickerAll()
    {
    for(var i=0;i<arrColorPickerObjects.length;i++)
        {
        var box=document.getElementById("dropColor"+eval(arrColorPickerObjects[i]).oRenderName);
        box.style.display="none";
        eval(arrColorPickerObjects[i]).isActive=false;
        }
    }
    
function convertHexToDec(hex)
    {
    return parseInt(hex,16);
    }
    
function convertDecToHex(dec)
    {
    var tmp = parseInt(dec).toString(16);
    if(tmp.length == 1) tmp = ("0" +tmp);
    return tmp;//.toUpperCase();
    }
    
function convertDecToHex2(dec)
    {
    var tmp = parseInt(dec).toString(16);

    if(tmp.length == 1) tmp = ("00000" +tmp);
    if(tmp.length == 2) tmp = ("0000" +tmp);
    if(tmp.length == 3) tmp = ("000" +tmp);
    if(tmp.length == 4) tmp = ("00" +tmp);
    if(tmp.length == 5) tmp = ("0" +tmp);

    tmp = tmp.substr(4,1) + tmp.substr(5,1) + tmp.substr(2,1) + tmp.substr(3,1) + tmp.substr(0,1) + tmp.substr(1,1)
    return tmp;//.toUpperCase();
    }
    
//input color in format rgb(R,G,B)
//ex, return by document.queryCommandValue(forcolor)
function extractRGBColor(col) {
    var re = /rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/i;
    if (re.test(col)) {
        var result = re.exec(col);
        return convertDecToHex(parseInt(result[1])) + 
               convertDecToHex(parseInt(result[2])) + 
               convertDecToHex(parseInt(result[3]));
    }
    return convertDecToHex2(0);
}    
    <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");
    
    //Align
    inpAlign.value = oTable.align;
    
    //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");
    
    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);
        }
            
    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>       
        </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>