[$] Pr1v473 xHeEl B4ckD00RzZ [$]

Current Path : D:/InetPub/vhosts/kuccs.com.kw/httpdocs/PortalCMS/scripts/editor/scripts/saf/
Upload File
Current File : D:/InetPub/vhosts/kuccs.com.kw/httpdocs/PortalCMS/scripts/editor/scripts/saf/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=parent.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=['parent', 'parent'];

function modalDialogShow(url,width,height)
    {
    parent.modalDialogShow(parent.oUtil.obj.scriptPath+url,width,height,window);
    }

document.onclick=hideAll;

function hideAll()
    {
    oColor1.hide();
    }

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="#e5e5e5 1px solid";
            tab1.style.borderBottom="none";
            tab1.style.background="#ffffff";
            tab1.style.cursor="";

            tab2.style.border="#e5e5e5 1px solid";
            tab2.style.borderLeft="none";
            tab2.style.background="#e5e5e5";
            tab2.style.cursor="pointer";

            tab3.style.border="#e5e5e5 1px solid";
            tab3.style.borderLeft="none";
            tab3.style.background="#e5e5e5";
            tab3.style.cursor="pointer";

            divAutoFit.style.display="block"
            divProperties.style.display="none"
            divStyle.style.display="none"

            break;
        case 2:
            tab1.style.border="#e5e5e5 1px solid";
            tab1.style.borderRight="none";
            tab1.style.background="#e5e5e5";
            tab1.style.cursor="pointer";

            tab2.style.border="#e5e5e5 1px solid";
            tab2.style.borderBottom="none";
            tab2.style.background="#ffffff";
            tab2.style.cursor="";

            tab3.style.border="#e5e5e5 1px solid";
            tab3.style.borderLeft="none";
            tab3.style.background="#e5e5e5";
            tab3.style.cursor="pointer";

            divAutoFit.style.display="none"
            divProperties.style.display="block"
            divStyle.style.display="none"

            break;
        case 3:
            tab1.style.border="#e5e5e5 1px solid";
            tab1.style.borderRight="none";
            tab1.style.background="#e5e5e5";
            tab1.style.cursor="pointer";

            tab2.style.border="#e5e5e5 1px solid";
            tab2.style.borderRight="none";
            tab2.style.background="#e5e5e5";
            tab2.style.cursor="pointer";

            tab3.style.border="#e5e5e5 1px solid";
            tab3.style.borderBottom="none";
            tab3.style.background="#ffffff";
            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()
    {
    parent.oUtil.onSelectionChanged=new Function("realTime()");
    }
function bodyOnLoad()
    {
    loadTxt();

    window.onfocus=doWindowFocus;
    parent.oUtil.onSelectionChanged=new Function("realTime()");

    realTime();
    tabClick(1);
    }

function bodyOnUnload() {
  parent.oUtil.onSelectionChanged=null;
}

function realTime()
    {
    var oEditor=parent.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var oTable = parent.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=parent.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var oTable = parent.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");

    parent.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.removeAttribute("width");
        oTable.style.width = "";
        }
    if(inpAutoFit1[1].checked)//Fixed cell width
        {
        if(inpWidth.value!="")
            {
            oTable.removeAttribute("width");
            oTable.style.width = inpWidth.value + inpAutoFitMeasure1.value;
            }
        }
    if(inpAutoFit1[2].checked)//AutoFit to window
        {
        oTable.removeAttribute("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%";
        }

    if(inpAlign.value!="") oTable.align = inpAlign.value;

    //Berkaitan dgn "Not Available"

    if(inpMarginLeft.value!="na") oTable.style.marginLeft = inpMarginLeft.value+"px"; //by default satuanya pixel
    if(inpMarginRight.value!="na") oTable.style.marginRight = inpMarginRight.value+"px";
    if(inpMarginTop.value!="na") oTable.style.marginTop = inpMarginTop.value+"px";
    if(inpMarginBottom.value!="na") oTable.style.marginBottom = inpMarginBottom.value+"px";

    //Background sec. umum harus lebih dulu, baru kmd background color.
    //oTable.style.background=divPreviewTable.style.background;
	if(divPreviewTable.style.backgroundImage!="") {
		oTable.style.backgroundImage = divPreviewTable.style.backgroundImage;
		oTable.style.backgroundRepeat = divPreviewTable.style.backgroundRepeat;
		oTable.style.backgroundPosition = divPreviewTable.style.backgroundPosition;
	}

    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 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:#e5e5e5 1px solid;background-color:#ffffff;" onclick="tabClick(1)" nowrap><b><span name=txtLang id=txtLang>AutoFit</span></b></td>
    <td id=tab2 style="cursor:pointer;padding:6px;border:#e5e5e5 1px solid;background:#e5e5e5" onclick="tabClick(2)" nowrap><b><span name=txtLang id=txtLang>Properties</span></b></td>
    <td id=tab3 style="cursor:pointer;padding:6px;border:#e5e5e5 1px solid;background:#e5e5e5" 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:#e5e5e5 1px solid;border-top:none;width:100%;height:208;background:#ffffff;">
    <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 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 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;" />

            <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.url = parent.oUtil.obj.scriptPath + "color_picker.htm";
            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, 185);" />
        </td>
        <td>&nbsp;</td>
        </tr>

        <tr><td colspan="3"><div style="border-top:#e2e2e2 1px solid;margin-top:5px;margin-bottom:10px;"></div></td></tr>


        <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 colspan="3"><div style="border-top:#e2e2e2 1px solid;margin-top:5px;margin-bottom:10px;"></div></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-top:10px;" align="right">
  <table cellpadding=0 cellspacing=0>
  <tr>
  <td>
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply();window.focus();" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <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>
</td>
</tr>
</table>

</body>
</html>