(function (context, $) {

  "use strict";

  context.JK = context.JK || {};
  context.JK.AccountAudioProfile = function (app) {
    var self = this;
    var logger = context.JK.logger;
    var rest = context.JK.Rest();
    var userId;
    var user = {};
    var tmpUploadPath = null;
    var userDetail = null;
    var avatar;
    var selection = null;
    var targetCropSize = 88;
    var updatingAvatar = false;

    function beforeShow(data) {
      userId = data.id;

      registerFtueSuccess();
    }


    function afterShow(data) {
      resetForm();
      renderAudioProfileScreen()
    }

    function beforeHide() {
      unregisterFtueSuccess();

    }

    function renderAudioProfileScreen() {
      populateAccountAudio()
    }

    function populateAccountAudio() {

      // load Audio Driver dropdown
      var devices = context.jamClient.TrackGetDevices();

      var options = {
        devices: devices
      }

      var template = context._.template($('#template-account-audio').html(), options, {variable: 'data'});

      appendAudio(template);

    }

    function appendAudio(template) {
      $('#account-audio-content-scroller table tbody').replaceWith(template);
    }

    function resetForm() {
    }

    function handleDeleteAudioProfile(audioProfileId) {
      console.log("deleting audio profile: " + audioProfileId);

      context.jamClient.TrackDeleteProfile(audioProfileId);

      // redraw after deletion of profile
      populateAccountAudio();
    }

    function handleStartAudioQualification() {

      var useNewFtue = true;

      if(useNewFtue) {
        app.layout.startNewFtue();
      }
      else {
        app.setWizardStep(1);
        app.layout.showDialog('ftue');
      }
    }

    function registerFtueSuccess() {
      $('div[layout-id=ftue]').on("ftue_success", ftueSuccessHandler);
    }

    function unregisterFtueSuccess() {
      $('div[layout-id=ftue]').off("ftue_success", ftueSuccessHandler);
    }

    function ftueSuccessHandler() {
      populateAccountAudio();
    }

    // events for main screen
    function events() {
      // wire up main panel clicks
      $('#account-audio-content-scroller').on('click', 'a[data-purpose=delete-audio-profile]', function (evt) {
        evt.stopPropagation();
        handleDeleteAudioProfile($(this).attr('data-id'));
        return false;
      });
      $('#account-audio-content-scroller').on('click', 'a[data-purpose=add-profile]', function (evt) {
        evt.stopPropagation();
        handleStartAudioQualification();
        return false;
      });
    }

    function initialize() {
      var screenBindings = {
        'beforeShow': beforeShow,
        'afterShow': afterShow
      };
      app.bindScreen('account/audio', screenBindings);
      events();
    }

    this.initialize = initialize;
    this.beforeShow = beforeShow;
    this.afterShow = afterShow;
    this.beforeHide = beforeHide;
    return this;
  };

})(window, jQuery);