$(window).load(function(){
	//creates a thumbnail gallery which can use any size thumbnail
	
	
	$('.image-popout img').each(function() {
		//add one more variable or two
		//one for the size of the thumbnail box
		//one for the border around image to set how much top margin the span should get?
		
		//to get image base width and height a copy of the image must be made since the original has been resized
		// Copy the image, and insert it in an offscreen DIV
		aimgcopy = $(this).clone();
		$('#store').append(aimgcopy);

		// Remove the height and width attributes
		aimgcopy.css({
			'max-width':'none',
			'max-height':'none'
		});

		// Now the image copy has its "original" height and width
		var baseWidth = aimgcopy.width();
		var baseHeight = aimgcopy.height();
		
		
		//determine ratio to resize image at
		var ratio = 1; //default - 1 means no resizing
		
		if((baseWidth > 150) || (baseHeight > 150)){
			//determine ratio to fit box
			//find longest side
			if(baseWidth > baseHeight){
				ratio = baseWidth/150;
			} else{
				ratio = baseHeight/150;
			}
		}
		
		var	xwidth = Math.round(baseWidth/ratio);
		var	xheight = Math.round(baseHeight/ratio);
		

		if(xwidth < 150){
			//add left margin to center image
			$(this).parent().css({'margin-left': Math.round((150-xwidth)/2)});
		}
		if(xheight < 150){
			//add top margin to center image
			$(this).parent().css({'margin-top': Math.round((150-xheight)/2)});
		}
		
		$(this).css({
			'width': xwidth,
			'height': xheight,
			'position': 'absolute',
			//reset below styles which were used to align image on screen when it first loaded
			'max-width':'none',
			'max-height':'none',
			'vertical-align':'baseline'
		}); //By default set the width and height of the image.
		
		$(this).parent().css(
			{'width': xwidth, 'height': xheight, 'line-height':'normal', 'text-align':'left'}
		);
		
		//position the information span
		span = $(this).parent().parent().find('.info');

		infotop = Math.round((baseHeight-xheight)/2) -1; // the -1 gives the info span a 1 pixel overlap of image
		if (baseHeight >= 100){
			infotop = infotop-span.height() +1; //moves the infospan over top image
		}
		
		span.css({
			'margin-top': infotop, 
			'margin-left': (150-xwidth)/2-((baseWidth-xwidth)/2),
			'min-width':baseWidth
			}
		);
		

		//remove width on info span if simple class is found
		simple = $(this).parent().parent().find('.simple');
		simple.css({
			'min-width':0
			}
		);

		$(this).mouseenter(
			function() {
				//check to see if image is already expanded
				if(($(this).width() == baseWidth) || ($(this).height() == baseHeight)){
					$(this).stop();
					$(this).parent().parent().find('.info').show();
					return;
				}
				
				//animate image to big size
				$(this).stop().animate( {
					width   : xwidth * ratio,
					height  : xheight * ratio,
					marginTop : Math.floor(-((baseHeight-xheight)/2)),
					marginLeft : -((baseWidth-xwidth)/2),
					marginRight : 0,
					marginBottom : 0,
					
					}, 200, function(){
						//after animation show image info
						$(this).parent().parent().find('.info').show();
					}
				);
					
				$(this).addClass('image-popout-shadow');	
		});
		
		$(this).mouseleave(
			function() {
				//animate image to small size.
				//there is a slight delay of 1 milliseconds.
				//this gives the mouseenter event of the informational span time to stop
				//the image from downsizing if the span has been rolled over.
				$(this).stop().animate( {
					width   : xwidth,
					height  : xheight,
					marginTop : 0,
					marginLeft : 0,
					marginRight : 0,
					marginBottom : 0,
					delay: 1
					}, 1, function() {
						$(this).removeClass('image-popout-shadow');
				}); //END FUNCTION
				
				//hide the image info
				$(this).parent().parent().find('.info').hide();
			}
		);
	});
	
	$('.image-popout .info').each(function() {
		$(this).mouseenter(
			function(){
				//stop image from resizing and span from disappearing
				$(this).parent().find('img').mouseenter();
			}
		);
		
		$(this).mouseleave(
			function() {
				//perform mouseleave for image
				$(this).parent().find('img').mouseleave();
			}
		);
	});
	
});