(function (context, $) {

  "use strict";

  context.JK = context.JK || {};
  context.JK.FrameBuffers = function (app) {

    var $knobs = null;
    var $bufferIn = null;
    var $bufferOut = null;
    var $frameSize = null;
    var $adjustSettingsLink = null;
    var $self = $(this);
    var logger = context.JK.logger;

    var FRAMESIZE_CHANGED = 'frame_buffers.framesize_changed';
    var BUFFER_IN_CHANGED = 'frame_buffers.buffer_in_changed';
    var BUFFER_OUT_CHANGED  = 'frame_buffers.buffer_out_changed';
    var ADJUST_GEAR_LINK_CLICKED = 'frame_buffers.adjust_gear_settings_clicked';

    function selectedFramesize() {
      var selectedFrameSize = parseFloat($frameSize.val());
      console.log("selected FrameSize: ", selectedFrameSize)
      return selectedFrameSize;
    }

    function selectedBufferIn() {
      return parseFloat($bufferIn.val());
    }

    function selectedBufferOut() {
      return parseFloat($bufferOut.val());
    }

    function setFramesize(value) {
      context.JK.dropdown($frameSize.val(value).easyDropDown('select', value.toString(), true))
    }

    function setBufferIn(value)  {
      context.JK.dropdown($bufferIn.val(value).easyDropDown('select', value.toString(), true));
    }

    function setBufferOut(value) {
      context.JK.dropdown($bufferOut.val(value).easyDropDown('select', value.toString(), true))
    }

    function render() {
      context.JK.dropdown($frameSize);
      context.JK.dropdown($bufferIn);
      context.JK.dropdown($bufferOut);
    }

    function disable() {
      $frameSize.attr("disabled", "disabled").easyDropDown('disable');
      $bufferIn.attr("disabled", "disabled").easyDropDown('disable');
      $bufferOut.attr("disabled", "disabled").easyDropDown('disable');
    }

    function enable() {
      $frameSize.removeAttr("disabled").easyDropDown('enable');
      $bufferIn.removeAttr("disabled").easyDropDown('enable');
      $bufferOut.removeAttr("disabled").easyDropDown('enable');
    }

    function resetValues() {
      $frameSize.val('2.5');
      $bufferIn.val('0');
      $bufferOut.val('0');
    }

    function switchToWdm() {
      /**
      if($frameSize.find('option').length == 3){
        console.log("switching to WDM framesizez")
        $frameSize.html('<option val="2.5">2.5</option><option val="5">5</option><option val="10">10</option><option val="20">20</option><option val="40">40</option>')
        context.JK.dropdown($frameSize);
      }
      else {
        console.log("nothing to switch to on WDM")
      }*/

    }

    function switchOffWdm() {
      /**
      if($frameSize.find('option').length != 3){
        console.log("switching off of WDM")
        $frameSize.html('<option val="2.5">2.5</option><option val="5">5</option><option val="10">10</option>')
        context.JK.dropdown($frameSize);
      }
      else {
        console.log("nothing to clean up on WDM")
      }*/

    }

    function events() {
      $frameSize.unbind('change').change(function () {
        $self.triggerHandler(FRAMESIZE_CHANGED, {value: selectedFramesize()});
      });

      $bufferIn.unbind('change').change(function () {
        logger.debug("buffer-in changed: " + selectedBufferIn());
        $self.triggerHandler(BUFFER_IN_CHANGED, {value: selectedBufferIn()});
      });

      $bufferOut.unbind('change').change(function () {
        logger.debug("buffer-out changed: " + selectedBufferOut());
        $self.triggerHandler(BUFFER_OUT_CHANGED, {value: selectedBufferOut()});
      });

      $adjustSettingsLink.click(function() {
        logger.debug("adjust-gear-settings clicked");
        $self.triggerHandler(ADJUST_GEAR_LINK_CLICKED);
        return false;
      });
    }

    function initialize(_$knobs) {

      $knobs = _$knobs;
      if(!$knobs.is('.frame-and-buffers')) {
        throw "$knobs != .frame-and-buffers"
      }

      $bufferIn = $knobs.find('.select-buffer-in');
      $bufferOut = $knobs.find('.select-buffer-out');
      $frameSize = $knobs.find('.select-frame-size');
      $adjustSettingsLink = $knobs.find('.adjust-gear-settings')

      events();
      render();
    }

    this.FRAMESIZE_CHANGED    = FRAMESIZE_CHANGED;
    this.BUFFER_IN_CHANGED    = BUFFER_IN_CHANGED;
    this.BUFFER_OUT_CHANGED   = BUFFER_OUT_CHANGED;
    this.ADJUST_GEAR_LINK_CLICKED = ADJUST_GEAR_LINK_CLICKED;
    this.initialize           = initialize;
    this.selectedFramesize    = selectedFramesize;
    this.selectedBufferIn     = selectedBufferIn;
    this.selectedBufferOut    = selectedBufferOut;
    this.setFramesize         = setFramesize;
    this.setBufferIn          = setBufferIn;
    this.setBufferOut         = setBufferOut;
    this.switchOffWdm         = switchOffWdm;
    this.switchToWdm          = switchToWdm;
    this.render               = render;
    this.enable               = enable;
    this.disable              = disable;
    this.resetValues          = resetValues;


    return this;
  }


})(window, jQuery);