Projects_menu = function(element, element_scroller, project_elements) {
	this.element = element
	this.element_scroller = element_scroller
	this.element_table = TABLE({}, TBODY({}, this.element_row = TR({})))
	appendChildNodes(this.element, this.element_table)
	this.projects = project_elements
	this.show()
}
Projects_menu.prototype = {
	current: null,
	show: function () {
		appendChildNodes(this.element_scroller, this.element_up = DIV({'class':'scroller scroller_up'}))
		appendChildNodes(this.element_scroller, this.element_down = DIV({'class':'scroller scroller_down'}))
		for (i = 0; i < this.projects.length; i++) {
			project = this.projects[i]
			project_nav = this.create_nav_item(project)
			//project_nav = SPAN({}, '*')

			if (i == 0) this.current = project_nav
			appendChildNodes(this.element_row, project_nav)
			fade(project_nav, {'from':0, 'to':1})
			Morph(this.current, {'style':{'color':'#fcfcc4'}})
			this.connect_scroller(this.current)
			// check if there is something to scroll
			if (this.current.target.isVerticalBounded()) {
				appear(this.element_scroller)
				this.connect_scroller(this.current)
			}
		}
	},
	create_nav_item: function(project) {
		try {
			title = getFirstElementByTagAndClassName('h1',null, project).textContent
			//project_description = getFirstElementByTagAndClassName(null,'description', project)
			//project_url = getNodeAttribute(getFirstElementByTagAndClassName('a', 'url', project), 'href')

			var item = TD({'title': title, 'class':'nav_item', 'style': {
				'font-size':'12pt',
				'font-weight': 100,
				'opacity': 0,
				'color': '#002000'
			}}, '*')
			item.target = project
			item.menu = this

			connect(item, 'onclick',
				bind(function(ev) {
					item = ev.src()
					if (this.current != item) {
						fade(this.current.target)
						removeElementClass(this.current, 'selected')
						Morph(this.current, {'style':{'color':'#002001'}})
					}
					this.current = item
					addElementClass(this.current, 'selected')
					Morph(this.current, {'style':{'color':'#fcfcc4'}})
					appear(this.current.target, {'afterFinish': bind(function() {
						// check if there is something to scroll
						if (this.current.target.isVerticalBounded()) {
							appear(this.element_scroller)
							this.connect_scroller(this.current)
						} else {
							fade(this.element_scroller)
						}
					}, this)})

				}, this)
			)
			connect(item, 'onmouseover',
				bind(function(ev) {
					item = ev.src()
					Morph(item, {'fps': 50, 'duration': .2, "style": {"font-size": "35pt", 'font-weight': '900'}})
				}, this)
			)
			connect(item, 'onmouseout',
				bind(function(ev) {
					item = ev.src()
					Morph(item, {'fps': 50, 'duration': .2, "style": {"font-size": "12pt", 'font-weight': '100'}})
				}, this)
			)
			return item
		} catch (ex) {
			for (j in ex) log(j + ": " + ex[j])
		}
	},
	connect_scroller: function(item) {
		disconnectAll(this.element_down)
		setupScroller(this.element_down, item.target, {
			amount: -20,
			delay: 20,
			title: "scroll down"
		})
		disconnectAll(this.element_up)
		setupScroller(this.element_up, item.target, {
			amount: 20,
			delay: 20,
			title: "scroll up"
		})
	}
}

addLoadEvent(function(ev) {
	pn = new Projects_menu($('projects_menu'), $('content_scroller'), getElementsByTagAndClassName(null, 'project'))
})