Index: branches/version-2_5-dev/data/class/pages/admin/contents/LC_Page_Admin_Contents_CSV.php
===================================================================
--- branches/version-2_5-dev/data/class/pages/admin/contents/LC_Page_Admin_Contents_CSV.php	(revision 18701)
+++ branches/version-2_5-dev/data/class/pages/admin/contents/LC_Page_Admin_Contents_CSV.php	(revision 18842)
@@ -71,7 +71,4 @@
         SC_Utils_Ex::sfIsSuccess($objSess);
 
-        $arrOutput = array();
-        $arrChoice = array();
-
         $get_tpl_subno_csv = isset($_GET['tpl_subno_csv'])
                                      ? $_GET['tpl_subno_csv'] : "";
@@ -118,6 +115,10 @@
 
         // 出力項目の取得
-        $arrOutput = SC_Utils_Ex::sfSwapArray($objCSV->sfgetCsvOutput($subno_id, 'status = 1'));
-        $arrOutput = SC_Utils_Ex::sfarrCombine($arrOutput['no'], $arrOutput['disp_name']);
+        $arrSelected = SC_Utils_Ex::sfSwapArray($objCSV->sfgetCsvOutput($subno_id, 'status = 1'));
+
+        if (!isset($arrSelected['no'])) $arrSelected['no'] = array();
+        if (!isset($arrSelected['disp_name'])) $arrSelected['disp_name'] = array();
+
+        $this->arrSelected = $arrSelected['no'];
 
         // 非出力項目の取得
@@ -127,9 +128,10 @@
         if (!isset($arrChoice['disp_name'])) $arrChoice['disp_name'] = array();
 
-        $arrChoice = SC_Utils_Ex::sfarrCombine($arrChoice['no'], $arrChoice['disp_name']);
+        $arrOptions = array_merge(
+            SC_Utils_Ex::sfarrCombine($arrSelected['no'], $arrSelected['disp_name']),
+            SC_Utils_Ex::sfarrCombine($arrChoice['no'], $arrChoice['disp_name'])
+        );
 
-        $this->arrOutput=$arrOutput;
-        $this->arrChoice=$arrChoice;
-
+        $this->arrOptions = $arrOptions;
 
         $this->SubnaviName = $this->arrSubnaviName[$subno_id];
Index: branches/version-2_5-dev/data/Smarty/templates/default/admin/contents/csv.tpl
===================================================================
--- branches/version-2_5-dev/data/Smarty/templates/default/admin/contents/csv.tpl	(revision 18700)
+++ branches/version-2_5-dev/data/Smarty/templates/default/admin/contents/csv.tpl	(revision 18842)
@@ -22,187 +22,37 @@
  */
 *}-->
+<link rel="stylesheet" href="<!--{$TPL_DIR}-->jquery.multiselect2side/css/jquery.multiselect2side.css" type="text/css" media="screen" />
+<script type="text/javascript" src="<!--{$TPL_DIR}-->jquery.multiselect2side/js/jquery.multiselect2side.js" ></script>
 <script type="text/javascript">
 <!--
