// define global variables
activeCarousel=-1;


// Execute JQuery goodness on document ready
// Jquery plugins used: Timer, Easing

$(document).ready(function() {

	// set initial value for the search box
	$('#search_query').val("search this site...");
	
	// set functionality when search_query input field gets highlighted 
	$('#search_query').focus(function() {
		
		// clear out the text from the search field so user can enter query
		$('#search_query').val("")
		
		// set the highlighted border on the search box container and glow
		$('#searchbox').css("border", "2px solid #0072a2");
		$('#searchbox').css("-webkit-box-shadow", "0px 0px 10px #0072a2");
		$('#searchbox').css("-moz-box-shadow", "0px 0px 10px #0072a2");
		$('#searchbox').css("box-shadow", "0px 0px 10px #0072a2");
		
	});
	
	// set functionlity when search_query gets a blur/defocus event
	$('#search_query').blur(function() {
		
		// pick the initial text value from the field
		var searchQueryValue=$('#search_query').val();
		
		// check whether or not user just highlighted the field.. if they did reset the text back to "search site notice"
  		if(searchQueryValue==""){
			$('#search_query').val("search this site...")
		}
		
		$('#searchbox').css("border", "2px solid #101010");
		$('#searchbox').css("-webkit-box-shadow", "1px 1px 1px #2d2d32");
		$('#searchbox').css("-moz-box-shadow", "1px 1px 1px #2d2d32");
		$('#searchbox').css("box-shadow", "1px 1px 1px #2d2d32");
		
	});


// HOVER THE LIVELIHOOD LOGOS - COMPANIES PAGE
$('#innerpage_content_wide .livelihood_logo_container #logo_img').hover(
    function() {
		
		$(this).stop().animate({
			backgroundColor:'#FFFFFF',
			top:'-10px'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#E9E9E9',
			top:'0px'}, 200);
    });

// HOVER THE SOCIAL LOGOS for the COMPANY DETAIL PAGE	
$('#innerpage_content_detail #sociallogos img').hover(
    function() {
		$(this).stop().animate({
			top:'-10px'}, 300);
        }, function () {
        $(this).stop().animate({
			top:'0px'}, 200);
    });

// HOVER CAUSES & PARTNERS LOGOS	
$('.couses_logo_container #logo_img').hover(
    function() {
		
		$(this).stop().animate({
			backgroundColor:'#FFFFFF',
			top:'-10px'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#E9E9E9',
			top:'0px'}, 200);
    });
	
// HOVER RESOURCES THUMBNAILS
$('#innerpage_resources_wide .logo_container #logo_img').hover(
    function() {
		
		$(this).stop().animate({
			backgroundColor:'#FFFFFF',
			top:'-10px'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#E9E9E9',
			top:'0px'}, 200);
    });
	
	runContent();
	
 });



 
	
function resizeSidebar(){
	var newHeight=$("#content_and_sidebar").css("height");
	alert(newHeight);
	$("#sidebar_area").css("height",newHeight);
}
	

function runContent(){
	enableCarouselNavigation();
	highlightCarouselNavigation(1);
	startTimer();
	
}

function nextSlide(){
	stopTimer();
	var newSlide=activeCarousel+1;
	
	if(activeCarousel>=5){
		highlightCarouselNavigation(1);
	}else{
		highlightCarouselNavigation(newSlide);
	}
}

function prevSlide(){
	stopTimer();
	var newSlide=activeCarousel-1;
	
	if(activeCarousel<=1){
		highlightCarouselNavigation(5);
	}else{
		highlightCarouselNavigation(newSlide);
	}
}

