$(window).load(function(){

	$('.b-projects').each(function(){
		new Slider(this);
	});

});

function Slider(container){

	var _this = this;

	this.container = $(container);

	this.current = this.container.find('.screen')
		.scrollable({
			speed: 1000,
			circular: true,
			onBeforeSeek: function(event, target){
				_this.beforeSlide(target);
			},
			onSeek: function(){
				_this.afterSlide();
			}
		})
		.navigator()
		.data('scrollable');

	this.info = this.container.find('.info')
		.scrollable({
			speed: 1000,
			circular: true
		})
		.data('scrollable');

	this.prev = this.container.find('.slider__nav_prev .slider__nav__screen__wrap')
		.scrollable({
			speed: 1000,
			circular: true
		})
		.data('scrollable');

	this.next = this.container.find('.slider__nav_next .slider__nav__screen__wrap')
		.scrollable({
			speed: 1000,
			circular: true
		})
		.data('scrollable');

	this.labels = this.container.find('.labels li');
	this.pins = this.container.find('.pins ul');

	this.project = 0;
	this.animated = false;

	this.init();

}

Slider.prototype.init = function(){

	var _this = this;

	this.generatePins();
	this.pins.children().eq(0).addClass('act');

	this.labels.click(function(){
		_this.switchProject(this);
	});

	this.pins.delegate('li', 'click', function(){
		_this.switchPins(this);
	});

	this.container.find('.slider__nav_prev').click(function(){
		_this.moveLeft();
	});

	this.container.find('.slider__nav_next').click(function(){
		_this.moveRight();
	});

};

Slider.prototype.generatePins = function(){

	var _this = this,
		items = this.current.getItems(),
		html = '';

	items.each(function(i){

		var project = $(this).data('project');

		if (project === _this.project) {
			html += '<li class="g-dib" data-index="' + i + '"></li>';
		}

	});

	this.pins.html(html);

};

Slider.prototype.switchProject = function(handler){

	var project = this.labels.index(handler),
		items = this.current.getItems(),
		first = items.filter('[data-project=' + project + ']').eq(0),
		target = items.index(first);

	this.seekTo(target);

};

Slider.prototype.switchPins = function(handler){

	var target = $(handler).data('index');

	console.log(target);

	this.seekTo(target);

};

Slider.prototype.seekTo = function(target){

	if (this.animated) {
		return;
	}

	this.current.seekTo(target);
	this.prev.seekTo(target);
	this.next.seekTo(target);

};

Slider.prototype.moveLeft = function(){

	if (this.animated) {
		return;
	}

	this.current.prev();
	this.prev.prev();
	this.next.prev();

};

Slider.prototype.moveRight = function(){

	if (this.animated) {
		return;
	}

	this.current.next();
	this.prev.next();
	this.next.next();

};

Slider.prototype.beforeSlide = function(target){

	this.animated = true;

	var items = this.current.getItems(),
		project;

	if (target < 0) {
		project = items.eq(-1).data('project');
	} else if (target >= items.length) {
		project = 0;
	} else {
		project = items.eq(target).data('project');
	}

	if (this.project !== project) {

		if (target < 0) {
			this.info.prev();
		} else if (target >= items.length) {
			this.info.next();
		} else {
			this.info.seekTo(project);
		}

		this.project = project;

		this.generatePins();

	}

	this.labels.eq(project)
		.addClass('act')
		.siblings().removeClass('act');

	if (target >= items.length) {
		target = 0;
	}

	var current = items.eq(target),
		pin = items.filter('[data-project=' + project + ']').index(current);

	this.pins.children().eq(pin)
		.addClass('act')
		.siblings().removeClass('act');

};

Slider.prototype.afterSlide = function(){

	this.animated = false;

};