-function fnMoveOption(sel , moveflg) {
-  var fm = document.form1;
-  var arrChoice = new Array();  // 選択されている項目
-  var arrNotChoice = new Array();  // 選択されていない項目
-  var arrNew = new Array();    // 移動後のリスト
-  var arrTmp = new Array();
-  var arrRev = new Array();
-  
-  if(fm[sel].selectedIndex == -1) alert("何も選択されていません。");
-  else {
-    // 下に移動する場合にはまずOPTIONを逆にする
-    if (moveflg == 'bottom') {
-      for(i=fm[sel].length-1, j=0; i >= 0; i--, j++){
-        fm[sel].options[i].label=i;    // 順番をlabelに退避
-        arrRev[j] = fm[sel].options[i];
-      }
-      for(i=0; i < arrRev.length; i++){
-        fm[sel].options[i] = new Option(arrRev[i].text, arrRev[i].value);
-        fm[sel].options[i].selected = arrRev[i].selected;
-      }
-    }
-
-    // 一番下に空白を追加
-    fm[sel].options[fm[sel].length] = new Option('', '');
-    
-    for(i = 0, choiceCnt = 0, notCnt = 0; i < fm[sel].length; i++) {
-      if(!fm[sel].options[i].selected) {
-        // 選択されていない項目配列を生成
-        fm[sel].options[i].label=i;    // 順番をlabelに退避
-        arrNotChoice[choiceCnt] = fm[sel].options[i];
-        choiceCnt++;
-      }else{
-        // 選択されている項目配列を生成
-        fm[sel].options[i].label=i;    // 順番をlabelに退避
-        arrChoice[notCnt] = fm[sel].options[i];
-        notCnt++;
-      }
-    }
-    
-    // 選択項目を上に移動
-    for(i = arrChoice.length; i < 1; i--){
-      arrChoice[i].label = arrChoice[i-1].label+1;
-    }
-
-    // 非選択項目を下に移動
-    for(i = 0; i < arrNotChoice.length - 1; i++){
-      arrNotChoice[i].label = arrNotChoice[i+1].label-1;
-    }  
-
-    // 選択項目と非選択項目をマージする
-    for(choiceCnt = 0, notCnt = 0, cnt = 0; cnt < fm[sel].length; cnt++){
-      if (choiceCnt >= arrChoice.length) {
-        arrNew[cnt] = arrNotChoice[notCnt];
-        notCnt++;
-      }else if (notCnt >= arrNotChoice.length) {
-        arrNew[cnt] = arrChoice[choiceCnt];
-        choiceCnt++;
-      }else{
-        if(arrChoice[choiceCnt].label-1 <= arrNotChoice[notCnt].label){
-          arrNew[cnt] = arrChoice[choiceCnt];
-          choiceCnt++;
-        }else{
-          arrNew[cnt] = arrNotChoice[notCnt];
-          notCnt++;
-        }
-      }
-    }
-
-    // 下に移動する場合には逆にしたものを元に戻す
-    if (moveflg == 'bottom') {
-      for(i=arrNew.length-2, j=0; i >= 0; i--, j++){
-        arrTmp[j] = arrNew[i];
-      }
-      arrTmp[j]="";
-      arrNew = arrTmp;
-    }
-
-    // optionを再作成
-    fm[sel].length = arrNew.length - 1;
-    for(i=0; i < arrNew.length - 1; i++){
-      fm[sel].options[i] = new Option(arrNew[i].text, arrNew[i].value);
-      fm[sel].options[i].selected = arrNew[i].selected;
-    }
-  }
-}
-
-function fnReplaceOption(restSel, addSel) {
-  var fm = document.form1;
-  var arrRest = new Array();  // 残りのリスト
-  var arrAdd  = new Array();  // 追加のリスト
-  
-  if(fm[restSel].selectedIndex == -1) alert("何も選択されていません。");
-  else {
-    for(i = 0, restCnt = 0, addCnt = 0; i < fm[restSel].length; i++) {
-      if(!fm[restSel].options[i].selected) {
-        // 残要素の配列を生成
-        arrRest[restCnt] = fm[restSel].options[i];
-        restCnt++;
-      }else{
-        // 追加要素の配列を生成
-        arrAdd[addCnt] = fm[restSel].options[i];
-        addCnt++;
-      }
-    }
-
-    // 残リスト生成
-    fm[restSel].length = arrRest.length;
-    for(i=0; i < arrRest.length; i++)
-    {
-      fm[restSel].options[i] = new Option(arrRest[i].text, arrRest[i].value);
-    }
-
-    // 追加先に項目を追加
-    //fm[addSel].options[fm[addSel].length] = new Option(fm[sel2].value, fm[sel2].value);
-    
-    for(i=0; i < arrAdd.length; i++)
-    {
-      fm[addSel].options[fm[addSel].length] = new Option(arrAdd[i].text, arrAdd[i].value);
-      fm[addSel].options[fm[addSel].length-1].selected = true;
-    }
-  }
-}
-
-// submitした場合に、出力項目一覧を選択状態にする
-function lfnCheckList(sel) {
-  var fm = document.form1;
-  for(i = 0; i < fm[sel].length; i++) {
-    fm[sel].options[i].selected = true;
-  }
-}
-
-// リストボックスのサイズ変更
-function ChangeSize(button, TextArea, Max, Min, row_tmp){
-  if(TextArea.rows <= Min){
-    TextArea.rows=Max; button.value="小さくする"; row_tmp.value=Max;
-  }else{
-    TextArea.rows =Min; button.value="大きくする"; row_tmp.value=Min;
-  }
-}
-
+$().ready(function() {
+    $('#output_list').multiselect2side({
+        selectedPosition: 'left',
+        moveOptions: true,
+        labelsx: '出力項目一覧',
+        labeldx: '出力可能項目一覧'
+    });
+    // multiselect2side の初期選択を解除
+    $('.ms2side__div select').val(null);
+    // [Sort] ボタンは混乱防止のため非表示
+    // FIXME 選択・非選択のボタンと比べて、位置ズレしている
+    $('.ms2side__div .SelSort').hide();
+});
 //-->
 </script>
 
