Vue.component(
  'app',
  {
    'template': '#t-app',
    data: function() {
      return {
        caption: ' ',
        image: null,
      };
    },
    mounted: function() {
      this.loadBackground();
    },
    methods: {
      setCaption: function( caption ) {
        this.caption = caption;
      },
      loadBackground: function() {
        var self = this;
        var idx = Math.floor( Math.random() * 14 + 1 );
        var img = new Image();
        img.onload = function() {
          self.setBackground( img );
        };
        img.src = "/img/background/" + idx + ".jpg";
        if( img.complete ) {
          this.setBackground( img );
        }
      },
      setBackground: function( img ) {
        this.image = img;
      },
    },
  }
);

Vue.component(
  'logo',
  {
    template: '#t-logo'
  }
);

Vue.component(
  'buttons',
  {
    template: '#t-buttons'
  }
);

Vue.component(
  'button-caption',
  {
    template: '#t-caption',
    props: {
      caption: { type: String },
    },
  }
);

window.app = new Vue( { el: '#app' } );