From 2a8c16d4f9a17722f035ebccc1c3794ac9fedb92 Mon Sep 17 00:00:00 2001
From: flyskyko <sinsy200@gmail.com>
Date: Mon, 5 Sep 2011 10:01:33 +0000
Subject: [PATCH] widget module

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@9031 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/module/module.admin.model.php         |  26 +-
 modules/widget/tpl/add_content_widget.html    |  54 ++-
 modules/widget/tpl/js/generate_code.js        | 212 ++++++++++--
 modules/widget/tpl/js/module_list.js          |  20 ++
 modules/widget/tpl/js/multi_order.js          |  14 +
 modules/widget/tpl/js/widget.js               |  25 +-
 .../tpl/widget_generate_code.filebox.html     |  33 ++
 modules/widget/tpl/widget_generate_code.html  | 164 +--------
 .../tpl/widget_generate_code.include.html     | 326 +++++++-----------
 .../tpl/widget_generate_code_in_page.html     |  55 +--
 .../widget_style_generate_code_in_page.html   | 172 +++++----
 modules/widget/widget.admin.view.php          |   3 +-
 modules/widget/widget.view.php                |   3 +-
 13 files changed, 550 insertions(+), 557 deletions(-)
 create mode 100644 modules/widget/tpl/widget_generate_code.filebox.html

