// <![CDATA[
			
var Portfolio = {	
	init:function() {
		Portfolio.setupThumbs.delay (1000, this);
	},
	setupThumbs:function() {
		var thumbnails = $$('.thumbnail');
		var delayAmt = 100;
		
		thumbnails.each(function(el) {								 
			el.set('tween', {
				fps:24,
				duration:'long',
				transition:'back:out',
				link:'chain'
			});
			
			el.addEvents({
				'mouseenter':function (_evt) {
					_evt.stop();
					this.set ('morph', {
						duration:'short',
						transition:'quad:out'
					}).morph({
						'width':'55px',
						'height':'55px'
					});
				},
				'mouseleave':function (_evt) {
					_evt.stop();
					this.set ('morph', {
						duration:'short',
						transition:'quad:out'
					}).morph({
						'width':'50px',
						'height':'50px'
					});
				},
				'click':function(_evt) {
					var caller = _evt.target;
					var currCSImg;
					var pageImgChildren = $('pageImg').getChildren();
					$$(pageImgChildren).each(function(el) {
						if (el.get('tag') === 'img') {
							currCSImg = $(el);
						}
					});					
					
					// fade down img in #pageImg:					
					currCSImg.set ('tween', {
						duration:'short',
						transition:'quad:out',
						onComplete:function () {
							// fade in the corresponding image which the user requested:
							// the location of this image is gotten from several properties:
							var casestudy = caller.get('cs');
							var imgNum = caller.get('imgnum');
							
							// load the following image, whose path we construct here, into #pageImg:
							// empty #pageImg:							
							
							// construct a new image:
							var newImg = new Element('img', {
								'src':'/img/portfolio/' + casestudy + '/large_0' + imgNum + '.jpg',
								'alt':casestudy + ' detail',
								'width':'980',
								'height':'475',
								'styles':{
									'width':'980px',
									'height':'475px',
									'opacity':'0'
								}
							}).replaces(currCSImg).fade('in'); // .inject ($('redsquare'), 'after').fade ('in');							
						}
					}).tween ('opacity', 1, 0);					
				}				
			});
			
			// display thumbs in order from left to right:
			el.tween.delay (delayAmt, el, ['opacity', 0, 1]);
			delayAmt += 500;
		});		
	}
};

window.addEvent('domready', Portfolio.init);

// ]]>