text: /*
  * MemeEditorView
  * Manages form capture, model updates, and selection state of the editor form.
  */
  MEME.MemeEditorView = Backbone.View.extend({
  
    initialize: function() {
      this.buildForms();
      this.listenTo(this.model, 'change', this.render);
      this.render();
    },
  
    // Builds all form options based on model option arrays:
    buildForms: function() {
      var d = this.model.toJSON();
  
      function buildOptions(opts) {
        return _.reduce(opts, function(memo, opt) {
          return memo += [
              '<option value="', opt.hasOwnProperty('value') ? opt.value : opt, '">',
              opt.hasOwnProperty('text') ? opt.text : opt, '</option>'
          ].join('');
        }, '');
      }
  
      if (d.textShadowEdit) {
        $('#text-shadow').parent().show();
      }
  
      // Build text alignment options:
      if (d.textAlignOpts && d.textAlignOpts.length) {
        $('#text-align').append(buildOptions(d.textAlignOpts)).show();
      }
  
      // Share image aspect ratio options
      if (d.aspectRatioOpts && d.aspectRatioOpts.length) {
        $('#aspect-ratio').append(buildOptions(d.aspectRatioOpts)).show();
      }
  
      // Build font size options:
      if (d.fontSizeOpts && d.fontSizeOpts.length) {
        $('#font-size').append(buildOptions(d.fontSizeOpts)).show();
      }
      // Build Main font size options:
      if (d.TextSizeOpts && d.TextSizeOpts.length) {
        $('#text-size').append(buildOptions(d.TextSizeOpts)).show();
      }
  
      // Build font color options:
      if (d.fontColorOpts && d.fontColorOpts.length) {
        $('#font-color').append(buildOptions(d.fontColorOpts)).show();
      }
  
      // Build font family options:
      if (d.fontFamilyOpts && d.fontFamilyOpts.length) {
        $('#font-family').append(buildOptions(d.fontFamilyOpts)).show();
      }
  
      // Build watermark options:
      if (d.watermarkOpts && d.watermarkOpts.length) {
        $('#watermark').append(buildOptions(d.watermarkOpts)).show();
      }
  
      // Build overlay color options:
      if (d.overlayColorOpts && d.overlayColorOpts.length) {
        var overlayOpts = _.reduce(d.overlayColorOpts, function(memo, opt) {
          var color = opt.hasOwnProperty('value') ? opt.value : opt;
          return memo += '<li><label><input class="m-editor__swatch" style="background-color:'+color+'" type="radio" name="overlay" value="'+color+'"></label></li>';
        }, '');
  
        $('#overlay').show().find('ul').append(overlayOpts);
      }
  
      if (d.backgroundColorOpts && d.backgroundColorOpts.length) {
        var backgroundColorOpts = _.reduce(d.backgroundColorOpts, function(memo, opt) {
          var color = opt.hasOwnProperty('value') ? opt.value : opt;
          return memo += '<li><label><input class="m-editor__swatch" style="background-color:'+color+'" type="radio" name="background-color" value="'+color+'"></label></li>';
        }, '');
  
        $('#background-color').show().find('ul').append(backgroundColorOpts);
      }
    },
  
    render: function() {
      var d = this.model.toJSON();
      this.$('#headline').val(d.headlineText);
      this.$('#text').val(d.MainText);
      this.$('#credit').val(d.creditText);
      this.$('#watermark').val(d.watermarkSrc);
      this.$('#image-scale').val(d.imageScale);
      this.$('#font-size').val(d.fontSize);
      this.$('#text-size').val(d.TextSize);
      this.$('#font-color').val(d.fontColor);
      this.$('#font-family').val(d.fontFamily);
      this.$('#text-align').val(d.textAlign);
      this.$('#aspect-ratio').val(d.width + "x" + d.height);
      this.$('#text-shadow').prop('checked', d.textShadow);
      this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true);
      this.$('#background-color').find('[value="'+d.backgroundColor+'"]').prop('checked', true);
  
    },
  
    events: {
      'input #headline': 'onHeadline',
      'input #text': 'onText',
      'input #credit': 'onCredit',
      'input #image-scale': 'onScale',
      'change #font-size': 'onFontSize',
      'change #text-size': 'onTextSize',
      'change #font-color': 'onFontColor',
      'change #font-family': 'onFontFamily',
      'change #watermark': 'onWatermark',
      'change #text-align': 'onTextAlign',
      'change #aspect-ratio': 'onAspectRatio',
      'change #text-shadow': 'onTextShadow',
      'change [name="overlay"]': 'onOverlayColor',
      'change [name="background-color"]': 'onBackgroundColor',
      'dragover #dropzone': 'onZoneOver',
      'dragleave #dropzone': 'onZoneOut',
      'drop #dropzone': 'onZoneDrop'
    },
  
    onCredit: function() {
      this.model.set('creditText', this.$('#credit').val());
    },
  
    onHeadline: function() {
      this.model.set('headlineText', this.$('#headline').val());
    },
  
    onText: function() {
      this.model.set('MainText', this.$('#text').val());
    },
  
    onTextAlign: function() {
      this.model.set('textAlign', this.$('#text-align').val());
    },
  
    onAspectRatio: function() {
      this.model.set({
        'width': parseInt(this.$('#aspect-ratio').val().split("x")[0]),
        'height': parseInt(this.$('#aspect-ratio').val().split("x")[1])
      });
    },
  
    onTextShadow: function() {
      this.model.set('textShadow', this.$('#text-shadow').prop('checked'));
    },
  
    onFontSize: function() {
      this.model.set('fontSize', this.$('#font-size').val());
    },
  
    onTextSize: function() {
      this.model.set('TextSize', this.$('#text-size').val());
    },
  
    onFontColor: function() {
      this.model.set('fontColor', this.$('#font-color').val());
    },
  
    onFontFamily: function() {
      this.model.set('fontFamily', this.$('#font-family').val());
    },
  
    onWatermark: function() {
      this.model.set('watermarkSrc', this.$('#watermark').val());
    },
  
    onScale: function() {
      this.model.set('imageScale', this.$('#image-scale').val());
    },
  
     onBackgroundColor: function(evt) {
      this.model.set('backgroundColor', this.$(evt.target).val());
    },
  
    onOverlayColor: function(evt) {
      this.model.set('overlayColor', this.$(evt.target).val());
    },
  
    getDataTransfer: function(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      return evt.originalEvent.dataTransfer || null;
    },
  
    onZoneOver: function(evt) {
      var dataTransfer = this.getDataTransfer(evt);
      if (dataTransfer) {
        dataTransfer.dropEffect = 'copy';
        this.$('#dropzone').addClass('pulse');
      }
    },
  
    onZoneOut: function(evt) {
      this.$('#dropzone').removeClass('pulse');
    },
  
    onZoneDrop: function(evt) {
      var dataTransfer = this.getDataTransfer(evt);
      if (dataTransfer) {
        this.model.loadBackground(dataTransfer.files[0]);
        this.$('#dropzone').removeClass('pulse');
      }
    }
  });
  