<easy>
  <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-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_easy_{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_easy_{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 each="{value, key in master.scene.step_1.parts}" class="col-xs-6">
                                <dl>
                                  <dt class="text-center"><input type="radio" name="base_id" data-name="base_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.base_id}" onclick="{value.id == custom_state.base_id ? null : setBaseId}" title="{value.name}" ref="{value.name}" disabled="{value.stock == 1}"><label for="radio-step-1-{value.code}" class="radio-check-label {disabled: value.stock == 1}"> {value.name}</label></dt>
                                  <dd>
                                    <div class="thumbnail">
                                      <label for="radio-step-1-{value.code}"><img src="{value.image}" class="img-rounded" alt="{value.name}"></label>
                                      <div class="caption">
                                        <p><raw content="{value.text}"></raw></p>
                                        <h4 class="text-center">{Number(value.price).toLocaleString()}円（税込）</h4>
                                      </div>
                                    </div>
                                  </dd>
                                </dl>
                              </div>
                            </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[1].lead}" class="text-center">{master.steps[1].lead}</p>
                            <!--<p><img src="//fuwarii.com/user_data/packages/default/img/common/contents/border.jpg" class="img-responsive"></p>-->
                            <p>実際の商品と色合いや仕様が異なる場合がございます。<br>色合いの確認は、実際の生地見本や商品ラインナップにてご確認ください。</p>
                            <ul>
                              <li>商品の仕様は<a href="//fuwarii.com/user_data/easy_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}">
                                  <!--<div each="{value in master.scene.step_2_1.parts}" class="col-xs-4">-->
                                  <virtual each="{value 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">
                                 <div class="row {Object.keys(master.scene.step_2_2.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_2_2.parts).length}">
                                  <div each="{value in master.scene.step_2_2.parts}" class="col-xs-4">
                                    <label for="radio-step-2-2-{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="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}" title="{value.name}" ref="{value.name}" 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>
                                      </ul>
                                  </div>
                                 </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[2].lead}" class="text-center">{master.steps[2].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}" title="{value.name}" ref="{value.name}"><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 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_4.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}" data-length="{Object.keys(master.scene.step_4.parts).length}">
                              <virtual each="{value, i in master.scene.step_4.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-4-{value.code}" class="radio-check" checked="{value.id == custom_state.decoration_rivets_id}" onclick="{setDecorationRivetsId}" title="{value.name}" ref="{value.name}" 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}"></label><p>{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[3].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">
                              <virtual class="row {Object.keys(master.scene.step_5.parts).length > 4 ? 'd-scroll-y' : ''}" data-init="{num = 0}" each="{value in master.scene.step_5.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-5-{value.code}" class="radio-check" checked="{value.id == custom_state.back_color_id}" onclick="{setBackColorId}" title="{value.name}" ref="{value.name}" 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>
                                      </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[4].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[5].lead}" class="text-center">{master.steps[5].lead}</p>
                          </div>
                          <div class="col-xs-12">
                            <div class="row {Object.keys(master.scene.step_6.parts).length > 6 ? '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-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-6-{value.code}" class="radio-check" checked="{value.id == custom_state.fastener_puller_id}" onclick="{setFastenerPullerId}" 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 % 3) == 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[6].lead}" class="text-center">{master.steps[6].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_7.parts).length > 6 ? 'd-scroll-y' : ''}" data-init="{num = 0}">
                              <virtual each="{value in master.scene.step_7.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-7-{value.code}" class="radio-check" checked="{value.id == custom_state.interior_id}" onclick="{setInteriorId}" title="{value.name}" ref="{value.name}" 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">
                                        <label for="radio-step-7-{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[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[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/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_8.parts).length > 7 ? '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="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-8-{value.code}" class="radio-check" checked="{value.id == custom_state.shoulder_slip_belt_id}" onclick="{setShoulderSlipBeltId}" 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-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[6].note}" class="text-left">{master.steps[6].note}</p>
                        </div>
                      </div>
                      <div class="detail-slide"><!-- 360°全方向反射 -->
                        <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">
                          <!--
                            <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_9.parts).length > 9 ? '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}">
                                <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-9-{value.code}" class="radio-check" checked="{value.id == custom_state.reflection_id}" onclick="{setReflectionId}" 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}"></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[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">
                            <dl each="{value, i in master.scene.step_10.parts}" 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-10-{value.code}" class="radio-check" checked="{value.id == custom_state.embroidery_id}" onclick="{setEmbroideryId}" title="{value.name}" ref="{value.name}" disabled="{value.stock == 1}"><label for="radio-step-10-{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-10-{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_10.parts[1].code}" data-title="{this.master.scene.step_10.parts[1].name}（シルバー）" id="radio-step-10-{this.master.scene.step_10.parts[1].code}-{this.master.scene.step_10.parts[1].color}" class="" data-name="embroidery_code" value="{this.master.scene.step_10.parts[1].id}" checked="{this.master.scene.step_10.parts[1].id == custom_state.embroidery_id}" onclick="{setEmbroideryId}"> {this.master.scene.step_10.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_10.parts[2].code}" data-title="{this.master.scene.step_10.parts[2].name}（ゴールド）" id="radio-step-10-{this.master.scene.step_10.parts[2].code}-{this.master.scene.step_10.parts[2].color}" class="" data-name="embroidery_code" value="{this.master.scene.step_10.parts[2].id}" checked="{this.master.scene.step_10.parts[2].id == custom_state.embroidery_id}" onclick="{setEmbroideryId}"> {this.master.scene.step_10.parts[2].note}
                                        </label>
                                      </div>
                                      <div class="form-group col-xs-12"></div>
                                    </virtual>

                                    <div each="{input, n in value.form.inputs}" 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>
                                  </form>
                                </div>
                              </dd>
                            </dl>
                          </div>
                        </div>
                        <div class="row ctl-step-note">
                          <p show="{master.steps[9].note}" class="text-left">{master.steps[9].note}</p>
                        </div>
                        <div class="row ctl-step-checkout">
                          <p class="text-center"><a href="javascript:void(0);" onclick="{checkOut}"><img src="/assets/img/common/btn_checkout_blue.png" alt="購入手続きへ"></a></p>
                        </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: opts.parts_data.step_4 || null,
    step_5: opts.parts_data.step_5 || null,
    step_6: opts.parts_data.step_6 || null,
    step_7: opts.parts_data.step_7 || null,
    step_8: opts.parts_data.step_8 || null,
    step_9: opts.parts_data.step_9 || null,
    step_10: opts.parts_data.step_10 || null,
  };
  // Add Parts Data
  this.master.scene.step_10.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_10.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_8.parts[3].form = {
                                        //name: 'form-embroidery-03',
                                        inputs:[
                                          {
                                            type: 'hidden',
                                            name: 'embroidery',
                                            value: this.master.scene.step_8.parts[3].name,
                                            placeholder: ''
                                          },
                                          {
                                            type: 'text',
                                            name: 'embroidery_content',
                                            value: '',
                                            maxlength: 6,
                                            patterns: 'null',
                                            placeholder: '文字を入力してください'
                                          }
                                        ]
                                      };
                                      */
  // Custom ID
  this.master.records = [
    'base_id',
    'color_id',
    'edge_id',
    'stitch_id',
    'decoration_rivets_id',
    'back_color_id',
    'fastener_puller_id',
    'interior_id',
    'shoulder_slip_belt_id',
    'reflection_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,
    self.master.scene.step_5,
    self.master.scene.step_6,
    self.master.scene.step_7,
    self.master.scene.step_8,
    self.master.scene.step_9,
    self.master.scene.step_10
  ];
  // Current
  this.master.current = {step: 0, angle: 0, prices: [], weights: [], color: null};
  // Default value
  console.log(self.master.scene);
  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 = this.custom_state.embroidery_content_html = '';
  // 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.setBaseId = function(e){
    e.preventUpdate = (this.custom_state.base_id == e.target.value)? true : false;
    if(!e.preventUpdate){
      this.custom_state.base_id = e.target.value;
      this.custom_state.base_code = $(e.target).data('code');
      parent.q = {};
      route('?base_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();
    }
    self.setCurrentColor();
    //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.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.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.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.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);
  // 360°全方向反射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.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;
    }
  }.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_10.parts[1].form.inputs[6].validator = e.target.value;
    this.master.scene.step_10.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');
  };
  // ネーム刺繍内容: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);
    //}
  };
  // 金額
  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(){
  };
  // 読み込み処理
  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/easy/';
    var imageSources = function(){
      var base_type = self.custom_state.base_id;
      var metalplate_type = self.custom_state.metalplate_type;
      var embroidery_code = self.custom_state.embroidery_code;
      var base_code = self.custom_state.base_code;
      Object.keys(self.master.scene).forEach(function(value, index, arr){
        var record_id = self.master.records[index];
        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]){
                switch(index){
                  case 1:
                    // へりがシルバーとゴールドの場合に備えて本体カラーと同じへり画像も配列に追加
                    var key_edge = Object.keys(self.master.scene['step_2_2'].parts).reduce(function(r, k){
                      //console.log(self.master.scene['step_2_2'].parts[k].code, obj.code);
                      return (self.master.scene['step_2_2'].parts[k].code == obj.code) ? k : r ;
                    }, null);
                    var obj_edge = (self.master.scene['step_2_2'].parts[key_edge])? self.master.scene['step_2_2'].parts[key_edge] : null;
                    //console.log(obj_edge.canvas[self.master.current.angle]);
                    image_src.push(obj_edge.canvas[self.master.current.angle]);
                    image_src.push(obj.canvas[self.master.current.angle]);
                    break;
                  case 3:
                    if(obj.color) stitch_color = obj.color;
                    stitch_src.push(obj.canvas[self.master.current.angle]);
                    break;
                  case 4:
                    if(obj.code == 30){
                      stitch_src.push(attach_path + 'attach/full_type-1_step-4_code-20_stitch_angle-1.png');
                    }
                  case 8:
                  case 12:
                  case 10:
                    if(embroidery_code != '01'){
                      if(base_code == 1 || base_code == 2){ // グランコンパクト
                        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';
                          }
                        }
                      }else{  // マイフレンド
                        if(metalplate_type == 10){  // プレーン
                          if(embroidery_code == '04'){  // ゴールド
                            obj.canvas[4] = attach_path + 'attach/metal-plate-10-gold-myfriend.png';
                          }else{
                            obj.canvas[4] = attach_path + 'attach/metal-plate-10-silver-myfriend.png';
                          }
                        }else if(metalplate_type == 11){  // ハート
                          if(embroidery_code == '04'){  // ゴールド
                            obj.canvas[4] = attach_path + 'attach/metal-plate-11-gold-myfriend.png';
                          }else{
                            obj.canvas[4] = attach_path + 'attach/metal-plate-11-silver-myfriend.png';
                          }
                        }if(metalplate_type == 12){ // クラウン
                          if(embroidery_code == '04'){  // ゴールド
                            obj.canvas[4] = attach_path + 'attach/metal-plate-12-gold-myfriend.png';
                          }else{
                            obj.canvas[4] = attach_path + 'attach/metal-plate-12-silver-myfriend.png';
                          }
                        }if(metalplate_type == 13){ // フラワー
                          if(embroidery_code == '04'){  // ゴールド
                            obj.canvas[4] = attach_path + 'attach/metal-plate-13-gold-myfriend.png';
                          }else{
                            obj.canvas[4] = attach_path + 'attach/metal-plate-13-silver-myfriend.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('/assets/img/simulation/canvas/easy/attach/type-' + base_type + '_angle-' + (Number(self.master.current.angle) + 1) + '.png');
      if(self.master.current.angle == 1 || self.master.current.angle == 3 || self.master.current.angle == 5){
      }
      /*
      if(self.master.current.angle == 1){
        attach_src.push('/assets/img/simulation/canvas/full/attach/step-9_code-' + self.custom_state.security_buzzer_code + '_angle-2.png');
      }
      */
      //console.log(image_src, stitch_src, attach_src);
      //console.log(image_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 == 9){
        if((self.custom_state.embroidery_code == '02' || self.custom_state.embroidery_code == '04') && self.master.current.angle == 4){
          //context_c.rotate(1 * Math.PI / 180);
          //context_c.rotate(10/182 * Math.PI);
          context_c.font = "15px 'ＭＳ ゴシック'";
          context_c.fillStyle = "black";
          context_c.scale(0.5, 0.5);
          if(self.custom_state.base_code == 1 || self.custom_state.base_code == 2){ // グランコンパクトのネームプレートの位置
            context_c.rotate(2.6 * Math.PI / 180);
            if(self.custom_state.metalplate_type == null || self.custom_state.metalplate_type == 10){
              context_c.fillText(self.simulationText(false), 408, 380, 100); // プレーン
            }else if(self.custom_state.metalplate_type == 12){
              context_c.fillText(self.simulationText(false), 408, 385, 100); // クラウン
            }else{
              context_c.fillText(self.simulationText(false), 408, 375, 100); // ハート、フラワー
            }
          }else{  // マイフレンドのネームプレートの位置
            context_c.rotate(4 * Math.PI / 180);
            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 = "15px sans-serif";
          if(self.custom_state.base_code == 1){
            context_c.fillText(self.simulationText(false), 275, 170, 100);
          }else{
            context_c.fillText(self.simulationText(false), 280, 195, 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.log('image_src : none');
      }
    };
    attachForEach();
/*
    var img = [];
    var loader = self.Loader(image_src.length, function(){
      if( context_c ){
        context_c.clearRect(0, 0, 560, 560);
      }
      img.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 == 6){
        if(self.custom_state.embroidery_code == '02' && self.master.current.angle == 4){
          context_c.rotate(33 * Math.PI / 180);
          context_c.font = "12px 'ＭＳ ゴシック'";
          context_c.scale(0.5, 0.5);
          if(self.custom_state.base_code == 1){
            context_c.fillText(self.custom_state.embroidery_content, 620, 170, 100);
          }else{
            context_c.fillText(self.custom_state.embroidery_content, 585, 215, 100);
          }
        }else if(self.custom_state.embroidery_code == '03' && self.master.current.angle == 3){
          context_c.font = "15px sans-serif";
          if(self.custom_state.base_code == 1){
            context_c.fillText(self.custom_state.embroidery_content, 275, 170, 100);
          }else{
            context_c.fillText(self.custom_state.embroidery_content, 280, 195, 100);
          }
        }else{
          context_c.fillText('', 20, 75, 200);
        }
        context_c.setTransform(1, 0, 0, 1, 0, 0);
      };
      $('.spinner-canvas').fadeOut('fast', function(){
        self.updatePrice();
        self.updateWeight();
        self.finished = true;
      });
    });
    image_src.forEach(function(value, key){
      img[key] = new Image();
      img[key].crossOrigin = "Anonymous";
      img[key].onload = function(){
        loader();
      };
      img[key].onerror = function(){
        this.error_flag = true;
        loader();
      };
      img[key].src = value;
    });
*/
  };

  // 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;
  };

  // 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');
            //if(self.custom_state.embroidery_code == '01') self.custom_state.embroidery_content = '';
            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).on('load', function(e){
      obs.trigger("windowLoad", e);
      // 初回ページローディング完了でローダーを非表示
      var spinner = ($('.spinner').size()) ? $('.spinner') : null;
      if(spinner && spinner.data('mount') == 0){
        spinner.fadeOut();
      }
    });
    //var assets = 0;
    //$('img', this.root).each(function(index, elem){
    //  $(this).on('load', function(e){
    //    assets++;
    //    if(assets >= $('img', self.root).length){
    //      //console.log(assets);
    //    }
    //  });
    //});
    //
    // Default value
    //this.custom_state.order_price = self.master.scene.step_1.parts[Number(this.custom_state.base_code - 1)].price;
    //this.custom_state.order_weight = self.master.scene.step_1.parts[Number(this.custom_state.base_code - 1)].weight;
	//
    //if(self.custom_state.embroidery_id && self.custom_state.embroidery_content != "undefined"){
      //console.log(self.custom_state.embroidery_id, self.custom_state.embroidery_content);
    //}

    // 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.getElementById('pallet');
    pallet = document.createElement('canvas');
    pallet.width = pallet.height = 560;
    if( !pallet || !pallet.getContext ) return false;
    context_p = pallet.getContext('2d');
    context_p.fillStyle = "gray";
    context_p.textAlign = "center";
    context_p.textBaseline = "middle";
    // 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,
      autoHeight: true,
      onInit: function(swiper){
        self.update();
      },
      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 4: // 背中カラー
        self.master.current.angle = 1; // 背面
        break;
      case 6: // 内装
        self.master.current.angle = 4; // 内装
        break;
      case 3: // カブセ飾り鋲
        self.master.current.angle = 0; // 正面
        break;
      case 5: // ファスナーグリップ
        self.master.current.angle = 4; // 内装
        break;
      case 7: // チェストベルト
        self.master.current.angle = 0; // 正面
        $("#ctl-current .not-apply").fadeIn(); // 「シミュレーションに反映していません」
        break;
      case 9: // ネームプレート
        switch(this.custom_state.embroidery_code){
          case '02': // ネームプレート
          case '04':
            this.master.current.angle = 4;
            break;
          default:
            this.master.current.angle = 0;
            break;
        }
        break;
      default:
        self.master.current.angle = 0; // 正面
        break;
    }
    self.update();
    console.log('maste:',this.master);
  }
  // allows recalculation of context data before the update
  this.one('update', function(){
    //console.log('update one');
    $('.input-metal-text-virtual').outerHeight($('.input-metal-text-virtual').outerWidth() * 0.24);
  });
  // 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');
    var errors = $('.has-error').size();
    // swiper no swiping
    if(swiperDetail){
      if(self.master.current.step == 9 && (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;
  });

  // before the tag is mounted
  this.on('before-unmount', function() {
    swiperDetail.destroy(true, true);
    $('.spinner').fadeIn();
  });
  </script>
</easy>
<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>