  <div class="btn-group" data-toggle="buttons-radio">
    <label href="#none" class="btn btn-large <%= @subpart.nil? || @subpart.kind == "none" ? 'active' : '' rescue nil %>" data-toggle="tab">
      <%= t("page_part_kinds.none") %>
      <input type="radio" <%= @subpart.kind == "none" ? "checked" : "" rescue nil %> class="hide widget_type_class" value="none" name="page_part[sub_parts_attributes][<%= @select_number %>][kind]" />
    </label>
    <label href="#text" class="btn btn-large <%= @subpart.kind == "text" ? 'active' : '' rescue nil %>" data-toggle="tab">
      <%= t("page_part_kinds.text") %>
      <input type="radio" class="hide widget_type_class" <%= @subpart.kind == "text" ? "checked" : "" rescue nil %> value="text" name="page_part[sub_parts_attributes][<%= @select_number %>][kind]" />
    </label>
    <!-- <label href="#public_r_tag" class="btn btn-large" data-toggle="tab"> -->
      <%#= t("page_part_kinds.public_r_tag") %>
      <%#= sub.radio_button :kind, "public_r_tag", class: "hide" %>
    <!-- </label> -->
    <label href="#module_widget" class="btn btn-large <%= @subpart.kind == "module_widget" ? 'active' : '' rescue nil %>" data-toggle="tab">
      <%= t("page_part_kinds.module_widget") %>
      <input type="radio" class="hide widget_type_class" value="module_widget" <%= @subpart.kind == "module_widget" ? "checked" : "" rescue nil %> name="page_part[sub_parts_attributes][<%= @select_number %>][kind]" />

    </label>
  </div>
  <fieldset>
    <div class="input-area tab-content">
      <div id="none" class="parts-none tab-pane fade in <%= @subpart.nil? || @subpart.kind == "none" ? 'active' : '' rescue nil %>"><%= t(:select_one_function) %></div>
      <div id="text" class="tab-pane fade in <%= @subpart.kind == "text" ? 'active' : '' rescue nil %>">
        <div class="nav-name">
          <strong><%= t(:language) %></strong>
        </div>
        <ul class="nav nav-pills language-nav">
          <% @site_in_use_locales.each_with_index do |locale, i| %>
            <li class="<%= 'active' if i == 0 %>">
              <a href=".<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
            </li>
          <% end %>
        </ul>
        <div class="tab-content language-area">
          <% @site_in_use_locales.each_with_index do |locale, i| %>
            <div class="tab-pane fade <%= locale %> <%= 'active in' if i == 0 %>">
              <div class="control-group input-content">
                <label class="control-label muted"><%= t(:content) %></label>
                <div class="controls">
                  <div class="textarea">
                    <textarea name="page_part[sub_parts_attributes][<%= @select_number %>][content_translations][<%= locale.to_s %>]" class="ckeditor input-block-level"><%= @subpart.content_translations[locale] rescue nil %></textarea>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>

      <div id="module_widget" class="tab-pane fade in <%= @subpart.kind == "module_widget" ? 'active' : '' rescue nil %>">
          <% @site_in_use_locales.each do |locale| %>
            <div class="control-group input-content">
              <label class="control-label muted">Widget <%= t(:name) %>(<%= t(locale.to_s) %>) :</label>
              <div class="controls">
                <input name="page_part[sub_parts_attributes][<%= @select_number %>][title_translations][<%= locale.to_s %>]" value="<%= @subpart.title_translations[locale.to_s] rescue nil %>" />
              </div>
            </div>
          <% end %>
        <div class="control-group input-content">
          <%= f.label :module_app_id, t(:module) + " :", class: "control-label muted" %>
          <div class="controls">
          	<%= select_tag("page_part[sub_parts_attributes][#{@select_number}][module]", options_for_select(@modules.map{|m| [t('module_name.'+m.key),m.key]}, (@subpart.module rescue nil)),{:include_blank => true,"class" => "input-xlarge change module_name", data: {"fv-validation" => "custom_not_empty;", "fv-messages" => "Cannot be empty.;"}}) %>
          </div>
        </div>
        <% if @child_page_count > 0 %>
          <div class="control-group input-content">
            <label class="control-label muted">Apply to sub-pages :</label>
            <div class="controls">
              <input type="checkbox" name="apply_to_subpage" value="1" />
            </div>
          </div>
        <% end %>
        <div id="widgets_selection_area">
        <% if params[:action] == "edit_sub_part" && @kind == "module_widget"%>
          <%= render :partial => "widget_form" %>
        <% end %>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <%= f.submit t(:update_), class: "btn btn-primary" %> 
      <button type="button" class="btn" onclick="window.history.back()"><%= t(:cancel) %></button>
    </div>
  </fieldset>
  <script src="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
  var Button = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.button.defaults, options)
  }

  Button.prototype.setState = function (state) {
    var d = 'disabled'
      , $el = this.$element
      , data = $el.data()
      , val = $el.is('input') ? 'val' : 'html'

    state = state + 'Text'
    data.resetText || $el.data('resetText', $el[val]())

    $el[val](data[state] || this.options[state])

    // push to event loop to allow forms to submit
    setTimeout(function () {
      state == 'loadingText' ?
        $el.addClass(d).attr(d, d) :
        $el.removeClass(d).removeAttr(d)
    }, 0)
  }

  Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

 /* BUTTON PLUGIN DEFINITION
  * ======================== */

  var old = $.fn.button

  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('button')
        , options = typeof option == 'object' && option
      if (!data) $this.data('button', (data = new Button(this, options)))
      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
  </script>
 <link rel="stylesheet" href="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.css">
 <script>
	$('.btn-primary').attr('onclick',"return checkArea()");
	var textID = new Array($('.ckeditor').length);
	$(document).ready(function(){
		for(var i=0 ; i< $('.ckeditor').length ; i++){
			if($('.ckeditor').eq(i).attr("id") == "" || $('.ckeditor').eq(i).attr("id") == undefined){
				$('.ckeditor').eq(i).attr("id","ckeditorArea"+i);
				textID[i] = "ckeditorArea"+i
			}else{
				textID[i] = $('.ckeditor').eq(i).attr("id");
			}
			try{
			CKEDITOR.replace(textID[i])
			}catch(e){};
		}
	});
    function checkArea(){
		var flag = 1;//1=>true
		if( $(".fakeArea").length !=0 )
			$(".fakeArea").remove();
		var k = 0; //k=0 => 所有iframe的title都有加
		var k1 = 0;//k1=0 => 所有img的title和alt都有加
		var k2 = 0;//k2=0 => 所有a的title都有加
		for(var i=0 ; i< $('.ckeditor').length ; i++){
			$("#"+textID[i]).before("<div class='fakeArea' style='display:none;'></div>");
			var Data = CKEDITOR.instances[textID[i]].getData();
			$(".fakeArea").eq(i).html(Data);
			/* change the font-size unit from px to em  start*/
			function changepxToem(that){
				for(var i=0;i<that.querySelectorAll('*').length;i++){
					if(that.querySelectorAll('*')[i].style.fontSize.search('px') != -1)
						that.querySelectorAll('*')[i].style.fontSize = Number(that.querySelectorAll('*')[i].style.fontSize.split('px')[0]) / 16 + 'em';
				}
			}
			changepxToem(document.querySelectorAll('.fakeArea')[i]);
			/* change the font-size unit from px to em  end*/
			if($('.fakeArea:eq('+i+') iframe').length != 0){
				for(var j=0;j<$('.fakeArea:eq('+i+') iframe').length;j++){
					if($('.fakeArea:eq('+i+') iframe').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') iframe').eq(j).attr('title') ==''){
						k += 1;
					};
				};
				for(var j=0;j<$('.fakeArea:eq('+i+') img').length;j++){
					if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') ==''){
						k1 += 1;
					};
				}
				for(var j=0;j<$('.fakeArea:eq('+i+') a').length;j++){
					if($('.fakeArea:eq('+i+') a').eq(j).attr('href') != undefined || $('.fakeArea:eq('+i+') a').eq(j).attr('href') !=''){
						if($('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') a').eq(j).attr('title') ==''){
							k2 += 1;
						};
					};
				}
			};
		};
		function setIframe(){
			for(var i=0 ; i< $('.ckeditor').length ; i++){
				for(var j=0;j<$('.fakeArea:eq('+i+') iframe').length;j++){
					if($('.fakeArea:eq('+i+') iframe').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') iframe').eq(j).attr('title') ==''){
						if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("facebook") != -1)
							$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"facebook");
						else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("twitframe") != -1)
							$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"twitter");
						else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("google") != -1)
							$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"google");
						else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("youtube") != -1)
							$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"youtube");
					}
				 };
				 CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html()); 
			 };
		};
		function setImg(){
			for(var i=0 ; i< $('.ckeditor').length ; i++){
			  for(var j=0;j<$('.fakeArea:eq('+i+') img').length;j++){
				if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') ==''){
					if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' ){
						if($('.ckeditor').eq(i).attr('name').search('zh_tw') != -1)
							$('.fakeArea:eq('+i+') img').eq(j).attr('title','這是一張圖片')
						else if($('.ckeditor').eq(i).attr('name').search('en') != -1)
							$('.fakeArea:eq('+i+') img').eq(j).attr('title','This is a image')
					};
					if($('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') =='' ){
						if($('.ckeditor').eq(i).attr('name').search('zh_tw') != -1)
							$('.fakeArea:eq('+i+') img').eq(j).attr('alt','這是一張圖片')
						else if($('.ckeditor').eq(i).attr('name').search('en') != -1)
							$('.fakeArea:eq('+i+') img').eq(j).attr('alt','This is a image')
					};
				}
			  }
			  CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html());
		  };
		};
		function setAtitle(){
			for(var i=0 ; i< $('.ckeditor').length ; i++){
			  for(var j=0;j<$('.fakeArea:eq('+i+') a').length;j++){
				if($('.fakeArea:eq('+i+') a').eq(j).attr("href") != "" || $('.fakeArea:eq('+i+') a').eq(j).attr("href") != undefined ){
					var titlestr="";
					if($('.fakeArea:eq('+i+') a').eq(j).attr('target')=='_self')
						titlestr += '在本視窗開啟 ';
					else if($('.fakeArea:eq('+i+') a').eq(j).attr('target') == '_blank')
						titlestr += '在新視窗開啟 ';
					if($('.fakeArea:eq('+i+') a').eq(j).attr('title')=="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title')==undefined && $('.fakeArea:eq('+i+') a').eq(j).html().search('</') == -1)
						titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim();
					else if($('.fakeArea:eq('+i+') a').eq(j).attr('title')=="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined && $('.fakeArea:eq('+i+') a').eq(j).find('>span').length==1)
						titlestr += $('.fakeArea:eq('+i+') a').eq(j).find('>span').html().trim();
					else if($('.fakeArea:eq('+i+') a').eq(j).attr('title') =="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined){
						try{
						if($('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>').length==2)
							titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>')[1].trim();
						else if($('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>').length==3)
							titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>')[2].trim();
						}catch(e){};
					}
					else
						titlestr += $('.fakeArea:eq('+i+') a').eq(j).attr('title');
					if(titlestr.search('<img') != -1)
						titlestr = "這是一張照片";
					if(titlestr != "")
						$('.fakeArea:eq('+i+') a').eq(j).attr('title',titlestr);
				};
			  };
			  CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html());
		  };
		};
		if( k != 0){
			if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
				alert('請加上iframe的title');
				i = 0;
				$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的iframe title嗎？'>"+
									"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
									"按下確認後,將自動新增iframe的title,若按下否,則可自行設定title。</p>"
									+"</div>");
				$( "#dialog-confirm" ).dialog({
				  resizable: false,
				  height:200,
				  modal: true,
				  buttons: {
					"確認": function(){setIframe();$( this ).dialog( "close" );},
					"取消": function() {
					  $( this ).dialog( "close" );
					}
				  }
				});
			}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
				alert('please write down iframe title');
				i = 1;
				$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title of the iframes？'>"+
									"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
									"After click confirm button,title of the iframes will be auto generated.And after click confirm button,you can set up title of the iframes by yourself.</p>"
									+"</div>");
				$( "#dialog-confirm" ).dialog({
				  resizable: false,
				  height:200,
				  modal: true,
				  buttons: {
					"confirm": function(){setIframe();$( this ).dialog( "close" );},
					"Cancel": function() {
					  $( this ).dialog( "close" );
					}
				  }
				});
			};
			flag = 0;
		}else{
			if( k1!= 0){
				if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
					alert('請加上img的title');
					i = 0;
					$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的圖片標題和替代文字嗎？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"按下確認後,將自動新增img的title和alt,若按下否,則可自行設定title和alt。</p>"
										+"</div>");
					$( "#dialog-confirm" ).dialog({
					  resizable: false,
					  height:200,
					  modal: true,
					  buttons: {
						"確認": function(){setImg();$( this ).dialog( "close" );},
						"取消": function() {
						  $( this ).dialog( "close" );
						}
					  }
					});
				}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
					alert('please write down img title');
					i = 1;
					$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title and alt of the images？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"After click confirm button,title and alt of the images will be auto generated."
										+"And after click confirm button,you can set up title and alt of the images by yourself.</p>"
										+"</div>");
					$( "#dialog-confirm" ).dialog({
					  resizable: false,
					  height:200,
					  modal: true,
					  buttons: {
						"confirm": function(){setImg();$( this ).dialog( "close" );},
						"Cancel": function() {
						  $( this ).dialog( "close" );
						}
					  }
					});
				};
				flag = 0;
			}else{
				if( k2!= 0){
					if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
						alert('請加上a標籤的title');
						i = 0;
						$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的a標籤標題嗎？'>"+
											"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
											"按下確認後,將自動新增img的title和alt,若按下否,則可自行設定title和alt。</p>"
											+"</div>");
						$( "#dialog-confirm" ).dialog({
						  resizable: false,
						  height:200,
						  modal: true,
						  buttons: {
							"確認": function(){setAtitle();$( this ).dialog( "close" );},
							"取消": function() {
							  $( this ).dialog( "close" );
							}
						  }
						});
					}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
						alert('please write down title of the a labels');
						i = 1;
						$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title of the a label？'>"+
											"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
											"After click confirm button,title of the a label will be auto generated."
											+"And after click confirm button,you can set up title of the a label by yourself.</p>"
											+"</div>");
						$( "#dialog-confirm" ).dialog({
						  resizable: false,
						  height:200,
						  modal: true,
						  buttons: {
							"confirm": function(){setAtitle();$( this ).dialog( "close" );},
							"Cancel": function() {
							  $( this ).dialog( "close" );
							}
						  }
						});
					};
					flag = 0;
				}else{
					for(var i=0 ; i< $('.ckeditor').length ; i++){
						CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html()); //將修改完的data(font-size from px to em)放回textarea
					}
				}
			}
			if(flag != 0)
				flag = 1;
		};
		if(flag == 1)
			return true;
		else
			return false;
	};
  </script>
  <script type="text/javascript">
    $('*[data-toggle=buttons-radio] label').click(function(){
      $('*[data-toggle=buttons-radio] input[type=radio]').removeAttr("checked");
      $(this).find("input[type=radio]").prop("checked","checked");
    })

    var formValidator = new FormValidator($("form.page_part_form_validate"));
    formValidator.validate_functions.custom_not_empty = function(value){
      var widget_type = formValidator.form.find("input.widget_type_class:checked").val();
      widget_type = (typeof widget_type === "undefined" ? "none" : widget_type);
      return ((widget_type == "module_widget" && value == "") ?  false : true);
    }

  </script>