//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");
    });



    //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()  /* Remove the "hover" class , then stop animation queue buildup*/
			.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 = "Content/faces/";
        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();
        //var title = $(this).children("a").children("img").attr("
        var comments = $(this).children("div.edit").children("div.struggledetaillink").children("a").attr("href");

        //adds transparency to the video for overlay
        $(this).children("div.video").children("object").append("<param name='wmode' value='transparent'>");
        $(this).children("div.video").children("object").children("embed").attr("wmode", "transparent");
        
        var video = $(this).children("div.video").html();
        
        var edit = $(this).children("div.edit").html();

        //testing
        $("#person-info object").show();

        //$('#spinloader').stop().fadeIn(200);
        //$('div.featured div#person img').attr({ "src": "" });
        $('div.featured div#person h2').text(supporter);
        //$('div.featured div#person img').attr({"src" : wppath + fullimage}).load(function() {
        $('div#person-info').html(video).append(edit);
        $("div#view-comments").children("a").attr("href", comments);
        $('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 p.quote").text(quote);

            $("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");
        //testing
        $("#person-info object").hide();

        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");
		}
	);

});