var app = app || {};

app.fishrod.hero = (function($){
	
	var event = {
		
		bind: function(){
			$('#hero .selector li').click(function(){
				var e = this;
				app.fishrod.hero.change(e);
			});
		}	
	},
	view = {
		changeHero: function(e){
			var $listItems = $('#hero .selector li'), index = 0, $heroBackground = $('.hero-background');
			$listItems.removeClass('current');
			$(e).addClass('current');
			
			index = $listItems.index(e);
			
			backgroundY = 0 - (index * $heroBackground.height());
			
			$heroBackground.css('background-position', '50% ' + backgroundY + 'px');
			
		}
	};
	
	return {
		init: function(){
			event.bind();
			$('#hero .selector li:first-child').click();
		},
		change: function(e){
			view.changeHero(e);
		}
	};
	
})(jQuery);