/**
 * Requires MooTools v1.2+
 */ 
window.addEvent('domready', function(){
	
	var imgWidth = 550;		// Max width of image
	var imgHeight = 450;		// Max height of image
	var paddingTop = 20;		// Offset from bottom of chrome to start of viewer frame
	var viewPadding = 10;		// Padding between view frame and element (the CSS margin of IMG)
	var extraHeight	= 32;		// Any extra needed in frame (for toolbars, etc.)
	
	// Setup some variables
	var viewer = $('pictureFrame');
	var image = $('imageEl');
	var closeViewer = $('closePictureWrapper');
	var prefix = '/thumbnail.jpg?w='+imgWidth+'&h='+imgHeight+'&src=/home/williams/public_html/sites/dbwilliamsconstruction/subdomains/www/files/items/';
	var myFx = new Fx.Tween( viewer );
	var imgFx = new Fx.Tween( image );
	var closeFx = new Fx.Tween( closeViewer );
	
	// Handle click on thumbnail
	$$('.thumbnail').each(function(o){
		o.addEvent('click', function(){
			showImage( o.id );
		});
	});
	
	// Handle 'close'
	$('closePictureFrame').addEvent('click', function(){
		myFx.start( 'opacity', 0 ).chain(function(){
			viewer.setStyle('display', 'none');
		});
	});
	
	
	// Render image with passed ID into viewer
	function showImage( id ){
		
		var dims = window.getScroll();
		var size = window.getSize();
		
				
		// console.debug( window.getSize() );
		// console.debug( window.getScrollSize() );
		
		viewer.setStyles({
			'top':dims.y + 20,
			'left':Math.abs( (size.x / 2) - (imgWidth / 2 ) ),
			'visibility':'visible',
			opacity:0,
			height:0,
			width:0,
			display:'block'
		});
		
		image.setStyles({
			opacity:0,
			display:'none'
		});
		closeViewer.setStyles({
			opacity:0
		});
		
		// image.setStyle('opacity', 0);
		// image.setStyle('display','none');
		image.setProperty('src', prefix + id );
				
		myFx.start( 'opacity', 0, 1 ).chain(function(){
				myFx.start( 'width', imgWidth + (viewPadding * 2) ).chain(function(){
					myFx.start( 'height', imgHeight + (viewPadding * 2) + extraHeight ).chain(function(){
						image.setStyle('display','block');
						imgFx.start( 'opacity', 0, 1 );	
						closeFx.start( 'opacity', 0, 1 );
					})	
				});
			}
		);
	}
	
	
});