/* 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
	$('.mosaic_photo').css('cursor','pointer').click(zoomIn).each(function() {
		$(this).html('<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
	feature = $('#feature'),featureCaptions = $('.feature_caption');
	if(!featureCaptions.length) feature.append(''); // or add a single hover area if no caption is present
	else {
	$('#feature>img').wrap('<a href="'+$('area').attr('href')+'"></a>')
	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'); });
	$('.overlay').css('cursor','pointer').fadeTo(0,0.001).hover(function() { $(this).stop().css('opacity',0.25); }, function() { $(this).stop().fadeTo(1000,0.001); });
});

function zoomIn() {
	photomosaic.prepend('<div class="zoom"><img src="/Images/photomosaic/300/' + this.style.backgroundImage.replace(/.*\/photomosaic\/100\/(.*)\)/,'$1') + '" width="300" height="300" alt="Caption"/><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();
}