var joel;

var Project = new Class({
	initialize: function (project, bar, link) {
		this.topY      = project.getPosition().y;
		this.height    = project.getSize().y + 30;
		this.bottomY   = this.topY + this.height;
		this.bar       = bar;
		this.link      = link;
		
		var that = this,
		click    = function (e) {
			joel.scrollTo(project);
			e.stop();
		};
		
		this.bar.addEvent('click', click);
		this.link.addEvent('click', click);
	},
	setScrollPosition: function (y) {
		if (y >= this.topY && y < this.bottomY) {
			this.bar.addClass('active');
			this.link.addClass('active');
		} else {
			this.bar.removeClass('active');
			this.link.removeClass('active');
		}
	}
});

var Joel = new Class({
	initialize: function () {
		this.scrollInterval = window.setInterval(this.checkPageScroll.bind(this), 33);
		this.projects       = [];
		this.scroll         = new Fx.Scroll(window, {
			offset: {x: 0, y: -184},
			duration: 1000
		});
		
		var i       = -1,
		projectsEls = $('content').getElements('.project'),
		barsEls     = $('bars').getElements('a'),
		linksEls    = $('nav').getElements('a'),
		colors      = ['#41C1CC', '#3DB5BF', '#39A9B3', '#359CA6', '#2D838B', '#297880', '#256C73', '#216067', '#1D5459', '#18484D', '#143C40'];
		
		
		while (++i < 9) {
			this.projects.push(new Project(projectsEls[i], barsEls[i], linksEls[i]));
			
			barsEls[i].setStyle('background-color', colors[i]);
		}
	},
	checkPageScroll: function () {
		var i        = 9,
		pageY        = Math.max(window.pageYOffset || document.body.scrollTop, 0) + 184;
		
		while (i--) {
			this.projects[i].setScrollPosition(pageY);
		}
	},
	scrollTo: function (el) {
		this.scroll.toElement(el, 'y');
	}
});

window.addEvent('domready', function () {
	joel = new Joel();
});