(function() {
  "use strict";

  angular
    .module("AnimationChainsApp", [ ])
    .service("$timeline",              TimelineService      )
    .directive("statusTable",          StatusTableDirective )
    .controller("AnimationController", AnimationController  );


  /**
   * MainController
   * @param $scope
   * @param $timeline
   * @constructor
   */
  function AnimationController($scope, $timeline, $timeout, $q) {

    $scope.animating = false;
    $scope.progress  = init();

    $scope.animate   = startAnimation;
    $scope.reset     = resetAnimations;

    // ****************************
    // Internal Methods
    // ****************************

    /**
     * Reset animations and enable buttons
     */
    function resetAnimations() {
        var orange = $("div.block.orange");
        var purple = $("div.block.purple");

        $scope.progress = init();
        $timeline.reset([orange, purple]);
    }

    /**
     * Start animation sequences
     */
    function startAnimation()  {
      var orange = $("div.block.orange");
      var purple = $("div.block.purple");

      $scope.animating=true;
      $scope.reset();

      $timeline.reset([orange, purple]);

      // Animation with `purple` delayed 1sec
      $q.all([
        startChain(orange, "orange"),
        startChain(purple, "purple", 1000)
      ]).then( function(){
        // When all done...
        $scope.animating=false;
      });

      /**
       * Use $timeline to start the sequence with specific callbacks
       * @returns {*}
       */
      function startChain(target, name, delay) {
        var deferred = $q.defer();

          $timeout(function() {
            deferred.resolve( makeChain() );
          },delay || 0, false);

        return deferred.promise;

        function makeChain() {
          return $timeline.start(
            target,
            function( action ){ $scope.progress[name][action] = "running..."; },
            function( action ){ $scope.progress[name][action] = "finished";   }
          );
        }
      }
    }

    /**
     * Initialize a `progress` structure
     * @returns {{purple: (void|Object|*), orange: (void|Object|*)}}
     */
    function init() {
      var steps = {move : "--", rotate: "--", scale: "--", fade: "--"};

      return {
        purple : angular.extend({},steps),
        orange : angular.extend({},steps)
      };
    }


  }

  /**
   * StatusTableDirective Directive
   * Simple directive to display the animation chain progress in a table
   *
   * @returns {{restrict: string, scope: {progress: string}, template: string, link: Function}}
   * @constructor
   */
  function StatusTableDirective() {

    return {
      restrict: "EA",
      scope: { progress: "=" },
      template:
      '<table>' +
      '  <thead>' +
      '    <tr>' +
      '      <th>Animation</th>' +
      '      <th>Status</th>' +
      '    </tr>' +
      '  </thead>' +
      '  <tbody>' +
      '    <tr ng-repeat="step in steps">' +
      '      <td>{{step.name}}</td>' +
      '      <td>{{step.status}}</td>' +
      '    </tr>' +
      '  </tbody>' +
      '</table>',

      link : function (scope )
      {
        scope.steps = buildSteps(scope.progress);
        scope.$watch( getProgressHash, updateProgress );

        // ****************************
        // Internal postLink methods
        // ****************************

        /**
         * Translate progress to view model
         */
        function buildSteps(progress){
          var steps = [ ];
          angular.forEach(progress, function(value, key) {
            steps.push({name:key, status:value})
          });

          return steps;
        }

        /**
         * Build encoded hash value of entire progress
         */
        function getProgressHash() {
          var hash = "";
          angular.forEach(scope.progress,function(value, key){
            hash = hash + value;
          });
          return hash;
        }

        /**
         * Scan progress and copy status values to view model
         */
        function updateProgress(current, previous) {
          if ( !current ) return;
          if ( current == previous ) return;

          var steps = scope.steps;

          // Copy the progress status over to the view model
          angular.forEach(scope.progress, function(value, name) {
            for (var j=0; j<steps.length;j++) {
              if ( steps[j].name == name ) {
                steps[j].status = value;
              }
            }
          });
        }
      }
    };
  }

  /**
   * TimelineService that publishes pre-defined TweenMax animation sequences
   * @returns {{start: startTimeline, reset: resetTimeline}}
   * @constructor
   */
  function TimelineService($q, $log, $rootScope) {
    var tweenSteps = [
      {
        name: "move",
        tween : function(element, start, done) {
          TweenMax.to(element, 1.0, { x: 400, repeat: 1, yoyo: true, onStart: start, onComplete: done });
        }
      },
      {
        name: "rotate",
        tween : function(element, start, done) {
          TweenMax.to(element, 1.0, { delay:0.03, rotation: 180, onStart: start, onComplete: done });
        }
      },
      {
        name: "scale",
        tween : function(element, start, done) {
          TweenMax.to(element, 1.0, { delay:0.03, scaleX: 2, x: 50, onStart: start, onComplete: done });
        }
      },
      {
        name: "fade",
        tween : function(element, start, done) {
          TweenMax.to(element, 1.0, { delay:0.03, autoAlpha: 0.2, scaleX: 1, scaleY: 0.5, onStart: start, onComplete: done });
        }
      }
    ];
    var tweenReset = function(element) {
      TweenMax.set(element, { autoAlpha: 1, scale: 1, rotation: 0, x: 0 });
    };

    // Publish API
    return {
      start : startTimeline,
      reset : resetTimeline
    };

    /**
     * Reset the target(s) for future animations...
     * @param target
     */
    function resetTimeline(target) {
      var targets = angular.isArray(target) ? target : [target];

      targets.forEach(function(it){
        tweenReset(it);
      });
    }

    /**
     * Start the timeline (sequence of tweens) on the target element
     * @returns {*} Promise
     */
    function startTimeline( target, start, done ) {
      var animationSteps = [].concat(tweenSteps);

      start = start || angular.noop;
      done  = done  || angular.noop;

      return createChain(target);

      // ********************************
      // Chain Steps
      // ********************************


      /**
       *  Create and auto-start a sequential promise
       *  chain of tweens
       */
      function createChain(target){

        // Create sequence of animations
        return animationSteps.reduce(function(promise, step){
          return promise.then(function(){
            return buildStep(step, target);
          });
        }, $q.when(true));

      }

      /**
       * Run the tween step with start & done callbacks
       */
      function buildStep(step, target) {
        var deferred = $q.defer();
        var startFn = function(start) {
          return function() {
            // use $apply() since animation callbacks are out-of-scope
            $rootScope.$apply(function(){

              $log.debug("TweenMax('{0}' on '{1}') started...".supplant([step.name, target.selector]));
              start(step.name);

            });
          };
        };
        var doneFn = function(done) {
          return function() {
            // use $apply() since animation callbacks are out-of-scope
            $rootScope.$apply(function(){

              $$log.debug("TweenMax('{0}' on '{1}') finished.".supplant([step.name, target.selector]));
              done(step.name);

            });
            deferred.resolve(step.name);
          }
        };

        // Start the tweening with head-hooks to the callbacks...
        step.tween(target, startFn(start), doneFn(done) );

        return deferred.promise;
      }

    }
  }

})();