-
-
-<form name="form1" id="form1" method="post" action="?" onsubmit="lfnCheckList('output_list[]')">
+<form name="form1" id="form1" method="post" action="?">
 <input type="hidden" name="mode" value="confirm" />
 <input type="hidden" name="tpl_subno_csv" value="<!--{$tpl_subno_csv}-->" />
 <div id="admin-contents" class="contents-main">
-  <h2><!--{$SubnaviName}--></h2>
-  <table id="contents-csv-select">
-    <tr>
-      <td>
-        <div class="btn">
-          <button type="button" onClick="fnMoveOption('output_list[]', 'top');"><span> ▲ </span></button><br/>
-          <button type="button" onClick="fnMoveOption('output_list[]', 'bottom');"><span> ▼ </span></button>
-        </div>
-      </td>
-      <td>
-        <h3>出力項目一覧</h3>
+    <h2><!--{$SubnaviName}--></h2>
+    <div>
         <span class="attention"><!--{$arrErr.output_list}--></span>
-        <select multiple name="output_list[]"<!--{if $arrErr.output_list}--> style="<!--{$arrErr.output_list|sfGetErrorColor}-->;"<!--{/if}-->>
-          <!--{html_options options=$arrOutput}-->
+        <select multiple name="output_list[]" style="<!--{$arrErr.output_list|sfGetErrorColor}-->;" id="output_list" size="20">
+            <!--{html_options options=$arrOptions selected=$arrSelected}-->
         </select>
-      </td>
-      <td>
-        <div class="btn">
-          <button type="button" onClick="fnReplaceOption('choice_list[]', 'output_list[]');"><< 追加</button><br/>
-          <button type="button" onClick="fnReplaceOption('output_list[]', 'choice_list[]');">削除 &gt;&gt;</button>
-        </div>
-      </td>
-      <td>
-        <h3>出力可能項目一覧</h3>
-        <select multiple name="choice_list[]">
-          <!--{html_options options=$arrChoice}-->
-        </select>
-      </td>
-    </tr>
-  </table>
+    </div>
 
-  <div class="btn"><button type="submit"><span>この内容で登録する</span></button></div>
+    <div class="btn"><button type="submit"><span>この内容で登録する</span></button></div>
 
 </div>
