$(document).ready(function() {
  var widget = SC.Widget(document.querySelector('iframe'));
  var newSoundUrl = 'http://api.soundcloud.com/tracks/257223245'; //newurl of the track which I would like to implement as a new query

  var isMdown = false, // gets set to true when user clicks the handle
    isToggled = false, // gets set to true when user clicks the bar or handle
    progress = $('#progress'),
    percentage = null, // keeps track of the last %
    handleW = 8, // width of the handle, req. for positioning
    handle = document.getElementById('slider-handle'),
    range = document.getElementById('slider-range'),
    isRepeat = false,
    newVolume = 50;

  widget.bind(SC.Widget.Events.READY, function() {
    console.log('Ready...');
    widget.bind(SC.Widget.Events.FINISH, function() {
      if (isRepeat) {
        widget.play();
      } else {
        widget.load(newSoundUrl, {
          auto_play: true
        });
        $('.button-play').removeClass('button-play-after');
      };
    });
  });

  $('.button-play').click(function() {
    widget.toggle();
    $('.button-play').toggleClass("button-play-after");
  });

  $('.button-repeat').click(function() {
    $('.button-repeat').toggleClass("button-repeat-after");
    if (isRepeat) {
      isRepeat = false;
    } else {
      isRepeat = true;
    }
  });

  $('.button-volume-up').click(function() {
    newVolume = newVolume + 5;
    if (newVolume > 0 && newVolume < 100) {
      $('.button-volume-down').removeClass("button-volume-after");
    } else if (newVolume >= 100) {
      $('.button-volume-up').addClass("button-volume-after");
    } else {
      $('.button-volume-up').removeClass("button-volume-after");
    }
    widget.setVolume(newVolume);
    document.getElementById('volum').innerHTML = newVolume;
  });

  $('.button-volume-down').click(function() {
    newVolume = newVolume - 5;
    if (newVolume < 100 && newVolume > 0) {
      $('.button-volume-up').removeClass("button-volume-after");
    } else if (newVolume <= 0) {
      $('.button-volume-down').addClass("button-volume-after");
    } else {
      $('.button-volume-down').removeClass("button-volume-after");
    }
    widget.setVolume(newVolume);
    document.getElementById('volum').innerHTML = newVolume;
  });

  // main position adjustment function
  var setPos = function(e) {
    var posxBuffer = e.clientX - progress.offset().left,
      w = this.clientWidth;
    widget.getDuration(function(duration) {
      widget.seekTo(percentage * duration / 100);
      handle.style.left = percentage + '%';
      range.style.width = percentage + '%';
    });
    isToggled = false;
    isMdown = false;
  };

  // we just need to update the % value here and set some flags
  progress.on('mousedown', function(e) {
    isToggled = true;
    var posxBuffer = e.clientX - progress.offset().left,
      w = this.clientWidth;
    percentage = ((posxBuffer - handleW) * 100) / w;
    if (e.target === handle)
      isMdown = true;
  });

  progress.on('mouseover', function(e) {
    // if the user has previously triggered a mousedown event, he is now dragging
    // => adjust handle position, but not time progress
    if (isMdown) {
      var posxBuffer = e.clientX - progress.offset().left,
        w = this.clientWidth;
      percentage = ((posxBuffer - handleW) * 100) / w;
      handle.style.left = percentage + '%';
      range.style.width = percentage + '%';
    }
  });

  // when a user has clicked the progress bar and releases the button,
  // set the position
  progress.on('mouseup', setPos);

  // when a user is still dragging but leaves the progress bar,
  // release and set to last position
  progress.on('mouseleave', function(e) {
    if (isMdown)
      setPos(e);
  });

  widget.bind(SC.Widget.Events.PLAY_PROGRESS, function() {
    widget.getPosition(function(position) {
      widget.getDuration(function(duration) {
        $('#seekms').text(duration);
        var mins = (position / 1000 / 60 < 10 ? '0' : '') + Math.floor(position / 1000 / 60),
          secs = (position / 1000 % 60 < 10 ? '0' : '') + Math.floor((position / 1000) % 60);
        $('#bufferms').text(mins + ':' + secs);
        if (isToggled || isMdown)
          return;
        var percentage = position * 100 / duration;
        $("#slider-range").css("width", percentage + '%');
        $("#slider-handle").css("left", percentage + '%');
        $('#inputseek').val(percentage);
        widget.getCurrentSound(function(music) {
          document.getElementById('name').innerHTML = music.user.username + " - " + music.title;
        });
      });
    });
  });

  widget.bind(SC.Widget.Events.LOAD_PROGRESS, function(data) {
    if (data.loadProgress = 0) {
      $('#loadprogress').text("2");
    }
  });
});