/* ---------------------------------------------------------
	more accessible "hover" function
	<http://groups.google.com/group/jquery-en/browse_thread/thread/3042924a08d3fa53>
--------------------------------------------------------- */

jQuery.fn.extend({ 
	hover: function(fnOver, fnOut) { 
		return this.bind('mouseover focus', fnOver).bind('mouseout blur', fnOut); 
	}
});


/* ---------------------------------------------------------
	site content
--------------------------------------------------------- */

$(document).ready(function(){
	
	// preload program images
	var img_transform = $('<img />').attr({
		src: '/images/program_photos/girl.jpg',
		alt: 'There is always hope, even after tragedy.',
		title: 'There is always hope, even after tragedy.',
		width: '889',
		height: '268'
	});
	
	var img_sisters = $('<img />').attr({
		src: '/images/program_photos/sisters.jpg',
		alt: 'Sisters teaching we can disagree — and still work together.',
		title: 'Sisters teaching we can disagree — and still work together.',
		width: '889',
		height: '268'
	});
	
	var img_children = $('<img />').attr({
		src: '/images/program_photos/children.jpg',
		alt: 'The children of the world are our family.',
		title: 'The children of the world are our family.',
		width: '889',
		height: '268'
	});
	
	var img_interfaith = $('<img />').attr({
		src: '/images/program_photos/interfaith.jpg',
		alt: 'Our difference in faith is something to celebrate, not debate.',
		title: 'Our difference in faith is something to celebrate, not debate.',
		width: '889',
		height: '268'
	});
	
	var img_alzheimers = $('<img />').attr({
		src: '/images/program_photos/alzheimers.jpg',
		alt: 'Improving the lives of those living with Alzheimer’s.',
		title: 'Improving the lives of those living with Alzheimer’s.',
		width: '889',
		height: '268'
	});

	// position program descriptions
	$('.program_desc').css({
		'position':'absolute',
		'left':'0',
		'top':'313px'
	});

	// hide all program descriptions except the first
	$('#program_photo img').addClass('active');
	$('.program_desc:first').addClass('active');
	$('.program_desc').not('.active').hide();
	
	// dim all thumbnails except the first
	$('#nav_programs a:first').addClass('selected');
	if (jQuery.support.opacity == true) {
		$('#nav_programs a').not('.selected').css('opacity','.6');
	} else {
	
		// internet explorer...
		$('#nav_programs a').not('.selected').css({
			'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)',
			'filter':'alpha(opacity=60)'
		});
	}
	
	// fade in thumbnails when hovered
	$('#nav_programs li a').hover(
		function () {
			$(this).animate({opacity: '1'}, 300);
		}, 
		function () {
			$(this).not('.selected').animate({opacity: '.6'}, 300);
		}
	);
	
	// swap program info when clicked
	$('#nav_programs li a').click (
		function () {
			
			if( !$('.active').is(':animated') ) {
					
					
				// check that this isn't selected already
				if ($(this).attr('class') != 'selected') {
				
					// make this thumbnail active
					$('#nav_programs li a.selected').removeClass('selected').fadeTo(300, .6);
					$(this).addClass('selected');
				
					// get id of clicked element
					var id = $(this).parent().attr('id');
		
					// fade out program info
					$('#main_content .active').removeClass('active').fadeOut(700, function(){

						// fade in new info
						switch(id) {
							case 'nav_transformation':
								$('#program_photo').html(img_transform);
								$('#program_photo img, #transformation').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
								
							case 'nav_sisters':
								$('#program_photo').html(img_sisters);
								$('#program_photo img, #sisters').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
								
							case 'nav_children':
								$('#program_photo').html(img_children);
								$('#program_photo img, #children').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
								
							case 'nav_interfaith':
								$('#program_photo').html(img_interfaith);
								$('#program_photo img, #interfaith').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
								
							case 'nav_alzheimers':
								$('#program_photo').html(img_alzheimers);
								$('#program_photo img, #alzheimers').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
						}
				
					});
				}
			}
			
			return false;
		}
	);
	
	// add footer links
	$('#footer .links').append(' <a id="site-credits" href="#site_credits">Site Credits</a> | <a id="about-info" href="#about_info">About GHR</a></p>');
	
	// hide footer info
	$('#about_info h2, #site_credits h2').css('display','none');
	$('#about_info, #site_credits').hide();
	
	// swap footer info w/ program info
	$('#footer a').click(function () {
			
		if( !$('.active').is(':animated') ) {
		
			// find content
			var id = $(this).attr('id');
			
			// fade out program info
				$('#main_content .active').not('#program_photo .active').removeClass('active').fadeOut(700, function(){

					// fade in new info
						switch(id) {
							case 'site-credits':
								$('#site_credits').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
								
							case 'about-info':
								$('#about_info').css('opacity', '0').show().animate({opacity: '1'}, 900).addClass('active');
								break
						}
				});		
		}
		
		return false;
	});
});