if (typeof console === "undefined") {
  console = {
    log: function() {}
  };
}
$(function() {
  var faders = [
    {
      "muteText": "Mute 1",
      "muteState": 0,
      "labelText": "One",
      "faderMin": -72,
      "faderMax": 12,
      "faderStep": 3,
      "currentPos": -10
    },
    {
      "muteText": "Mute 2",
      "muteState": 1,
      "labelText": "Two",
      "faderMin": -120,
      "faderMax": 120,
      "faderStep": 3,
      "currentPos": 0
    },
    {
      "muteText": "Mute 3",
      "muteState": 0,
      "labelText": "Three",
      "faderMin": -72,
      "faderMax": 0,
      "faderStep": 3,
      "currentPos": -12
    },
    {
      "muteText": "Mute 4",
      "muteState": 0,
      "labelText": "Four",
      "faderMin": -24,
      "faderMax": 24,
      "faderStep": 3,
      "currentPos": 0
    }
  ];
  faders.forEach(function(element, index) {
    var fader = $('<div class="fader">'),
    mute = $('<button class="mute">').html(element.muteText),
    volume = $('<div class="volume">'),
    slider = $('<div class="slider">'),
    grabber = $('<div class="grabber">').appendTo(slider),
    volReadout = $('<span class="value">'),
    label = $('<div class="label">').append($('<span class="value">').html(element.labelText));

    fader.append($('<div class="id">').html(index+1)).append(mute).append($('<div class="volReadout">').append(volReadout)).append('<div class="overflow">').append(volume.append(slider)).append('<div class="underflow">').append(label).appendTo('.content');
    if((index+1) != faders.length) $('<div class="spacer">').appendTo('.content');

    if(element.muteState === 1) mute.addClass('lit');
    if(element.currentPos > 0) element.currentPos = "+" + element.currentPos;
    volReadout.html(element.currentPos);
    var pixelsPerStep = volume.height() / ((element.faderMax - element.faderMin) / element.faderStep);
    slider.draggabilly({ containment: volume, axis: 'y' });
    slider.on('dragMove', function(){
      var draggie = $(this).data('draggabilly'), stepsFromMax = Math.round(draggie.position.y / pixelsPerStep), snapPos = stepsFromMax * pixelsPerStep, dbVal = element.faderMax - (stepsFromMax * element.faderStep);
      if(dbVal > 0) dbVal = "+" + dbVal;
      volReadout.html(dbVal);
    });
    slider.on('dragEnd', function(){
      var draggie = $(this).data('draggabilly'), stepsFromMax = Math.round(draggie.position.y / pixelsPerStep), snapPos = stepsFromMax * pixelsPerStep, dbVal = element.faderMax - (stepsFromMax * element.faderStep);
      $(this).removeClass('is-pointer-down').css('top', snapPos);
      if(dbVal > 0) dbVal = "+" + dbVal;
      volReadout.html(dbVal);
    });
    slider.css('top', (pixelsPerStep * ((element.faderMax - element.currentPos) / element.faderStep))+"px"); // Initialize slider position
    var howManyTicks = 17;
    if((element.faderMax - element.faderMin) % 8)  howManyTicks = 15;
    var spacing =  100 / (howManyTicks - 1), notationVal = element.faderMax;
    for(var j = 0; j < howManyTicks; j++) {
      if(j % 2 === 0){
        var writeNotationVal = notationVal;
        if(notationVal > 0) writeNotationVal = "+" + writeNotationVal;
        $('<span class="slider-left-mark tick-long"><span class="tickNotation">'+writeNotationVal+'</span></span>').css('top', (spacing * j)+'%').appendTo(volume);
        $('<span class="slider-right-mark tick-long"><span class="tickNotation">'+writeNotationVal+'</span></span>').css('top', (spacing * j)+'%').appendTo(volume);
        notationVal = Math.round(notationVal - ((element.faderMax - element.faderMin) / ((howManyTicks - 1) / 2)));
      } else{
          $('<span class="slider-left-mark tick"></span>').css('top', (spacing * j)+'%').appendTo(volume);
          $('<span class="slider-right-mark tick"></span>').css('top', (spacing * j)+'%').appendTo(volume);
      }
    }
  });

  $('.mute').click(function(){
    if($(this).hasClass('lit')) $(this).removeClass('lit');
    else $(this).addClass('lit');
  });
});