<full>
  <div class="col-md-6">
    <div id="ctl-current" class="spread">
      <div class="row">
        <div class="col-xs-12 text-center">
          <canvas id="canvas" width="560" height="560"></canvas>
          <div class="spinner-canvas"></div>
          <h2 class="not-apply"><span class="label label-not-apply">シミュレーションに反映していません</span></h2>
        </div>
      </div>
      <div class="row ctl-angle-info">
        <div class="col-xs-12">
        <!--
          <virtual if="{(master.current.angle == 0 || master.current.angle == 5) && custom_state.kabuse_design_code == '03'}">
            <div class="balloon" js="{$('.balloon').fadeIn()}">
              <div class="row">
                <div class="col-xs-12">
                  <blockquote>
                    <p>※シャープは画像に反映されませんが、仕上がりはカブセ下の角を落としたデザインでのお届けとなります。</p>
                  </blockquote>
                </div>
              </div>
            </div>
          </virtual>
          <virtual if="{master.current.angle == 3}">
            <div class="balloon" js="{$('.balloon').fadeIn()}">
              <div class="row">
                <div class="col-xs-12">
                  <img src="/assets/img/simulation/angle/info_full_angle-4.png" class="img-responsive" alt="大マチのデザインによっては底部分にステッチが入る場合があります。">
                </div>
              </div>
            </div>
          </virtual>
        -->
        </div>
      </div>
      <div class="row ctl-current-swipe">
        <div class="col-xs-2 visible-xs-block">
          <div class="btn-angle-prev text-center">
            <button class="btn btn-large btn-link"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></button>
          </div>
        </div>
        <div class="col-xs-8 col-sm-12">
          <!-- Swiper -->
          <div id="ctl-angle" class="row ctl-angle-current swiper-container">
            <div class="btn-group swiper-wrapper" data-toggle="buttons">
              <virtual each="{angle, i in custom_angle}">
                <virtual if="{i != 3 && i != 5}">
                  <label class="col-xs-3 col-sm-3 col-md-3 btn btn-link btn-slide {active: i == master.current.angle}" data-angle="{i}" onclick="{setAngle}">
                    <input type="radio" name="angle" value="{i}" ref="{angle}" autocomplete="off" checked="{i == master.current.angle}">
                    <img src="/assets/img/simulation/angle/btn_angle_full_{i+1}.png" alt="{angle}">
                    <p>{angle}</p>
                  </label>
                </virtual>
              </virtual>
            </div>
          </div>
        </div>
        <div class="col-xs-2 visible-xs-block">
          <div class="btn-angle-next text-center">
            <button class="btn btn-large btn-link"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 clearfix">
    <div id="ctl-specification" class="spread">
      <div class="row ctl-specification-header">
        <div class="col-xs-10 col-xs-offset-1"></div>
      </div>
      <article id="ctl-step" class="row ctl-specification-step">
        <div class="col-xs-12">
          <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1">
              <div class="row ctl-step-progress">
                <div class="col-xs-5">
                  <p>ステップ：<span class="ctl-step-fraction"></span></p>
                </div>
                <div class="col-xs-7">
                  <!-- Swiper -->
                  <div class="ctl-step-current swiper-container">
                    <div class="swiper-wrapper" data="{i=0}">
                      <div each="{step, key in master.steps}" data="{i++}" class="current-slide">
                        <dl>
                          <dt><i>{i}. {step.name}</i></dt>
                          <dd><img src="/assets/img/simulation/step/step_current-icon_full_{i}.png" alt="{step.name}"><i>{i}. {step.name}</i></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <nav class="row ctl-step-navigation">
                <div class="col-xs-3 text-left"><a href="javascript:void(0);" class="btn-step-prev"><i class="sr-only">もどる</i></a></div>
                <div class="col-xs-6 text-center"><h3><i>{master.steps[master.current.step].name}</i><small>{master.steps[master.current.step].suffix}</small></h3></div>
                <div class="col-xs-3 text-right"><a href="javascript:void(0);" class="btn-step-next"><i class="sr-only">すすむ</i></a></div>
              </nav>
              <section class="row">
                <div class="col-xs-12">
                  <!-- Swiper -->
                  <div class="ctl-step-detail swiper-container">
                    <div class="swiper-wrapper">
                      <!--
                      <div class="detail-slide">
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[0].lead}" class="text-center">{master.steps[0].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row">
                              <div class="scrollbar-step1" style="width: 96%;">
                                <table class="table table-bordered table-material">
                                  <thead>
                                    <tr>
                                      <th>素材</th>
                                      <td each="{value, key in master.scene.step_1.parts}" class="{value.id == custom_state.material_id ? 'active' : null}" style="white-space: nowrap;"><input type="radio" name="material_id" data-name="material_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-1-{value.code}" class="radio-check" checked="{value.id == custom_state.material_id}" onclick="{value.id == custom_state.material_id ? null : setMaterialId}" disabled="{value.stock == 1}"><label for="radio-step-1-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></td>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <th>特徴</th>
                                      <td each="{value, key in master.scene.step_1.parts}" class="{value.id == custom_state.material_id ? 'active' : null}">
                                        <raw content="{value.caption}"></raw>
                                      </td>
                                    </tr>
                                    <tr>
                                      <th>カラー</th>
                                      <td each="{palette, index in custom_mixin.palettes}" class="{(index　+ 1) == custom_state.material_code.slice(-1) ? 'active' : null}">
                                        <div class="row">
                                          <div each="{value in palette}" class="col-xs-6">
                                            <p>
                                              <span class="label label-default" style="background: {value.color};"> &nbsp; </span>
                                              &nbsp;<small>{value.name}</small>
                                            </p>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr>
                                      <th>価格</th>
                                      <td each="{value, key in master.scene.step_1.parts}" class="{value.id == custom_state.material_id ? 'active' : null}">{Number(value.price).toLocaleString()}円（税込）</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                              <p>&nbsp;</p>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[0].note}" class="text-left">{master.steps[0].note}</p>
                        </div>
                      </div>
                      -->
                      <div class="detail-slide">
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[0].lead}" class="text-center">{master.steps[0].lead}</p>
                            <!--
                            <p><img src="//fuwarii.com/user_data/packages/default/img/common/contents/border.jpg" class="img-responsive"></p>
                            <p><img src="/assets/img/simulation/step/full_step-2-2_table.png" class="img-responsive"></p>
                            -->
                            <p>実際の商品と色合いや仕様が異なる場合がございます。<br>色合いの確認は、実際の生地見本や商品ラインナップにてご確認ください。</p>
                            <ul>
                              <li>商品の仕様は<a href="//fuwarii.com/user_data/full_order" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                              <li>商品ラインナップページは<a href="//fuwarii.com/products/list.php?category_id=7" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                              <li>生地見本画像は<a href="https://fuwarii.com/html/template/fuwarii21/assets2/images/catalog/downloads/2025_school_bag_sample.pdf" target="_blank">こちら <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></li>
                            </ul>
                            <p>&nbsp;</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row">
                              <ul class="nav nav-tabs text-center" role="tablist">
                                <li role="presentation" class="active">
                                  <a href="#tab-2-1" aria-controls="tab-2-1" role="tab" data-toggle="tab">
                                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> メインカラー
                                  </a>
                                </li>
                                <li role="presentation">
                                  <a href="#tab-2-2" aria-controls="tab-2-2" role="tab" data-toggle="tab">
                                    <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> コンビカラー
                                  </a>
                                </li>
                              </ul>
                              <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active" id="tab-2-1" data-init="{num = 0}">
                                 <div class="row {Object.keys(master.scene.step_2_1.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_2_1.parts).length}">
                                  <virtual each="{value, i in master.scene.step_2_1.parts}">
                                    <div class="col-xs-4" data-nth="{num += 1}">
                                      <label for="radio-step-2-1-{value.code}" class="well well-sm color-guide" style="background: {value.color};" data-inner-color="{getBright(value.color, mod) > 0.7 ? 'black' : 'white'}">
                                        <small><input type="radio" name="color_id" data-name="color_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-2-1-{value.code}" class="radio-check" checked="{value.id == custom_state.color_id}" onclick="{value.id == custom_state.color_id ? null : setColorId}" disabled="{value.stock == 1}"><label for="radio-step-2-1-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></small>
                                      </label>
                                      <ul class="list-unstyled">
                                        <li if="{value.caption}"><small>{value.caption}</small></li>
                                      </ul>
                                    </div>
                                    <div if="{(num % 3) == 0}" class="clearfix"></div>
                                  </virtual>
                                 </div>
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="tab-2-2" data-init="{num = 0}">
                                 <div class="row {Object.keys(master.scene.step_2_2.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_2_2.parts).length}">
                                  <virtual each="{value, i in master.scene.step_2_2.parts}">
                                    <div class="col-xs-4" data-nth="{num += 1}">
                                      <label for="radio-step-2-2-{value.code}" class="well well-sm color-guide bg-plaid-{value.code}" style="background: {value.color};" data-inner-color="{getBright(value.color, mod) > 0.7 ? 'black' : 'white'}">
                                        <small><input type="radio" name="edge_id" data-name="edge_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-2-2-{value.code}" class="radio-check" checked="{value.id == custom_state.edge_id}" onclick="{value.id == custom_state.edge_id ? null : setEdgeId}" disabled="{value.stock == 1}"><label for="radio-step-2-2-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></small>
                                      </label>
                                      <ul class="list-unstyled">
                                        <li if="{value.caption}"><small>{value.caption}</small></li>
                                        <!--
                                        <li if="{value.price != 0}"><small><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</small></li>
                                        -->
                                      </ul>
                                    </div>
                                    <div if="{(num % 3) == 0}" class="clearfix"></div>
                                  </virtual>
                                 </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[1].note}" class="text-left">{master.steps[1].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- ステッチ -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[1].lead}" class="text-center">{master.steps[1].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row">
                              <div each="{value in master.scene.step_3.parts}" class="col-xs-4">
                                <label for="radio-step-3-{value.code}" class="well well-sm color-guide" style="background: {value.color}" data-inner-color="{getBright(value.color, mod) > 0.7 ? 'black' : 'white'}">
                                  <small><input type="radio" name="stitch_id" data-name="stitch_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-3-{value.code}" class="radio-check" checked="{value.id == custom_state.stitch_id}" onclick="{setStitchId}"><label for="radio-step-3-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></small>
                                </label>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[2].note}" class="text-left">{master.steps[2].note}</p>
                        </div>
                      </div>
                      <div id="step4" class="detail-slide"><!-- カブセデザイン -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[2].lead}" class="text-center">{master.steps[2].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_4_1.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_4_1.parts).length}">
                              <virtual each="{value, i in master.scene.step_4_1.parts}" if="{value.color == master.current.color}">
                                <div class="col-xs-6" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="kabuse_design_id" data-name="kabuse_design_code" data-code="{value.code}" data-price="{value.price}" data-title="{value.name}" data-weight="{value.weight}" value="{value.id}" id="radio-step-4-{value.code}" class="radio-check" checked="{value.id == custom_state.kabuse_design_id}" onclick="{setKabuseDesignId}" disabled="{value.stock == 1}"><label for="radio-step-4-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-4-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}" ref="{value.color}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 2) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[3].note}" class="text-left">{master.steps[3].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- カブセ飾り鋲 -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[3].lead}" class="text-center">{master.steps[3].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_5.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_5.parts).length}">
                              <virtual each="{value, i in master.scene.step_5.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="decoration_rivets_id" data-name="decoration_rivets_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-5-{value.code}" class="radio-check" checked="{value.id == custom_state.decoration_rivets_id}" onclick="{setDecorationRivetsId}" disabled="{value.stock == 1}"><label for="radio-step-5-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-5-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[3].note}" class="text-left">{master.steps[4].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- 背中カラー -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[4].lead}" class="text-center">{master.steps[4].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_6.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_6.parts).length}">
                              <virtual each="{value, i in master.scene.step_6.parts}">
                                <div class="col-xs-6" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="back_color_id" data-name="back_color_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-6-{value.code}" class="radio-check" checked="{value.id == custom_state.back_color_id}" onclick="{setBackColorId}" disabled="{value.stock == 1}"><label for="radio-step-6-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-6-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 2) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[5].note}" class="text-left">{master.steps[5].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- サイドデザイン -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[5].lead}" class="text-center">{master.steps[5].lead}<br>両側面にナスカンがつきます</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_7_1.parts).length > 2 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_7_1.parts).length}">
                              <virtual each="{value, i in master.scene.step_7_1.parts}" if="{value.color == master.current.color}">
                                <div class="col-xs-6" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="machi_design_id" data-name="machi_design_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-7-{value.code}" class="radio-check" checked="{value.id == custom_state.machi_design_id}" onclick="{setMachiDesignId}" disabled="{value.stock == 1}"><label for="radio-step-7-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <p if="{value.caption}" class="text-center">{value.caption}</p>
                                        <p if="{value.text}" class="text-center">{value.text}</p>
                                        <label for="radio-step-7-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}" ref="{value.color}"></label>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 2) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[6].note}" class="text-left">{master.steps[6].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- ファスナーグリップ -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[6].lead}" class="text-center">{master.steps[6].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_8.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_8.parts).length}">
                              <virtual each="{value, i in master.scene.step_8.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="fastener_puller_id" data-name="fastener_puller_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-8-{value.code}" class="radio-check" checked="{value.id == custom_state.fastener_puller_id}" onclick="{setFastenerPullerId}" disabled="{value.stock == 1}"><label for="radio-step-8-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-8-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[7].note}" class="text-left">{master.steps[7].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- 肩ひも防犯ブザー用フック -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[7].lead}" class="text-center">{master.steps[7].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <p class="text-center"><img src="/assets/img/simulation/step/kanagu.png" class="img-responsive img-rounded center-block"></p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_9.parts).length > 2 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_9.parts).length}">
                              <!--<virtual each="{value, i in master.scene.step_9.parts}" if="{value.color == master.current.color}">-->
                              <virtual each="{value, i in master.scene.step_9.parts}">
                                <div class="col-xs-12" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-left"><input type="radio" name="security_buzzer_id" data-name="security_buzzer_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-9-{value.code}" class="radio-check" checked="{value.id == custom_state.security_buzzer_id}" onclick="{setSecurityBuzzerId}" disabled="{value.stock == 1}"><label for="radio-step-9-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-9-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}" ref="{value.color}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 1) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[8].note}" class="text-left">{master.steps[8].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- ポケット窓枠 -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[8].lead}" class="text-center">{master.steps[8].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_10_1.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_10_1.parts).length}">
                              <virtual each="{value, i in master.scene.step_10_1.parts}" if="{value.color == master.current.color}">
                                <div class="col-xs-6" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="front_pocket_id" data-name="front_pocket_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-10-{value.code}" class="radio-check" checked="{value.id == custom_state.front_pocket_id}" onclick="{setFrontPocketId}" disabled="{value.stock == 1}"><label for="radio-step-10-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-10-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}" ref="{value.color}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 2) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[9].note}" class="text-left">{master.steps[9].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- カブセ裏・内装 -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[9].lead}" class="text-center">{master.steps[9].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <p class="text-center"><img src="/assets/img/simulation/step/naisho.jpg" class="img-responsive img-rounded center-block"></p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_11.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_11.parts).length}">
                              <virtual each="{value, i in master.scene.step_11.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="interior_id" data-name="interior_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-11-{value.code}" class="radio-check" checked="{value.id == custom_state.interior_id}" onclick="{setInteriorId}" disabled="{value.stock == 1}"><label for="radio-step-11-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-11-{value.code}"><img src="{value.image}" class="img-responsive img-circle" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[10].note}" class="text-left">{master.steps[10].note}</p>
                        </div>
                      </div>
                      <!-- add step start -->
                      <div class="detail-slide"><!-- チェストベルト -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[10].lead}" class="text-center">{master.steps[10].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <p class="text-center"><img src="/assets/img/simulation/step/full_step-13_belt.jpg" class="img-responsive img-rounded center-block"></p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_12.parts).length > 9 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_12.parts).length}">
                              <virtual each="{value, i in master.scene.step_12.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="shoulder_slip_belt_id" data-name="shoulder_slip_belt_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-12-{value.code}" class="radio-check" checked="{value.id == custom_state.shoulder_slip_belt_id}" onclick="{setShoulderSlipBeltId}" disabled="{value.stock == 1}"><label for="radio-step-12-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-12-{value.code}"><img src="{value.image}" class="img-responsive img-circle" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                        <p if="{value.price != 0}" class="text-center"><small><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</small></p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[12].note}" class="text-left">{master.steps[12].note}</p>
                        </div>
                      </div>
                      <!-- add step end -->
                      <!--
                      <div class="detail-slide">
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[10].lead}" class="text-center">{master.steps[10].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_12.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_12.parts).length}">
                              <virtual each="{value, i in master.scene.step_12.parts}">
                                <div class="col-xs-6" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="front_rivets_id" data-name="front_rivets_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-12-{value.code}" class="radio-check" checked="{value.id == custom_state.front_rivets_id}" onclick="{setFrontRivetsId}" disabled="{value.stock == 1}"><label for="radio-step-12-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-12-{value.code}"><img src="{value.image}" class="img-responsive img-circle" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 2) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[11].note}" class="text-left">{master.steps[11].note}</p>
                        </div>
                      </div>
                      -->
                      <div class="detail-slide"><!-- 720°全方向反射 -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[11].lead}" class="text-center">{master.steps[11].lead}</p>
                          </div>
                          <div class="col-xs-12">
                          <!--
                            <p class="text-center"><img src="/assets/img/simulation/step/full_step-13_belt.jpg" class="img-responsive img-rounded center-block"></p>
                          -->
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_13.parts).length > 9 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_13.parts).length}">
                              <virtual each="{value, i in master.scene.step_13.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="reflection_id" data-name="reflection_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-13-{value.code}" class="radio-check" checked="{value.id == custom_state.reflection_id}" onclick="{setReflectionId}" disabled="{value.stock == 1}"><label for="radio-step-13-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-13-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                        <p if="{value.price != 0}" class="text-center"><small><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</small></p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[12].note}" class="text-left">{master.steps[12].note}</p>
                        </div>
                      </div>

                      <div class="detail-slide"><!-- １００耐芯材 -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[12].lead}" class="text-center">{master.steps[12].lead}</p>
                          </div>
                          <div class="col-xs-12">
                          <!--
                            <p class="text-center"><img src="/assets/img/simulation/step/full_step-13_belt.jpg" class="img-responsive img-rounded center-block"></p>
                          -->
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_14.parts).length > 9 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_14.parts).length}">
                              <virtual each="{value, i in master.scene.step_14.parts}">
                                <div class="col-xs-4" data-nth="{num += 1}">
                                  <dl>
                                    <dt class="text-center"><input type="radio" name="core_material_id" data-name="core_material_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-14-{value.code}" class="radio-check" checked="{value.id == custom_state.core_material_id}" onclick="{setCoreMaterialId}" disabled="{value.stock == 1}"><label for="radio-step-14-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                    <dd>
                                      <div class="thumbnail">
                                        <label for="radio-step-14-{value.code}"><img src="{value.image}" class="img-responsive img-rounded" alt="{value.name}"></label>
                                        <p if="{value.caption}">{value.caption}</p>
                                        <p if="{value.price != 0}" class="text-center"><small><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</small></p>
                                      </div>
                                    </dd>
                                  </dl>
                                </div>
                                <div if="{(num % 3) == 0}" class="clearfix"></div>
                              </virtual>
                            </div>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[13].note}" class="text-left">{master.steps[13].note}</p>
                        </div>
                      </div>


                      <div class="detail-slide"><!-- ネームプレート -->
                        <div class="row">
                          <div class="col-xs-12">
                            <p show="{master.steps[13].lead}" class="text-center">{master.steps[13].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <virtual each="{value, i in master.scene.step_15.parts}">
                            <dl hide={ (i == 1 && this.custom_state.embroidery_code == '04' ) || (i == 2 && this.custom_state.embroidery_code != '04' ) }>
                              <dt>
                                <input type="radio" name="embroidery_id" data-name="embroidery_code" data-code="{value.code}" data-price="{value.price}" data-weight="{value.weight}" data-title="{value.name}" value="{value.id}" id="radio-step-15-{value.code}" class="radio-check" checked="{value.id == custom_state.embroidery_id}" onclick="{setEmbroideryId}" disabled="{value.stock == 1}"><label for="radio-step-15-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label>
                              </dt>
                              <dd show="{value.form}">
                                <div class="col-xs-4 thumbnail">
                                  <label for="radio-step-15-{value.code}" if="{value.image}"><img src="{value.image}" class="img-responsive" alt="{value.name}"></label>
                                  <p if="{value.price != 0}" class="text-center"><small><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {Number(value.price).toLocaleString()}円</small></p>
                                </div>
                                <div class="col-xs-7">
                                  <h4><raw content="{value.caption}"></raw></h4>
                                  <h6><raw content="{value.text}"></raw></h6>
                                  <form if="{value.form.inputs}" id="form-embroidery-content-{value.code}" name="form_embroidery_content_{value.code}" role="form" data-toggle="validator" data-focus="false" onsubmit="{submitEmbroideryContentForm}">

                                    <virtual if="{i == 1 || i == 2}">
                                      <div class="form-group col-xs-4">
                                        <label class="radio-inline">
                                          <input type="radio" name="embroidery_id" data-code="{this.master.scene.step_15.parts[1].code}" data-title="{this.master.scene.step_15.parts[1].name}（シルバー）" id="radio-step-15-{this.master.scene.step_15.parts[1].code}-{this.master.scene.step_15.parts[1].color}" class="" data-name="embroidery_code" value="{this.master.scene.step_15.parts[1].id}" checked="{this.master.scene.step_15.parts[1].id == custom_state.embroidery_id}" onclick="{setEmbroideryId}"> {this.master.scene.step_15.parts[1].note}
                                        </label>
                                      </div>
                                      <div class="form-group col-xs-4">
                                        <label class="radio-inline">
                                          <input type="radio" name="embroidery_id" data-code="{this.master.scene.step_15.parts[2].code}" data-title="{this.master.scene.step_15.parts[2].name}（ゴールド）" id="radio-step-15-{this.master.scene.step_15.parts[2].code}-{this.master.scene.step_15.parts[2].color}" class="" data-name="embroidery_code" value="{this.master.scene.step_15.parts[2].id}" checked="{this.master.scene.step_15.parts[2].id == custom_state.embroidery_id}" onclick="{setEmbroideryId}"> {this.master.scene.step_15.parts[2].note}
                                        </label>
                                      </div>
                                      <div class="form-group col-xs-12"></div>
                                    </virtual>

                                    <virtual each="{input, n in value.form.inputs}">
                                    <div class="form-group {input.type == 'radio' && input.name == 'char' ? 'col-xs-4' : 'col-xs-12'}">
                                      <virtual if="{i == 1 || i == 2}">
                                        <virtual if="{input.type == 'radio' && input.name == 'type'}">
                                          <label class="radio-inline">
                                            <input type="radio" name="{input.name}" data-code="{input.code}" data-title="{input.label}" id="input-typr-type" class="" value="{input.value}" onclick="{setMetalType}" disabled="{value.id!=custom_state.embroidery_id}" checked="{input.value == custom_state.metalplate_type || (custom_state.metalplate_type == null && input.value == '10')}"> {input.label}
                                          </label>
                                        </virtual>
                                        <virtual if="{input.type == 'radio' && input.name == 'char'}">
                                          <div class="form-group col-xs-12"></div>
                                          <label class="radio-inline">
                                            <input type="radio" name="{input.name}" data-code="{input.value == 0 ? 'en' : 'em'}" data-title="{input.label}" id="input-char-type" class="" value="{input.value}" onclick="{setMetalPattern}" disabled="{value.id!=custom_state.embroidery_id}" checked="{input.value == custom_state.metalplate_char}"> {input.label}
                                          </label>
                                        </virtual>
                                        <virtual if="{input.type == 'text'}">
                                          <input type="{input.type}" name="{input.name}" data-name="{input.name}" data-code="{value.code}" data-title="{value.name}" id="{input.name}_input_{value.code}" class="form-control" placeholder="{input.placeholder}" value="{value.id == custom_state.embroidery_id ? custom_state.embroidery_content : ''}" title="{value.name}" ref="{value.name}" onclick="{setEmbroideryContent}" onInput="{inputEmbroideryContent}" maxlength="{input.validations[input.validator].maxlength}" pattern="{input.validations[input.validator].pattern}" disabled="{value.id!=custom_state.embroidery_id}" required="{value.id == custom_state.embroidery_id}">
                                          <div class="col-xs-12">
                                            <div class="help-block with-errors"></div>
                                          </div>
                                          <div class="col-xs-12">
                                            <div id="input-metal-text-{custom_state.metalplate_type == null ? '10' : custom_state.metalplate_type}" class="text-center input-metal-text-virtual input-metal-text-virtual-{custom_state.metalplate_char} input-metal-text-virtual-{custom_state.metalplate_type == null ? '10' : custom_state.metalplate_type}-{value.color} input-metal-text-virtual-{value.id == custom_state.embroidery_id ? 'active' : ''}"></div>
                                          </div>
                                          <div class="col-xs-12">
                                            <ul class="list-unstyled">
                                              <li><small>英語と日本語の組み合わせはできません。</small></li>
                                              <li><small>マークは①♪　②&#x1f5a4;　③★　④✿　が入れられます。<br>マークを入れる場合は指定の番号を入力して下さい。<br>入力例）①ふわりぃ②の場合 → ♪ふわりぃ&#x1f5a4;<br>スペース（空白）、中点（･）、ピリオド（.）を入れられます。</small></li>
                                            </ul>
                                          </div>
                                        </virtual>
                                      </virtual>
                                      <virtual if="{i == 3}">
                                        <virtual if="{input.type == 'text'}">
                                          <input type="{input.type}" name="{input.name}" data-name="{input.name}" data-code="{value.code}" data-title="{value.name}" id="{input.name}_input_{value.code}" class="form-control" placeholder="{input.placeholder}" value="{value.id == custom_state.embroidery_id ? custom_state.embroidery_content : ''}" maxlength="{input.maxlength}" title="{value.name}" ref="{value.name}" onclick="{setEmbroideryContent}" onInput="{inputEmbroideryContent}" disabled="{value.id!=custom_state.embroidery_id}" required="{value.id == custom_state.embroidery_id}">
                                        </virtual>
                                        <div class="col-xs-11">
                                          <div class="help-block with-errors"></div>
                                        </div>
                                      </virtual>
                                    </div>
                                    </virtual>
                                  </form>
                                </div>
                              </dd>
                            </dl>
                            </virtual>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[13].note}" class="text-left">{master.steps[13].note}</p>
                        </div>
                        <div class="row ctl-step-checkout">
                          <div class="row">
                            <div class="col-xs-6 text-center">
                              <a href="javascript:void(0);" class="btn btn-link" onclick="{customSample}"><img src="/assets/img/common/btn_try_sample_boy.png" data-sample="boys" alt="男の子試着イメージ"></a>
                            </div>
                            <div class="col-xs-6 text-center">
                              <a href="javascript:void(0);" class="btn btn-link" onclick="{customSample}"><img src="/assets/img/common/btn_try_sample_girl.png" data-sample="girls" alt="女の子試着イメージ"></a>
                            </div>
                            <div class="col-xs-12 text-center">
                              <p>&nbsp;<br>
                              <a href="javascript:void(0);" class="btn btn-link" onclick="{checkOut}"><img src="/assets/img/common/btn_checkout_orange.png" alt="購入手続きへ"></a></p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
              <div class="row ctl-step-price">
                <p><big><span class="glyphicon glyphicon-yen" aria-hidden="true"></span></big> ただいまの合計金額<big><strong class="total-price" data-total="price">{Number(custom_state.order_price).toLocaleString()}</strong></big>円<small>（税込）</small></p>
              </div>
              <!--
              <div class="row ctl-step-weight">
                <p><big><span class="glyphicon glyphicon-scale" aria-hidden="true"></span></big> 総重量：<span class="total-weight" data-total="weight">{this.custom_state.order_weight}</span>g <small>(重量はあくまで目安として下さい)</small></p>
              </div>
              -->
            </div>
          </div>
        </div>
      </article>
      <div class="row ctl-specification-footer">
        <div class="col-xs-12">&nbsp;</div>
      </div>
    </div>
  </div>
  <script>
  // This
  var self = this;
  // Canvas
  var canvas, context_c, pallet, context_p, fitting, context_f;
  // Swiper
  var swiperAngle, swiperStep, swiperDetail;
  /*
   * Setup Custom Data
   *
   */
  this.mixin('CustomMixin');
  this.redrawing = this.finished = true;
  this.custom_image = localStorage.getItem("custom_image") || null;
  this.custom_angle = opts.custom_angle || null;
  this.custom_state = opts.custom_state || null;
  // Master Data (Simulation)
  this.master = {};
  this.master.scene = {
    step_1: opts.parts_data.step_1 || null,
    step_2_1: opts.parts_data.step_2_1 || null,
    step_2_2: opts.parts_data.step_2_2 || null,
    step_3: opts.parts_data.step_3 || null,
    step_4_1: opts.parts_data.step_4_1 || null,
    step_4_2: opts.parts_data.step_4_2 || null,
    step_5: opts.parts_data.step_5 || null,
    step_6: opts.parts_data.step_6 || null,
    step_7_1: opts.parts_data.step_7_1 || null,
    step_7_2: opts.parts_data.step_7_2 || null,
    step_8: opts.parts_data.step_8 || null,
    step_9: opts.parts_data.step_9 || null,
    step_10_1: opts.parts_data.step_10_1 || null,
    step_10_2: opts.parts_data.step_10_2 || null,
    step_11: opts.parts_data.step_11 || null,
    step_12: opts.parts_data.step_12 || null,
    step_13: opts.parts_data.step_13 || null,
    step_14: opts.parts_data.step_14 || null,
    step_15: opts.parts_data.step_15 || null
  };
  // Add Parts Data
  this.master.scene.step_15.parts[1].form = {
                                        //name: 'form-embroidery-02',
                                        inputs:[
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 10,
                                            label: 'プレーン'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 11,
                                            label: 'ハート'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 12,
                                            label: 'クラウン'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 13,
                                            label: 'フラワー'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'char',
                                            value: 0,
                                            label: '半角'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'char',
                                            value: 1,
                                            label: '全角'
                                          },
                                          {
                                            type: 'text',
                                            name: 'embroidery_content',
                                            value: '',
                                            placeholder: '文字を入力してください',
                                            validator: self.custom_state.metalplate_char,
                                            validations:[
                                              {
                                                maxlength: 15,
                                                pattern: '^([0-9A-Z]|[①②③④♪♥★✿]|[\s ]|[.]|[･]|[・])+$'
                                              },
                                              {
                                                maxlength: 10,
                                                pattern: '^([ぁ-んァ-ン一-龥々Ａ-Ｚ]|[①②③④♪♥★✿]|[\s　]|ー|―|[.]|[･]|[．]|[・])+$'
                                              }
                                            ]
                                          }
                                        ]
                                      };
  this.master.scene.step_15.parts[2].form = {
                                        //name: 'form-embroidery-02',
                                        inputs:[
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 10,
                                            label: 'プレーン'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 11,
                                            label: 'ハート'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 12,
                                            label: 'クラウン'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'type',
                                            value: 13,
                                            label: 'フラワー'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'char',
                                            value: 0,
                                            label: '半角'
                                          },
                                          {
                                            type: 'radio',
                                            name: 'char',
                                            value: 1,
                                            label: '全角'
                                          },
                                          {
                                            type: 'text',
                                            name: 'embroidery_content',
                                            value: '',
                                            placeholder: '文字を入力してください',
                                            validator: self.custom_state.metalplate_char,
                                            validations:[
                                              {
                                                maxlength: 15,
                                                pattern: '^([0-9A-Z]|[①②③④♪♥★✿]|[\s ]|[.]|[･]|[・])+$'
                                              },
                                              {
                                                maxlength: 10,
                                                pattern: '^([ぁ-んァ-ン一-龥々Ａ-Ｚ]|[①②③④♪♥★✿]|[\s　]|ー|―|[.]|[･]|[．]|[・])+$'
                                              }
                                            ]
                                          }
                                        ]
                                      };
                                      /*
  this.master.scene.step_14.parts[3].form = {
                                        //name: 'form-embroidery-03',
                                        inputs:[
                                          {
                                            type: 'hidden',
                                            name: 'embroidery',
                                            value: this.master.scene.step_14.parts[3].name,
                                            placeholder: ''
                                          },
                                          {
                                            type: 'text',
                                            name: 'embroidery_content',
                                            value: '',
                                            maxlength: 6,
                                            patterns: 'null',
                                            placeholder: '文字を入力してください'
                                          }
                                        ]
                                      };
                                      */
