/**
 * @ngdoc directive
 * @name ionSlideBox
 * @module ionic
 * @delegate ionic.service:$ionicSlideBoxDelegate
 * @restrict E
 * @description
 * The Slide Box is a multi-page container where each page can be swiped or dragged between:
 *
 * ![SlideBox](http://ionicframework.com.s3.amazonaws.com/docs/controllers/slideBox.gif)
 *
 * Note: The slideBox will take up the whole width and height of its parent element.
 *
 * @usage
 * ```html
 * <ion-content>
 *   <ion-slide-box on-slide-changed="slideHasChanged($slideIndex)" loop="shouldLoop" auto-play="3000">
 *     <ion-slide>
 *       <div class="box blue"><h1>BLUE</h1></div>
 *     </ion-slide>
 *     <ion-slide>
 *       <div class="box yellow"><h1>YELLOW</h1></div>
 *     </ion-slide>
 *     <ion-slide>
 *       <div class="box pink"><h1>PINK</h1></div>
 *     </ion-slide>
 *   </ion-slide-box>
 * </ion-content>
 * ```
 *
 * @param {expression=} selected A model bound to the selected slide index.
 * @param {boolean=} loop Whether the slide box should loop. Default false.
 * @param {number=} auto-play If a positive number, then every time the given number of milliseconds have passed, slideBox will go to the next slide. Set to a non-positive number to disable. Default: -1.
 * @param {expression=} on-slide-changed Expression called whenever the slide is changed.  Is passed a '$slideIndex' variable.
 * @param {string=} delegate-handle The handle used to identify this slideBox with
 * {@link ionic.service:$ionicSlideBoxDelegate}.
 */
IonicModule
.directive('ionSlideBox', [
  '$ionicSlideBoxDelegate',
  '$window',
  '$ionicHistory',
function($ionicSlideBoxDelegate, $window, $ionicHistory) {

  return {
    restrict: 'E',
    controller: '$ionSlideBox',
    require: 'ionSlideBox',
    transclude: true,
    scope: {
      selectedIndex: '=?selected',
      onSlideChanged: '&'
    },
    template: '<div class="slider-slides" ng-transclude></div>',
    compile: compile
  };

  function compile(element, attr) {
    // DEPRECATED attr.doesContinue
    isDefined(attr.doesContinue) && attr.$set('loop', attr.doesContinue);

    return postLink;
  }

  function postLink(scope, element, attr, slideBoxCtrl) {
    element.addClass('slider');

    var deregister = $ionicSlideBoxDelegate._registerInstance(
      slideBoxCtrl, attr.delegateHandle, function() {
        return $ionicHistory.isActiveScope(scope);
      }
    );

    watchSelected();
    isDefined(attr.loop) && watchLoop();
    isDefined(attr.autoPlay) && watchAutoPlay();

    var throttledReposition = ionic.animationFrameThrottle(repositionSlideBox);
    throttledReposition();
    angular.element($window).on('resize', throttledReposition);

    scope.$on('$destroy', function() {
      deregister();
      angular.element($window).off('resize', throttledReposition);
    });

    // ***
    // Methods
    // ***

    // There is no way to make the slidebox stretch to a large enough size
    // when its children are all position: absolute elements.
    // We just make it so the slidebox is *always* as large as its offsetParent.
    function repositionSlideBox() {
      element.css({
        width: (element[0].offsetParent || element[0].parentNode || {}).offsetWidth + 'px',
        height: (element[0].offsetParent || element[0].parentNode || {}).offsetHeight + 'px'
      });
    }

    function watchSelected() {
      scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex) {
        if (slideBoxCtrl.isInRange(newIndex)) {
          scope.onSlideChanged({
            //DEPRECATED $index
            $index: newIndex,
            $slideIndex: newIndex
          });
          slideBoxCtrl.select(newIndex);
        }
      });
    }

    function watchLoop() {
      var unwatchParent = scope.$parent.$watch(attr.loop, slideBoxCtrl.loop);
      scope.$on('$destroy', unwatchParent);
    }

    function watchAutoPlay() {
      var unwatchParent = scope.$parent.$watch(attr.autoPlay, slideBoxCtrl.autoPlay);
      scope.$on('$destroy', unwatchParent);
    }
  }

}]);