//SHADOWBOX
Shadowbox.init({
	players: ["iframe"]
});

$(document).ready(function() {

	$('ul.thumb li .facenamebubble, ul.thumb li .facenamearrow').css({
		'opacity': 0
	});

	//HOVERED NAV
	$('#headnav li a').append('<span class="hover"></span>');
	$('#headnav li a .hover').css({
		'opacity': 0
	});
	$('#headnav li a').hover(function() {
		$('.hover', this).stop().animate({
			'opacity': 1
			}, 900, 'easeOutCubic');
		},function() {
			$('.hover', this).stop().animate({
			'opacity': 0
			}, 600, 'easeOutExpo');
	});

	//UPDATE BACKGROUNDS
	updateHeaderBg();
	$(window).resize(updateHeaderBg);
	
    function updateHeaderBg() {
    
    	var browserwidth = $(window).width();
    	var browserheight = $(window).height();

		if (browserwidth <= 970) {
			$("div.header").css("width","970px");
			$("div.footer").css("width","970px");
			$("div.latestnews").css("width","970px");
			$("div.contentbg").css("backgroundPosition","left -10px");
		} else if (browserwidth >= 971) {
			$("div.header").css("width","100%");
			$("div.footer").css("width","100%");
			$("div.latestnews").css("width","100%");
			$("div.contentbg").css("backgroundPosition","center -10px");
		}
    }

    //SET Z INDEX FOR FOOTER
    $("div#footer").css("zIndex","200");
    $("div.footer").css("zIndex","300");
	$("div.latestnews").css("zIndex","200");


	$("ul.thumb li").each(function() {
		$(this).css("zIndex","0");
	});

	
	//NEWSLETTER FORM CLEAR
	$("#khidkj-khidkj").attr({ value: 'Email address' }).focus(function(){
            if($(this).val()=="Email address"){
               $(this).val("").css({ color: "#333" });
;
            }
       }).blur(function(){
            if($(this).val()==""){
               $(this).val("Email address").css({ color: "#ccc" });
            }
       });


    //FACE HOVER
	$("ul.thumb li").hover(function() { // HOVER IN
		$(this).css("zIndex","10"); /*Add a higher z-index value so this image stays on top*/
		$(this).siblings().css("zIndex","0");
		$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
			.animate({
				marginTop: '-50px', /* The next 4 lines will vertically align this image */ 
				marginLeft: '-50px',
				top: '50%',
				left: '50%',
				width: '100px', /* Set new width */
				height: '100px', /* Set new height */
				padding: '0px'
			}, 400, "easeOutCubic"); /* this value is the speed of how fast/slow this hover animates */

		/******************
		$(this).find('.facenamebubble, .facenamearrow').stop()
			.animate({ 
			opacity: '1'
			}, 800, "easeOutCubic");
			
			************/

		var hoveredname = $(this).children("a").children("img").attr("alt");
		var hoveredname = '<div class="facenamebubble"><span class="facename">' + hoveredname + '</span></div><div class="facenamearrow"></div>';
		
		if ($(this).find('div.facenamebubble, div.facenamearrow').exists()) {
			$(this).find('div.facenamebubble, div.facenamearrow').stop().css("display","block")
				.animate({
				opacity: '1'
			}, 800, "easeOutCubic");
		} else {			
			$(this).prepend(hoveredname);
			$(this).find('div.facenamebubble, div.facenamearrow').stop().css("display","block")
				.animate({
				opacity: '1'
			}, 800, "easeOutCubic");
		}
		if ($(this).find('div.faceshadow').exists()) {
			$(this).find('div.faceshadow').stop().css("display","block")
				.animate({
				opacity: '1',
				top: '-40px'
				}, 600);
		} else {
			$(this).append('<div class="faceshadow"></div>');
			$(this).find('div.faceshadow').css("display","block")
				.animate({
				opacity: '1',
				top: '-40px'
				}, 350);
		}
	} , function() { // HOVER OUT
	
		$(this).find('img').removeClass("hover").stop()  
			.animate({
				marginTop: '0', /* Set alignment back to default */
				marginLeft: '0',
				top: '0',
				left: '0',
				width: '80px', /* Set width back to default */
				height: '80px', /* Set height back to default */
				padding: '0px'
			}, 400, "easeOutCubic");
		$(this).find('.facenamebubble, facenamearrow').stop()
			.animate({ 
			opacity: '0'
			}, 400).removeClass('facenamebubble').addClass('facenameOut');
		$(this).parent().find('div.faceshadow').stop()
			.animate({
				opacity: '0',
				top: '-50px'
			}, 150).removeClass('faceshadow').addClass('faceshadowOut');
		setTimeout(function() {$('div.faceshadowOut, div.facenameOut').remove()}, 150);
		setTimeout(resetFaceGrid, 380);
	});

	$('ul.thumb li a').bind("mouseleave", function() { // HOVER OUT 2
		$(this).parent().find('img').removeClass("hover").stop()
			.animate({
				marginTop: '0', /* Set alignment back to default */
				marginLeft: '0',
				top: '0',
				left: '0',
				width: '80px', /* Set width back to default */
				height: '80px', /* Set height back to default */
				padding: '0px'
			}, 400, "easeOutCubic");
		$(this).parent().find('.facenamebubble, .facenamearrow').stop()
			.animate({ 
			opacity: '0'
			}, 400).removeClass('facenamebubble').addClass('facenameOut');
		$(this).parent().find('div.faceshadow').stop()
			.animate({
				opacity: '0',
				top: '-50px'
			}, 150).removeClass('faceshadow').addClass('faceshadowOut');
		setTimeout(function() {$('div.faceshadowOut, div.facenameOut').remove()}, 150);
		setTimeout(resetFaceGrid, 380);
	});


// resets face gird
function resetFaceGrid() {
	$(this).css({"zIndex":"0"});
}

// exists() function
jQuery.fn.exists = function(){return jQuery(this).length>0;}


	$("ul.thumb li").click(function() { // populate featured
		var wppath = "/wp-content/themes/kayakforacure/images/people-full/";
		var quote = $(this).children("span.facecontent").text();
		var supporter = $(this).children("a").children("img").attr("alt");
		var fullimage = $(this).children("a").children("img").attr('src').split('/').pop();
		$('#spinloader').stop().fadeIn(200);
		$('div.featured div#person img').attr({"src" : ""});
		$('div.featured div#person img').attr({"src" : wppath + fullimage}).load(function() {
			$("div.latestnews").stop().animate({top:"-40px"},800,"easeInOutCubic");
			$("div#latestnewswrap h2").css("backgroundPosition","bottom");
			$('#spinloader').stop().fadeOut(200);
			$("div.featured div#person-info p.quote").text(quote);
			$("div.featured div#person-info p.supporter").text(supporter);
			$("div.content").css("display","block");
			$("div.content").stop().animate({top:"11px"},800,"easeOutCubic");
		});
	});


	//CLOSE FEATURED
	$("a#close").click(function() {
		$("div.content").stop().animate({top:"700px"},800,"easeInOutCubic");
		return false;
	});




// Infinite Carousel
$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="backarrow">&lt;</a><a class="forwardarrow">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        $('a.backarrow', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forwardarrow', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

  $('.infiniteCarousel').infiniteCarousel();

});

$(window).load(function() {

	//SLIDE IN
	setTimeout(slideDownNews,1500);
	
	function slideDownNews() {
		$("div.latestnews").stop().animate({top:"-40px"},800,"easeInOutCubic");
		 $("div#latestnewswrap h2").css("backgroundPosition","bottom");	
	}
	
	//TOGGLE LATEST NEWS TAB

	$("div#latestnewswrap h2").toggle(
		function() {
			$("div.latestnews").stop().animate({top:"-250px"},600,"easeInOutCubic");
			$(this).css("backgroundPosition","top");
		},
		function() {
			$("div.latestnews").stop().animate({top:"-40px"},800,"easeInOutCubic");
			$(this).css("backgroundPosition","bottom");
		}
	);

});