Simpler components

explore.js

var header = require('./header')
var TabBar = require('./TabBar')

var $page = $('[data-component=explore-page]')

var start = new TabBar($page.find('.tv-channels [data-comonent=tab-bar]'))
var premium = new TabBar($page.find('.premium [data-comonent=tab-bar]'))

start.on('changeTab', function() {
  console.log('start changed tabs')
})

$(window).on('scroll', function() {
  header.changeColor('red')
})

header.js

var $container = $('[data-component=header]')

module.exports = {
  changeColor: function(color) {
    $container.css('background', color)
  }
}

TabBar.js

var EventEmitter = require('events').EventEmitter

var TabBar = function(el, data) {
  $(el).on('click', 'a', function() {
    this.changeTab($(this).index())
  }.bind(this))
}

inherits(TabBar, EventEmitter)

TabBar.prototype.changeTab = function(i) {
  this.emit('changeTab', i)
}

module.exports = TabBar