var Showcase = {
	
	work : [],
	pageWidth : 0,
	url : "",
	scrollCycles : 9,
	scrollSpeed : 30,
	showcaseFolder : null,
	
	init : function() {
		this.showcaseFolder = document.getElementById("showcaseFolder");
		this.pageWidth = this.showcaseFolder.offsetWidth;
		this.url = document.location.href;
		if (this.url.indexOf('#') != -1) {
			this.url = this.url.substring(0, this.url.indexOf('#'));
		}
	},
		
	add : function(id) {
		this.work.push(id);
		document.getElementById("showcaseFolderHelper").style.width = (this.work.length * this.pageWidth) + "px"; 
		
		var self = this;
		document.getElementById(id).onclick = function() {
			window.location.replace(self.url + "#"+id);
			self.scrollTo(id);
		}
	},
	
	scrollTo : function(id) {
		if (this.work.indexOf(id) == -1) {
			return;
		}
		var to = this.work.indexOf(id) * this.pageWidth;
		var from = this.showcaseFolder.scrollLeft;
		var stepWidth = (to - from) / this.scrollCycles;
		
		this.scrolling(stepWidth, this.scrollCycles);
	},
	
	scrolling : function(stepWidth, cycle) {
		this.showcaseFolder.scrollLeft += stepWidth;

		if (cycle > 1) {
			var self = this;
			window.setTimeout(function() {self.scrolling(stepWidth, --cycle)}, this.scrollSpeed);
		}
		
	}
}
Showcase.init();