// callbacks queueing via gsap animation.
// 1. add array of objects holding callbacks
// 2. check if there is anything add to queue, if so take first object and add it to timeline
// 3. run the timeline
// 4. if timeline finishes, start next function to take another element from queue
// 5. do that until there is nothing in queue
var tl = new TimelineMax();

var obj = {
  // first move first element from arr.move to arr.playing (currently playing) and run function next 
	add: function (arr) {
		arrays.playing.push(arr.shift())
		$(this.next)
	},
	next: function () {
// check if there is anything to process
		if ( arrays.playing.length ) {
      console.log(tl.isActive())
      // and if timeline is playing
			if ( !tl.isActive() ) {
        // take first object from current queue 
				var callback = arrays.playing.shift();
				if ( callback ) {
					tl.add(callback.fn)
 //         tl.to($("#box"), 3, { y: "+=100"})
         // add that object to timeline
          tl.add(obj.next)
					tl.play()
					console.log(tl.isActive())
				}
			}
		}
	},
  // move #box 100px to right if someone calls this.red 
	red: function () {
		var tt = new TimelineMax;
		tt
			.to($("#box"), 3, { x: "+=100"})
		return tt

	},
 // same with this.magenta
	magenta: function () {
		var tt = new TimelineMax;
		tt.set($("#box"), { "backgroundColor": "#ff00ff" })
		return tt

	}
}

// array holding objects each one may be added to queue
var arrays = {
	playing: [],
	move:    [ { fn: obj.red } , { fn: obj.magenta }]
}

$(document).keyup(function(e){
	if ( e.which == 77 ) {
    // by pressing "m" add array of callbacks to queue processing
    obj.add(arrays.move)
	}
})