var Slide1;
window.addEvent('domready', function() {
	var scroll = new Scroller('thumbs', {area: 225, velocity: 0.1});
	$('thumbs').addEvent('mouseenter', scroll.start.bind(scroll));
	$('thumbs').addEvent('mouseleave', scroll.stop.bind(scroll));
	
	Slide1 = new Fx.Style('thumbs-container', 'width', {duration:600});
	Slide2 = new Fx.Style('thumbs', 'width', {duration:600});
	
	var fade = new Array();
	for(i=0; i<$$('.clickable-thumbnails').length; i++){
		var id = $$('.clickable-thumbnails')[i].getProperty('id');
		fade[id] = new Fx.Style(id,'opacity', {duration: 250, wait: false});
		$(id).addEvent('mouseenter', function(){fade[this.id].start(1);});
		$(id).addEvent('mouseleave', function(){fade[this.id].start(.8);});
	}
	
	//hide scrollbar (if js is disabled so scroller doesn't work, scrollbar will  remain visible)
	$('thumbs').setStyle('overflow','hidden');
	//show main image
	$('main-img').setStyle('display','inline');
	//show thumbs
	$('thumbs-container').setStyle('display','block');
});

function switchImage(id){//changes portfolio image when thumbnail is clicked
	$('main-img').setProperty('src',$(id).getProperty('src'));
}