// JavaScript Document


var photoInterval = 10000; //the amount of time in between photo transitions for the main image
var transitionInterval = 1500; //the amount of time it takes for the main images to transition to the next image
var featureInterval = 500; //the amount of time it takes for the rotating feature on the homepage to transition

var $index; //the index of the current photo (Zero based)
var $active; //the active photo
var $next; //the next photo

var $indexF, $activeF, $nextF; //the variables for the feature
var timer = ""; //the timer for the main image on the homepage




$(document).ready(function(){

     $('#sliderbar #mainImageControls').css("display","block");
	 
	//IE 6 sucks!
	if($.browser.msie && $.browser.version=="6.0") 
		$('#featureCircle').css("display","none");
	else
		$('#featureCircle').css("display","inline");
	
	//make the Main Image and the Feature area random when an user opens or refreshes the page
	randomMain();
	randomFeatureMain();	
	
	//call the mainImageSwap function based on the time set in the variable interval.
	timer = setInterval("mainImageSwap()", photoInterval);	
	
	
	//call the featureSwap function based on the time set in the featureInterval variable. The rotating feature will rotate on a timer.
	//if ( $('#rotatingFeature').is(':visible'))
		//timer2 = setInterval("featureSwap()", featureTimer);	
	
	
	$('img.pause').click(function() {
		clearTimeout(timer);
	});
	
	$('img.prev').click(function() {
		//make sure the image does not switch while the button is pushed
		clearTimeout(timer);
			
		//assign the active class to the current photo
		$active = $('#mainImage img.activeImg'); 
		//assign the first image to next if the end of the loop has reached
														 
		$prev =  ($active.prev().length > 0) ? $active.prev(): $('#mainImage img.last');
		//make the active class the lastActive class
		$active.addClass('lastActive');
	
	
		//add the active class and fade in the photo
		$prev.css({opacity: 0.0}).addClass('activeImg').animate({opacity: 1.0}, transitionInterval, function() {
			//remove the classes that were assigned																				
			$active.removeClass('activeImg lastActive');
	
			//get the index of the active slide
			$index = $("#mainImage img").index($(".activeImg"));


            //change the tagline for the new image
	        $('#sliderbar #tagline > div').css("display", "none");
			
			//change the photo text for the new image
			$('#sliderbar #photoText > p').css("display", "none");
			
	        //change the tagline for the new image
	        $('#sliderbar #tagline div.tagline' + $index).css("display", "block");
			
			//display the text that will be overlayed on the main image
			$('#sliderbar #photoText p.text' + $index).css("display", "block");
		});
		timer = setInterval( "mainImageSwap()", photoInterval);	
		return false;
	});
	
	$('img.next').click(function() {
		//make sure the image does not switch while the button is pushed
		clearTimeout(timer);
		
		//assign the active class to the current photo
		$active = $('#mainImage img.activeImg'); 
		//assign the first image to next if the end of the loop has reached
		$next =  ($active.next().length > 0) ? $active.next(): $('#mainImage img.first');
		//make the active class the lastActive class
		$active.addClass('lastActive');
		
		
	
		//add the active class and fade in the photo
		$next.css({opacity: 0.0}).addClass('activeImg').stop().animate({opacity: 1.0}, transitionInterval, function() {
			//remove the classes that were assigned																				
			$active.removeClass('activeImg lastActive');
	
			//get the index of the active slide
			$index = $("#mainImage img").index($(".activeImg"));


            //change the tagline for the new image
	        $('#sliderbar #tagline > div').css("display", "none");

	        //change the tagline for the new image
	        $('#sliderbar #tagline div.tagline' + $index).css("display", "block");
	
	
			//change the photo text for the new image
			$('#sliderbar #photoText > p').css("display", "none");
			
			//display the text that will be overlayed on the main image
			$('#sliderbar #photoText p.text' + $index).css("display", "block");
		});
		timer = setInterval( "mainImageSwap()", photoInterval);	
		return false;
	});
	
	
	/******************************************************************/
	/*  The feature area on the homepage will update on click only.   */
	/******************************************************************/	
	
	$('#featureCircle li').click(function() {

		$activeF = $('#slideshow img.activeFeature'); 
		$indexF = $("#featureCircle li").index($(this));	  
		$nextF = $('#slideshow img').eq($indexF);

	  	$activeF.addClass('lastActiveFeature');

		//remove the active class from all of the circles
		$('#featureCircle > li').css("background-position", "0 0");

		//apply the active class to the circle that corresponds to the active photo
		$('#featureCircle li.circle' + $indexF).css("background-position", "0 -11px");

		//add the active class and fade in the photo
		$nextF.css({opacity: 0.0}).addClass('activeFeature').animate({opacity: 1.0}, featureInterval, function() {
			//remove the classes that were assigned																				
			$activeF.removeClass('activeFeature lastActiveFeature');
		});	
		return false;
	});
	
	
	
	
	
	
	
	/*****************************************/
	/*		    Tabbed Container             */
	/*****************************************/
	
	// set all content containers to invisible
	$("#tabWrapper > div").css("display","none");
	// set active content container to visible
	$("#tabWrapper > div.activeTab").css("display","block");
	$("ul#tabs li a").click(function()
	{
		// remove active class from currently visible content area
		$("#tabWrapper > div.activeTab").removeClass("activeTab");
		// get href attribute value from clicked link to determine which content area to make visible and set active class to that div
		$(("#tabWrapper > div"+$(this).attr("href"))).addClass("activeTab");
		// make all content areas invisible
		$("#tabWrapper > div").css("display","none");
		// make new active content area visible
		$("#tabWrapper > div.activeTab").css("display","block");
		// remove active class from old tab
		$("ul#tabs li.active").removeClass("active");
		// set active class to new tab based on the click
		$(this).parent().addClass("active");
		// prevent browser from scrolling to the div anchor
		return false;
	});
	
	
	/*round the corners of the tabs. IE can round the corners, but can not 
	round the corners AND have a border around them, so we will 
	reserve this feature for REAL browsers!*/
	
	if ( $('#wideCol ul#tabs li').is(':visible') && (!$.browser.msie))
		$('#wideCol ul#tabs li').corner('round top 4px');
	/*
		round: 	round the corner
		top:	apply to the top (top left and top right corners)
		4px: 	the radius of the corner
	*/
	
	if ( $('##cuyamaca.intranet ul#leftNav').is(':visible'))
		$('#cuyamaca.intranet ul#leftNav').corner('6px');
	
	$('table tr:even').addClass("alt");
	
	
	/**************************************************/
	/*               JQuery Tooltip                   */
	/**************************************************/
 
// 	$("a.notes").mouseover(function(){
//	$(this).parent().children('p.tooltips').stop().show();
//     }).mouseout(function(){
//        $(this).parent().children('p.tooltips').stop().hide();
//	});

	$('a.notes1').tooltip();
	$('a.notes2').tooltip();
	

	$(".CollapsiblePanelTab").click(function(){
		$(this).siblings(".CollapsiblePanelContent").slideToggle();
	});
	
});





