
var featuresHelper = {};

featuresHelper.makeTab = function (tabIndex) {
  var items = appData.features[tabIndex].items.length;
  var controller = new TKPageSliderController({
    id: 'features_tab_' + tabIndex,
    template: 'featurestab',
    previousPageButton : '.left-arrow',
    nextPageButton : '.right-arrow',
    slidingViewData : {
      orientation: TKSlidingViewOrientationHorizontal,
      activeElementIndex: 0,
      sideElementsVisible: 3,
      distanceBetweenElements: 600,  // distance between the center points of elements
      elements: this.makeSlideViewElements(tabIndex)
    },
    // customize the page control
    pageControlData : {
      numPages: items,
      distanceBetweenPageIndicators: 32,
      showPageElements: true,
      indicatorElement: { type: "emptyDiv" },
      pageElement: { type: "emptyDiv" },
      incrementalJumpsOnly: false,
      allowsDragging: true
    }
  });
  controller.pageWasSelected = function (index) {
    bookletController.playNonLibraryContent(appData.features[tabIndex].items[index]);
  };
  return controller;
};

featuresHelper.makeSlideViewElements = function (tabIndex) {
  var data = appData.features[tabIndex];
  var elements = [];
  for (var i = 1; i <= data.items.length; i++) {
    var padded_index = (i < 10) ? '0' + i : i;
    var thumb_url = 'images/features/' + data.directory + '/' + data.prefix + padded_index + '.png';
    var text_url = 'images/features/' + data.directory + '/' + data.prefix + 'Text' + padded_index + '.png';
    elements.push({
      type: 'container',
      children : [
        // the thumbnail
        { type: 'image', src: thumb_url },
        // the play button
        { type: 'image', src: 'images/interface/buttonPlayCircle.png' },
        // the text
        { type: 'image', src: text_url }
      ]
    });
  }
  return elements;
};

var featuresController = new TKTabController({
  id: 'features',
  actions: [
    { selector: '.resume', action: bookletController.resumeFeature }
  ],
  outlets : [
    { name: 'resumeButton', selector: '.resume' }
  ],
  tabsSelector : '.tabs > div',
  controllers : [
    featuresHelper.makeTab(0),
    featuresHelper.makeTab(1),
    featuresHelper.makeTab(2)
  ],
  backButton: '.home'
});

featuresController.viewDidLoad = function () {
  bookletController.registerForDisplayUpdates(this);
};

featuresController.viewDidAppear = function (){
  this.updateDisplay(); 
};

featuresController.updateDisplay = function () {
  this.resumeButton[bookletController.playbackHasStarted() ? 'removeClassName' : 'addClassName'](TKSpatialNavigationManagerInactiveCSSClass);
};
