<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="demo-music.html">
  </head>
  <body>
    <demo-music></demo-music>
  </body>
</html>
<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="demo-music">
  <style>
    .topic {
      display: block;
      color: #0000ff;
      font-weight: bold;
    }
  </style>

  <template>
    <span class="topic">การตั้งค่า</span>
    <a href="http://www.w3schools.com/html/html_youtube.asp" target="_blank">HTML YouTube Videos</a>
    <div>
      <span>ความกว้าง (width)</span>
      <input type="number" value="{{width::input}}">
    </div>
    <div>
      <span>ความสูง (height) </span>
      <input type="number" value="{{height::input}}">
    </div>
    <span class="topic">ตัวอย่าง</span>
    <div id="preview">
      <object id="player" type="application/x-shockwave-flash" style="width: 450px; height:366px;" data="http://www.youtube.com/v/sEQf5lcnj_o?autohide=0C&amp;version=3">
        <param name="movie" value="http://www.youtube.com/v/WQnAxOQxQIU?autohide=0&amp;version=3" />
        <param name="allowFullScreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        </object>
      <div style="font-size: 0.8em"><a href="http://www.tools4noobs.com/online_tools/youtube_xhtml/">Get your own valid XHTML YouTube embed code</a></div>
    </div>
    <span class="topic">โค้ด</span>
    <div id="code">
    </div>
  </template>

  <script>
  Polymer({
    is: "demo-music",
    ready: function () {
      this.$.player.style.width = this.width + "px";
      this.$.player.style.height = this.height + "px";
    },
    properties: {
      width: {
        type: Number,
        value: 300,
        notify: true,
        observer: '_widthChanged'
      },
      height: {
        type: Number,
        value: 30,
        notify: true,
        observer: '_heightChanged'
      }
    },
    _heightChanged: function (newValue, oldValue) {
      if(newValue < 10) {
        newValue = 10;
      }
      this.$.player.style.height = newValue + "px";
      this._updateCode();
    },
    _widthChanged: function (newValue, oldValue) {
      if(newValue < 10) {
        newValue = 10;
      }
      this.$.player.style.width = newValue + "px";
      this._updateCode();
    },
    _updateCode: function() {
      this.$.code.textContent = this.$.preview.innerHTML;
    }
  });
  </script>
  
</dom-module>