// JavaScript Document

// Cycle Plugin for home page banner
$(document).ready(function() {
    $('.slideshow').before('<div id="navi">').cycle({
		fx: 'scrollLeft',
		speed:1500,
		timeout:8000,
		pager:'#navi',
		after:onAfter
	});
});
function onAfter() { 
$(".slideshow img").addClass("banner");
	var title= $(this).children(".banner").attr("title");
	var content= $(this).children(".banner").attr("alt")
	$('#caption').html('<h1>' + title + '</h1>') 
        .append('<p>' + content + '</p>'); 
}
//staff
$(document).ready(function(){
	$(".thumbs p, .thumbs2 p").hide();
	$(".thumbs, .thumbs2").addClass("position");			
	$(".thumbs a").click(function(){
	  	var largePath = $(this).attr("href");
	  	var largeAlt = $(this).attr("title");
	  	var staffHeight = $(this).next("p").height();
	  	if (staffHeight > 180)	{
			$("#staff").addClass("fullheight").height(staffHeight); 
		}
		else{
			$("#staff").addClass("fullheight"); 
		}			
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		$(this).next("p").show().siblings("p:visible").hide();
		$("#staff strong").html(largeAlt);return false;
	});
	$(".thumbs2 a").click(function(){
	  	var largePath = $(this).attr("href");
	  	var largeAlt = $(this).attr("title");
	  	var boardHeight = $(this).next("p").height();
	  	if (boardHeight > 180)	{
			$("#board").addClass("fullheight").height(boardHeight); 
		}
		else{
			$("#board").addClass("fullheight"); 
		} 
		$("#largeBoardImg").attr({ src: largePath, alt: largeAlt });
		$(this).next("p").show().siblings("p:visible").hide();
		$("#board strong").html(largeAlt);return false;
	});	

});

// :hover pseudo class fix for ie
sfHover = function() {
	var sfEls = document.getElementById("listMenuRoot").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

// Events Calendar

$(function () {
	$('.date_has_event').each(function () {
		// options
		var distance = 10;
		var time = 250;
		var hideDelay = 500;
 
		var hideDelayTimer = null;
 
		// tracker
		var beingShown = false;
		var shown = false;
 
		var trigger = $(this);
		var popup = $('.events ul', this).css('opacity', 0);
 
		// set the mouseover and mouseout on both element
		$([trigger.get(0), popup.get(0)]).mouseover(function () {
			// stops the hide event if we move from the trigger to the popup element
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// don't trigger the animation again if we're being shown, or already visible
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;
 
				// reset position of popup box
				popup.css({
					bottom: 20,
					left: -76,
					display: 'block' // brings the popup back in to view
				})
 
				// (we're using chaining on the popup) now animate it's opacity and position
				.animate({
					bottom: '+=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					// once the animation is complete, set the tracker variables
					beingShown = false;
					shown = true;
				});
			}
		}).mouseout(function () {
			// reset the timer if we get fired again - avoids double animations
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// store the timer so that it can be cleared in the mouseover if required
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				popup.animate({
					bottom: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					// once the animate is complete, set the tracker variables
					shown = false;
					// hide the popup entirely after the effect (opacity alone doesn't do the job)
					popup.css('display', 'none');
				});
			}, hideDelay);
		});
	});
	
	// Programs hover
	$('.program').hover(function () {
		$("img", this).stop().animate({top:"-54px"},{queue:false,duration:200});
	}, function() {
		$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
	});
})