Index: branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/css/jquery.multiselect2side.css
===================================================================
--- branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/css/jquery.multiselect2side.css	(revision 18842)
+++ branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/css/jquery.multiselect2side.css	(revision 18842)
@@ -0,0 +1,56 @@
+.ms2side__div {
+	clear: left;
+	width: 100%;
+	padding: 1px;
+	float: left;
+	background : url('') repeat-x; // HACK FOR CHROME
+}
+
+.ms2side__select {
+	float: left;
+}
+
+.ms2side__header {
+	color: blue;
+	background-color: #EEEEFF;
+}
+
+.ms2side__options, .ms2side__updown {
+	float: left;
+	font-size: 10pt;
+	margin: 0;
+	padding: 0 8px;
+	width: 40px;
+	color: black;
+	text-align: center;
+	overflow: hidden;
+}
+
+.ms2side__updown {
+	font-size: 9pt;
+}
+
+.ms2side__options p, .ms2side__updown p {
+	margin: 2px 0;
+	padding: 0;
+	cursor: hand;
+	border: 1px solid black;
+}
+
+.ms2side__options p.ms2side_hover, .ms2side__updown p.ms2side_hover {
+	background-color: #F0F0FF;
+	border-color: #0000FF;
+	cursor: hand;
+}
+
+.ms2side__options p.ms2side__hide, .ms2side__updown p.ms2side__hide {
+	cursor: default;
+	color: grey;
+	border: 1px solid grey;
+	background-color: #F0F0F0;
+}
+
+.ms2side__div select {
+	width: 220px;
+	float: left;
+}
Index: branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/js/jquery.multiselect2side.js
===================================================================
--- branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/js/jquery.multiselect2side.js	(revision 18842)
+++ branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/js/jquery.multiselect2side.js	(revision 18842)
@@ -0,0 +1,281 @@
+/*
+ * multiselect2side jQuery plugin
+ *
+ * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
+ *
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://www.senamion.com
+ *
+ */
+
+(function($)
+{
+	jQuery.fn.multiselect2side = function (o) {
+
+		o = $.extend({
+			selectedPosition: 'right',
+			moveOptions: true,
+			labelTop: 'Top',
+			labelBottom: 'Bottom',
+			labelUp: 'Up',
+			labelDown: 'Down',
+			labelSort: 'Sort',
+			labelsx: 'Available',
+			labeldx: 'Selected',
+			maxSelected: -1
+		}, o);
+
+
+		return this.each(function () {
+			var	el = $(this);
+
+			var	originalName = $(this).attr("name");
+			if (originalName.indexOf('[') != -1)
+				originalName = originalName.substring(0, originalName.indexOf('['));
+
+			var	nameDx = originalName + "ms2side__dx";
+			var	nameSx = originalName + "ms2side__sx";
+			var size = $(this).attr("size");
+			// SIZE MIN
+			if (size < 6) {
+				$(this).attr("size", "6");
+				size = 6;
+			}
+
+			// UP AND DOWN
+			var divUpDown =
+					"<div class='ms2side__updown'>" +
+						"<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
+						"<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
+						"<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
+						"<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
+						"<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
+					"</div>";
+
+			// CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
+			var htmlToAdd = 
+				"<div class='ms2side__div'>" +
+						((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
+					"<div class='ms2side__select'>" +
+						(o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
+						"<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
+					"</div>" +
+					"<div class='ms2side__options'>" +
+						((o.selectedPosition == 'right')
+						?
+						("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
+						"<p class='AddAll' title='Add All'>&raquo;</p>" +
+						"<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
+						"<p class='RemoveAll' title='Remove All'>&laquo;</p>")
+						:
+						("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
+						"<p class='AddAll' title='Add All'>&laquo;</p>" +
+						"<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
+						"<p class='RemoveAll' title='Remove All'>&raquo;</p>")
+						) +
+					"</div>" +
+					"<div class='ms2side__select'>" +
+						(o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
+						"<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + nameDx + "' size='" + size + "' multiple='multiple' ></select>" +
+					"</div>" +
+					((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
+				"</div>";
+			$(this).after(htmlToAdd).hide();
+
+			// ELEMENTS
+			var allSel = $(this).next().find("select");
+			var	leftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
+			var	rightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
+			// HEIGHT DIV
+			var	heightDiv = $(".ms2side__select").eq(0).height();
+			
+			// CENTER MOVE OPTIONS AND UPDOWN OPTIONS
+			$(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
+				var	top = ((heightDiv/2) - ($(this).height()/2));
+				if (top > 0)
+					$(this).css('padding-top',  top + 'px' );
+			})
+
+			// MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
+			$(this).find("option:selected").clone().appendTo(rightSel);
+			$(this).find("option:not(:selected)").clone().appendTo(leftSel);
+
+			// SELECT FIRST LEFT ITEM
+			if (!($.browser.msie && $.browser.version == '6.0'))
+				leftSel.find("option").eq(0).attr("selected", true);
+
+			// ON CHANGE REFRESH ALL BUTTON STATUS
+			allSel.change(function() {
+				var	div = $(this).parent().parent();
+				var	selectSx = leftSel.children();
+				var	selectDx = rightSel.children();
+				var	selectedSx = leftSel.find("option:selected");
+				var	selectedDx = rightSel.find("option:selected");
+
+				if (selectedSx.size() == 0 ||
+						(o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
+					div.find(".AddOne").addClass('ms2side__hide');
+				else
+					div.find(".AddOne").removeClass('ms2side__hide');
+
+				// FIRST HIDE ALL
+				div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
+				if (selectDx.size() > 1)
+					div.find(".SelSort").removeClass('ms2side__hide');
+				if (selectedDx.size() > 0) {
+					div.find(".RemoveOne").removeClass('ms2side__hide');
+					// ALL SELECTED - NO MOVE
+					if (selectedDx.size() < selectDx.size()) {	// FOR NOW (JOE) && selectedDx.size() == 1
+						if (selectedDx.val() != selectDx.val())	// FIRST OPTION, NO UP AND TOP BUTTON
+							div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
+						if (selectedDx.last().val() != selectDx.last().val())	// LAST OPTION, NO DOWN AND BOTTOM BUTTON
+							div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
+					}
+				}
+
+				if (selectSx.size() == 0 ||
+						(o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
+					div.find(".AddAll").addClass('ms2side__hide');
+				else
+					div.find(".AddAll").removeClass('ms2side__hide');
+
+				if (selectDx.size() == 0)
+					div.find(".RemoveAll").addClass('ms2side__hide');
+				else
+					div.find(".RemoveAll").removeClass('ms2side__hide');
+			});
+
+			// DOUBLE CLICK ON LEFT SELECT OPTION
+			leftSel.dblclick(function () {
+				$(this).find("option:selected").each(function(i, selected){
+
+					if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
+						$(this).remove().appendTo(rightSel);
+						el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
+					}
+				});
+				$(this).trigger('change');
+			});
+
+			// DOUBLE CLICK ON RIGHT SELECT OPTION
+			rightSel.dblclick(function () {
+				$(this).find("option:selected").each(function(i, selected){
+					$(this).remove().appendTo(leftSel);
+					el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
+				});
+				$(this).trigger('change');
+			});
+
+			// CLICK ON OPTION
+			$(this).next().find('.ms2side__options').children().click(function () {
+				if (!$(this).hasClass("ms2side__hide")) {
+					if ($(this).hasClass("AddOne")) {
+						leftSel.find("option:selected").each(function(i, selected){
+							$(this).remove().appendTo(rightSel);
+							el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
+						});
+					}
+					else if ($(this).hasClass("AddAll")) {	// ALL SELECTED
+						leftSel.children().appendTo(rightSel);
+						leftSel.children().remove();
+						el.find('option').attr("selected", true);
+						// el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
+					}
+					else if ($(this).hasClass("RemoveOne")) {
+						rightSel.find("option:selected").each(function(i, selected){
+							$(this).remove().appendTo(leftSel);
+							el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
+						});
+					}
+					else if ($(this).hasClass("RemoveAll")) {	// ALL REMOVED
+						rightSel.children().appendTo(leftSel);
+						rightSel.children().remove();
+						el.find('option').attr("selected", false);
+						//el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
+					}
+				}
+
+				leftSel.trigger('change');
+			});
+
+			// CLICK ON UP - DOWN
+			$(this).next().find('.ms2side__updown').children().click(function () {
+				var	selectedDx = rightSel.find("option:selected");
+				var	selectDx = rightSel.find("option");
+
+				if (!$(this).hasClass("ms2side__hide")) {
+					if ($(this).hasClass("SelSort")) {
+						// SORT SELECTED ELEMENT
+						selectDx.sort(function(a, b) {
+							 var compA = $(a).text().toUpperCase();
+							 var compB = $(b).text().toUpperCase();
+							 return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+						})
+						// FIRST REMOVE FROM ORIGINAL SELECT
+						el.find("option:selected").remove();
+						// AFTER ADD ON ORIGINAL AND RIGHT SELECT
+						selectDx.each(function() {
+							rightSel.append($(this).clone().attr("selected", true));
+							el.append($(this).attr("selected", true));
+						});
+					}
+					else if ($(this).hasClass("MoveUp")) {
+						var	prev = selectedDx.first().prev();
+						var	hPrev = el.find("[value=" + prev.val() + "]");
+
+						selectedDx.each(function() {
+							$(this).insertBefore(prev);
+							el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);	// HIDDEN SELECT
+						});
+					}
+					else if ($(this).hasClass("MoveDown")) {
+						var	next = selectedDx.last().next();
+						var	hNext = el.find("[value=" + next.val() + "]");
+
+						selectedDx.each(function() {
+							$(this).insertAfter(next);
+							el.find("[value=" + $(this).val() + "]").insertAfter(hNext);	// HIDDEN SELECT
+						});
+					}
+					else if ($(this).hasClass("MoveTop")) {
+						var	first = selectDx.first();
+						var	hFirst = el.find("[value=" + first.val() + "]");
+
+						selectedDx.each(function() {
+							$(this).insertBefore(first);
+							el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);	// HIDDEN SELECT
+						});
+					}
+					else if ($(this).hasClass("MoveBottom")) {
+						var	last = selectDx.last();
+						var	hLast = el.find("[value=" + last.val() + "]");
+
+						selectedDx.each(function() {
+							last = $(this).insertAfter(last);	// WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
+							hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);	// HIDDEN SELECT
+						});
+					}
+				}
+
+				leftSel.trigger('change');
+			});
+
+			// HOVER ON OPTION
+			$(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
+				function () {
+					$(this).addClass('ms2side_hover');
+				},
+				function () {
+					$(this).removeClass('ms2side_hover');
+				}
+			);
+
+			// UPDATE BUTTON ON START
+			leftSel.trigger('change');
+			// SHOW WHEN ALL READY
+			$(this).next().show();
+		});
+	};
+})(jQuery);
Index: branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/jmultiselect2side.html
===================================================================
--- branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/jmultiselect2side.html	(revision 18842)
+++ branches/version-2_5-dev/html/user_data/packages/default/jquery.multiselect2side/jmultiselect2side.html	(revision 18842)
@@ -0,0 +1,231 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head profile="http://gmpg.org/xfn/11">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+	<title>Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page</title>
+	<link rel="stylesheet" href="css/jquery.multiselect2side.css" type="text/css" media="screen" />
+	<script type="text/javascript" src="js/jquery.js" ></script>
+	<script type="text/javascript" src="js/jquery.multiselect2side.js" ></script>
+	<script type="text/javascript">
+		$().ready(function() {
+			$('#first').multiselect2side();
+			$('#second').multiselect2side({
+				selectedPosition: 'right',
+				moveOptions: false,
+				labelsx: '',
+				labeldx: ''
+				});
+			$('#third').multiselect2side({
+				selectedPosition: 'left',
+				moveOptions: true,
+				labelTop: '+ +',
+				labelBottom: '- -',
+				labelUp: '+',
+				labelDown: '-',
+				labelsx: '* Selected *',
+				labeldx: '* Available *'
+				});
+			$('#fourth').multiselect2side({maxSelected: 4});
+		});
+	</script>
+
+
+
+
+</head>
+<body>
+
+				<h2>multiselect2side plugin: documentation and demo page</h2>
+				<h3>Demo 1 - Full demo select multiple double side</h3>
+				<p>Select multiple="multiple" modified by multiselect2side</p>
+
+				<select name="firstSelect[]" id='first' multiple='multiple' >
+				<optgroup label="Group1">
+					<option value="1">First Option</option>
+					<option value="2">Option 2th</option>
+					<option value="3" SELECTED >Option selected 3</option>
+				</optgroup>
+				<optgroup label="Group2">
+					<option value="4">Option 4</option>
+					<option value="5">Option 5</option>
+					<option value="6">Option 6</option>
+					<option value="7" SELECTED >Option selected 7</option>
+					<option value="8">Option 8</option>
+				</optgroup>
+				</select>
+
+				<p>This is the javascript code to launch multiselect2side to #first select:</p>
+				<pre>
+$().ready(function() {
+	$('#first').multiselect2side();
+});
+				</pre>
+
+				<h3>Demo 2 - select multiple double side - moveOptions: false</h3>
+				<p>Move buttons are disabled. Header label not present.</p>
+				<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
+					<option value="1">1Option 1</option>
+					<option value="2" SELECTED >Option 2 (sel)</option>
+					<option value="3">a Option 3</option>
+					<option value="4" SELECTED >This Option 4 (sel)</option>
+					<option value="5">Optaion 5</option>
+					<option value="6">Option 6</option>
+					<option value="7">Odption 7</option>
+					<option value="8">Optaion 8</option>
+					<option value="9">Optdion 9</option>
+					<option value="10" SELECTED >Option 10 (sel)</option>
+				</select>
+
+				<p>This is the javascript code to launch multiselect2side to #second select:</p>
+				<pre>
+$().ready(function() {
+	$('#second').multiselect2side({
+		selectedPosition: 'right',
+		moveOptions: false,
+		labelsx: '',
+		labeldx: ''
+		});
+});
+				</pre>
+
+				<h3>Demo 3 - select multiple double side - selectedPosition: 'left'</h3>
+				<p>Elements selected are in the left, label of move buttoms are modified.</p>
+				<select name="thirdSelect[]" id='third' multiple='multiple' size='6' >
+					<option value="1">1Option 1</option>
+					<option value="2" SELECTED >Option 2 (sel)</option>
+					<option value="3">a Option 3</option>
+					<option value="4" SELECTED >This Option 4 (sel)</option>
+					<option value="5">Optaion 5</option>
+					<option value="6">Option 6</option>
+					<option value="7">Odption 7</option>
+					<option value="8">Optaion 8</option>
+					<option value="9">Optdion 9</option>
+					<option value="10" SELECTED >Option 10 (sel)</option>
+				</select>
+
+				<p>This is the javascript code to launch multiselect2side to #third select:</p>
+				<pre>
+$().ready(function() {
+	$('#third').multiselect2side({
+		selectedPosition: 'left',
+		moveOptions: true,
+		labelTop: '+ +',
+		labelBottom: '- -',
+		labelUp: '+',
+		labelDown: '-',
+		labelsx: '* Selected *',
+		labeldx: '* Available *'
+		});
+});
+				</pre>
+
+				<h3>Demo 4 - Select multiple double side with limited number of selectionable options</h3>
+				<p>Select multiple="multiple" with parameter maxSelected, selectionable options limited to 4</p>
+
+				<select name="fourthSelect[]" id='fourth' multiple='multiple' >
+					<option value="1">First Option</option>
+					<option value="2">Option 2th</option>
+					<option value="3" SELECTED >Option selected 3</option>
+					<option value="4">Option 4</option>
+					<option value="5">Option 5</option>
+					<option value="6">Option 6</option>
+					<option value="7" SELECTED >Option selected 7</option>
+					<option value="8">Option 8</option>
+				</select>
+
+				<p>This is the javascript code to launch multiselect2side to #first select:</p>
+				<pre>
+$().ready(function() {
+	$('#fourth').multiselect2side({maxSelected: 4});
+});
+				</pre>
+
+
+				<h3>Documentation</h3>
+
+				<p>
+				To use this jquery plugin:<br />
+				<ul>
+				<li>
+				include the js in the head section of the page:
+				<pre>
+&lt;head&gt;
+...
+&lt;link rel="stylesheet" href="css/jquery.multiselect2side.css" type="text/css" media="screen" /&gt;
+
+&lt;script type="text/javascript" src="js/jquery.js" &gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="js/jquery.multiselect2side.js" &gt;&lt;/script&gt;
+...
+&lt;/head&gt;
+				</pre>
+				</li>
+				<li>
+				in the read function launch the multiselect2side (select multiple double side) relative at your element:
+				<pre>
+&lt;script type="text/javascript"&gt;
+$().ready(function() {
+	$("select").multiselect2side();
+});
+&lt;/script&gt;
+				</pre>
+				</li>
+				</ul>
+				For comments <a href="http://www.senamion.com/blog/2010/02/20/jquery-select-multiple-double-side/">see the blog page</a>.
+				</p>
+				<h4>Parameters:</h4>
+				<ul>
+					<li>selectedPosition - position of selected elements - default 'right'</li>
+					<li>moveOptions - show move options - default true</li>
+					<li>labelTop - label of top buttom - default 'Top'</li>
+					<li>labelBottom - label of bottom buttom - default 'Bottom'</li>
+					<li>labelUp - label of up buttom - default 'Up'</li>
+					<li>labelDown - label of down buttom - default 'Down'</li>
+					<li>labelSort - label of sort buttom - default 'Sort'</li>
+					<li>maxSelected - number of max selectable options</li>
+					<li>labelsx: Left label - default '* Selected *'</li>
+					<li>labeldx: Right label - default '* Available *'</li>
+
+				</ul>
+
+				<h3 id='download'>Download</h3>
+				<p>
+					You can download the entire archive:
+					<ul>
+						<li><a href="jquery.multiselect2side.zip">jquery.multiselect2side.zip</a> - a zip archive containing the plugin source, a minified version of jQuery and a demo page.</li>
+					</ul>
+					Or single file:
+					<ul>
+						<li><a href="jquery.multiselect2side/js/jquery.multiselect2side.js">jquery.multiselect2side.js</a> - js code.</li>
+						<li><a href="jquery.multiselect2side/css/jquery.multiselect2side.css">jquery.multiselect2side.css</a> - css code.</li>
+					</ul>
+				</p>
+
+
+				<h3>Release</h3>
+				<p>
+				<ul>
+					<li><strong>0.11</strong> - Aug 26 2010 - correct ie6 bug</li>
+					<li><strong>0.10</strong> - Jul 20 2010 - correct ie8 bug (padding-top)</li>
+					<li><strong>0.9</strong> - Jul 16 2010 - new labels button (left and right label)</li>
+					<li><strong>0.8</strong> - May 17 2010 - new sort button (if moveOptions is true)</li>
+					<li><strong>0.7</strong> - May 16 2010 - correct order options bug</li>
+					<li><strong>0.6</strong> - Avr 16 2010 - correct bug with optgroup</li>
+					<li><strong>0.5</strong> - Avr 15 2010 - Now move and updown options are vertically centered</li>
+					<li><strong>0.4</strong> - Avr 12 2010 - New option maxSelected</li>
+					<li><strong>0.3</strong> - Avr  1 2010 - New CSS</li>
+					<li><strong>0.2</strong> - Mar 25 2010 - New parameters moveOptions (default true)</li>
+					<li><strong>0.1</strong> - Mar 22 2010 - New parameters selectedPosition (default 'right')</li>
+					<li><strong>0.0</strong> - Feb 19 2010 - First release of multiselect2side (select multiple double side)</li>
+				</ul>
+				</p>
+
+
+				<h3>License</h3>
+				<p>
+				Dual licensed under the MIT and GPL licenses. 
+				</p>
+
+</body>
+</html>