var zoomedImgContainer;
var caseStudies = {

	init: function() {
	
		//add handlers
		$$('.popupimg img').each( function(elm) {
			elm.observe( 'click', caseStudies.zoom );
		});
		
		//create popup
		cover = new Element( 'div', { id: 'cover', style: 'position: absolute; top: 0; left: 0; background: #000; display: none;' } );
		$('docbody').insert( cover );
		cover.setOpacity(0.4)
		Event.observe( window, 'resize', caseStudies.resizeCover );
	
	},
	
	zoom: function(e) {
	
		e.stop();
		var img = e.findElement();
		var coords = img.up().positionedOffset();
		
		//clone place + show loading graphic
		zoomedImgContainer = new Element( 'div', { style: 'background: #fff url(images/loading.gif) center no-repeat; z-index: 5; position: absolute; overflow: hidden;' } );
		$('docbody').insert( { top: zoomedImgContainer } )
		zoomedImgContainer.clonePosition( img.up() );
		zoomedImgContainer.setOpacity(0)
		
		var fadeIn = new Effect.Opacity( zoomedImgContainer, { from: 0, to: 1, duration: 0.5 } );
		
		//get new image
		newImg = new Element( 'img', { src: img.src.replace( /-thumb/, '' ), style: 'padding: 8px; border: 1px solid #f5f5f5;' } );
		zoomedImgContainer.insert( newImg );
		newImg.setOpacity(0)
		
		zoom2 = function() {
					
			//cancel loading fx
			fadeIn.cancel();
			zoomedImgContainer.setStyle( { background: '#fff' } );
			zoomedImgContainer.setOpacity(1);
			
			//SAFARI BUG - use defer
			( function() {
			
			//get size of new image and expand box to show
			var newImgH = newImg.getHeight();
			var newImgW = newImg.getWidth();
			
			var vso = document.viewport.getScrollOffsets();
			var newTop = zoomedImgContainer.positionedOffset().top  - ( ( newImgH - 75 ) / 2 );
			if( newTop + newImgH > vso.top + document.viewport.getHeight() ) newTop = vso.top + document.viewport.getHeight() - newImgH - 20;
			if( newTop < vso.top ) newTop = vso.top + 10;
			var newStyle = 'width: ' + newImgW + 'px; height: ' + newImgH + 'px; top: ' + newTop +'px;';
			if( newImgW > 500 ) newStyle+=  'left: ' + ( $('content').positionedOffset().left + 25 ) + 'px;';
			
			caseStudies.showCover();
			
			new Effect.Morph( zoomedImgContainer, {
				style: newStyle,
				afterFinish: function() {
					
					//close button
					var closeBtn = new Element( 'img', { src: 'images/close.png', style: 'position: absolute; top: 17px; right: 17px;' } );
					zoomedImgContainer.insert( closeBtn );
					closeBtn.observe( 'click', caseStudies.unZoom );
					newImg.observe( 'click', caseStudies.unZoom );
					
					new Effect.Opacity( newImg, { from: 0, to: 1, duration: 0.4 } );
		
				},
				duration: 0.2
			
			});
			
			//SAFARI BUG - use defer
			}).defer();

		};
		
		newImg.observe( 'load', zoom2 );
		if( newImg.complete ) zoom2(); //IE bug
		

	
	},
	
	unZoom: function() {
	
		caseStudies.hideCover();
		zoomedImgContainer.fade( { duration: 0.2, afterFinish: function() {
			newImg.remove();
			zoomedImgContainer.remove();
		} } );
	
	},
	
	showCover: function() {
	
		$('cover').show();
		caseStudies.resizeCover();
	
	},
	
	hideCover: function() {
	
		$('cover').hide();
	
	},
	
	resizeCover: function() {

		if( $('cover').getStyle('display') != 'block' ) return;
	
		$('cover').style.width = $('docbody').getWidth() + 'px';
		$('cover').style.height = $('docbody').getHeight() + 'px';
	
	}

}

document.observe( 'dom:loaded', caseStudies.init );