$(document).ready(function() {
	
	//Homepage JS
	//***********
	//keepin the DOM clean - no need to load these if JS doesnt work - so we do it in here!
	$('#headimg').append('<div id="slideNav"></div>');

	//slide show function
    $('#slides').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		speed:       1500, 
		timeout:     5000, 
		pager:      '#slideNav',
		pagerEvent: 'mouseover',
		pauseOnPagerHover: true,
		cleartype:true,
		cleartypeNoBg:false
	});
	
	//Process
	//**********
	//slide show function
    $('#testSlides').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		speed:       1500, 
		timeout:     5000, 
		pager:      '#testiNav',
		pagerEvent: 'mouseover',
		pauseOnPagerHover: true
	});
	
	//Hide all the month Data
	$('.monthProcess').hide();
	
	//Show January on page load!
	if($('.showing').length == 0){
		$('#toggle-jan').addClass('selected');
		$('#jan').addClass('showing').show();
		$('#processDes').addClass('q1');
		$('.quarterDes').css({top : '220px'});
	}
	
	$('#months a').click(function(){
		var cid = $(this).attr('id').substring(7);
		
		//put a selected flag on the anchor
		var currentSelected = $('.selected')
		currentSelected.removeClass('selected');
		$(this).addClass('selected');
		
		//show the content based on the anchor id "cid"
		$('.showing').fadeOut(function(){
				$('#'+cid).fadeIn().addClass('showing');
				
				//change/add content based on the selected anchor
				$('#processDes').attr('class','');
				$('#quarterDes').empty();
				if((cid == 'jan') || (cid == 'feb') || (cid == 'mar')){
					$('#processDes').addClass('q1');
					$('.quarterDes').css({top : '220px'});
				}else if ((cid == 'apr') || (cid == 'may') || (cid == 'jun')){
					$('#processDes').addClass('q2');
					$('.quarterDes').css({top : '450px'});
				}else if ((cid == 'jul') || (cid == 'aug') || (cid == 'sep')){
					$('#processDes').addClass('q3');
					$('.quarterDes').css({top : '350px'});
				}else if ((cid == 'oct') || (cid == 'nov') || (cid == 'dec')){
					$('#processDes').addClass('q4');
					$('.quarterDes').css({top : '280px'});
				};
				
		}).removeClass('showing');
		
		return false;
	});
	
	
});