function randomFeatureMain()
{
	//find a random number between 0-3
	var randomNum = Math.floor(Math.random()*4)
		
	//remove the active class from all of the circles
	$('#featureCircle > li').css("background-position", "0 0");
	
	//change the current dot to the random image
	$('#featureCircle li.circle' + randomNum).css("background-position", "0 -11px");

	//remove the active class from everything
	$('#slideshow > img').removeClass('activeFeature');

	//add the active class to the random feature
	$('#slideshow img').eq(randomNum).addClass('activeFeature');	
}


function randomMain()
{
	//get a random number for the main images based on the number of images we have
	var randomNum = Math.floor(Math.random()*($('#mainImage img').size()))
	
	//remove the active class from everything
	$('#mainImage > img').removeClass('activeImg');

	//add the active class to the random feature
	$('#mainImage img').eq(randomNum).addClass('activeImg');	
	
  
  
    //change the tagline for the new image
	$('#sliderbar #tagline > div').css("display", "none");
	
	//change the photo text for the new image
	$('#sliderbar #photoText > p').css("display", "none");
		
		
	//change the tagline for the new image
	$('#sliderbar #tagline div.tagline' + randomNum).css("display", "block");

	//display the text that goes with the main image
	$('#sliderbar #photoText p.text' + randomNum).css("display", "block");
}



function mainImageSwap() 
{
	//assign the active class to the current photo
	$active = $('#mainImage img.activeImg'); 
	//assign the first image to next if the end of the loop has reached
	$next =  $active.next().length ? $active.next(): $('#mainImage img.first');
	//make the active class the lastActive class
	$active.addClass('lastActive');

	//add the active class and fade in the photo
	$next.css({opacity: 0.0}).addClass('activeImg').animate({opacity: 1.0}, transitionInterval, function() {
		//remove the classes that were assigned																				
		$active.removeClass('activeImg lastActive');

		//get the index of the active slide
		$index = $("#mainImage img").index($(".activeImg"));
		
		//change the tagline for the new image
	    $('#sliderbar #tagline > div').css("display", "none");
			
		//change the photo text for the new image
		$('#sliderbar #photoText > p').css("display", "none");
		
		//change the tagline for the new image
	    $('#sliderbar #tagline div.tagline' + $index).css("display", "block");
		
		//display the text that goes with the main image
		$('#sliderbar #photoText p.text' + $index).css("display", "block");
   	});
}


function showAllPanels(){
	$(".CollapsiblePanelContent").slideToggle();
}

function hideAllPanels(){
	$(".CollapsiblePanelContent").slideToggle();
}