// start Jquery timer for the homepage flip for the carousel slides
function startTimer(){
	
	// console.log("timer started...");
	
	$(this).everyTime(8000, "carousel-showcase", function() {
			
			// set temporary counter so we don't screw our main counter
			var tmpSlideID=activeCarousel+1;
			
			// check if our activeCarousel is -1 (start position), since we adding +1 it will be 0
			if(tmpSlideID<=0){
				
				// since we don't have zero menu item and by default the first slide's
				// activeCarousel id will be 1, we will increase it by 2 and activate transition
				highlightCarouselNavigation(tmpSlideID+2);
				
			}else{
				// if our counter is beyond 5 (5 is the fixed number of slots for subnav for carousel)
				// we will reset the counter to 1, otherwise it will continue as activeCarousel id is increased
				if(tmpSlideID>5){
					
					// slide to carousel slide 1
					highlightCarouselNavigation(1);
					
				}else{
					
					// slide to next carousel slide
					highlightCarouselNavigation(tmpSlideID);
					
				}
			}
 	});
}


// Stop carousel showcase timer
function stopTimer(){
	
	// stop the timer
	$(this).stopTime("carousel-showcase");

}



// used to highlight the selected carousel element on the actual subnav bar
function highlightCarouselNavigation(id){
	
	// console.log("switch to carousel...");
	
	// reset all carousel nav elements to normal states 
	resetCarouselNav();

	// highlight the background of the carousel item div to mouse over/down state
	$('#carousel_navigation'+' #'+id).css("background-image","url("+globalPathToTheme+"/assets/carousel_navigation_highlight_tile.png)");
	$('#carousel_navigation'+' #'+id).css("color", "#000000");
	$('#carousel_navigation'+' #'+id+' span').css("color", "#355d00");
	
	//var idNumber=$(id).attr("id");
	if(id==1){
		$('#carousel_navigation'+' #'+id).css("-moz-border-radius-topleft", "6px");
		$('#carousel_navigation'+' #'+id).css("-webkit-border-top-left-radius", "6px");
		$('#carousel_navigation'+' #'+id).css("-border-top-left-radius", "6px");
		$('#carousel_navigation'+' #'+id).css("-moz-border-radius-bottomleft", "6px");
		$('#carousel_navigation'+' #'+id).css("-webkit-border-bottom-left-radius", "6px");
		$('#carousel_navigation'+' #'+id).css("-border-bottom-left-radius", "6px");
	}
	
	if(id==5){
		$('#carousel_navigation'+' #'+id).css("-moz-border-radius-topright", "6px");
		$('#carousel_navigation'+' #'+id).css("-webkit-border-top-right-radius", "6px");
		$('#carousel_navigation'+' #'+id).css("-border-top-right-radius", "6px");
		$('#carousel_navigation'+' #'+id).css("-moz-border-radius-bottomright", "6px");
		$('#carousel_navigation'+' #'+id).css("-webkit-border-bottom-right-radius", "6px");
	}
	
	// take the current active slide width
	var currentDivWidth=$('#carousel_slider #slide'+id).width();
	
	// console.log("the slide out carousel slide should be: "+activeCarousel);
	
	// assigning the activeCarousel global var to tmpID because activeCarousel will change before transition is out
	var tmpID=activeCarousel;
	
	// disable click event handler for the subnav for carousel.. We do this because we don't want double clicks or clicks during the animation
	$('#carousel_navigation div').unbind('click');
	$("#carousel_slideleft").unbind('click');
	$("#carousel_slideright").unbind('click');
	
	// animate the previous slide out of the view
	$('#carousel_slider #slide'+activeCarousel).stop().animate(	{
						left: '-='+currentDivWidth
					  	}, 1000, 'easeInOutExpo', function() {
							// Animation complete.
							$('#carousel_slider #slide'+tmpID).css("visibility", "hidden");
							enableCarouselNavigation();
						});

	// assign the new carousel id as the active one
	activeCarousel=id;
	
	// turn the new target slide visibility on as they are initially hidden
	$('#carousel_slider #slide'+id).css("visibility", "visible");
	
	// console.log("visibility: "+$('#carousel_slider #slide'+id).css("visibility"));
	
	// position the target slide to the right edge
	$('#carousel_slider #slide'+id).css("left","900px")
	
	// align the target slide to the top edge just in case it moved or something
	$('#carousel_slider #slide'+id).css("top","0px")
	
	// animate the new slide into the view
	$('#carousel_slider #slide'+activeCarousel).animate(	{
						left: '0px'
					  	}, 1000, 'easeInOutExpo', function() {
							// Animation complete.
							// console.log("transition complete..");
							//enableCarouselNavigation();
						});
						
	// console.log("new activeCarousel is: "+activeCarousel);
	// console.log("current slide's width is: "+currentDivWidth);
	
	
}