//console.log( this.master.scene.step_14 );
  // Custom ID
  this.master.records = [
    'material_id',
    'color_id',
    'edge_id',
    'stitch_id',
    'kabuse_design_id',
    '',
    'decoration_rivets_id',
    'back_color_id',
    'machi_design_id',
    '',
    'fastener_puller_id',
    'security_buzzer_id',
    'front_pocket_id',
    '',
    'interior_id',
    // 'front_rivets_id',
    'shoulder_slip_belt_id',
    'reflection_id',
    'core_material_id',
    'embroidery_id'
  ];
  // Custom Steps
  this.master.steps = [
    //self.master.scene.step_1,
    self.master.scene.step_2_1,
    self.master.scene.step_3,
    self.master.scene.step_4_1,
    self.master.scene.step_5,
    self.master.scene.step_6,
    self.master.scene.step_7_1,
    self.master.scene.step_8,
    self.master.scene.step_9,
    self.master.scene.step_10_1,
    self.master.scene.step_11,
    self.master.scene.step_12,
    self.master.scene.step_13,
    self.master.scene.step_14,
    self.master.scene.step_15
  ];
  // Current
  this.master.current = {step: (q.step)? Number(q.step) : 0, angle: (q.angle)? Number(q.angle) : 0, prices: [], weights: [], color: null};
  // Default value
  this.custom_state.order_price = self.master.scene.step_1.parts[0].price;
  this.custom_state.order_weight = self.master.scene.step_1.parts[0].weight;
  this.setCurrentColor = function(){
    $.each(self.master.scene.step_2_1.parts, function(key, value){
      if(value.id == self.custom_state.color_id) self.master.current.color = value.color;
    });
  }
  self.setCurrentColor();
  if(!this.custom_state.embroidery_content || this.custom_state.embroidery_content == 'undefined') this.custom_state.embroidery_content = '';
  // bind on click disabled
  this.bindOnClickDisabled = function(e){
    e.preventUpdate = true;
  }
  // 描画の向き
  this.setAngle = function(e){
    e.preventUpdate = (this.master.current.angle == $('input', e.currentTarget).val())? true : false;
    if(!e.preventUpdate){
      this.master.current.angle = e.currentTarget.getAttribute('data-angle');
    }
  };
  // 素材ID
  this.setMaterialId = function(e){
    e.preventUpdate = (this.custom_state.material_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.material_id = e.target.value;
      this.custom_state.material_code = $(e.target).data('code');
      parent.q = {};
      route('?material_id=' + e.target.value);
      self.unmount(true);
      obs.trigger("initCustomType", this.custom_state);
    }
  }.bind(this);
  // 本体カラーID
  this.setColorId = function(e){
  	e.stopPropagation(); // bootstrap
    e.preventUpdate = (this.custom_state.color_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.color_id = e.target.value;
      this.custom_state.color_code = $(e.target).data('code');
      this.custom_state.edge_id = $('#tab-2-2 [data-code="' + e.currentTarget.getAttribute('data-code') + '"]').val();
      //console.log(e.currentTarget.getAttribute('data-code'));
    }
    self.setCurrentColor();
    $.each(self.master.scene.step_4_1.parts, function(key, value){
      if(value.code == self.custom_state.kabuse_design_code && value.color == self.master.current.color) self.custom_state.kabuse_design_id = value.id;
    });
    $.each(self.master.scene.step_7_1.parts, function(key, value){
      if(value.code == self.custom_state.machi_design_code && value.color == self.master.current.color) self.custom_state.machi_design_id = value.id;
    });
    $.each(self.master.scene.step_9.parts, function(key, value){
      if(value.code == self.custom_state.security_buzzer_code && value.color == self.master.current.color) self.custom_state.security_buzzer_id = value.id;
    });
    $.each(self.master.scene.step_10_1.parts, function(key, value){
      if(value.code == self.custom_state.front_pocket_code && value.color == self.master.current.color) self.custom_state.front_pocket_id = value.id;
    });
    //console.log(this.master.scene.step_2_1.parts.indexOf(e.item.value));
  }.bind(this);
  // へりカラーID
  this.setEdgeId = function(e){
    e.preventUpdate = (this.custom_state.edge_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.edge_id = e.target.value;
    }
  }.bind(this);
  // ステッチカラーID
  this.setStitchId = function(e){
    e.preventUpdate = (this.custom_state.stitch_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.stitch_id = e.target.value;
    }
  }.bind(this);
  // カブセデザインID
  this.setKabuseDesignId = function(e){
    e.preventUpdate = (this.custom_state.kabuse_design_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.kabuse_design_id = e.target.value;
    }
  }.bind(this);
  // カブセ飾り鋲ID
  this.setDecorationRivetsId = function(e){
    e.preventUpdate = (this.custom_state.decoration_rivets_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.decoration_rivets_id = e.target.value;
    }
  }.bind(this);
  // 背中カラーID
  this.setBackColorId = function(e){
    e.preventUpdate = (this.custom_state.back_color_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.back_color_id = e.target.value;
    }
  }.bind(this);
  // 大マチデザインID
  this.setMachiDesignId = function(e){
    e.preventUpdate = (this.custom_state.machi_design_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.machi_design_id = e.target.value;
    }
  }.bind(this);
  // ファスナーグリップID
  this.setFastenerPullerId = function(e){
    e.preventUpdate = (this.custom_state.fastener_puller_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.fastener_puller_id = e.target.value;
    }
  }.bind(this);
  // 肩ひも防犯ブザー用フックID
  this.setSecurityBuzzerId = function(e){
    e.preventUpdate = (this.custom_state.security_buzzer_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.security_buzzer_id = e.target.value;
    }
  }.bind(this);
  // ポケット窓枠ID
  this.setFrontPocketId = function(e){
    e.preventUpdate = (this.custom_state.front_pocket_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.front_pocket_id = e.target.value;
    }
  }.bind(this);
  // 内装柄ID
  this.setInteriorId = function(e){
    e.preventUpdate = (this.custom_state.interior_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.interior_id = e.target.value;
    }
  }.bind(this);
  // 前締め鋲ID
  this.setFrontRivetsId = function(e){
    e.preventUpdate = (this.custom_state.front_rivets_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.front_rivets_id = e.target.value;
    }
  }.bind(this);
  // 720°全方向反射ID
  this.setReflectionId = function(e){
    e.preventUpdate = (this.custom_state.reflection_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.reflection_id = e.target.value;
    }
  }.bind(this);
  // １００耐芯材ID
  this.setCoreMaterialId = function(e){
    e.preventUpdate = (this.custom_state.core_material_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.core_material_id = e.target.value;
    }
  }.bind(this);
  // 背負いずれ防止ベルトID
  this.setShoulderSlipBeltId = function(e){
    e.preventUpdate = (this.custom_state.shoulder_slip_belt_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.shoulder_slip_belt_id = e.target.value;
    }
  }.bind(this);
  // ネーム刺繍有無ID
  this.setEmbroideryId = function(e){
    e.preventUpdate = (this.custom_state.embroidery_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.embroidery_id = e.target.value;
      this.custom_state.embroidery = $(e.target).attr('ref');
      this.custom_state.embroidery_content = ( ( this.custom_state.embroidery_code == '02' && $(e.target).data('code') == '04' ) || ( this.custom_state.embroidery_code == '04' && $(e.target).data('code') == '02' ) )? self.custom_state.embroidery_content : '';
      this.custom_state.embroidery_code = $(e.target).data('code');
      $('.swiper-slide-active form').each(function(index, el){
        if( $(el).attr('id') != 'form-embroidery-content-' + self.custom_state.embroidery_code ){
          $(this).validator('destroy');
        }
      });
      swiperDetail.update(true);
    }
    switch(this.custom_state.embroidery_code){
      case '02': // メタルプレート名入れ
      case '04':
        this.master.current.angle = 4; // 内装
        break;
      default:
        this.master.current.angle = 0; // 正面
        break;
    }
    //this.custom_state.embroidery_content_html = self.simulationText(true);
    //console.log(self.simulationText(true));
    //console.log(this.custom_state);
  }.bind(this);
  // ネーム刺繍内容フォームの送信
  this.submitEmbroideryContentForm = function(e){
    e.preventDefault();
    return false;
  };
  // メタルプレート入力規則
  this.setMetalPattern = function(e){
    this.custom_state.metalplate_char = e.target.value;
    this.master.scene.step_15.parts[1].form.inputs[6].validator = e.target.value;
    this.master.scene.step_15.parts[2].form.inputs[6].validator = e.target.value;
  }
  // メタルプレートタイプ
  this.setMetalType = function(e){
    this.custom_state.metalplate_type = e.target.value;
  }
  // ネーム刺繍内容:onclick
  this.setEmbroideryContent = function(e){
    $('#form-embroidery-content-' + self.custom_state.embroidery_code).validator('update').validator('validate');
    //this.custom_state.embroidery_content = e.target.value;
    //this.custom_state.embroidery_content_html = (this.custom_state.embroidery_code == '02' || this.custom_state.embroidery_code == '04') ? self.simulationText(true) : '';
  };
  // ネーム刺繍内容:onInput
  this.inputEmbroideryContent = function(e){
    this.custom_state.embroidery_content = e.target.value;
    this.custom_state.embroidery_content_html = (this.custom_state.embroidery_code == '02' || this.custom_state.embroidery_code == '04') ? self.simulationText(true) : '';
    //if(this.custom_state.embroidery_code == '02' || this.custom_state.embroidery_code == '04'){
      //$('.input-metal-text-virtual').text(this.custom_state.embroidery_content);
    //}
    //console.log(this.master.scene.step_12);
    //console.log(this.custom_state);
  };
  // 金額
  this.updatePrice = function(){
    var lastPrice = self.custom_state.order_price;
    self.custom_state.order_price = 0;
    self.master.current.prices.forEach(function(value, key){
      self.custom_state.order_price += Number(value);
    });
    if(lastPrice != self.custom_state.order_price){
      this.redrawing = false;
      this.update();
    }
    this.updateCurrent();
  };
  // 重量
  this.updateWeight = function(){
    var lastWeight = self.custom_state.order_weight;
    self.custom_state.order_weight = 0;
    self.master.current.weights.forEach(function(value, key){
      self.custom_state.order_weight += Number(value);
    });
    if(lastWeight != self.custom_state.order_weight){
      this.redrawing = false;
      this.update();
    }
    this.updateCurrent();
  };
  // 合計金額と重量を更新
  this.updateCurrent = function(){
    //console.log(self.master.current.prices);
    //console.log(self.master.current.weights);
  };
  // 読み込み処理
  this.Loader = function(expectedCnt, callback){
    var cnt = 0;
    return function(){
      if(++cnt == expectedCnt){
        callback();
      }
    }
  };

  // Canvas 画像の描画
  this.drawCustomize = function(text){
    // loading image Start
    $('.spinner-canvas').fadeIn('fast', function(){
      self.finished = false;
    });
    // 初期化
    self.master.current.prices = [];
    self.master.current.weights = [];
    if(context_c){
      context_c.globalAlpha = 1.0;
      context_c.clearRect( 0 , 0 , 560 , 560 );
      context_c.setTransform(1, 0, 0, 1, 0, 0);
    }
    if(context_p){
      context_p.globalAlpha = 1.0;
      context_p.clearRect( 0 , 0 , 560 , 560 );
      context_p.setTransform(1, 0, 0, 1, 0, 0);
    }
    if(context_f){
      context_f.globalAlpha = 1.0;
      context_f.clearRect( 0 , 0 , 560 , 560 );
      context_f.setTransform(1, 0, 0, 1, 0, 0);
    }
    var key, image_src = [], images = [], stitch_src = [], stitches = [], attach_src = [], attachments = [], stitch_color = null;

    //
    var attach_path = '/assets/img/simulation/canvas/full/';
    var imageSources = function(){
      Object.keys(self.master.scene).forEach(function(value, index, arr){
        var record_id = self.master.records[index];
        var metalplate_type = self.custom_state.metalplate_type;
        var embroidery_code = self.custom_state.embroidery_code;
        var base_code = self.custom_state.base_code;
        if(record_id){
          var key = Object.keys(self.master.scene[value].parts).reduce(function(r, k){
            return (self.master.scene[value].parts[k].id == self.custom_state[record_id]) ? k : r ;
          }, null);
          var obj = (self.master.scene[value].parts[key])? self.master.scene[value].parts[key] : null;
          if(key && obj){
            self.custom_state[record_id.replace(/_id/g, "_code")] = obj.code;
            if(obj.price) self.master.current.prices.push(Number(obj.price));
            if(obj.weight) self.master.current.weights.push(obj.weight);
            if(obj.canvas){
              if(obj.canvas[self.master.current.angle]){
                //console.log(record_id);
                switch(record_id){
                  // color_id
                  case 'edge_id':
                    // ⑦ｿｰﾄﾞまたは、⑨ｴﾝﾌﾞﾚﾑの場合
                    if(self.custom_state.kabuse_design_code == '09' || self.custom_state.kabuse_design_code == '07'){
                      if(self.master.current.angle == 0 || self.master.current.angle == 5){
                        image_src.push(attach_path + 'sword/full_type-1_step-1-2_code-' + self.custom_state.edge_code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                      }else{
                        image_src.push(obj.canvas[self.master.current.angle]);
                      }
                    }else{
                      image_src.push(obj.canvas[self.master.current.angle]);
                    }
                    break;
                  case 'stitch_id':
                    if(obj.color) stitch_color = obj.color;
                    // ⑦ｿｰﾄﾞまたは、⑨ｴﾝﾌﾞﾚﾑの場合
                    if(self.custom_state.kabuse_design_code == '09' || self.custom_state.kabuse_design_code == '07'){
                      if(self.master.current.angle == 0 || self.master.current.angle == 5){
                        stitch_src.push(attach_path + 'sword/full_type-1_step-2_code-888_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                      }else{
                        stitch_src.push(obj.canvas[self.master.current.angle]);
                      }
                    }else{
                      stitch_src.push(obj.canvas[self.master.current.angle]);
                    }
                    break;
                  case 'kabuse_design_id':
                    image_src.splice(1, 0, obj.canvas[self.master.current.angle]);
                    $.each(self.master.scene[Object.keys(self.master.scene)[index+1]].parts, function(i, part){
                      if(obj.code == part.code && part.canvas[self.master.current.angle] != null){
                        stitch_src.push(part.canvas[self.master.current.angle]);
                      }
                    });
                    // かぶせ：スタイリッシュ
                    /*
                    if(index == 4 && obj.code == '02'){
                      attach_src.push(attach_path + 'attach/step-4_code-' + obj.code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                    }
                    */
                    break;
                  case 'machi_design_id':
                  case 'front_pocket_id':
                    image_src.push(obj.canvas[self.master.current.angle]);
                    $.each(self.master.scene[Object.keys(self.master.scene)[index+1]].parts, function(i, part){
                      if(obj.code == part.code && part.canvas[self.master.current.angle] != null){
                        stitch_src.push(part.canvas[self.master.current.angle]);
                      }
                    });
                    // かぶせ：スタイリッシュ
                    /*
                    if(index == 4 && obj.code == '02'){
                      attach_src.push(attach_path + 'attach/step-4_code-' + obj.code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                    }
                    */
                    // 大マチ：スタイリッシュ
                    if(index == 8 && obj.code == '18'){
                      attach_src.push(attach_path + 'attach/step-7_code-' + obj.code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                    }
                    // サイドデザイン：①ﾊｰﾄ&ﾚｰｽ
                    if(index == 8 && obj.code == '11'){
                      if(self.master.current.angle != 4){ // 内装アングル以外
                        attach_src.push(attach_path + 'attach/full_type-1_step-6-1_code-' + obj.code + '_color-code-' + self.custom_state.edge_code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                        if(self.master.current.angle != 2){ // 両サイドアングル以外
                          attach_src.push(attach_path + 'attach/attach_sidedesign_heart_angle-' + (Number(self.master.current.angle) + 1) + '.png');
                        }
                      }else{ // 内装アングル
                        attach_src.push(attach_path + 'attach/full_type-1_step-6-1_code-' + obj.code + '_color-code-' + self.custom_state.edge_code + '_angle-' + (Number(self.master.current.angle)) + '.png');
                        attach_src.push(attach_path + 'attach/full_type-1_step-6-1_code-' + obj.code + '_angle-' + (Number(self.master.current.angle)) + '.png');
                        attach_src.push(attach_path + 'attach/attach_sidedesign_heart_angle-' + (Number(self.master.current.angle)) + '.png');
                      }
                    }
                    //console.log(index, obj.code, self.custom_state.edge_code, self.master.current.angle);
                    break;
                  case 'fastener_puller_id':
                    attach_src.push(obj.canvas[self.master.current.angle]);
                    $.each(self.master.scene[Object.keys(self.master.scene)[index+1]].parts, function(i, part){
                      if(obj.code == part.code && part.canvas[self.master.current.angle] != null){
                        //stitch_src.push(part.canvas[self.master.current.angle]);
                      }
                      // ポケット窓枠
                      if(self.master.current.angle == 4){
                        attach_src.push(attach_path + 'attach/step-10_code-' + self.custom_state.front_pocket_code + '_angle-5.png');
                      }
                    });
                    break;
                  case 'decoration_rivets_id':
                      if(obj.code == 30){
                        stitch_src.push(attach_path + 'attach/full_type-1_step-4_code-20_stitch_angle-1.png');
                      }
                  case 'embroidery_id':
                    if(embroidery_code != '01'){
                      if(metalplate_type == 10){  // プレーン
                        if(embroidery_code == '04'){  // ゴールド
                          obj.canvas[4] = attach_path + 'attach/metal-plate-10-gold.png';
                        }else{
                          obj.canvas[4] = attach_path + 'attach/metal-plate-10-silver.png';
                        }
                      }else if(metalplate_type == 11){  // ハート
                        if(embroidery_code == '04'){  // ゴールド
                          obj.canvas[4] = attach_path + 'attach/metal-plate-11-gold.png';
                        }else{
                          obj.canvas[4] = attach_path + 'attach/metal-plate-11-silver.png';
                        }
                      }if(metalplate_type == 12){ // クラウン
                        if(embroidery_code == '04'){  // ゴールド
                          obj.canvas[4] = attach_path + 'attach/metal-plate-12-gold.png';
                        }else{
                          obj.canvas[4] = attach_path + 'attach/metal-plate-12-silver.png';
                        }
                      }if(metalplate_type == 13){ // フラワー
                        if(embroidery_code == '04'){  // ゴールド
                          obj.canvas[4] = attach_path + 'attach/metal-plate-13-gold.png';
                        }else{
                          obj.canvas[4] = attach_path + 'attach/metal-plate-13-silver.png';
                        }
                      }
                    }
                  default:
                    image_src.push(obj.canvas[self.master.current.angle]);
                    break;
                };
              };
            };
          }else{
            //console.log(index, value, 'key : ' + key, obj.canvas);
          }
        }else{
          var record_id = self.master.records[index-1];
          var key = Object.keys(self.master.scene[value].parts).reduce(function(r, k){
            return (self.master.scene[value].parts[k].code == self.custom_state[record_id.replace(/_id/g, "_code")]) ? k : r ;
          }, null);
          var obj = (self.master.scene[value].parts[key])? self.master.scene[value].parts[key] : null;
          if(obj && obj.canvas[self.master.current.angle]){
            switch(index){
              default:
                stitch_src.push(obj.canvas[self.master.current.angle]);
                break;
            };
          }else{
            //console.log(index, value, 'key : ' + key, obj.canvas);
          }
        }
      });
      // Attachments
      attach_src.push(attach_path + 'attach/angle-' + (Number(self.master.current.angle) + 1) + '.png');
      /*
      if(self.master.current.angle == 1){
        attach_src.push(attach_path + 'attach/step-9_code-' + self.custom_state.security_buzzer_code + '_angle-2.png');
        //console.log(attach_path + 'attach/step-9_code-' + self.custom_state.security_buzzer_code + '_angle-2.png');
      }
      */
      if(self.master.current.angle == 4 && self.custom_state.front_pocket_code != '07'){
        attach_src.push(attach_path + 'attach/step-10_code-' + self.custom_state.front_pocket_code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
        //console.log(attach_path + 'attach/step-10_code-' + self.custom_state.front_pocket_code + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
      }
      //console.log(image_src, stitch_src, attach_src);
    };
    imageSources();
    var loadAttachments = self.Loader(attach_src.length, function(){
      attachments.crossOrigin = "Anonymous";
      if(context_f) context_f.clearRect( 0 , 0 , 560 , 560 );
      attachments.forEach(function(value, key){
        if(!value.error_flag){
          context_f.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      stitchForEach();
    });
    var loadStitches = self.Loader(stitch_src.length, function(){
      stitches.crossOrigin = "Anonymous";
      if(context_p) context_p.clearRect( 0 , 0 , 560 , 560 );
      stitches.forEach(function(value, key){
        if(!value.error_flag){
          context_p.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });
      // copy stitch color
      if(stitch_color){
        var imgd = context_p.getImageData(0, 0, 560, 560),
            pix = imgd.data,
            uniqueColor = hex2rgb(stitch_color);
        for (var i = 0, n = pix.length; i <n; i += 4) {
            pix[i] = uniqueColor[0];   // Red component
            pix[i+1] = uniqueColor[1]; // Blue component
            pix[i+2] = uniqueColor[2]; // Green component
            //if(pix[i+3] > 0) pix[i+3] = 0;
            //pix[i+3] is the transparency.
        }
        context_p.putImageData(imgd, 0, 0);
      }else{
        //console.log(self.custom_state);
      }
      imageForEach();
    });

    var loadImages = self.Loader(image_src.length, function(){

      images.crossOrigin = "Anonymous";
      if(context_c) context_c.clearRect( 0 , 0 , 560 , 560 );
      images.forEach(function(value, key){
        if(!value.error_flag){
          context_c.drawImage(value,(canvas.width - value.width)/2,(canvas.height - value.height )/2,value.width,value.height);
        }
      });

      // loading image complete
      if(self.custom_state.embroidery_content && self.master.current.step == 13){
        if((self.custom_state.embroidery_code == '02' || self.custom_state.embroidery_code == '04') && self.master.current.angle == 4){
          context_c.rotate(2 * Math.PI / 180);
          context_c.font = "15px 'ＭＳ ゴシック'";
          context_c.fillStyle = "black";
          context_c.scale(0.5, 0.5);
          if(self.custom_state.metalplate_type == null || self.custom_state.metalplate_type == 10){
            context_c.fillText(self.simulationText(false), 395, 390, 100);
          }else if(self.custom_state.metalplate_type == 12){
            context_c.fillText(self.simulationText(false), 395, 395, 100);
          }else{
            context_c.fillText(self.simulationText(false), 395, 385, 100);
          }
        }else if(self.custom_state.embroidery_code == '03' && self.master.current.angle == 3){
          context_c.font = "13px sans-serif";
          context_c.fillStyle = "gray";
          context_c.fillText(self.simulationText(false), 268, 166, 100);
        }else{
          context_c.fillText('', 20, 75, 200);
        }
        context_c.setTransform(1, 0, 0, 1, 0, 0);
      };

      if(stitch_src.length) context_c.drawImage(pallet, 0, 0, 560, 560);
      if(attach_src.length) context_c.drawImage(fitting, 0, 0, 560, 560);

      $('.spinner-canvas').fadeOut('fast', function(){
        self.updatePrice();
        self.updateWeight();
        self.finished = true;
      });

    });

    var attachForEach = function(){
      if(attach_src.length){
        attach_src.forEach(function(value, key){
          attachments[key] = new Image();
          attachments[key].crossOrigin = "Anonymous";
          attachments[key].onload = function(){
            loadAttachments();
          };
          attachments[key].onerror = function(){
            this.error_flag = true;
            loadAttachments();
          };
          attachments[key].src = value;
        });
      }else{
        stitchForEach();
      }
    };
    var stitchForEach = function(){
      if(stitch_src.length){
        stitch_src.forEach(function(value, key){
          stitches[key] = new Image();
          stitches[key].crossOrigin = "Anonymous";
          stitches[key].onload = function(){
            loadStitches();
          };
          stitches[key].onerror = function(){
            this.error_flag = true;
            loadStitches();
          };
          stitches[key].src = value;
        });
      }else{
        imageForEach();
      }
    };
    var imageForEach = function(){
      if(image_src.length){
        image_src.forEach(function(value, key){
          images[key] = new Image();
          images[key].crossOrigin = "Anonymous";
          images[key].onload = function(){
            loadImages();
          };
          images[key].onerror = function(){
            this.error_flag = true;
            loadImages();
          };
          images[key].src = value;
        });
      }else{
        $('.spinner-canvas').fadeOut();
        //console.logconsole.log('image_src : none');
      }
    };
    attachForEach();
  };

  // Simulation Text
  this.simulationText = function(html){
    var str = self.custom_state.embroidery_content;
    str = str.replace(/①/g, '♪');
    str = str.replace(/②/g, '\ud83d\udda4');
    str = str.replace(/③/g, '★');
    str = str.replace(/④/g, '✿');
    if(html){
      str = str.replace(/ /g, '&nbsp;');
      //$('.input-metal-text-virtual-active').html(str);
    }
    $('.input-metal-text-virtual-active').html(str);
    return str;
  };


  // Custom Smaple
  this.customSample = function(e){
    var target = e ? e.target : window.event.srcElement;
    var angle = 0;
    var errors = $('.has-error').size();
    self.master.current.angle = angle;
    $('.spinner').fadeIn('fast', function(){
      if(errors != 0){
        $('.spinner').fadeOut('fast', function(){
          //console.log('handle the invalid form...', errors);
        });
      }else{
        //console.log( self.finished, $(target).data('sample') );
        if(self.finished && $(target).data('sample')){
          var dataUrl = canvas.toDataURL("image/png");
          if(dataUrl && dataUrl.size() >= 100000){
            localStorage.setItem("custom_image", dataUrl);
            self.custom_state.custom_image = localStorage.getItem('custom_image');
            localStorage.setItem('custom_order', JSON.stringify(self.custom_state));
            setTimeout(function(){
              window.location.href = './sample/' + $(target).data('sample') + '/?step=' + self.master.current.step;
            }, 500);
          }else{
            setTimeout(function(){
              //self.customSample();
              $(target).trigger('click');
              return false;
            }, 1000);
          }
        }else{
          self.master.current.angle = angle;
          setTimeout(function(){
            //self.customSample();
            $(target).trigger('click');
            return false;
          }, 1000);
        }

      }
    });
};
  // CheckOut
  this.checkOut = function(e){
    //console.log( self.custom_state );
    var angle = 0;
    var errors = $('.has-error').size();
    self.master.current.angle = angle;
    $('.spinner').fadeIn('fast', function(){
      if(errors != 0){
        $('.spinner').fadeOut('fast', function(){
          //console.log('handle the invalid form...', errors);
        });
      }else{
        if(self.finished){
          var dataUrl = canvas.toDataURL("image/png");
          if(dataUrl && dataUrl.size() >= 100000){
            localStorage.setItem("custom_image", dataUrl);
            self.custom_state.custom_image = localStorage.getItem('custom_image');
            localStorage.setItem('custom_order', JSON.stringify(self.custom_state));
            setTimeout(function(){
              window.location.href = '/order/#/step1';
            }, 500);
          }else{
            setTimeout(function(){
              self.checkOut();
              return false;
            }, 1000);
          }
        }else{
          self.master.current.angle = angle;
          setTimeout(function(){
            self.checkOut();
            return false;
          }, 1000);
        }
      }
    });
  };

  // before the tag is mounted
  this.on('before-mount', function() {
  });

  // right after the tag is mounted on the page
  this.on('mount', function(){
    //
    this.simulationText(true);

    // DOM fully loaded and parsed
    obs.trigger("documentReady", self);

    // All resources finished loading
    $(window).load(function(e){
      obs.trigger("windowLoad", e);
      // 初回ページローディング完了でローダーを非表示
      var loder = ($('.spinner').size()) ? $('.spinner') : null;
      if(loder && loder.data('mount') == 0){
        $('.spinner').fadeOut();
      }
      // ページのローディング完了
      if($('.input-metal-text-virtual').size()){
        $('.input-metal-text-virtual').each(function(index, element){
          $(element).outerHeight($(element).outerWidth() * 0.24);
        });
      }
    });

    // All resources finished loading &  resize
    $(window).on("resize", function(e){
      obs.trigger("windowResize", e.currentTarget);
      //
      if(swiperAngle){
        swiperAngle.destroy();
        swiperAngle = undefined;
        angleOptions['slidesPerColumn'] = (window.matchMedia('(max-width:533px)').matches) ? 1 : 2;
        swiperAngle = new Swiper('.ctl-angle-current', angleOptions);
      }
    });
    // Canvas
    canvas = document.getElementById('canvas');
    if( !canvas || !canvas.getContext ) return false;
    context_c = canvas.getContext('2d');
    context_c.fillStyle = "gray";
    context_c.textAlign = "center";
    context_c.textBaseline = "middle";
    // pallet
    pallet = document.createElement('canvas');
    pallet.width = pallet.height = 560;
    if( !pallet || !pallet.getContext ) return false;
    context_p = pallet.getContext('2d');
    // fitting
    fitting = document.createElement('canvas');
    fitting.width = fitting.height = 560;
    if( !fitting || !fitting.getContext ) return false;
    context_f = fitting.getContext('2d');

    self.master.current.step = (q.step)? Number(q.step) : 0;

    // 表示アングル切り替え
    var angleOptions = {
      slideClass: 'btn-slide',
      slidesPerView: 4,
      slidesPerColumn: (window.matchMedia('(max-width:533px)').matches) ? 1 : 2,
      slidesPerColumnFill: 'row',
      nextButton: '.btn-angle-next',
      prevButton: '.btn-angle-prev',
      spaceBetween: 0,
      simulateTouch: false,
      observer: true,
      watchSlidesProgress: true,
      watchSlidesVisibility: true,
      breakpoints: {
        533: {
          slidesPerView: 3,
          slidesPerColumn: 1,
          simulateTouch: true
        }
      },
      onAfterResize: function(swiper){},
      onInit: function(swiper){
        // ページのローディング完了
        if($('.spinner').size()) $('.spinner').fadeOut();
      }
    }
    swiperAngle = new Swiper('.ctl-angle-current', angleOptions);
    // 現在のステップ表示
    swiperStep = new Swiper('.ctl-step-current', {
      initialSlide: self.master.current.step,
      slideClass: 'current-slide',
      slidesPerView: 1.5,
      pagination: '.ctl-step-fraction',
      paginationType: 'fraction',
      spaceBetween: 10,
      onInit: function(swiper){},
      onSlideChangeStart: function(swiper){
        if(swiperDetail){
          self.master.current.step = swiper.activeIndex;
          swiperDetail.slideTo(self.master.current.step);
        }
      },
      onSlideChangeEnd: function(swiper){
        self.autoAngle();
      }
    });
    // パーツ選択表示
    swiperDetail = new Swiper('.ctl-step-detail', {
      initialSlide: self.master.current.step,
      slideClass: 'detail-slide',
      slidesPerView: 1,
      nextButton: '.btn-step-next',
      prevButton: '.btn-step-prev',
      spaceBetween: 0,
      //simulateTouch: false,
      //shortSwipes: false,
      longSwipes: false,
      followFinger: false,
      //allowTouchMove: false,
      autoHeight: true,
      onInit: function(swiper){
        self.update();
        var setScrollbarLeft = 0;
        switch( self.custom_state.material_id ){
          case "487":
            setScrollbarLeft = 360;
            break;
          case "722":
            setScrollbarLeft = 640;
            break;
          default:
            setScrollbarLeft = 0;
            break;
        }
        //console.log( 'material_id : ', setScrollbarLeft );
        $.mCustomScrollbar.defaults.axis = "x";
        $.mCustomScrollbar.defaults.theme = "inset-3-dark";
        $(".scrollbar-step1").mCustomScrollbar({
          setLeft: setScrollbarLeft + "px",
          axis: "x",
          theme: "inset-3-dark",
          documentTouchScroll: true,
        });

//    var swiper = new Swiper('.swiper-container', {
//      direction: 'vertical',
//      slidesPerView: 'auto',
//      freeMode: true,
//      scrollbar: {
//        el: '.swiper-scrollbar',
//      },
//      mousewheel: true,
//    });

      },
      onSlideChangeStart: function(swiper){
        if(swiperStep){
          self.master.current.step = swiper.activeIndex;
          swiperStep.slideTo(self.master.current.step);
        }
        $("#ctl-current .not-apply").fadeOut();
      },
      onSlideChangeEnd: function(swiper){
        self.master.current.step = swiper.activeIndex;
        swiper.update();
        self.autoAngle();
      }
    });
  });

  //
  this.autoAngle = function(){
    switch(self.master.current.step){
      case 6: // ファスナーグリップ
        self.master.current.angle = 0; // 正面
        break;
      case 4: // 背中カラー
      case 7: // 肩ひも防犯ブザー用フック
        self.master.current.angle = 1; // 背面
        break;
      case 5: // サイドデザイン
        self.master.current.angle = 2; // 両サイド
        break;
      case 8: // ポケット窓枠
      case 9: // 内装
        self.master.current.angle = 4; // 内装
        break;
      case 10: // チェストベルト
        self.master.current.angle = 0; // 正面
        $("#ctl-current .not-apply").fadeIn(); // 「シミュレーションに反映していません」
        break;
      case 12: // 100耐芯材
        self.master.current.angle = 0; // 正面
        $("#ctl-current .not-apply").fadeIn(); // 「シミュレーションに反映していません」
        break;
      case 13: // 名入れ
        switch(self.custom_state.embroidery_code){
          case '02': // ネームプレート
          case '04':
            self.master.current.angle = 4; // 内装
            break;
          default:
            self.master.current.angle = 0; // 正面
            break;
        }
        break;
      default:
        self.master.current.angle = 0; // 正面
        break;
    }
    self.update();
  }
  // allows recalculation of context data before the update
  this.one('update', function(){
    //console.log('update one');
    this.master.current.step = (q.step)? Number(q.step) : 0;
    this.master.current.angle = (q.angle)? Number(q.angle) : 0;
  });
  // right after the tag template is updated after an update call
  this.on('updated', function(){
    //console.log(self.custom_state);
    $('.ctl-step-detail input').each(function(index, el){
      if($(this).prop('checked')){
        self.custom_state[$(this).data('name')] = $(this).data('code');
        self.custom_state[$(this).attr('name').replace(/_id/g, "")] = $(this).data('title');
      }
    });
    // update & validate form
    $('#form-embroidery-content-' + self.custom_state.embroidery_code).validator('update').validator('validate');
    // validation
    var errors = $('.has-error').size();
    // swiper no swiping
    if(swiperDetail){
      if(self.master.current.step == 13 && (self.custom_state.embroidery_code == '02' || self.custom_state.embroidery_code == '04') && errors){
        $('.btn-step-next').addClass('btn-step-next-disabled');
        swiperStep.lockSwipeToNext();
        swiperDetail.lockSwipeToNext();
      }else{
        $('.btn-step-next').removeClass('btn-step-next-disabled');
        swiperStep.unlockSwipeToNext();
        swiperDetail.unlockSwipeToNext();
      }
    }
    // show after a tab has been shown
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      swiperDetail.update();
    });
    // draw customize
    if(self.redrawing) this.drawCustomize();
    self.redrawing = true;
    if($('.input-metal-text-virtual').size()){
      $('.input-metal-text-virtual').each(function(index, element){
        $(element).outerHeight($(element).outerWidth() * 0.24);
      });
    }
  });

  // before the tag is mounted
  this.on('before-unmount', function() {
    swiperDetail.destroy(true, true);
    $('.spinner').fadeIn();
  });
  </script>
</full>
<raw>
  <span></span>
  var str = opts.content.replace(/\r?\n/g, '<br>');
  str = str.replace(/&lt;br&gt;/g, '<br>');
  this.root.innerHTML = str.replace(/\\n/g, '<br>');
</raw>