삭제

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@2327 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/editor/components/table_maker/info.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component version="0.1">
+    <title xml:lang="ko">표(table) 생성</title>
+    <title xml:lang="jp">テーブル作成</title>
+    <title xml:lang="zh-CN">表格</title>
+    <title xml:lang="en">Create Table</title>
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com" date="2007. 2. 28">
+        <name xml:lang="ko">제로</name>
+        <name xml:lang="jp">Zero</name>
+        <name xml:lang="zh-CN">zero</name>
+        <name xml:lang="en">zero</name>
+        <description xml:lang="ko">에디터에 표(table)을 생성하거나 표(table) 또는 칸(td)의 속성을 변경할 수 있습니다.</description>
+        <description xml:lang="jp">エディターにテーブル（table）を作成したり、テーブル（table）またはセル（td）の属性を変更したりすることができます。</description>
+        <description xml:lang="zh-CN">插入表格(table)或编辑表格属性。</description>
+        <description xml:lang="en">It can create a table on editor or modify the attribution of table or td.</description>
+    </author>
+</component>

modules/editor/components/table_maker/lang/en.lang.php

@@ -0,0 +1,24 @@
+<?php
+    /**
+     * @file   /modules/editor/components/emoticon/lang/en.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  editor module >  language pack of table_maker component
+     **/
+
+    $lang->table_attribute = "Change Table Attibution";
+    $lang->cell_attribute = "Change Cell Attribution";
+
+    $lang->table_width = "Width";
+    $lang->table_cols_count = "Number of Columns";
+    $lang->table_rows_count = "Number of Rows";
+    $lang->table_cellspacing = "Cellspacing";
+    $lang->table_cellpadding = "Cellpadding";
+    $lang->table_border = "Border Thicknes";
+    $lang->table_inner_border = "Inner Line Thickness";
+
+    $lang->cell_width = "Width";
+    $lang->cell_height = "Height";
+
+    $lang->table_border_color = "Border Color";
+    $lang->table_bg_color = "Background Color";
+?>

modules/editor/components/table_maker/lang/jp.lang.php

@@ -0,0 +1,24 @@
+<?php
+    /**
+     * @file   /modules/editor/components/emoticon/lang/jp.lang.php
+     * @author zero <zero@nzeo.com> 翻訳：RisaPapa
+     * @brief  ウィジウィグエディター（editor） >  テーブル生成(table_maker)コンポネント言語パッケージ
+     **/
+
+    $lang->table_attribute = "テーブル属性変更";
+    $lang->cell_attribute = "セル属性変更";
+
+    $lang->table_width = "横幅サイズ";
+    $lang->table_cols_count = "縦幅サイズ";
+    $lang->table_rows_count = "列（Rows）数";
+    $lang->table_cellspacing = "セルの間隔";
+    $lang->table_cellpadding = "セル内余白";
+    $lang->table_border = "ボーダー";
+    $lang->table_inner_border = "ボーダー境界線の太さ";
+
+    $lang->cell_width = "セル横幅";
+    $lang->cell_height = "セル立幅";
+
+    $lang->table_border_color = "ボーダーカラー";
+    $lang->table_bg_color = "背景色";
+?>

modules/editor/components/table_maker/lang/ko.lang.php

@@ -0,0 +1,24 @@
+<?php
+    /**
+     * @file   /modules/editor/components/emoticon/lang/ko.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  위지윅에디터(editor) 모듈 >  테이블 생성(table_maker) 컴포넌트의 언어팩
+     **/
+
+    $lang->table_attribute = "테이블 속성 변경";
+    $lang->cell_attribute = "셀 속성 변경";
+
+    $lang->table_width = "가로크기";
+    $lang->table_cols_count = "가로열 갯수";
+    $lang->table_rows_count = "세로열 갯수";
+    $lang->table_cellspacing = "셀간 간격";
+    $lang->table_cellpadding = "셀내 여백";
+    $lang->table_border = "외곽선 굵기";
+    $lang->table_inner_border = "구분선 굵기";
+
+    $lang->cell_width = "가로크기 ";
+    $lang->cell_height = "세로 크기 ";
+
+    $lang->table_border_color = "외곽선 색";
+    $lang->table_bg_color = "배경 색";
+?>

modules/editor/components/table_maker/lang/zh-CN.lang.php

