// get width of boxes, and multiply by how many to set width of sliding container div.
var _boxesVis = 3;


// Include the 5px margin if the CSS is using one.
var _boxwidth = $('.tlBox').first().width() + 5 + 4; // +4 is because of the order width
var _boxCount = $('.tlBox').length;
var _tlInnerWidth = _boxwidth * _boxCount;

/* // We get the width of the masking div
*/
var _tlContainerWidth = $('.tlContainer').width();
/* // We now set the animate 'x' distance to be the width of all the tiles minus 
   // the width of the masking window so we don't animate into empty space
*/
var _animateWidth = (_tlInnerWidth - _tlContainerWidth) + 5; // +5 is to note animate to the last right margin

/* // We don't need to  calculate this, CSS  
   // rules allow it to be set itself
*/
// set the container div width to the calculated _tlInnerWidth
//TweenLite.set(".tlContent", {width: _tlInnerWidth});

// Set an array of snapto points
var snapPoints = [];
var snapPointsCount =  _boxCount-_boxesVis;
var snapInc = _boxwidth/_animateWidth;
console.log('snapInc: '+snapInc);
for(i=0;i<=snapPointsCount;i++){ 
  snapPoints[i]= snapInc*i;
}
console.log(snapPoints);

//responsive timeline animation.
//values recorded once, nothing changes on resize
// var tl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1}) 

var tl = new TimelineMax() 
// make the timeline duration equal to the number of boxes (in seconds)

/* // Instead of animating a percentage, we animate the calculated 
   // width above , `_animateWidth`
*/
tl.to(".tlContent", _boxCount, {x:-(_animateWidth), force3D:true, ease: Power0.easeNone});


/* // I modified nothing below
*/
tl.pause();
// tl.play(); 

varctrl = $("#slider"),
ctrlValue = {value:0}; 

varctrl.slider({
  animate: "fast",
  range: false,
  min: 0,
  max: 100,
  step:.1,
  start:function() {
    tl.pause();
  },
  slide: function ( event, ui ) {
    tl.progress( ui.value / 100 );
    console.log( ui.value/100 );
  },
  stop: function() {
    var _curProgress = tl.progress();
    var snapTo =  closest( snapPoints , _curProgress );
    TweenLite.to(tl, .5, {progress:snapTo, ease: Power3.easeOut});
    $("#slider").slider( 'value' , snapTo*100 );
  }
});

//tl.eventCallback("onUpdate", function() {
  //trlValue.value = tl.progress() * 100;
  //varctrl.slider(ctrlValue);
//});


/* // Function to pass in an integer and retrun the closest value from set
*/

/**
* Returns the closest number from a sorted array.
**/
function closest(arr, target) {
    if (!(arr) || arr.length == 0)
        return null;
    if (arr.length == 1)
        return i[0];

    for (var i=1; i<arr.length; i++) {
        // As soon as a number bigger than target is found, return the previous or current
        // number depending on which has smaller difference to the target.
        if (arr[i] > target) {
            var p = arr[i-1];
            var c = arr[i]
            return Math.abs( p-target ) < Math.abs( c-target ) ? p : c;
        }
    }
    // No number in array is bigger so return the last.
    return arr[arr.length-1];
}

/*
$('#debug').append('<div id="debug-mask">Mask</div>');
$('#debug').append('<div id="debug-animated">Animated Width</div>');
$('#debug').append('<div id="debug-tile">Tile</div>');
$('#debug').append('<div id="debug-snapPoints">Snap Increment</div>');

$('#debug-mask').width(_tlContainerWidth);
$('#debug-animated').width(_animateWidth);
$('#debug-tile').width(_boxwidth);
$('#debug-snapPoints').width( (_boxwidth/_animateWidth)*_animateWidth );
*/