// take the currently showing carousel segment and hide it and when you hide it, turn it off
function hideCarousel(){
	// console.log("Hide active carousel: "+activeCarousel);
}
function showCarousel(){
	// console.log("Hide active carousel: "+activeCarousel);
}

// function in charge of resetting all carousel sub nav item to their normal visual state
function resetCarouselNav(){
	
	// reset all carousel subnav items to normal
	$("#carousel_navigation div").css("background-image","none");
	$("#carousel_navigation div").css("color", "#333");
	$("#carousel_navigation span").css("color", "#3c3c3c");
}

// Enable the click event handlers for the Carousel navigation bar
function enableCarouselNavigation(){
	
	// this function is call on carousel click
	$('#carousel_navigation div').click(function(){
	
		// stop carousel timer for showcase because we are interacting
		stopTimer();
	
		// determine the elements id name
		highlightCarouselNavigation($(this).attr("id"));
		
	});
	
	$("#carousel_slideleft").click(function(){
		prevSlide();	
	});
	
	$("#carousel_slideright").click(function(){
		nextSlide();	
	});
	
}


/*
********************************
Faces highlighter functions
********************************
*/

$(function() {  
    $('.face_thumbnail').mouseenter(function(event) {
  		faceRollover(this);	
	});
	
    $('.face_thumbnail').mouseleave(function(event) {
  		faceRollout(this);
	});
});

function faceToURL(newURL){
	window.open(newURL);
}


// redirect the page to url based on a click
function redirect(newURL){
	window.location=newURL;
}
// redirect with popup
function redirectPop(newURL){
	window.open(newURL);
}

// Homepage Faces thumbnail mouseEnter handler
function faceRollover(target){
	
	var thumbnail_shadow=jQuery("#face_shadow", target);
	var thumbnail_container=jQuery("#thumbnail", target);
	var thumbnail_shade=jQuery("#thumbnail #zoom_overlay", target);
	var thumbnail_image=jQuery("#thumbnail #zoom_overlay img", target);
	
	// animate the whole thumbnail container up
	$(thumbnail_container).stop().animate(	{
						top: '-10px'
					  	}, 500, 'easeOutExpo', {queue: false}, function() {
							// Animation complete.
							// console.log("thumbnail move transition complete..");
							//enableCarouselNavigation();
						});
	
	// fade in the bottom shadow as the thumbnail rises up
	$(thumbnail_shadow).css('opacity','0');
	$(thumbnail_shadow).show();	
	$(thumbnail_shadow).stop().fadeTo(500,1);
	$(thumbnail_shadow).stop().animate(	{
						top: '80',
						opacity: 1
					  	}, 1000, 'easeOutExpo', {queue: false}, function() {
						});	
								
	$(thumbnail_image).stop().animate(	{
							marginTop: '20',
							opacity: 1
							}, 500, 'easeOutExpo', {queue: false}, function() {
								// Animation complete.
							});
									
	// animate the overimage shade to fade in				
	$(thumbnail_shade).css('opacity','0');
	$(thumbnail_shade).show();		
	$(thumbnail_shade).stop().fadeTo(500,1);
						
	// animate the link symbol
	$(thumbnail_image).css('opacity','0');
	$(thumbnail_image).show();		
	$(thumbnail_image).css('margin-top','30px');
	
	$(thumbnail_image).stop().animate(	{
						marginTop: '20',
						opacity: 1
					  	}, 500, 'easeOutExpo', {queue: false}, function() {
							// Animation complete.
						});
						
	
}