@@ -0,0 +1,24 @@
+<?php
+    /**
+     * @file   /modules/editor/components/emoticon/lang/zh-CN.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  网页编辑器(editor) 模块 >  表格生成(table_maker) 组件的语言包
+     **/
+
+    $lang->table_attribute = "修改表格属性";
+    $lang->cell_attribute = "修改单元格属性";
+
+    $lang->table_width = "宽度";
+    $lang->table_cols_count = "行数";
+    $lang->table_rows_count = "列数";
+    $lang->table_cellspacing = "单元格间距";
+    $lang->table_cellpadding = "单元格边距";
+    $lang->table_border = "边框粗细";
+    $lang->table_inner_border = "区分线粗细";
+
+    $lang->cell_width = "宽度 ";
+    $lang->cell_height = "高度 ";
+
+    $lang->table_border_color = "边框颜色";
+    $lang->table_bg_color = "背景颜色";
+?>

modules/editor/components/table_maker/table_maker.class.php

@@ -0,0 +1,37 @@
+<?php
+    /**
+     * @class  table_maker
+     * @author zero (zero@nzeo.com)
+     * @brief  에디터에 테이블 추가 기능
+     **/
+
+    class table_maker extends EditorHandler { 
+
+        // upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
+        var $upload_target_srl = 0;
+        var $component_path = '';
+
+        /**
+         * @brief upload_target_srl과 컴포넌트의 경로를 받음
+         **/
+        function table_maker($upload_target_srl, $component_path) {
+            $this->upload_target_srl = $upload_target_srl;
+            $this->component_path = $component_path;
+        }
+
+        /**
+         * @brief popup window요청시 popup window에 출력할 내용을 추가하면 된다
+         **/
+        function getPopupContent() {
+            // 템플릿을 미리 컴파일해서 컴파일된 소스를 return
+            $tpl_path = $this->component_path.'tpl';
+            $tpl_file = 'popup.html';
+
+            Context::set("tpl_path", $tpl_path);
+
+            $oTemplate = &TemplateHandler::getInstance();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+    }
+?>

modules/editor/components/table_maker/tpl/popup.css

@@ -0,0 +1,51 @@
+@charset "utf-8";
+@import url(../../../../../../modules/admin/tpl/css/admin.css);
+
+#table_option { border:1px solid #EEEEEE; padding:.5em; color:#555555; font-weight:bold; }
+#table_option input { vertical-align:middle; }
+#table_option label { margin-left:.3em; margin-right:2em; }
+
+li { list-style:none; float:left; margin-right:5px; }
+
+img.color_icon {
+    width:14px;
+    height:14px;
+    border:1px solid #FFFFFF;
+}
+
+img.color_icon_over {
+    width:14px;
+    height:14px;
+    border:1px solid #000000;
+    cursor:pointer;
+}
+
+img.border_preview_color {
+    width:30px;
+    height:16px;
+    border:1px solid #EEEEEE;
+    background-color:#000000;
+}
+
+img.border_preview_none_color {
+    width:30px;
+    height:12px;
+    border:1px solid #EEEEEE;
+    background-color:#FFFFFF;
+}
+
+img.bg_preview_color {
+    width:30px;
+    height:16px;
+    border:1px solid #000000;
+    background-color:#FFFFFF;
+}
+
+.editor_color_box {
+    clear:both;
+    height:65px;
+    width:400px;
+    border:1px solid #DDDDDD;
+    padding:2px;
+    margin-bottom:3px;
+}

modules/editor/components/table_maker/tpl/popup.html

@@ -0,0 +1,137 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+
+<div id="popHeadder">
+    <h1>{$component_info->title} ver. {$component_info->version}</h1>
+</div>
+
+<form action="./" method="get" onSubmit="return false" id="fo">
+
+    <div id="popBody">
+
+        <div id="table_option" style="display:none">
+            <input name="attr" type="radio" value="table" id="table_attribute_select" onclick="doSelectOption('table');"/> <label for="table_attribute_select">{$lang->table_attribute}</label>
+            <input name="attr" type="radio" value="cell" id="cell_attribute_select" onclick="doSelectOption('cell');"/> <label for="cell_attribute_select">{$lang->cell_attribute}</label>
+        </div>
+
+        <div id="table_attribute" style="display:none">
+            <div class="" id="col_row_area" style="display:none" >
+                <table cellspacing="0" class="tableType5 gap1">
+                <col width="25%" />
+                <col width="25%" />
+                <col width="25%" />
+                <col width="25%" />
+                <tr>
+                    <th scope="row">{$lang->table_cols_count}</th>
+                    <td><input type="text" class="inputTypeText" size="2" id="cols_count" value="2" /></td>
+                    <th scope="row">{$lang->table_rows_count}</th>
+                    <td><input type="text" class="inputTypeText" size="2" id="rows_count" value="1" /></td>
+                </tr>
+                </table>
+            </div>
+
+            <table cellspacing="0" class="tableType5 gap1">
+            <col width="25%" />
+            <col />
+            <tr>
+                <th scope="row">{$lang->table_width}</th>
+                <td>
+                    <input type="text" class="inputTypeText" size="3" id="width" value="100" />
+                    <input type="radio" name="width_unit" id="width_unit_percent" checked="checked" /><label for="width_unit_percent">%</label>
+                    <input type="radio" name="width_unit" id="width_unit_pixel" /><label for="width_unit_pixel">px</label>
+                </td>
+            </tr>
+            </table>
+
+        </div>
+
+        <table cellspacing="0" class="tableType5 gap1">
+        <col width="25%" />
+        <col width="25%" />
+        <col width="25%" />
+        <col width="25%" />
+        <tr>
+            <th scope="row">{$lang->table_cellspacing}</th>
+            <td><input type="text" class="inputTypeText" size="2" id="cellspacing" value="0" />px</td>
+            <th scope="row">{$lang->table_cellpadding}</th>
+            <td><input type="text" class="inputTypeText" size="2" id="cellpadding" value="1" />px</td>
+        </tr>
+        <tr>
+            <th scope="row">{$lang->table_border}</th>
+            <td><input type="text" class="inputTypeText" size="2" id="border" value="1" />px</td>
+            <th scope="row">{$lang->table_inner_border}</th>
+            <td><input type="text" class="inputTypeText" size="2" id="inner_border" value="0" />px</td>
+        </tr>
+        </table>
+
+        <div id="cell_attribute" style="display:none">
+            <table cellspacing="0" class="tableType5 gap1">
+            <col width="25%" />
+            <col width="25%" />
+            <col width="25%" />
+            <col width="25%" />
+            <tr>
+                <th scope="row">{$lang->cell_width}</th>
+                <td>
+                    <input type="text" class="inputTypeText" size="3" id="cell_width" value="0" />
+                    <input type="radio" name="cell_width_unit" id="cell_width_unit_percent" checked="checked" /><label for="cell_width_unit_percent">%</label>
+                    <input type="radio" name="cell_width_unit" id="cell_width_unit_pixel" /><label for="cell_width_unit_pixel">px</label>
+                </td>
+                <th scope="row">{$lang->cell_height}</th>
+                <td><input type="text" class="inputTypeText" size="3" id="cell_height" value="0" />px</td>
+            </tr>
+            </table>
+        </div>
+
+        <div id="border_color_area" style="display:none">
+            <table cellspacing="0" class="tableType5 gap1">
+            <col width="25%" />
+            <col />
+            <tr>
+                <th scope="row">{$lang->table_border_color}</th>
+                <td>
+                    <div class="editor_color_box">
+                        <script type="text/javascript">
+                            printColor("border", "{$tpl_path}/images/blank.gif");
+                        </script>
+                    </div>
+
+                    <ul class="buttonLeft">
+                        <li><img src="./images/border_solid.gif" alt="blank" class="border_preview_color" id="border_preview_color" /></li>
+                        <li>#<input type="text" id="border_color_input" size="6" maxlength="6" class="inputTypeText" value="000000" onkeyup="manual_select_color('border',this)"/></li>
+                    </ul>
+                </td>
+            </tr>
+            </table>
+        </div>
+
+        <div id="bg_color_area" style="display:none">
+            <table cellspacing="0" class="tableType5 gap1">
+            <col width="25%" />
+            <col />
+            <tr>
+                <th scope="row">{$lang->table_bg_color}</th>
+                <td>
+                    <div class="editor_color_box">
+                        <script type="text/javascript">
+                            printColor("bg", "{$tpl_path}/images/blank.gif");
+                        </script>
+                    </div>
+
+                    <ul class="buttonLeft">
+                        <li><img src="./images/blank.gif" alt="blank" class="bg_preview_color" id="bg_preview_color" /></li>
+                        <li>#<input type="text" id="bg_color_input" size="6" maxlength="6" class="inputTypeText" value="FFFFFF" onkeyup="manual_select_color('bg',this)"/></li>
+                    </ul>
+                </td>
+            </tr>
+            </table>
+        </div>
+    </div>
+
+    <div id="popFooter" class="tCenter">
+        <a href="#" onclick="insertTable()" class="button"><span>{$lang->cmd_insert}</span></a>
+        <a href="#" onclick="window.close(); return false;" class="button"><span>{$lang->cmd_close}</span></a>
+        <a href="#" onclick="winopen('./?module=editor&amp;act=dispEditorComponentInfo&amp;component_name={$component_info->component_name}','ComponentInfo','left=10,top=10,width=10,height=10,resizable=no,scrollbars=no,toolbars=no');return false;" class="button"><span>{$lang->about_component}</span></a>
+    </div>
+</form>

modules/editor/components/table_maker/tpl/popup.js

@@ -0,0 +1,257 @@
+/**
+ * popup으로 열렸을 경우 부모창의 위지윅에디터에 select된 멀티미디어 컴포넌트 코드를 체크하여
+ * 있으면 가져와서 원하는 곳에 삽입
+ **/
+var selected_node = null;
+function getTable() {
+    // 부모 위지윅 에디터에서 선택된 영역이 있는지 확인
+    if(typeof(opener)=="undefined") return;
+
+    var node = opener.editorPrevNode;
+    selected_node = node;
+
+    // 선택된 객체가 없으면 테이블 새로 추가
+    if(!selected_node) {
+      doSelectOption('table');
+    } else {
+      doSelectOption('cell');
+    }
+
+    setFixedPopupSize();
+}
+
+/* 테이블, 셀 선택 옵션의 처리 */
+function doSelectOption(type) {
+
+    // 셀 변경 
+    if(selected_node && type == "cell") {
+      xGetElementById("table_option").style.display = "block";
+      xGetElementById("cell_attribute").style.display = "block";
+
+      var cell_width = selected_node.style.width.replace(/(px|\%)$/,'');
+      var cell_width_unit = selected_node.style.width.replace(/^([0-9]+)/,'');
+      var cell_height = selected_node.style.height.replace(/px$/,'');
+
+      var border_color = selected_node.style.borderColor.replace(/^#/,'');
+      if(border_color.indexOf('rgb')>-1) {
+        var tmp_color = border_color.replace(/([a-z\(\) ]*)/ig,'').split(',');
+        border_color = xHex(tmp_color[0], 2, '')+xHex(tmp_color[1], 2, '')+xHex(tmp_color[2], 2, '');
+      }
+
+      var bg_color = selected_node.style.backgroundColor.replace(/^#/,'');
+      if(bg_color.indexOf('rgb')>-1) {
+        var tmp_color = bg_color.replace(/([a-z\(\) ]*)/ig,'').split(',');
+        bg_color = xHex(tmp_color[0], 2, '')+xHex(tmp_color[1], 2, '')+xHex(tmp_color[2], 2, '');
+      }
+      if(!bg_color) bg_color = "FFFFFF";
+
+      xGetElementById("cell_width").value = cell_width?cell_width:0;
+      if(cell_width_unit=="px") xGetElementById("cell_width_unit_pixel").checked = "true";
+      else xGetElementById("cell_width_unit_percent").value = "true";
+      xGetElementById("cell_height").value = cell_height?cell_height:0;
+      
+      xGetElementById("border_color_input").value = border_color;
+      manual_select_color("border", xGetElementById("border_color_input"))
+      xGetElementById("bg_color_input").value = bg_color;
+      manual_select_color("bg", xGetElementById("bg_color_input"))
+
+      xGetElementById("table_attribute").style.display = "none";
+      xGetElementById("cell_attribute").style.display = "block";
+      xGetElementById("cell_attribute_select").checked = true;
+      xGetElementById("border_color_area").style.display = "none";
+      xGetElementById("bg_color_area").style.display = "block";
+
+    // 테이블 변경 
+    } else {
+      var table_obj = xParent(selected_node);
+      while(table_obj && table_obj.nodeName != "TABLE") { table_obj = xParent(table_obj); }
+      if(!table_obj) xGetElementById("col_row_area").style.display = "block";
+      else {
+        xGetElementById("col_row_area").style.display = "none";
+
+        var width = table_obj.width.replace(/\%/,'');
+        var width_unit = table_obj.width.replace(/^([0-9]+)/,'');
+        if(!width_unit) xGetElementById("width_unit_pixel").checked = "true";
+        else xGetElementById("width_unit_percent").value = "true";
+
+        var border = table_obj.style.borderLeftWidth.replace(/px$/,'');
+        if(!border) border = 0;
+        var inner_border = table_obj.getAttribute("border");
+        if(!inner_border) inner_border = 0;
+        var cellspacing = table_obj.getAttribute("cellspacing");
+        if(!cellspacing) cellspacing = 0;
+        var cellpadding = table_obj.getAttribute("cellpadding");
+        if(!cellpadding) cellpadding = 1;
+
+        var border_color = table_obj.style.borderColor.replace(/^#/,'');
+        if(border_color.indexOf('rgb')>-1) {
+          var tmp_color = border_color.replace(/([a-z\(\) ]*)/ig,'').split(',');
+          border_color = xHex(tmp_color[0], 2, '')+xHex(tmp_color[1], 2, '')+xHex(tmp_color[2], 2, '');
+        }
+
+        var bg_color = table_obj.style.backgroundColor.replace(/^#/,'');
+        if(bg_color.indexOf('rgb')>-1) {
+          var tmp_color = bg_color.replace(/([a-z\(\) ]*)/ig,'').split(',');
+          bg_color = xHex(tmp_color[0], 2, '')+xHex(tmp_color[1], 2, '')+xHex(tmp_color[2], 2, '');
+        }
+      
+        xGetElementById("border_color_input").value = border_color;
+        manual_select_color("border", xGetElementById("border_color_input"))
+        xGetElementById("bg_color_input").value = bg_color;
+        manual_select_color("bg", xGetElementById("bg_color_input"))
+
+        xGetElementById("width").value = width;
+        xGetElementById("border").value = border;
+        xGetElementById("inner_border").value = inner_border;
+        xGetElementById("cellspacing").value = cellspacing;
+        xGetElementById("cellpadding").value = cellpadding
+      }
+      xGetElementById("table_attribute").style.display = "block";
+      xGetElementById("cell_attribute").style.display = "none";
+      xGetElementById("table_attribute_select").checked = true;
+      xGetElementById("border_color_area").style.display = "block";
+      xGetElementById("bg_color_area").style.display = "block";
+    }
+
+    setFixedPopupSize();
+}
+
+/* 추가 버튼 클릭시 부모창의 위지윅 에디터에 인용구 추가 */
+function insertTable() {
+    if(typeof(opener)=="undefined") return;
+
+    var table_obj = null;
+
+    if(selected_node) {
+      table_obj = xParent(selected_node);
+      while(table_obj && table_obj.nodeName != "TABLE") { table_obj = xParent(table_obj); }
+    }
+
+    // 테이블 생성일 경우
+    if(xGetElementById("table_attribute_select").checked && !table_obj) {
+      var cols_count = parseInt(xGetElementById("cols_count").value,10);
+      if(!cols_count) cols_count = 1;
+
+      var rows_count = parseInt(xGetElementById("rows_count").value,10);
+      if(!rows_count) rows_count = 1;
+
+      var width = parseInt(xGetElementById("width").value,10);
+      var width_unit = "%";
+      if(xGetElementById("width_unit_pixel").checked) width_unit = "";
+
+      var border = parseInt(xGetElementById("border").value,10);
+      var inner_border = parseInt(xGetElementById("inner_border").value,10);
+      var cellspacing = parseInt(xGetElementById("cellspacing").value,10);
+      var cellpadding = parseInt(xGetElementById("cellpadding").value,10);
+      var border_color = xGetElementById("border_color_input").value;
+      if(border_color.length!=6) border_color = "000000";
+
+      var bg_color = xGetElementById("bg_color_input").value;
+      if(bg_color.length!=6) bg_color = "FFFFFF";
+
+      var text = "";
+      text += "<table width=\""+width+width_unit+"\" border=\""+inner_border+"\" cellspacing=\""+cellspacing+"\" cellpadding=\""+cellpadding+"\" ";
+      if(border>0) text += " style=\"border:"+border+"px solid #"+border_color+";background-color:#"+bg_color+"\" ";
+      text +=">";
+
+      for(var row=0; row<rows_count;row++) {
+          text += "<tr valign=\"top\">";
+          for(var col=0; col<cols_count;col++) {
+              text += "<td>&nbsp;</td>";
+          }
+          text += "</tr>";
+      }
+      text += "</table>\n<br />";
+
+      opener.editorFocus(opener.editorPrevSrl);
+      var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)
+      opener.editorReplaceHTML(iframe_obj, text);
+      opener.editorFocus(opener.editorPrevSrl);
+
+    // 테이블 수정일 경우
+    } else if(xGetElementById("table_attribute_select").checked && table_obj) {
+      var width = parseInt(xGetElementById("width").value,10);
+      var width_unit = "%";
+      if(xGetElementById("width_unit_pixel").checked) width_unit = "px";
+      var border = parseInt(xGetElementById("border").value,10);
+      var inner_border = parseInt(xGetElementById("inner_border").value,10);
+      var cellspacing = parseInt(xGetElementById("cellspacing").value,10);
+      var cellpadding = parseInt(xGetElementById("cellpadding").value,10);
+      var border_color = xGetElementById("border_color_input").value;
+      if(border_color.length!=6) border_color = "000000";
+
+      var bg_color = xGetElementById("bg_color_input").value;
+      if(bg_color.length!=6) bg_color = "FFFFFF";
+
+      table_obj.style.width = width+width_unit;
+      if(width_unit=="px") table_obj.setAttribute("width", width);
+      else table_obj.setAttribute("width", width+width_unit);
+      table_obj.setAttribute("border", inner_border);
+      table_obj.setAttribute("cellspacing", cellspacing);
+      table_obj.setAttribute("cellpadding", cellpadding);
+      table_obj.style.border = border+"px solid #"+border_color;
+      table_obj.style.backgroundColor = "#"+bg_color;
+
+    // cell의 수정일 경우
+    } if(xGetElementById("cell_attribute_select").checked && selected_node) {
+      var cell_width = parseInt(xGetElementById("cell_width").value,10);
+      var cell_width_unit = "%";
+      if(xGetElementById("cell_width_unit_pixel").checked) cell_width_unit = "px";
+      var cell_height = parseInt(xGetElementById("cell_height").value,10);
+
+      var bg_color = xGetElementById("bg_color_input").value;
+      if(bg_color.length!=6) bg_color = "FFFFFF";
+
+      selected_node.style.width = cell_width+cell_width_unit;
+      selected_node.style.height = cell_height+"px";
+      selected_node.style.backgroundColor = "#"+bg_color;
+    }
+
+    window.close();
+}
+
+/* 색상 클릭시 */
+function select_color(type, code) {
+  xGetElementById(type+"_preview_color").style.backgroundColor = "#"+code;
+  xGetElementById(type+"_color_input").value = code;
+}
+
+/* 수동 색상 변경시 */
+function manual_select_color(type, obj) {
+  if(obj.value.length!=6) return;
+  code = obj.value;
+  xGetElementById(type+"_preview_color").style.backgroundColor = "#"+code;
+}
+
+/* 색상표를 출력 */
+function printColor(type, blank_img_src) {
+  var colorTable = new Array('22','44','66','88','AA','CC','EE');
+  var html = "";
+
+  for(var i=0;i<8;i+=1) html += printColorBlock(type, i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16), blank_img_src);
+
+  for(var i=0; i<colorTable.length; i+=3) {
+    for(var j=0; j<colorTable.length; j+=2) {
+      for(var k=0; k<colorTable.length; k++) {
+        var code = colorTable[i] + colorTable[j] + colorTable[k];
+        html += printColorBlock(type, code, blank_img_src);
+      }
+    }
+  }
+
+  for(var i=8;i<16;i+=1) html += printColorBlock(type, i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16), blank_img_src);
+
+  document.write(html);
+}
+
+/* 개별 색상 block 출력 함수 */
+function printColorBlock(type, code, blank_img_src) {
+  if(type=="bg") {
+    return "<div style=\"float:left;background-color:#"+code+"\"><img src=\""+blank_img_src+"\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"select_color('"+type+"','"+code+"')\" alt=\"color\" \/><\/div>";
+  } else {
+    return "<div style=\"float:left;background-color:#"+code+"\"><img src=\""+blank_img_src+"\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"select_color('"+type+"','"+code+"')\" alt=\"color\" \/><\/div>";
+  }
+}
+
+xAddEventListener(window, "load", getTable);
+