window.addEvent('domready', function() {
	var gCurrentImage = 0;
	var gCurrentItem = "";

	var rootElm = (document.documentElement && document.compatMode == 'CSS1Compat') ? document.documentElement : document.body; 
	var viewportw = self.innerWidth ? self.innerWidth : rootElm.clientWidth; 
	var viewporth = self.innerHeight ? self.innerHeight : rootElm.clientHeight;
		
	function show(title,w,h) {
		// parts adapted from http://www.webmasterworld.com/javascript/3544271.htm
		var img;
	
		$('portfoliosstitlebar').setStyle('opacity', 0.75);
		$('portfoliossfooterbar').setStyle('opacity', 0.75);		
		
		$('portfoliosstitle').innerHTML = "Loading Images...";
		$('portfolioss').setStyle('background-image', 'url(media/portfolio/loading.gif)');
		$('portfolioss').setStyle('background-position', 'center center');
		
		var images = new Array()

		for (i = 1; i < portfolio_images[gCurrentItem].length; i++) {
			images[i-1] = 'media/portfolio/' + gCurrentItem + '/' + i + '.jpg';			
		}

		var loader = new Asset.images(images, {
			onComplete: function() {				
				$('portfoliosstitle').innerHTML = title;
				$('portfolioss').setStyle('background-image', 'url(media/portfolio/' + gCurrentItem + '/1.jpg)');
				$('portfolioss').setStyle('background-position', 'top center');
			}
	    });
		
		var morph = new Fx.Morph('portfolioss', {duration: 400, transition: Fx.Transitions.Cubic.easeOut});
		morph.start({
			'width':  w + 'px',
			'height': h + 'px',
			'z-index': '1',
			'left': ((viewportw - w) / 2) + 'px',
			'top': (rootElm.scrollTop + ((viewporth - h) / 2)) + 'px',
			'opacity': 1
		});		
	}
	
	function hide() {
		var morph = new Fx.Morph('portfolioss', {duration: 400, transition: Fx.Transitions.Cubic.easeOut});
		morph.start({
			'width':  '0px',
			'height': '0px',
			'left': (viewportw / 2) + 'px',
			'top': rootElm.scrollTop + (viewporth / 2) + 'px',
			'opacity': 0
		});		
	}
		
	function switchImg() {
		var img = portfolio_images[gCurrentItem][gCurrentImage];

		nav();
		
		var morph = new Fx.Morph('portfolioss', {duration: 300, transition: Fx.Transitions.Linear,
			onStart: function() {
				$('portfolioss').setStyle('background-image', 'url(media/portfolio/loading.gif)');
				$('portfolioss').setStyle('background-position', 'center center');				
			},
			onComplete: function() {
				$('portfolioss').setStyle('background-image', 'url(media/portfolio/' + gCurrentItem + '/' + gCurrentImage + '.jpg)');		
				$('portfoliosstitle').innerHTML = img.title;
				$('portfolioss').setStyle('background-position', 'top center');
			}
		});
		
		morph.start({
			'width':  img.width + 'px',
			'height': img.height + 'px',
			'z-index': '1',
			'left': ((viewportw - img.width) / 2) + 'px',
			'top': (rootElm.scrollTop + ((viewporth - img.height) / 2)) + 'px',
			'opacity': 1
		});
	}
	
	function nav() {
		if (gCurrentImage > 1) {
			$('portfoliossprev').innerHTML = '&laquo; Previous';
		}	
		else {
			$('portfoliossprev').innerHTML = '';
		}
		
		if (gCurrentImage < portfolio_images[gCurrentItem].length - 1) {
			$('portfoliossnext').innerHTML = 'Next &raquo;';
		}	
		else {
			$('portfoliossnext').innerHTML = '';		
		}
		
		$('portfoliosscounter').innerHTML = gCurrentImage + '/' + (portfolio_images[gCurrentItem].length - 1);		
	}
	
	$$('#ifxportfolio img').addEvent('click', function(e) {
		e.stop();
		gCurrentImage = 1;
			
		// http://www.quirksmode.org/js/events_properties.html
		var targ;
		if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;
		if (targ.nodeType == 3) // defeat Safari bug
			targ = targ.parentNode;
		// ---------------------------------------------------
			
		gCurrentItem = $(targ).getProperty('id');

		$('portfolioss').innerHTML = '<div id="portfoliosstitlebar"></div><div id="portfoliossfooterbar"></div><div id="portfoliosstitle"></div><div id="portfoliossclose">Close X</div><div id="portfoliossprev"></div><div id="portfoliossnext"></div><div id="portfoliosscounter">1/3</div>';		
		
		var img = portfolio_images[gCurrentItem][gCurrentImage];

		$('portfoliossprev').addEvent('click', function(e) {
			if (gCurrentImage > 1) {					
				gCurrentImage--;
				switchImg();
			}
		});
								
		$('portfoliossnext').addEvent('click', function(e){				
			if (gCurrentImage < portfolio_images[gCurrentItem].length - 1) {					
				gCurrentImage++;
				switchImg();
			}
		});
		
		$('portfoliossclose').addEvent('click', function(e) {
			hide();
			gCurrentImage = 0;
		});			
	
		nav();
		
		show(img.title, img.width, img.height);
	});
});