// use a dummy element as the target since we don't really need anything visual to drag around
var spriteslider = document.createElement('div');
// the dummy element needs to be added to the DOM in latest Draggable
document.body.appendChild(spriteslider);

// attach all vars to the dummy element so globals aren't needed:
// element that initiates dragging
spriteslider.slider = document.getElementById('spriteslider');
// element with the sprite sheet to control
spriteslider.sprite = document.getElementById('spritetarget');
// size of each sprite frame
spriteslider.spritesize = 128;
// number of sprite frames - used to keep multiplier in a reasonable range
spriteslider.spritecount = 20;
// pixels to drag per sprite update
spriteslider.pixelsperincrement = 25;
// values used by the sprite changer
spriteslider.multiplier = spriteslider.lastmultiplier = 0;


// create the 360 degree slider
Draggable.create(spriteslider, {
  	type: 'x',
  trigger: spriteslider.slider,
  // don't need to slow down as you drag further away
	  edgeResistance: 0,
  cursor: 'e-resize',
  throwProps: true,
  onDrag: function() {
    // there is an extra drag event fired on mouse up that has x = 0, so check this.isDragging to skip that last one
    if (this.isDragging) {
      var t = this.target; // the dummy div
      t.multiplier = (Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier) % t.spritecount;
      TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});
    }
  },
  onThrowUpdate: function() {
    var t = this.target; // the dummy div
    t.multiplier = (Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier) % t.spritecount;
    TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});
  },
	  onThrowComplete: function()	{
    // saves the current multiplier, and keeps multiplier small so that backgroundPosition doesn't end up too large for the browser to render
    var t = this.target; // the dummy div
    t.lastmultiplier = t.multiplier % t.spritecount;
  }
});