// JavaScript Document



jQuery(document).ready(function(){
	
	//these scripts apply the styles. this way if people don't have scripts turned on they can still view the content
	jQuery(".tabs").height("358px");
	jQuery(".tab_content").height("310px");
	jQuery(".tabs .tab").css({"position":"absolute","bottom":"-400px"});
	jQuery(".tabs .tab:first").css({"position":"absolute","bottom":"0px"});
	
	//this adds the rounded corners
	jQuery(".tabs").append("<div class='bottom_right'></div><div class='bottom_left'></div><div class='top_right'></div><div class='top_left'></div>");
	
	
	//cycle plugin used to cycle through slides - controlled through custom pager
	jQuery(".tab_content")
	.before("<ul class='tab_buttons'></ul>")
	.cycle({
		pager:  '.tab_buttons',
		speed:  500,
		timeout: 0,
		fx: 'scrollUp',
		pause:  1 ,
		pauseOnPagerHover: 1,
		before:  onBefore, 
    	after:   onAfter,
		pagerAnchorBuilder: function(idx, slide) { //the pager link names are based on the title of the div
       		return '<li><a href="#">' + slide.title + '</a></li>'; 
    	} 
	});
	
	//this script adds the animated background effect on the buttons
	jQuery(".tabs ul.tab_buttons li").append("<span></span>");	
	jQuery(".tabs ul.tab_buttons li.activeSlide").children("span").css({"top":"0px"});
	jQuery(".tabs ul.tab_buttons li").hover(function(){
		jQuery(this).children("span").animate({top:"0px"}, {duration:250});
	},function(){
		if( jQuery(this).is (".activeSlide")){
			//alert("already active");
		}else{
			jQuery(this).children("span").animate({top:"75px"}, {duration:250});
		};
	});
	
	//these animations will occur as the slide/tab is changed
	function onBefore() { 
		jQuery(".activeSlide").children("span").animate({top:"75px"}, {duration:250});
	}
	function onAfter() {
		jQuery(".activeSlide").children("span").animate({top:"0px"}, {duration:250});
	}
	

		
});