/* Photomosaic and Homepage-specific Effects (requires jQuery) */
/* by White Whale Web Services for Kenyon College */

var departmentlist,photomosaic,captionTimer=new Object;

$(document).ready(function() { 
	// on load	
	// prep mosaic
	var currimg;
	$('.mosaic_photo').css('cursor','pointer').click(zoomIn).each(function() 
	{
		$(this).prepend('<div class="overlay">'+this.title.replace('&lt;','<').replace('&gt;','>')+'</div>').removeAttr('title');
	});
	$('.overlay').fadeTo(0,0.001).hover(function() { $(this).stop().css('opacity',0.25); }, function() { $(this).stop().fadeTo(1000,0.001); });
	photomosaic = $('#photomosaic');
	
	// prep department dropdown
	$('body').click(hideDeptList);
	$('#departments>a').addClass('dropdown').click(showDeptList).after(departmentlist).next().click(hideDeptList);
	
	// prep feature
	var feature = $('#feature');
	var featureCaptions = $('.feature_caption');
	var numcaptions = $('.feature_caption').size();
	if(!featureCaptions.length) 
	{
		//feature.append(''); 
		// or add a single hover area if no caption is present
		
		$('#feature>img').wrap('<a href="'+$('area').attr('href')+'"></a>')
		feature.append('<div class="feature_image_area" style="width:900px;"></div>');
	}
	else 
	{
		$('#feature>img').wrap('<a href="'+$('area').attr('href')+'"></a>')
		if (numcaptions == 1)
		{
			featureCaptions.each(function() { feature.append('<div class="feature_image_area" style="width:900px;"><div class="caption" style="left: 310px"><div class="captiontext">'+$(this).html()+'<div class="captionlinks"><a href="http://www.kenyon.edu/contact.xml">More About the Photo Wall</a> &bull; <a href="http://www.kenyon.edu/contact.xml">Submit Photos</a></div></div></div></div>'); $(this).remove(); });
		}
		else
		{
			featureCaptions.each(function() { feature.append('<div class="feature_image_area" style="width:'+$(this).width()+'px;"><div class="caption"><div class="captiontext">'+$(this).html()+'<div class="captionlinks"><a href="http://www.kenyon.edu/contact.xml">More About the Photo Wall</a> &bull; <a href="http://www.kenyon.edu/contact.xml">Submit Photos</a></div></div></div></div>'); $(this).remove(); });
		}
	}  // add hover areas for each captionable image
	
	$('.feature_image_area').each(function() 
	{		
			for(i=0;i<$(this).width()/100*3;i++) 
			{
				$(this).append('<div class="mosaic_photo"><div class="overlay"></div></div>'); // then add the appropriate number of overlays to each
			}
	}).hover(function() 
	{
		$(this).find('.caption').show().stop().fadeTo('slow',1);
	}, function() 
	{
		$(this).find('.caption').stop().fadeTo('slow',0);
	});
	
	$('#feature .mosaic_photo').click(function() { window.location=$('#feature a').eq(0).attr('href'); });
	
	
	// Why is this doubled? Can it be removed?  OK, the answer is no, makes the fade work with features 
	$('.overlay').css('cursor','pointer').fadeTo(0,0.001).hover(function() { $(this).stop().css('opacity',0.25); }, function() { $(this).stop().fadeTo(1000,0.001); });
	
	$('.mosaicvideo embed').click(function() { $(this).parent().parent().fadeOut(function() { $(this).parent().remove(); }); });
	
	$('.mosaic_photo').mouseover(function() 
	{
		currimg = this.style.backgroundImage;
		if ($(this).children(".animation").html() != null )
		{
			var newimage;
			newimage = this.style.backgroundImage.replace(/\/100\//,'/animation/');
			this.style.backgroundImage = newimage;
		}
	});

	$('.mosaic_photo').mouseout(function() 
	{
		if ($(this).children(".animation").html() != null )
		{
			var newimage;
			newimage = this.style.backgroundImage.replace(/\/animation\//,'/100/');
			this.style.backgroundImage = newimage;
		}
	});
});

function zoomIn() 
{	
	var embedded_code;
	embedded_code = $(this).children(".mosaicvideo_wrapper").html();
	if ($(this).children(".mosaicvideo_wrapper").html() == null )
	{
		embedded_code = "";
	}
	
	var subimg;
	
	subimg = this.style.backgroundImage.replace(/url\((.*)\/100\/(.*)\)/,'$1' + '/300/' + '$2');
	if ($(this).children(".animation").html() != null )
	{
		subimg = this.style.backgroundImage.replace(/url\((.*)\/animation\/(.*)\)/,'$1' + '/300/' + '$2');
	}	
	
	
	photomosaic.prepend('<div class="zoom"><img src="' + subimg + '" width="300" height="300" alt="Caption"/>'+embedded_code+'<div class="caption"><div class="captiontext">'+$(this).children().eq(0).html()+'<div class="captionlinks"><a href="http://www.kenyon.edu/contact.xml">More About the Photo Wall</a> &bull; <a href="http://www.kenyon.edu/contact.xml">Submit Photos</a></div></div></div></div>').children().eq(0).css('left',Math.floor(($(this).parent().children().index(this))/3)*300).children().eq(0).load(function() 
	{
		$(this).parent().fadeIn(function() 
		{
			var caption = $(this).children().eq(1);
			captionTimer = setTimeout(function() 
			{ 
				caption.fadeIn('slow'); },500);
				$(this).hover(function() 
				{
					caption.stop().fadeTo('slow',1);
				},function() 
				{
					caption.stop().fadeTo('slow',0);
				});
		});
	}).click(function() 
	{ 
		$(this).parent().fadeOut(function() 
		{ 
			$(this).remove(); 
		}); 
	}); // add div for, attach onload and onclick events
}

function showCaption() 
{
	$(this).children().eq(1).fadeIn();
}

function showDeptList() 
{
	$('#departmentlist').show('medium');
	return false; // cancel the link click
}

function hideDeptList() 
{
	$('#departmentlist').hide('medium');
	$('#whiteout').remove();
}