diff --git a/modules/module/module.admin.model.php b/modules/module/module.admin.model.php
index 113db57ff..51faeada4 100644
--- a/modules/module/module.admin.model.php
+++ b/modules/module/module.admin.model.php
@@ -19,12 +19,16 @@
          * Used in the ModuleSelector
          **/
         function getModuleAdminModuleList() {
+			$oModuleController = &getController('module');
+			$oModuleModel = &getModel('module');
             $args->module_srls = Context::get('module_srls');
             $output = executeQueryArray('module.getModulesInfo', $args);
             if(!$output->toBool() || !$output->data) return new Object();
 
             foreach($output->data as $key => $val) {
-                $list[$val->module_srl] = array('module_srl'=>$val->module_srl,'mid'=>$val->mid,'browser_title'=>$val->browser_title);
+				$info_xml = $oModuleModel->getModuleInfoXml($val->module);
+				$oModuleController->replaceDefinedLangCode($val->browser_title);
+                $list[$val->module_srl] = array('module_srl'=>$val->module_srl,'mid'=>$val->mid,'browser_title'=>$val->browser_title, 'module_name' => $info_xml->title);
             }
             $modules = explode(',',$args->module_srls);
             for($i=0;$i<count($modules);$i++) {
@@ -170,7 +174,7 @@
         }
 
         /**
-         * @brief Return if the module language in ajax is requested 
+         * @brief Return if the module language in ajax is requested
          **/
         function getModuleAdminLangCode() {
             $name = Context::get('name');
@@ -182,17 +186,17 @@
         }
 
         /**
-         * @brief Return lang list 
+         * @brief Return lang list
          **/
 		function getModuleAdminLangListByName()
 		{
 			$args = Context::getRequestVars();
 			if(!$args->site_srl) $args->site_srl = 0;
-			
+
 			$columnList = array('lang_code', 'value');
 
 			$langList = array();
-			
+
 			$args->langName = preg_replace('/\$user_lang->/', '', $args->lang_name);
             $output = executeQueryArray('module.getLangListByName', $args, $columnList);
 			if($output->toBool()) $langList = $output->data;
@@ -202,16 +206,16 @@
 		}
 
         /**
-         * @brief Return lang list 
+         * @brief Return lang list
          **/
 		function getModuleAdminLangListByValue()
 		{
 			$args = Context::getRequestVars();
 			if(!$args->site_srl) $args->site_srl = 0;
-			
+
 
 			$langList = array();
-			
+
 			$args->value = $args->lang_name;
 
 			// search value
@@ -222,7 +226,7 @@
 				$args->langName = $output->data[0]->name;
 				$columnList = array('lang_code', 'value');
 				$output = executeQueryArray('module.getLangListByName', $args, $columnList);
-			
+
 				if($output->toBool()) $langList = $output->data;
 			}
 
@@ -230,7 +234,7 @@
 			$this->add('lang_name', $args->langName);
 		}
         /**
-         * @brief Return current lang list 
+         * @brief Return current lang list
          **/
 		function getLangListByLangcode($args)
 		{
@@ -241,7 +245,7 @@
 		}
 
         /**
-         * @brief Return current lang list 
+         * @brief Return current lang list
          **/
 		function getLangListByLangcodeForAutoComplete()
 		{
diff --git a/modules/widget/tpl/add_content_widget.html b/modules/widget/tpl/add_content_widget.html
index f2f273a76..9717ae071 100644
--- a/modules/widget/tpl/add_content_widget.html
+++ b/modules/widget/tpl/add_content_widget.html
@@ -1,35 +1,33 @@
-<!--%import("js/widget.js")-->
-<!--%import("css/widget.css")-->
+<load target="js/widget.js" />
+<load target="css/widget.css" />
 
-<div id="popHeader" class="wide">
-    <h3 class="xeAdmin">{$lang->cmd_content_insert}</h3>
-</div>
+<div class="x" style="padding: 0 10px;">
 
-<form action="./" method="get" onsubmit="return addContentWidget(this); return false;" id="content_fo">
-<input type="hidden" name="content" value="{$oDocument->getContentText()}" />
-<input type="hidden" name="mid" value="{$module_info->mid}" />
-<input type="hidden" name="module_srl" value="{$module_srl}" />
-<input type="hidden" name="document_srl" value="{$document_srl}" />
-<input type="hidden" name="style" value="float:left;padding:none;margin:none;width:100%;" />
-<input type="hidden" name="widget_padding_left" value="" />
-<input type="hidden" name="widget_padding_right" value="" />
-<input type="hidden" name="widget_padding_top" value="" />
-<input type="hidden" name="widget_padding_bottom" value="" />
+	<h2 class="h2">{$lang->cmd_content_insert}</h2>
 
-<div id="popBody">
-    <div class="pageAddContent"></div>
+	<form action="./" method="get" onsubmit="return addContentWidget(this); return false;" id="content_fo">
+		<input type="hidden" name="content" value="{$oDocument->getContentText()}" />
+		<input type="hidden" name="mid" value="{$module_info->mid}" />
+		<input type="hidden" name="module_srl" value="{$module_srl}" />
+		<input type="hidden" name="document_srl" value="{$document_srl}" />
+		<input type="hidden" name="style" value="float:left;padding:none;margin:none;width:100%;" />
+		<input type="hidden" name="widget_padding_left" value="" />
+		<input type="hidden" name="widget_padding_right" value="" />
+		<input type="hidden" name="widget_padding_top" value="" />
+		<input type="hidden" name="widget_padding_bottom" value="" />
 
-        <div class="editor">
-            {$editor}
-        </div>
+		<div class="pageAddContent"></div>
 
-    <script type="text/javascript">
-        xAddEventListener(window, 'load', doSyncPageContent);
-    </script>
-</div>
+		<div class="editor">
+			{$editor}
+		</div>
 
-<div id="popFooter">
-    <span class="button black strong"><input type="submit" value="{$lang->cmd_save}" class="editor_button" accesskey="s" /></span>
-</div>
+		<script type="text/javascript">
+			xAddEventListener(window, 'load', doSyncPageContent);
+		</script>
 
-</form>
+		<div class="btnArea">
+			<span class="btn small"><input type="submit" value="{$lang->cmd_save}" class="editor_button" accesskey="s" /></span>
+		</div>
+	</form>
+</div>
\ No newline at end of file
diff --git a/modules/widget/tpl/js/generate_code.js b/modules/widget/tpl/js/generate_code.js
index 1b49bef33..1f0f17027 100644
--- a/modules/widget/tpl/js/generate_code.js
+++ b/modules/widget/tpl/js/generate_code.js
@@ -1,4 +1,4 @@
-function doDisplaySkinColorset()
+function doDisplaySkinColorset(colorset)
 {
 	var skin = jQuery('select[name=skin]').val();
 	if(!skin) {
@@ -6,39 +6,39 @@ function doDisplaySkinColorset()
 		return;
 	}
 
+		function completeGetSkinColorset(ret_obj)
+		{
+			var sel = jQuery("select[name=colorset]").get(0);
+			var length = sel.options.length;
+			var selected_colorset = colorset;
+			for(var i=0;i<length;i++) sel.remove(0);
+
+			if(!ret_obj["colorset_list"]) return;
+
+			var colorset_list = ret_obj["colorset_list"].split("\n");
+			var selected_index = 0;
+			for(var i=0;i<colorset_list.length;i++) {
+				var tmp = colorset_list[i].split("|@|");
+				if(selected_colorset && selected_colorset==tmp[0]) selected_index = i;
+				var opt = new Option(tmp[1], tmp[0], false, false);
+				sel.options.add(opt);
+			}
+
+			sel.selectedIndex = selected_index;
+
+			doShowSkinColorset();
+		}
+
 	var params = new Array();
 	params["selected_widget"] = jQuery('input[name=selected_widget]').val();
 	params["skin"] = skin;
-	params["colorset"] = jQuery('select[name=colorset]').val();
+	params["colorset"] = colorset;
 
 	var response_tags = new Array("error","message","colorset_list");
 
 	exec_xml("widget", "procWidgetGetColorsetList", params, completeGetSkinColorset, response_tags, params);
 }
 
-function completeGetSkinColorset(ret_obj)
-{
-	var sel = jQuery("select[name=colorset]").get(0);
-	var length = sel.options.length;
-	var selected_colorset = jQuery('select[name=colorset]').val();
-	for(var i=0;i<length;i++) sel.remove(0);
-
-	if(!ret_obj["colorset_list"]) return;
-
-	var colorset_list = ret_obj["colorset_list"].split("\n");
-	var selected_index = 0;
-	for(var i=0;i<colorset_list.length;i++) {
-		var tmp = colorset_list[i].split("|@|");
-		if(selected_colorset && selected_colorset==tmp[0]) selected_index = i;
-		var opt = new Option(tmp[1], tmp[0], false, false);
-		sel.options.add(opt);
-	}
-
-	sel.selectedIndex = selected_index;
-
-	doShowSkinColorset();
-}
-
 function doHideSkinColorset()
 {
 	jQuery('select[name=colorset]').parents('li').hide();
@@ -49,6 +49,141 @@ function doShowSkinColorset()
 	jQuery('select[name=colorset]').parents('li').show();
 }
 
+function completeGenerateCodeInPage(widget_code) {
+    if(!opener || !widget_code) {
+        window.close();
+        return;
+    }
+
+    opener.doAddWidgetCode(widget_code);
+    window.close();
+}
+
+var selected_node = null;
+
+function getWidgetVars() {
+    if(!opener || !opener.selectedWidget || !opener.selectedWidget.getAttribute("widget")) return;
+    selected_node = opener.selectedWidget;
+
+    if(!xGetElementById('fo_widget').widgetstyle.value) {
+        xGetElementById('fo_widget').widgetstyle.value = selected_node.getAttribute('widgetstyle');
+    }
+
+    doFillWidgetVars();
+}
+
+function doFillWidgetVars() {
+    if(!opener || !opener.selectedWidget || !opener.selectedWidget.getAttribute("widget")) return;
+    selected_node = opener.selectedWidget;
+
+    // 스킨과 컬러셋은 기본
+    var skin = selected_node.getAttribute("skin");
+    var colorset = selected_node.getAttribute("colorset");
+    var widget_sequence = parseInt(selected_node.getAttribute("widget_sequence"),10);
+
+    var fo_widget = jQuery("#fo_widget");
+    var fo_obj = xGetElementById("fo_widget");
+    jQuery('#widget_skin').val(skin);
+
+    // 위젯 스타일 유지를 위한 hidden input 추가하고 값을 저장
+    var attrs = selected_node.attributes;
+    for (i=0; i< attrs.length ; i++){
+        var name = attrs[i].name;
+        var value = jQuery(selected_node).attr(name);
+        if(value=='Array') continue;
+        if(jQuery("[name="+name+"]",fo_widget).size()>0 || !value || name == 'style') continue;
+
+        var dummy = jQuery('<input type="hidden" name="'+name+'" >').val(value).appendTo("#fo_widget").get(0);
+    }
+
+    // 위젯의 속성 설정
+    var obj_list = new Array();
+    jQuery('input,select,textarea','#fo_widget').each( function() {
+            obj_list.push(this);
+    });
+
+    for(var j=0;j<obj_list.length;j++) {
+        var node = obj_list[j];
+        if(node.name.indexOf('_')==0) continue;
+        if(node.name == 'widgetstyle') continue;
+
+        var length = node.length;
+        var type = node.type;
+        if((typeof(type)=='undefined'||!type) && typeof(length)!='undefined' && typeof(node[0])!='undefined' && length>0) type = node[0].type;
+        else length = 0;
+        var name = node.name;
+
+        switch(type) {
+            case "hidden" :
+            case "text" :
+            case "textarea" :
+                    var val = selected_node.getAttribute(name);
+                    if(!val) continue;
+                    var unescaped_val = unescape(val);
+                    if(!unescaped_val) node.value = val;
+                    else node.value = unescaped_val;
+                break;
+            case "checkbox" :
+                    if(selected_node.getAttribute(name)) {
+                        var val = selected_node.getAttribute(name).split(',');
+                        if(fo_obj[name].length) {
+                            for(var i=0;i<fo_obj[name].length;i++) {
+                                var v = fo_obj[name][i].value;
+                                for(var k=0;k<val.length;k++) {
+                                    if(v == val[k]) {
+                                        fo_obj[name][i].checked=true;
+                                        break;
+                                    }
+                                }
+                            }
+                        } else {
+                            if(fo_obj[name].value == val) fo_obj[name].checked =true;
+                        }
+                    }
+                break;
+            case "select" :
+            case "select-one" :
+                    var val = selected_node.getAttribute(name);
+                    var sel = fo_obj[name];
+                    if(!val) break;
+                    for(var i=0;i<sel.options.length;i++) {
+                        if(sel.options[i].value == val) sel.options[i].selected = true;
+                        else sel.options[i].selected = false;
+                    }
+                break;
+        }
+
+    }
+
+    var style = selected_node.getAttribute("style");
+    if(typeof(style)=="object") style = style["cssText"];
+    fo_obj.style.value = style;
+
+    fo_obj.widget_padding_left.value = selected_node.getAttribute("widget_padding_left");
+    fo_obj.widget_padding_right.value = selected_node.getAttribute("widget_padding_right");
+    fo_obj.widget_padding_bottom.value = selected_node.getAttribute("widget_padding_bottom");
+    fo_obj.widget_padding_top.value = selected_node.getAttribute("widget_padding_top");
+
+
+    //  컬러셋 설정
+    if(skin && xGetElementById("widget_colorset") && xGetElementById("widget_colorset").options.length<1 && colorset) {
+        doDisplaySkinColorset(colorset);
+    }
+
+    // widget sequence 설정
+    fo_obj.widget_sequence.value = widget_sequence;
+
+	xe.broadcast('MULTIORDER_SYNC');
+	xe.broadcast('MODULELIST_SYNC');
+
+	jQuery('.filebox')
+		.each(function(){
+			var $this = jQuery(this);
+			var src = $this.siblings('input').eq(0).val();
+			if (src) $this.trigger('filebox.selected', [src]);
+		})
+}
+
 var $current_filebox;
 
 jQuery(document).ready(function($){
@@ -69,7 +204,7 @@ jQuery(document).ready(function($){
 			})
 			.remove();
 
-		$(this).before('<img src="'+src+'" alt="" style="border: 1px solid #ccc; padding: 5px; max-height: 200px;"> <button class="filebox_del text" type="button">'+xe.lang.cmd_delete+'</button>');
+		$(this).before('<img src="'+src+'" alt="" style="border: 1px solid #ccc; padding: 5px; max-height: 200px; max-width: 200px;"> <button class="filebox_del text" type="button">'+xe.lang.cmd_delete+'</button>');
 
 		$(this).siblings('input').val(src);
 
@@ -133,4 +268,29 @@ jQuery(document).ready(function($){
 
 		return false;
 	});
+
+	$('#fo_widget').bind('submit', function(){
+		function on_complete(data){
+			if (data.error){
+				alert(data.message);
+				return;
+			}
+
+			completeGenerateCodeInPage(data.widget_code);
+		}
+
+		var datas = $(this).serializeArray();
+		var params = new Object();
+		for(var i in datas){
+			var data = datas[i];
+
+			if(/\[\]$/.test(data.name)) data.name = data.name.replace(/\[\]$/, '');
+			if(params[data.name]) params[data.name] += '|@|' + data.value;
+			else params[data.name] = data.value;
+		}
+
+		$.exec_json('widget.procWidgetGenerateCodeInPage', params, on_complete);
+
+		return false;
+	});
 });
\ No newline at end of file
diff --git a/modules/widget/tpl/js/module_list.js b/modules/widget/tpl/js/module_list.js
index d6b8e170e..01623825d 100644
--- a/modules/widget/tpl/js/module_list.js
+++ b/modules/widget/tpl/js/module_list.js
@@ -23,6 +23,8 @@ xe.ModuleListManager = xe.createApp("ModuleListManager", {
 			.bind('show', function(){
 				$(this).nextAll().show();
 			});
+
+		this.cast('MODULELIST_SYNC');
 	},
 
 	API_MODULELIST_ADD: function(){
@@ -54,6 +56,24 @@ xe.ModuleListManager = xe.createApp("ModuleListManager", {
 		this.refreshValue();
 	},
 
+	API_MODULELIST_SYNC: function(){
+		var values = this.$keyObj.val();
+		if (!values) return;
+
+		var self = this;
+		function on_complete(data){
+			if (data.error) return;
+
+			for(var i in data.module_list){
+				var module = data.module_list[i];
+				var obj = $(document.createElement('option'));
+				obj.val(module.module_srl).html(module.browser_title+' ('+module.module_name+')').appendTo(self.$selectedObj);
+			}
+		}
+
+		$.exec_json('module.getModuleAdminModuleList', {'module_srls': values}, on_complete);
+	},
+
 	removeDuplicated : function() {
 		var selected = {};
 		this.$selectedObj.find('>option').each(function(){
diff --git a/modules/widget/tpl/js/multi_order.js b/modules/widget/tpl/js/multi_order.js
index 73dc60bdf..d37f51d2c 100644
--- a/modules/widget/tpl/js/multi_order.js
+++ b/modules/widget/tpl/js/multi_order.js
@@ -17,6 +17,8 @@ xe.MultiOrderManager = xe.createApp("MultiOrderManager", {
 				.filter('.multiorder_del').bind('click', function(){ self.cast('MULTIORDER_DEL'); return false; }).end()
 				.filter('.multiorder_up').bind('click', function(){ self.cast('MULTIORDER_UP'); return false; }).end()
 				.filter('.multiorder_down').bind('click', function(){ self.cast('MULTIORDER_DOWN'); return false; }).end()
+
+		this.cast('MULTIORDER_SYNC');
 	},
 
 	API_MULTIORDER_ADD: function(){
@@ -47,6 +49,18 @@ xe.MultiOrderManager = xe.createApp("MultiOrderManager", {
 		this.refreshValue();
 	},
 
+	API_MULTIORDER_SYNC: function(){
+		var values = this.$keyObj.val().split(',');
+		this.$selectedObj.find('>option').appendTo(this.$showObj);
+
+		var targets = [];
+		for(var i in values){
+			var target = this.$showObj.find('>option[value='+values[i]+']').get(0);
+			if (target != undefined) targets.push(target);
+		}
+		$(targets).appendTo(this.$selectedObj);
+	},
+
 	refreshValue : function() {
 		var values = [];
 
diff --git a/modules/widget/tpl/js/widget.js b/modules/widget/tpl/js/widget.js
index c4a2404c7..b29ced3ac 100644
--- a/modules/widget/tpl/js/widget.js
+++ b/modules/widget/tpl/js/widget.js
@@ -64,7 +64,7 @@ function doStartPageModify(zoneID, module_srl) {
 // 내용 모두 삭제
 function removeAllWidget() {
     if(!confirm(confirm_delete_msg)) return;
-	restoreWidgetButtons(); 
+	restoreWidgetButtons();
 	xInnerHtml(zonePageObj,'');
 }
 
@@ -215,7 +215,7 @@ function getWidgetCode(childObj, widget) {
 // 팝업 띄움
 function doAddContent(mid) {
     var url = request_uri.setQuery('module','widget').setQuery('act','dispWidgetAdminAddContent').setQuery('module_srl',zoneModuleSrl).setQuery('mid',mid);
-    popopen(url, "addContent");
+	window.open(url,'addContent', 'location=0, menubar=0, toolbar=0, scrollbars=1');
 }
 
 // 직접 내용을 입력하기 위한 에디터 활성화 작업 및 form 데이터 입력
@@ -250,7 +250,7 @@ function doSyncPageContent() {
     if(typeof(editorStart)!='undefined') editorStart(1, "module_srl", "content", false, 400 );
     //editor_upload_start(1);
 
-    setFixedPopupSize();
+    //setFixedPopupSize();
 }
 
 // 부모창에 위젯을 추가
@@ -332,7 +332,8 @@ function doAddWidget(fo) {
     var module_srl = fo.module_srl.value;
 
     var url = request_uri.setQuery('module','widget').setQuery('act','dispWidgetGenerateCodeInPage').setQuery('selected_widget', val).setQuery('module_srl', module_srl);
-    popopen(url,'GenerateWidgetCode');
+    //popopen(url,'GenerateWidgetCode');
+	window.open(url, 'GenerateWidgetCode', 'location=0, menubar=0, toolbar=0, scrollbars=1');
 }
 
 
@@ -492,8 +493,8 @@ function doCheckWidget(e) {
         var widget = p_obj.getAttribute("widget");
         if(!widget) return;
         selectedWidget = p_obj;
-        if(widget == 'widgetContent') popopen(request_uri+"?module=widget&act=dispWidgetAdminAddContent&module_srl="+zoneModuleSrl+"&document_srl="+p_obj.getAttribute("document_srl")+'&mid='+current_mid, "addContent");
-        else popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&widgetstyle="+widgetstyle,'GenerateCodeInPage');
+        if(widget == 'widgetContent') window.open(request_uri+"?module=widget&act=dispWidgetAdminAddContent&module_srl="+zoneModuleSrl+"&document_srl="+p_obj.getAttribute("document_srl")+'&mid='+current_mid, "addContent", 'location=0, menubar=0, toolbar=0, scrollbars=1');
+        else window.open(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&widgetstyle="+widgetstyle,'GenerateCodeInPage', 'location=0, menubar=0, toolbar=0, scrollbars=1');
         return;
 
     // 위젯 스타일
@@ -503,7 +504,7 @@ function doCheckWidget(e) {
         var widgetstyle = p_obj.getAttribute("widgetstyle");
         if(!widget) return;
         selectedWidget = p_obj;
-        popopen(request_uri+"?module=widget&act=dispWidgetStyleGenerateCodeInPage&selected_widget="+widget+"&widgetstyle="+widgetstyle,'GenerateCodeInPage');
+        window.open(request_uri+"?module=widget&act=dispWidgetStyleGenerateCodeInPage&selected_widget="+widget+"&widgetstyle="+widgetstyle,'GenerateCodeInPage', 'location=0, menubar=0, toolbar=0, scrollbars=1');
         return;
 
     // 위젯 복사
@@ -651,21 +652,21 @@ function doShowWidgetSizeSetup(px, py, obj) {
 
 		width  : obj[0].style.width,
 		height : obj[0].style.height,
-		
+
 		padding_left   : _getInt(obj.attr('widget_padding_left')),
 		padding_right  : _getInt(obj.attr('widget_padding_right')),
 		padding_top    : _getInt(obj.attr('widget_padding_top')),
 		padding_bottom : _getInt(obj.attr('widget_padding_bottom')),
-		
+
 		margin_left    : _getInt(obj[0].style.marginLeft),
 		margin_right   : _getInt(obj[0].style.marginRight),
 		margin_top     : _getInt(obj[0].style.marginTop),
 		margin_bottom  : _getInt(obj[0].style.marginBottom),
-		
+
 		border_top_color : transRGB2Hex(obj[0].style.borderTopColor),
 		border_top_thick : obj[0].style.borderTopWidth.replace(/px$/i, ''),
 		border_top_type  : obj[0].style.borderTopStyle,
-		
+
 		border_bottom_color : transRGB2Hex(obj[0].style.borderBottomColor),
 		border_bottom_thick : obj[0].style.borderBottomWidth.replace(/px$/i, ''),
 		border_bottom_type  : obj[0].style.borderBottomStyle,
@@ -708,7 +709,7 @@ function doShowWidgetSizeSetup(px, py, obj) {
 		var el = form[0].elements[key];
 		if (el) el.value = val;
         if (el.tagName.toLowerCase() == "select")
-        { 
+        {
             if(el.selectedIndex == -1) {
                 el.selectedIndex = 0;
             }
diff --git a/modules/widget/tpl/widget_generate_code.filebox.html b/modules/widget/tpl/widget_generate_code.filebox.html
new file mode 100644
index 000000000..f5db82e21
--- /dev/null
+++ b/modules/widget/tpl/widget_generate_code.filebox.html
@@ -0,0 +1,33 @@
+<script type="text/javascript">
+	xe.lang.cmd_delete = '{$lang->cmd_delete}';
+</script>
+
+<style type="text/css">
+	.filebox_item { border: 1px solid #ccc!important; padding: 5px; max-height: 200px; max-width: 200px; }
+</style>
+
+<div class="modal" id="modalFilebox">
+	<div class="fg portlet">
+		<h2 class="h2">FileBox</h2>
+		<div class="filebox_list"></div>
+		<h2 class="h2">Upload</h2>
+		<form id="filebox_upload" class="form" action="./" method="post" enctype="multipart/form-data">
+		<input type="hidden" name="module" value="module" />
+		<input type="hidden" name="act" value="procModuleFileBoxAdd" />
+		<input type="hidden" name="ajax" value="true" />
+			<ul>
+				<li>
+					<p class="q"><label for="comment">{$lang->description}</label></p>
+					<p class="a"><input type="text" name="comment" id="comment" value="" /></p>
+				</li>
+				<li>
+					<p class="q"><label for="addfile">{$lang->file}</label></p>
+					<p class="a"><input type="file" name="addfile" id="addfile" /></p>
+				</li>
+			</ul>
+			<div class="btnArea">
+				<span class="btn small"><input type="submit" value="{$lang->cmd_submit}" /></span>
+			</div>
+		</form>
+	</div>
+</div>
\ No newline at end of file
diff --git a/modules/widget/tpl/widget_generate_code.html b/modules/widget/tpl/widget_generate_code.html
index f1d4d4ced..a6cc1ce9d 100644
--- a/modules/widget/tpl/widget_generate_code.html
+++ b/modules/widget/tpl/widget_generate_code.html
@@ -1,16 +1,5 @@
 <include cond="$in_admin" target="header.html" />
 <load target="js/generate_code.js" />
-<load target="js/multi_order.js" />
-<load target="js/module_list.js" />
-<!--%load_js_plugin("ui.colorpicker")-->
-
-<script type="text/javascript">
-	xe.lang.cmd_delete = '{$lang->cmd_delete}';
-</script>
-
-<style type="text/css">
-	.filebox_item { border: 1px solid #ccc!important; padding: 5px; max-height: 200px; }
-</style>
 
 <h2 class="h2">{$widget_info->title}</h2>
 <p>{$widget_info->description}</p>
@@ -21,131 +10,8 @@
 
 	<h3 class="h3">{$lang->cmd_generate_code}</h3>
 	<p>{$lang->about_widget_code}</p>
-	<ul>
-		<li>
-			<p class="q"><label for="skin">{$lang->skin}</label></p>
-			<a class="a">
-				<select name="skin" id="skin" style="width:280px">
-					<option value="">{$lang->select}</option>
-					<option loop="$skin_list => $skin_name, $skin" value="{$skin_name}">{$skin->title} ({$skin_name})</option>
-				</select>
-				<input type="button" value="{$lang->cmd_select}" />
-			</a>
-		</li>
-		<li>
-			<p class="q"><label for="colorset">{$lang->colorset}</label></p>
-			<p class="a">
-				<select name="colorset" style="width:280px">
-				</select>
-			</p>
-		</li>
-		<li>
-			<p class="q"><label for="widget_cache">{$lang->widget_cache}</label></p>
-			<p class="a">
-				<input type="text" name="widget_cache" id="widget_cache" value="0" size="2" style="width:auto" /> {$lang->unit_min}
-				({$lang->about_widget_cache})
-			</p>
-		</li>
-	</ul>
-	{@$suggestion_id = 0}
-	<block loop="$widget_info->extra_var => $id, $var">
-		{@$suggestion_id++}
-		<block cond="!$not_first && !$var->group"><ul></block>
-		<block cond="$group != $var->group">
-			<block cond="$not_first"></ul></block>
-			<h3 class="h3">{$var->group}</h3>
-			<ul>
-			{@$group = $var->group}
-		</block>
-		{@$not_first = true}
-		<li class="modulefinder"|cond="$var->type == 'mid' || $var->type == 'module_srl_list'">
-			<p class="q"><label for="{$id}">{$var->name}</label></p>
-			<div class="a">
-				<input cond="$var->type == 'text'" type="text" name="{$id}" value="" id="{$id}" />
-				<input cond="$var->type == 'color'" type="text" name="{$id}" value="" id="{$id}" class="color-indicator" />
-				<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}"></textarea>
-				<select cond="$var->type == 'select'" name="{$id}" id="{$id}" style="width:290px">
-					<option loop="$var->options => $key, $val" value="{$key}">{$val}</option>
-				</select>
-				<block cond="$var->type == 'select-multi-order'">
-					{@$inits = array_keys($var->init_options)}
-					<input type="hidden" name="{$id}" value="{implode(',', $inits)}" />
-					<select class="multiorder_show" size="8" multiple="multiple" style="width:290px;vertical-align:top">
-						<option loop="$var->options => $key, $val" cond="!$var->init_options[$key]" value="{$key}" default="true"|cond="$var->default_options[$key]">{$val}</option>
-					</select>
-					<button type="button" class="text multiorder_add" style="vertical-align:top">{$lang->cmd_insert}</button>
-					<select class="multiorder_selected" size="8" multiple="multiple" style="width:290px;vertical-align:top">
-						<option loop="$var->options => $key, $val" cond="$var->init_options[$key]" value="{$key}" default="true"|cond="$var->default_options[$key]">{$val}</option>
-					</select>
-					<button type="button" class="text multiorder_up" style="vertical-align:top">{$lang->cmd_move_up}</button>
-					<button type="button" class="text multiorder_down" style="vertical-align:top">{$lang->cmd_move_down}</button>
-					<button type="button" class="text multiorder_del" style="vertical-align:top">{$lang->cmd_delete}</button>
-					<script type="text/javascript">
-						xe.registerApp(new xe.MultiOrderManager('{$id}'));
-					</script>
-				</block>
-				<block cond="$var->type == 'mid_list'">
-					<fieldset loop="$mid_list => $module_category_srl, $modules" style="border: 1px solid #ccc; margin:1em 0; padding:.5em 1em">
-						<legend cond="$modules->title">{$modules->title}</legend>
-						<legend cond="!$modules->title">{$lang->none_category}</legend>
-						<div loop="$modules->list => $key, $val">
-							<input type="checkbox" value="{$key}" name="{$id}[]" id="chk_mid_list_{$key}" />
-							<label for="chk_mid_list_{$key}">{$key} ({$val->browser_title})</label>
-						</div>
-					</fieldset>
-				</block>
-				<block cond="$var->type == 'member_group'">
-					<block loop="$group_list => $key, $val">
-						<input type="checkbox" value="{$key}" name="{$id}[]" id="chk_member_gruop_{$id}_{$key}" />
-						<label for="chk_member_gruop_{$id}_{$key}">{$val->title}</label>
-					</block>
-				</block>
-				<block cond="$var->type == 'module_srl_list'">
-					<input type="hidden" name="{$id}" value="" />
-					<div class="a">
-						<input type="text" /> <a href="#suggestion_{$suggestion_id}" class="tgAnchor findsite">{$lang->find_site}</a>
-						<div id="suggestion_{$suggestion_id}" class="tgContent suggestion">
-							<ul>
-							</ul>
-						</div>
-					</div>
-					<p class="a">
-						<select class="moduleList" style="width:290px"></select>
-					</p>
-					<select class="moduleIdList" size="8" multiple="multiple" style="width:290px;vertical-align:top"></select>
-					<button type="button" class="text modulelist_add" style="vertical-align:top">{$lang->cmd_insert}</button>
-					<select class="modulelist_selected" size="8" multiple="multiple" style="width:290px;"></select>
-					<button type="button" class="text modulelist_up" style="vertical-align:top">{$lang->cmd_move_up}</button>
-					<button type="button" class="text modulelist_down" style="vertical-align:top">{$lang->cmd_move_down}</button>
-					<button type="button" class="text modulelist_del" style="vertical-align:top">{$lang->cmd_delete}</button>
-					<script type="text/javascript">
-						xe.registerApp(new xe.ModuleListManager('{$id}'));
-					</script>
-				</block>
-				<block cond="$var->type == 'mid'">
-					<div class="a">
-						<input type="text" /> <a href="#suggestion_{$suggestion_id}" class="tgAnchor findsite">{$lang->find_site}</a>
-						<div id="suggestion_{$suggestion_id}" class="tgContent suggestion">
-							<ul>
-							</ul>
-						</div>
-					</div>
-					<p class="a"><select class="moduleList" style="width:290px;"></select></p>
-					<p class="a"><select name="{$id}" class="moduleIdList" style="width:290px;"></select></p>
-				</block>
-				<block cond="$var->type == 'filebox'">
-					<input type="hidden" name="{$id}" />
-					<a class="modalAnchor filebox" href="#modalFilebox">{$lang->cmd_select}</a>
-				</block>
-				<select cond="$var->type == 'menu'" name="{$id}" style="width:290px">
-					<option value="">-</option>
-					<option loop="$menu_list => $key, $val" value="{$val->menu_srl}">{$val->title}</option>
-				</select>
-			</div>
-			<p class="desc">{$var->description}</p>
-		</li>
-	</block>
-	</ul>
+	<include target="widget_generate_code.include.html" />
+
 	<div class="btnArea">
 		<span class="btn small"><input type="submit" value="{$lang->cmd_generate_code}" /></span>
 	</div>
@@ -154,28 +20,4 @@
 <h3 class="h3">{$lang->widget_code}</h3>
 <p><textarea id="widget_code" style="width: 100%; height: 50px;" readonly="readonly"></textarea>
 
-<div class="modal" id="modalFilebox">
-	<div class="fg portlet">
-		<h2 class="h2">FileBox</h2>
-		<div class="filebox_list"></div>
-		<h2 class="h2">Upload</h2>
-		<form id="filebox_upload" class="form" action="./" method="post" enctype="multipart/form-data">
-		<input type="hidden" name="module" value="module" />
-		<input type="hidden" name="act" value="procModuleFileBoxAdd" />
-		<input type="hidden" name="ajax" value="true" />
-			<ul>
-				<li>
-					<p class="q"><label for="comment">{$lang->description}</label></p>
-					<p class="a"><input type="text" name="comment" id="comment" value="" /></p>
-				</li>
-				<li>
-					<p class="q"><label for="addfile">{$lang->file}</label></p>
-					<p class="a"><input type="file" name="addfile" id="addfile" /></p>
-				</li>
-			</ul>
-			<div class="btnArea">
-				<span class="btn small"><input type="submit" value="{$lang->cmd_submit}" /></span>
-			</div>
-		</form>
-	</div>
-</div>
\ No newline at end of file
+<include target="widget_generate_code.filebox.html" />
\ No newline at end of file
diff --git a/modules/widget/tpl/widget_generate_code.include.html b/modules/widget/tpl/widget_generate_code.include.html
index 09e6692aa..3c3803396 100644
--- a/modules/widget/tpl/widget_generate_code.include.html
+++ b/modules/widget/tpl/widget_generate_code.include.html
@@ -1,201 +1,129 @@
+<load target="js/multi_order.js" />
+<load target="js/module_list.js" />
 <!--%load_js_plugin("ui.colorpicker")-->
-<!--%load_js_plugin("filebox")-->
-<!--%import("./js/widget.js")-->
-<p class="summary">{nl2br($_caption)}</p>
-<table cellspacing="0" class="rowTable">
-<tr>
-    <th scope="row"><div>{$lang->widget}</div></th>
-    <td>
-        <select name="selected_widget" class="fullWidth">
-        <!--@foreach($widget_list as $widget)-->
-        <option value="{$widget->widget}" <!--@if($widget_info->widget == $widget->widget)--> selected="selected" <!--@end-->>{$widget->title} ver {$widget->version}</option>
-        <!--@end-->
-        </select>
-        <a href="#" class="button small" onclick="selectWidget(jQuery('select[name=selected_widget]').val())"><span>{$lang->cmd_select}</span></a>
-        <!--@if($widget_info->author->description)-->
-        <div class="widget_description">{nl2br(trim($widget_info->author->description))}</div>
-        <!--@end-->
-    </td>
-</tr>
-<!--@if(count($skin_list))-->
-<tr>
-    <th scope="row"><div>{$lang->skin}</div></th>
-    <td>
-        <select name="skin" id="widget_skin" class="fullWidth">
-            <option value="">&nbsp;</option>
-        <!--@foreach($skin_list as $key => $val)-->
-            <option value="{$key}">{$val->title} ({$key})</option>
-        <!--@end-->
-        </select>
-<a href="#" class="button small" onclick="doDisplaySkinColorset(jQuery('#widget_skin').get(0))"><span>{$lang->cmd_select}</span></a>
-        <div id="colorset_area" style="display:none">
-            <div class="header">{$lang->colorset}</div>
-            <div class="footer">
-                <select name="colorset" id="widget_colorset">
-                </select>
-            </div>
-        </div>
-    </td>
-</tr>
-<!--@end-->
-<tr>
-    <th scope="row"><div>{$lang->widget_cache}</div></th>
-    <td>
-        <input type="text" name="widget_cache" value="0" class="inputTypeText" size="2" />{$lang->unit_min}
-        <p>{$lang->about_widget_cache}</p>
-    </td>
-</tr>
-<!--@foreach($widget_info->extra_var as $id => $var)-->
 
-<!--@if($var->group && ((!$group) || $group != $var->group))-->
-{@$group = $var->group}
-</table>
-
-
-<h3 class="xeAdmin">{$group}</h3>
-<table cellspacing="0" class="rowTable">
-<!--@end-->
-<tr class="row{$cycle_idx}">
-    <th scope="row">
-        <div>
-            {$var->name}
-            <!--@if($var->type == "mid_list")-->
-                <input type="checkbox" onclick="XE.checkboxToggleAll('{$id}'); return false;" />
-            <!--@end-->
-        </div>
-    </th>
-    <td>
-        <!--@if($var->type == "text")-->
-        <input type="text" name="{$id}" value="" class="inputTypeText fullWidth" id="lang_{$id}"/>
-        <a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','lang_'.$id)}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
-
-        <!--@elseif($var->type == "color")-->
-        <input type="text" name="{$id}" value="" class="inputTypeText color-indicator" />
-
-        <!--@elseif($var->type == "textarea")-->
-        <textarea name="{$id}" class="inputTypeTextArea fullWidth" id="lang_{$id}"></textarea>
-        <a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','lang_'.$id)}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
-
-        <!--@elseif($var->type == "select")-->
-        <select name="{$id}">
-            <!--@foreach($var->options as $key => $val)-->
-            <option value="{$key}">{$val}</option>
-            <!--@end-->
-        </select>
-
-
-
-        <!--@elseif($var->type == "select-multi-order")-->
-        <input type="hidden" name="{$id}" value="" />
-        <input type="hidden" name="default_{$id}" value="" />
-        <input type="hidden" name="init_{$id}" value="" />
-
-        <div style="float:left;margin-left:30px;">
-            <select name="show_{$id}" size="8" class="w100">
-                <!--@foreach($var->options as $key => $val)-->
-                <option value="{$key}">{$key}</option>
-                <!--@end-->
-            </select>
-        </div>
-        <div style="float:left;margin-left:30px;">
-            <a class="buttonSet buttonRight" onclick="MultiOrderAdd('{$id}'); return false;" href="#"></a>
-            <br/><br/>
-            <a class="buttonSet buttonLeft" onclick="MultiOrderDelete('{$id}'); return false;" href="#"></a>
-            <br/><br/>
-            <a class="buttonSet buttonUp" onclick="MultiOrderUp('{$id}'); return false;" href="#"></a>
-            <br/><br/>
-            <a class="buttonSet buttonDown" onclick="MultiOrderDown('{$id}'); return false;" href="#"></a>
-        </div>
-
-
-        <div style="float:left;margin-left:30px;">
-            <select name="selected_{$id}" name="selected_{$id}" size="8" class="w100">
-            </select>
-        </div>
-
-
-        <script type="text/javascript">
-            <!--@foreach($var->options as $key => $val)-->
-                <!--@if($var->default_options[$key] == true)-->
-                    jQuery("[name='default_{$id}']").get(0).value += '{$key},';
-                <!--@end-->
-
-                <!--@if($var->init_options[$key] == true)-->
-                    jQuery("[name='init_{$id}']").get(0).value += ','+'{$key}';
-                <!--@end-->
-
-            <!--@end-->
-
-            if(typeof(initMultiOrder)!=='undefined') {
-                doAddWindowLoadEventLoader( function() { initMultiOrder('{$id}'); } );
-            }
-//            MultiOrderSet('{$id}');
-        </script>
-        <!--@elseif($var->type == "mid_list")-->
-
-            <!--@foreach($mid_list as $module_category_srl => $modules)-->
-                <!--@if($modules->title)-->
-                    <div class="widget_title">{$modules->title}</div>
-                <!--@else-->
-                    <div class="widget_title">{$lang->none_category}</div>
-                <!--@end-->
-
-                <!--@foreach($modules->list as $key => $val)-->
-                    <div class="widget_mid_list">
-                        <input type="checkbox" value="{$key}" name="{$id}" id="chk_mid_list_{$key}" />
-                        <label for="chk_mid_list_{$key}">{$key} ({$val->browser_title})</label>
-                    </div>
-                <!--@end-->
-            <!--@end-->
-        <!--@elseif($var->type == "member_group")-->
-
-            <!--@foreach($group_list as $key => $val)-->
-                <input type="checkbox" value="{$key}" name="{$id}" id="chk_member_gruop_{$id}_{$key}" />
-                <label for="chk_member_gruop_{$id}_{$key}">{$val->title}</label>
-            <!--@end-->
-
-        <!--@elseif($var->type == "module_srl_list")-->
-            <input type="hidden" name="{$id}" id="{$id}" value="" />
-            <select name="_{$id}" id="_{$id}" size="8" class="w200 fl"></select>
-            <ul class="midCommand">
-                <li><a href="{getUrl('','module','module','act','dispModuleSelectList','id',$id)}" onclick="popopen(this.href, 'ModuleSelect');return false;" class="button blue"><span>{$lang->cmd_insert}</span></a></li>
-                <li><a href="#" onclick="midMoveUp('{$id}');return false;" class="button black"><span>{$lang->cmd_move_up}</span></a></li>
-                <li><a href="#" onclick="midMoveDown('{$id}');return false;" class="button black"><span>{$lang->cmd_move_down}</span></a></li>
-                <li><a href="#" onclick="midRemove('{$id}');return false;" class="button red"><span>{$lang->cmd_delete}</span></a></li>
-            </ul>
-            <script type="text/javascript">
-                if(typeof(getModuleSrlList)!=='undefined') {
-                    doAddWindowLoadEventLoader( function() { getModuleSrlList('{$id}'); } );
-                }
-            </script>
-        <!--@elseif($var->type == "mid")-->
-            <input type="hidden" name="{$id}" id="{$id}" value="" />
-            <input type="text" name="_{$id}" id="_{$id}" value="" class="inputTypeText w300" readonly="readonly"/><a href="{getUrl('','module','module','act','dispModuleSelectList','id',$id,'type','single')}" onclick="popopen(this.href, 'ModuleSelect');return false;" class="button blue"><span>{$lang->cmd_select}</span></a>
-            <script type="text/javascript">
-                if(typeof(getModuleSrlList)!=='undefined') {
-                    doAddWindowLoadEventLoader( function() { getModuleSrl('{$id}'); });
-                }
-            </script>
-        <!--@elseif($var->type == "filebox")-->
-            <div id="filebox_preview_{$id}" style="width:100px;height:100px;display:none" ></div>
-            <input type="hidden" name="{$id}" value="" />
-            <span class="button black"><button type="button" onclick="XE.filebox.open(jQuery('[name={$id}]', '#fo_widget').get(0), '{$var->filter}')">{$lang->cmd_select}</button></span>
-            <span id="filebox_cancel_{$id}" class="button red" style="display:none" ><button type="button" onclick="XE.filebox.cancel('{$id}')">{$lang->cmd_delete}</button></span>
-            <script type="text/javascript">//<![CDATA[
-                XE.filebox.init('{$id}');
-            //]]></script>
-
-
-        <!--@elseif($var->type == "menu")-->
-            <select name="{$id}" class="w300 fl">
-                <option value="">-</option>
-                <!--@foreach($menu_list as $key => $val)-->
-                <option value="{$val->menu_srl}">{$val->title}</option>
-                <!--@end-->
-            </select>
-        <!--@end-->
-        <p class="clear">{nl2br($var->description)}</p>
-    </td>
-</tr>
-<!--@end-->
-</table>
+<ul>
+	<li>
+		<p class="q"><label for="skin">{$lang->skin}</label></p>
+		<a class="a">
+			<select name="skin" id="skin" style="width:280px">
+				<option value="">{$lang->select}</option>
+				<option loop="$skin_list => $skin_name, $skin" value="{$skin_name}">{$skin->title} ({$skin_name})</option>
+			</select>
+			<input type="button" value="{$lang->cmd_select}" />
+		</a>
+	</li>
+	<li>
+		<p class="q"><label for="colorset">{$lang->colorset}</label></p>
+		<p class="a">
+			<select name="colorset" id="widget_colorset" style="width:280px">
+			</select>
+		</p>
+	</li>
+	<li>
+		<p class="q"><label for="widget_cache">{$lang->widget_cache}</label></p>
+		<p class="a">
+			<input type="text" name="widget_cache" id="widget_cache" value="0" size="2" style="width:auto" /> {$lang->unit_min}
+			({$lang->about_widget_cache})
+		</p>
+	</li>
+</ul>
+{@$suggestion_id = 0}
+<block loop="$widget_info->extra_var => $id, $var">
+	{@$suggestion_id++}
+	<block cond="!$not_first && !$var->group"><ul></block>
+	<block cond="$group != $var->group">
+		<block cond="$not_first"></ul></block>
+		<h3 class="h3">{$var->group}</h3>
+		<ul>
+		{@$group = $var->group}
+	</block>
+	{@$not_first = true}
+	<li class="modulefinder"|cond="$var->type == 'mid' || $var->type == 'module_srl_list'">
+		<p class="q"><label for="{$id}">{$var->name}</label></p>
+		<div class="a">
+			<input cond="$var->type == 'text'" type="text" name="{$id}" value="" id="{$id}" />
+			<input cond="$var->type == 'color'" type="text" name="{$id}" value="" id="{$id}" class="color-indicator" />
+			<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}"></textarea>
+			<select cond="$var->type == 'select'" name="{$id}" id="{$id}" style="width:290px">
+				<option loop="$var->options => $key, $val" value="{$key}">{$val}</option>
+			</select>
+			<block cond="$var->type == 'select-multi-order'">
+				{@$inits = array_keys($var->init_options)}
+				<input type="hidden" name="{$id}" value="{implode(',', $inits)}" />
+				<select class="multiorder_show" size="8" multiple="multiple" style="width:290px;vertical-align:top">
+					<option loop="$var->options => $key, $val" cond="!$var->init_options[$key]" value="{$key}" default="true"|cond="$var->default_options[$key]">{$val}</option>
+				</select>
+				<button type="button" class="text multiorder_add" style="vertical-align:top">{$lang->cmd_insert}</button>
+				<select class="multiorder_selected" size="8" multiple="multiple" style="width:290px;vertical-align:top">
+					<option loop="$var->options => $key, $val" cond="$var->init_options[$key]" value="{$key}" default="true"|cond="$var->default_options[$key]">{$val}</option>
+				</select>
+				<button type="button" class="text multiorder_up" style="vertical-align:top">{$lang->cmd_move_up}</button>
+				<button type="button" class="text multiorder_down" style="vertical-align:top">{$lang->cmd_move_down}</button>
+				<button type="button" class="text multiorder_del" style="vertical-align:top">{$lang->cmd_delete}</button>
+				<script type="text/javascript">
+					xe.registerApp(new xe.MultiOrderManager('{$id}'));
+				</script>
+			</block>
+			<block cond="$var->type == 'mid_list'">
+				<fieldset loop="$mid_list => $module_category_srl, $modules" style="border: 1px solid #ccc; margin:1em 0; padding:.5em 1em">
+					<legend cond="$modules->title">{$modules->title}</legend>
+					<legend cond="!$modules->title">{$lang->none_category}</legend>
+					<div loop="$modules->list => $key, $val">
+						<input type="checkbox" value="{$key}" name="{$id}" id="chk_mid_list_{$key}" />
+						<label for="chk_mid_list_{$key}">{$key} ({$val->browser_title})</label>
+					</div>
+				</fieldset>
+			</block>
+			<block cond="$var->type == 'member_group'">
+				<block loop="$group_list => $key, $val">
+					<input type="checkbox" value="{$key}" name="{$id}" id="chk_member_gruop_{$id}_{$key}" />
+					<label for="chk_member_gruop_{$id}_{$key}">{$val->title}</label>
+				</block>
+			</block>
+			<block cond="$var->type == 'module_srl_list'">
+				<input type="hidden" name="{$id}" value="" />
+				<div class="a">
+					<input type="text" /> <a href="#suggestion_{$suggestion_id}" class="tgAnchor findsite">{$lang->find_site}</a>
+					<div id="suggestion_{$suggestion_id}" class="tgContent suggestion">
+						<ul>
+						</ul>
+					</div>
+				</div>
+				<p class="a">
+					<select class="moduleList" style="width:290px"></select>
+				</p>
+				<select class="moduleIdList" size="8" multiple="multiple" style="width:290px;vertical-align:top"></select>
+				<button type="button" class="text modulelist_add" style="vertical-align:top">{$lang->cmd_insert}</button>
+				<select class="modulelist_selected" size="8" multiple="multiple" style="width:290px;"></select>
+				<button type="button" class="text modulelist_up" style="vertical-align:top">{$lang->cmd_move_up}</button>
+				<button type="button" class="text modulelist_down" style="vertical-align:top">{$lang->cmd_move_down}</button>
+				<button type="button" class="text modulelist_del" style="vertical-align:top">{$lang->cmd_delete}</button>
+				<script type="text/javascript">
+					xe.registerApp(new xe.ModuleListManager('{$id}'));
+				</script>
+			</block>
+			<block cond="$var->type == 'mid'">
+				<div class="a">
+					<input type="text" /> <a href="#suggestion_{$suggestion_id}" class="tgAnchor findsite">{$lang->find_site}</a>
+					<div id="suggestion_{$suggestion_id}" class="tgContent suggestion">
+						<ul>
+						</ul>
+					</div>
+				</div>
+				<p class="a"><select class="moduleList" style="width:290px;"></select></p>
+				<p class="a"><select name="{$id}" class="moduleIdList" style="width:290px;"></select></p>
+			</block>
+			<block cond="$var->type == 'filebox'">
+				<input type="hidden" name="{$id}" />
+				<a class="modalAnchor filebox" href="#modalFilebox">{$lang->cmd_select}</a>
+			</block>
+			<select cond="$var->type == 'menu'" name="{$id}" style="width:290px">
+				<option value="">-</option>
+				<option loop="$menu_list => $key, $val" value="{$val->menu_srl}">{$val->title}</option>
+			</select>
+		</div>
+		<p class="desc">{$var->description}</p>
+	</li>
+</block>
+</ul>
\ No newline at end of file
diff --git a/modules/widget/tpl/widget_generate_code_in_page.html b/modules/widget/tpl/widget_generate_code_in_page.html
index 3a0e5ca42..c50280105 100644
--- a/modules/widget/tpl/widget_generate_code_in_page.html
+++ b/modules/widget/tpl/widget_generate_code_in_page.html
@@ -1,32 +1,39 @@
-<!--%import("filter/generate_code_in_page.xml")-->
-<!--%import("js/widget_admin.js")-->
-<!--%import("css/widget.css")-->
-<!--%import("../../admin/tpl/css/admin.css")-->
+<load target="../../admin/tpl/js/admin.js" />
+<load target="../../admin/tpl/css/admin.css" />
+<load target="../../admin/tpl/css/admin_{$lang_type}.css" />
+<load target="js/generate_code.js" />
 
 <script type="text/javascript">
-    doAddWindowLoadEventLoader(doFillWidgetVars);
+	xe.lang.cmd_delete = '{$lang->cmd_delete}';
+
+	jQuery(document).ready(function(){
+		doFillWidgetVars();
+	});
 </script>
 
-<form action="./" method="get" onsubmit="return procFilter(this, generate_code_in_page);" id="fo_widget">
-<input type="hidden" name="module_srl" value="{$module_srl}" />
-<input type="hidden" name="widget_sequence" value="" />
-<input type="hidden" name="style" value="float:left;width:100%;margin:none;padding:none;" />
-<input type="hidden" name="widget_padding_left" value="" />
-<input type="hidden" name="widget_padding_right" value="" />
-<input type="hidden" name="widget_padding_top" value="" />
-<input type="hidden" name="widget_padding_bottom" value="" />
+<div class="x" style="padding: 0 10px;">
+	<h2 class="h2">{$widget_info->title}</h2>
+	<p>{$widget_info->description}</p>
 
-    <div id="popHeader" class="wide">
-        <h3 class="xeAdmin">{$lang->cmd_generate_code}</h3>
-    </div>
+	<h3 class="h3">{$lang->cmd_generate_code}</h3>
+	<p>{$lang->about_widget_code_in_page}</p>
 
-    <div id="popBody">
+	<form class="form" action="./" method="post" id="fo_widget">
+		<input type="hidden" name="module_srl" value="{$module_srl}" />
+		<input type="hidden" name="widget_sequence" value="" />
+		<input type="hidden" name="style" value="float:left;width:100%;margin:none;padding:none;" />
+		<input type="hidden" name="widget_padding_left" value="" />
+		<input type="hidden" name="widget_padding_right" value="" />
+		<input type="hidden" name="widget_padding_top" value="" />
+		<input type="hidden" name="widget_padding_bottom" value="" />
+		<input type="hidden" name="selected_widget" value="{$widget_info->widget}" />
+		<include target="widget_generate_code.include.html" />
 
-        {@ $_caption = $lang->about_widget_code_in_page}
-        <!--#include("widget_generate_code.include.html")-->
+		<div class="btnArea">
+			<span class="btn small"><input type="submit" value="{$lang->cmd_generate_code}" /></span>
+		</div>
+	</form>
 
-    </div>
-    <div id="popFooter" class="tCenter gap1">
-        <span class="button black strong"><input type="submit" value="{$lang->cmd_generate_code}"  /></span>
-    </div>
-</form>
+	<include target="widget_generate_code.filebox.html" />
+
+</div>
\ No newline at end of file
diff --git a/modules/widget/tpl/widget_style_generate_code_in_page.html b/modules/widget/tpl/widget_style_generate_code_in_page.html
index b3be7966a..1c50b3448 100644
--- a/modules/widget/tpl/widget_style_generate_code_in_page.html
+++ b/modules/widget/tpl/widget_style_generate_code_in_page.html
@@ -1,111 +1,95 @@
-<!--%import("filter/style_generate_code_in_page.xml")-->
-<!--%import("js/widget_admin.js")-->
-<!--%import("css/widget.css")-->
-<!--%import("../../admin/tpl/css/admin.css")-->
-<!--%load_js_plugin("filebox")-->
+<load target="../../admin/tpl/js/admin.js" />
+<load target="../../admin/tpl/css/admin.css" />
+<load target="../../admin/tpl/css/admin_{$lang_type}.css" />
+<load target="css/widget.css" />
+<load target="js/generate_code.js" />
 <!--%load_js_plugin("ui.colorpicker")-->
 
 <script type="text/javascript">
-    doAddWindowLoadEventLoader(getWidgetVars);
+	jQuery(document).ready(function(){
+		getWidgetVars();
+	});
 </script>
 
-<div id="popHeader" class="wide">
-    <h3 class="xeAdmin">{$lang->widgetstyle}</h3>
-</div>
+<div class="x" style="padding: 0 10px;">
+	<h2 class="h2">{$lang->widgetstyle}</h2>
 
-<form action="{getUrl('')}" method="post" enctype="multipart/form-data" target="hidden_iframe" onsubmit="return procFilter(this, style_generate_code_in_page);" id="fo_widget">
-<input type="hidden" name="module_srl" value="{$module_srl}" />
-<input type="hidden" name="widget_sequence" value="" />
-<input type="hidden" name="style" value="" />
-<input type="hidden" name="widget_padding_left" value="" />
-<input type="hidden" name="widget_padding_right" value="" />
-<input type="hidden" name="widget_padding_top" value="" />
-<input type="hidden" name="widget_padding_bottom" value="" />
-<input type="hidden" name="module" value="widget" />
-<input type="hidden" name="act" value="" />
-<input type="hidden" name="widgetstyle" value="{$widgetstyle}" />
-<input type="hidden" name="selected_widget" value="{$selected_widget}" />
-<div id="popBody">
+	<form class="form" action="./" method="post" id="fo_widget">
+		<input type="hidden" name="module_srl" value="{$module_srl}" />
+		<input type="hidden" name="widget_sequence" value="" />
+		<input type="hidden" name="style" value="" />
+		<input type="hidden" name="widget_padding_left" value="" />
+		<input type="hidden" name="widget_padding_right" value="" />
+		<input type="hidden" name="widget_padding_top" value="" />
+		<input type="hidden" name="widget_padding_bottom" value="" />
+		<input type="hidden" name="module" value="widget" />
+		<input type="hidden" name="act" value="" />
+		<input type="hidden" name="widgetstyle" value="{$widgetstyle}" />
+		<input type="hidden" name="selected_widget" value="{$selected_widget}" />
 
-    <a href="{getUrl('widgetstyle','none')}" class="widgetStyle"><img src="images/widgetstyle_none.gif" title="{$lang->notuse}" /></a>
+		<a href="{getUrl('widgetstyle','none')}" class="widgetStyle"><img src="images/widgetstyle_none.gif" title="{$lang->notuse}" /></a>
+		<a loop="$widgetStyle_list => $key, $widgetStyle" cond="$widgetStyle->preview" href="{getUrl('widgetstyle',$widgetStyle->widgetStyle)}" class="widgetStyle <!--@if($widgetStyle->widgetStyle==$widgetstyle)-->selected<!--@end-->"><img src="{getUrl()}{$widgetStyle->preview}" title="{$widgetStyle->title}" /><span>{$widgetStyle->title}</span></a>
+		<div class="clear"></div>
 
-    <!--@foreach($widgetStyle_list as $key => $widgetStyle)-->
-        <!--@if($widgetStyle->preview)-->
-            <a href="{getUrl('widgetstyle',$widgetStyle->widgetStyle)}" class="widgetStyle <!--@if($widgetStyle->widgetStyle==$widgetstyle)-->selected<!--@end-->"><img src="{getUrl()}{$widgetStyle->preview}" title="{$widgetStyle->title}" /><span>{$widgetStyle->title}</span></a>
-        <!--@end-->
-    <!--@end-->
-    <div class="clear"></div>
+		<block cond="$widgetstyle_info">
 
+			<h3 class="h3">{$widgetstyle_info->title} ver {$widgetstyle_info->version}</h3>
+			<ul>
+				<li>
+					<p class="q">{$lang->description}</p>
+					<p class="a">{$widgetstyle_info->description}</p>
+				</li>
+				<li>
+					<p class="q">{$lang->author}</p>
+					<p class="a">
+						<block loop="$widgetstyle_info->author => $author">
+							{$author->name} ({$author->homepage})
+						</block>
+					</p>
+				</li>
+				<li>
+					<p class="q">{$lang->regdate}</p>
+					<p class="a">{zdate($widgetstyle_info->date,'Y-m-d')}</p>
+				</li>
+			</ul>
 
-<!--@if($widgetstyle_info)-->
-    <h4 class="xeAdmin">{$widgetstyle_info->title} ver {$widgetstyle_info->version}</h4>
-    <table cellspacing="0" class="rowTable">
-        <tr>
-            <th scope="row"><div>{$lang->description}</div></th>
-            <td>{$widgetstyle_info->description}</td>
-        </tr>
-        <tr>
-            <th scope="row"><div>{$lang->author}</div></th>
-            <td>
-            <!--@foreach($widgetstyle_info->author as $k => $author)-->
-                {$author->name} ({$author->homepage})
-            <!--@end-->
-            </td>
-        </tr>
-        <tr>
-            <th scope="row"><div>{$lang->regdate}</div></th>
-            <td>{zdate($widgetstyle_info->date,'Y-m-d')}</td>
-        </tr>
-        </table>
+			<block loop="$widgetstyle_info->extra_var => $id, $var">
+				{@$suggestion_id++}
+				<block cond="!$not_first && !$var->group"><ul></block>
+				<block cond="$group != $var->group">
+					<block cond="$not_first"></ul></block>
+					<h3 class="h3">{$var->group}</h3>
+					<ul>
+					{@$group = $var->group}
+				</block>
+				{@$not_first = true}
+				<li>
+					<p class="q">{$var->name}</p>
+					<p class="a">
+						<input cond="$var->type == 'text'" type="text" name="{$id}" />
 
-        <h4 class="xeAdmin">{$lang->cmd_setup}</h4>
-        <table cellspacing="0" class="rowTable">
-        <!--@foreach($widgetstyle_info->extra_var as $id => $var)-->
-        <tr>
-            <th scope="row">
-                <div>
-                    {$var->name}
-                </div>
-            </th>
-            <td>
-                <!--@if($var->type == "text")-->
-                <input type="text" name="{$id}" id="{$id}" value="" class="inputTypeText w400 lang_code" />
+						<input cond="$var->type == 'color'" type="text" name="{$id}" class="color-indicator" />
 
-                <!--@elseif($var->type == "color")-->
+						<textarea cond="$var->type == 'textarea'" name="{$id}"></textarea>
 
-                <input type="text" name="{$id}" value="" class="inputTypeText color-indicator" />
+						<select cond="$var->type == 'select'" name="{$id}">
+							<option loop="$var->options => $key, $val" value="{$key}">{$val}</option>
+						</select>
 
-                <!--@elseif($var->type == "textarea")-->
-                <textarea name="{$id}" class="inputTypeTextArea w400"></textarea>
+						<block cond="$var->type == 'filebox'">
+							<input type="hidden" name="{$id}" />
+							<a href="#modalFilebox" class="modalAnchor filebox">{$lang->cmd_select}</a>
+						</block>
+					</p>
+					<p class="desc">{$var->description}</p>
+				</li>
+			</block>
+		</block>
 
-                <!--@elseif($var->type == "select")-->
-                <select name="{$id}">
-                    <!--@foreach($var->options as $key => $val)-->
-                    <option value="{$key}">{$val}</option>
-                    <!--@end-->
-                </select>
-                <!--@elseif($var->type == "filebox")-->
-                    <div id="filebox_preview_{$id}" style="width:100px;height:100px;display:none" ></div>
-                    <input type="hidden" name="{$id}" value="" />
-                    <span class="button black"><button type="button" onclick="XE.filebox.open(jQuery('[name={$id}]', '#fo_widget').get(0), '{$var->filter}')">{$lang->cmd_select}</button></span>
-                    <span id="filebox_cancel_{$id}" class="button red" style="display:none" ><button type="button" onclick="XE.filebox.cancel('{$id}')">{$lang->cmd_delete}</button></span>
-                    <script type="text/javascript">//<![CDATA[
-                        XE.filebox.init('{$id}');
-                    //]]></script>
-
-
-                <!--@end-->
-                <p class="clear">{nl2br($var->description)}</p>
-            </td>
-        </tr>
-        <!--@end-->
-        </table>
-<!--@end-->
+		<div class="btnArea">
+			<span class="btn small"><input type="submit" value="{$lang->cmd_setup}"  /></span>
+		</div>
+	</form>
+	<include target="widget_generate_code.filebox.html" />
 
 </div>
-<div id="popFooter">
-    <span class="button black strong"><input type="submit" value="{$lang->cmd_setup}"  /></span>
-</div>
-</form>
-
-<iframe name="hidden_iframe" frameborder="0" style="display:none"></iframe>
diff --git a/modules/widget/widget.admin.view.php b/modules/widget/widget.admin.view.php
index b08f8ded9..a402b3db0 100644
--- a/modules/widget/widget.admin.view.php
+++ b/modules/widget/widget.admin.view.php
@@ -65,7 +65,8 @@
             $editor = $oEditorModel->getModuleEditor('document',$module_srl, $module_srl,'module_srl','content');
             Context::set('editor', $editor);
 
-            $this->setLayoutFile("popup_layout");
+			$this->setLayoutPath('./common/tpl');
+            $this->setLayoutFile("default_layout");
             $this->setTemplateFile('add_content_widget');
 
         }
diff --git a/modules/widget/widget.view.php b/modules/widget/widget.view.php
index d058b6765..574c73dd8 100644
--- a/modules/widget/widget.view.php
+++ b/modules/widget/widget.view.php
@@ -111,6 +111,7 @@
             if(!Context::get('selected_widget')) Context::set('selected_widget',$widget_list[0]->widget);
 
             $this->dispWidgetGenerateCode();
+			$this->setLayoutFile('default_layout');
             $this->setTemplateFile('widget_generate_code_in_page');
         }
 
@@ -130,7 +131,7 @@
             }
 
             $this->dispWidgetGenerateCode();
-            $this->setLayoutFile('popup_layout');
+            $this->setLayoutFile('default_layout');
             $this->setTemplateFile('widget_style_generate_code_in_page');
         }
     }