var WaveformPlaylist = require('waveform-playlist');

var playlist = WaveformPlaylist.init({
  samplesPerPixel: 3000,
  mono: true,
  waveHeight: 70,
  container: document.getElementById('playlist'),
  state: 'cursor',
  colors: {
    waveOutlineColor: '#E0EFF1',
    timeColor: 'grey',
    fadeColor: 'black'
  },
  controls: {
    show: true,
    width: 200
  },
  zoomLevels: [500, 1000, 3000, 5000]
});

playlist.load([
  {
    src: 'media/audio/Vocals30.mp3',
    name: 'Vocals',
    gain: 0.5,
  },
  {
    src: 'media/audio/BassDrums30.mp3',
    name: 'Drums',
    start: 8.5,
    fadeIn: {
      duration: 0.5,
    },
    fadeOut: {
      shape: 'logarithmic',
      duration: 0.5,
    },
  },
  {
    src: 'media/audio/Guitar30.mp3',
    name: 'Guitar',
    start: 23.5,
    fadeOut: {
      shape: 'linear',
      duration: 0.5,
    },
    cuein: 15,
  }
]).then(function() {
  // can do stuff with the playlist.
});

var options = {

  // webaudio api AudioContext
  ac: new (window.AudioContext || window.webkitAudioContext),

  // DOM container element REQUIRED
  container: document.getElementById('playlist'),

  // sample rate of the project. (used for correct peaks rendering)
  sampleRate: new (window.AudioContext || window.webkitAudioContext).sampleRate,

  // number of audio samples per waveform peak.
  // must be an entry in option: zoomLevels.
  samplesPerPixel: 4096,

  // whether to draw multiple channels or combine them.
  mono: true,

  // enables "exclusive solo" where solo switches between tracks
  exclSolo: false,

  // default fade curve type.
  fadeType: 'logarithmic', // (logarithmic | linear | sCurve | exponential)

  // whether or not to include the time measure.
  timescale: false,

  // control panel on left side of waveform
  controls: {
    // whether or not to include the track controls
    show: false,

    // width of controls in pixels
    width: 150,
  },

  colors: {
    // color of the wave background
    waveOutlineColor: 'white',

    // color of the time ticks on the canvas
    timeColor: 'grey',

    // color of the fade drawn on canvas
    fadeColor: 'black',
  },

  // height in pixels of each canvas element a waveform is on.
  waveHeight: 128,

  // interaction state of the playlist
  // (cursor | select | fadein | fadeout | shift)
  state: 'cursor',

  // (line | fill)
  seekStyle : 'line',

  // Array of zoom levels in samples per pixel.
  // Smaller numbers have a greater zoom in.
  zoomLevels: [512, 1024, 2048, 4096],

  // Whether to automatically scroll the waveform while playing
  isAutomaticScroll: false,

  // configuration object for the annotations add on.
  annotationList: {

    // Array of annotations in [Aeneas](https://github.com/readbeyond/aeneas) JSON format
    annotations: [],

    // Whether the annotation texts will be in updateable contenteditable html elements
    editable: false,

    // User defined functions which can manipulate the loaded annotations
    controls: [{
      // class names for generated <i> tag separated by '.'
      class: 'fa.fa-minus',

      // title attribute for the generated <i> tag
      title: 'Reduce annotation end by 0.010s',

      // function which acts on the given annotation row
      // when the corresponding <i> is clicked.
      action: (annotation, i, annotations, opts) => {

        // @param Object annotation - current annotation
        // @param Number i - index of annotation
        // @param Array annotations - array of annotations in the playlist
        // @param Object opts - configuration options available
        //      - opts.linkEndpoints

      }
    }],

    // If false when clicking an annotation id segment
    // playback will stop after segment completion.
    isContinuousPlay: false,

    // If true annotation endpoints will remain linked when dragged
    // if they were the same value before dragging started.
    linkEndpoints: false,
  }
};

{
  // a media path for XHR or a File object.
  src: 'media/audio/BassDrums30.mp3',

  // name that will display in the playlist control panel.
  name: 'Drums',

  // volume level of the track between [0-1]
  gain: 1,

  // whether the track should initially be muted.
  muted: false,

  // whether the track should initially be soloed.
  soloed: false,

  // time in seconds relative to the playlist
  // ex (track will start after 8.5 seconds)
  // DEFAULT 0 - track starts at beginning of playlist
  start: 8.5,

  // track fade in details
  fadeIn: {
    // fade curve shape
    // (logarithmic | linear | sCurve | exponential)
    shape: 'logarithmic',

    // length of fade starting from the beginning of this track, in seconds.
    duration: 0.5,
  },

  // track fade out details
  fadeOut: {
    // fade curve shape
    // (logarithmic | linear | sCurve | exponential)
    shape: 'logarithmic',

    //length of fade which reaches the end of this track, in seconds.
    duration: 0.5,
  }

  // where the waveform for this track should begin from
  // ex (Waveform will begin 15 seconds into this track)
  // DEFAULT start at the beginning - 0 seconds
  cuein: 15,

  // where the waveform for this track should end
  // ex (Waveform will end at 30 second into this track)
  // DEFAULT duration of the track
  cueout: 30,

  // custom class for unique track styling
  customClass: 'vocals',

  // custom background-color for the canvas-drawn waveform
  waveOutlineColor: '#f3f3f3',

  // interaction states allowed on this track.
  // DEFAULT - all true
  states: {
    cursor: true,
    fadein: true,
    fadeout: true,
    select: true,
    shift: true,
  },

  // pre-selected section on track.
  // ONLY ONE selection is permitted in a list of tracks, will take most recently set if multiple passed.
  // This track is marked as 'active'
  selected: {
    // start time of selection in seconds, relative to the playlist
    start: 5,

    // end time of selection in seconds, relative to the playlist
    end: 15,
  },
}

var EventEmitter = require('event-emitter');
var WaveformPlaylist = require('waveform-playlist');

var playlist = WaveformPlaylist.init(
  {
    container: document.getElementById('playlist'),
  },

  // you can pass your own event emitter
  EventEmitter(),
);

// retrieves the event emitter the playlist is using.
var ee = playlist.getEventEmitter();