// Homepage Faces thumbnail mouseLeave handler
function faceRollout(target){
	
	var thumbnail_shadow=jQuery("#face_shadow", target);
	var thumbnail_container=jQuery("#thumbnail", target);
	var thumbnail_shade=jQuery("#thumbnail #zoom_overlay", target);
	var thumbnail_image=jQuery("#thumbnail #zoom_overlay img", target);
	
	$(thumbnail_container).stop().animate(	{
						top: '5px'
					  	}, 500, 'easeOutExpo', {queue: false}, function() {
							// Animation complete.
							// console.log("thumbnail move transition complete..");
							//enableCarouselNavigation();
						});
						
	// fade out the bottom shadow as the thumbnail lowers down	
	$(thumbnail_shadow).stop().animate(	{
						top: '75',
						opacity: 0
					  	}, 500, 'easeOutExpo', {queue: false}, function() {
							$(thumbnail_shadow).hide();
						});	
						
	// animate the overimage shade to fade out				
	$(thumbnail_shade).stop().fadeTo(500,0, function(){ $(thumbnail_shade).hide(); } );
	
	$(thumbnail_image).stop().animate(	{
						marginTop: '20',
						opacity: 1
					  	}, 500, 'easeOutExpo', {queue: false}, function() {
							// Animation complete.
							$(thumbnail_image).hide();
						});
						
}


/// PAGINATION FOR NEWS ITEMS
$(function(){
	

	var numberOfNewsSections=Math.ceil(newsPagesCount/20);
	var currentNewsSection=0;
	
	if(numberOfNewsSections>1){
		
		// assign actions to next button
		$('#nextbttn').click(function(){
			
			currentNewsSection+=1;
			
			if(currentNewsSection>=numberOfNewsSections){
				currentNewsSection=numberOfNewsSections-1;
				
			}else{
				
			var targetStart=currentNewsSection*20;
			var targetEnd=targetStart+20;
			
			var currentStart=(currentNewsSection-1)*20;
			var currentEnd=currentStart+20;
			
			$('.content_features_list2:gt('+targetStart+')').show();
			$('.content_features_list2:lt('+targetEnd+')').show();
			
			$('.content_features_list2:gt('+targetEnd+')').hide();
			$('.content_features_list2:lt('+targetStart+')').hide();
			

			
			if(currentNewsSection>=numberOfNewsSections-1){
				
				$('#nextbttn').hide();
			}
			}
			
		});
		
		// assign actions to prev button
		$('#prevbttn').click(function(){
			currentNewsSection-=1;
			
			//alert(currentNewsSection);
			$('#nextbttn').show();
			if(currentNewsSection<=1){
				currentNewsSection=0;
				
				var targetStart=currentNewsSection*20;
				var targetEnd=targetStart+20;
			
				//alert("Start: " + targetStart);
				//alert("End Hide: " + targetEnd);
				$('.content_features_list2:gt('+targetStart+')').show();
				$('.content_features_list2:lt('+targetEnd+')').show();
				$('.content_features_list2:gt('+(targetEnd)+')').hide();
				$('.content_features_list2:lt('+(targetStart)+')').hide();
			
			}else{
			
			var targetStart=currentNewsSection*20;
			var targetEnd=targetStart+20;
			
			//alert("Start: " + targetStart);
			//alert("End Hide: " + targetEnd);
			$('.content_features_list2:gt('+targetStart+')').show();
			$('.content_features_list2:lt('+targetEnd+')').show();
			$('.content_features_list2:gt('+(targetEnd)+')').hide();
			$('.content_features_list2:lt('+(targetStart)+')').hide();
			
			}
		});
	}
	
});