bb.Home = bb.Home || {};

bb.Home.FeatureView = Backbone.View.extend({
    el: $('#feature_info'),
	el2: $('#feature_content'),
    template: $("#featureItem").template(),
	template2: $("#featureContent").template(),

    initialize: function(options){

    },
    render: function() {
        var ins = this;
		this.el.empty();
		//this.el2.empty();
		$('#feature_list .current').removeClass('current');
		$('#'+ins.model.attributes.name).addClass('current');
        $.tmpl(ins.template, ins.model).appendTo(ins.el);
		$.tmpl(ins.template2, ins.model).appendTo(ins.el2);
		
		this.fadeIn();
        return this;
    },
	fadeIn: function() {
		var imgs = this.el2.find('a');
		this.isFade = true;
		var ins = this;
		
		if(imgs[1]) {
			$(imgs[1]).animate({
			    opacity: 1
			  }, 500, function() {
			   $(imgs[0]).remove();
			   ins.isFade = false;
			});
		} else {
			$(imgs[0]).css('opacity','1');
			ins.isFade = false;
		}
	}
});

bb.Home.FeatureListView = Backbone.View.extend({
    tagName: "div",
    el: $("#feature_list"),
	events: {
	  "click #next_feature" : "nextFeature",
	  "click #prev_feature" : "prevFeature",
	  "click #feature_list ul li" : "chooseItem"
	},
    initialize: function() {
		this.featureView = new bb.Home.FeatureView({model: bb.Home.Features.get(bb.Home.Features.at(0).id)});
		this.featureView.render();
		this.preload = {};
		var ins = this;
		bb.Home.Features.each(function(item) {
		    ins.preload[item.id] = new Image(); 
		    ins.preload[item.id].src = item.attributes.home_feature_image; 
		});
		
    },
	chooseItem: function(e) {
		if(this.featureView.isFade) {return false;}
		
		var id = e.currentTarget;
		var current = bb.Home.Features.get(id);
		
		this.featureView = new bb.Home.FeatureView({model: current});
		this.featureView.render();
	},
	nextFeature: function() {
		if(this.featureView.isFade) {return false;}
		var current = bb.Home.Features.get($('#feature_list .current')[0].id);
		var length = bb.Home.Features.length;
		var index = bb.Home.Features.indexOf(current);

		if(index == length - 1) {index = 0;} else {index = index + 1;}
		$('#feature_list .current').removeClass('current');
		$('#'+bb.Home.Features.at(index).id).addClass('current');
		
		var next = bb.Home.Features.get(bb.Home.Features.at(index).id);
		
		this.featureView = new bb.Home.FeatureView({model: next});
		this.featureView.render();
	},
	prevFeature: function() {
		if(this.featureView.isFade) {return false;}
		var current = bb.Home.Features.get($('#feature_list .current')[0].id);
		var length = bb.Home.Features.length;
		var index = bb.Home.Features.indexOf(current);

		if(index == 0) {index = length - 1;} else {index = index - 1;}
		$('#feature_list .current').removeClass('current');
		$('#'+bb.Home.Features.at(index).id).addClass('current');
		
		var prev = bb.Home.Features.get(bb.Home.Features.at(index).id);
		
		this.featureView = new bb.Home.FeatureView({model: prev});
		this.featureView.render();
	}
});

bb.Home.Feature = Backbone.Model.extend();
bb.Home.FeatureCollection = Backbone.Collection.extend({
    model: bb.Home.Feature
});


//START THINGS HERE
bb.Home.Features = new bb.Home.FeatureCollection(homePageFeatures);
// bb.Home.Page = new bb.Home.PageRoutes();
// Backbone.history.start();
new bb.Looper({id:'twitter'});
new bb.Looper({id:'bensimon_home_career'});
bb.featureList = new bb.Home.FeatureListView();