// JavaScript Document


jQuery(document).ready(function() {
	
	function show_contact_details(){
		jQuery(".contact-link-li").hover(function() {
				jQuery('contact-link').css({ 'background-color':'#f9f9f9', 'border':'1px solid #ccc'});
				jQuery('.contact-details').show();
				},
				function() {
				jQuery('contact-link').css({ 'background-color':'#fff', 'border':'1px solid #fff'});
				jQuery('.contact-details').hide();
		});
	}
	show_contact_details();
	
	function about_menu(){
		jQuery('.about-container').not('#jack-background-content').hide();
		jQuery('#jack-background').click(function(){
			jQuery('.about-container').fadeOut(100).delay(200);
			jQuery('#jack-background-content').fadeIn(100);
			return false;
		});
		jQuery('#jack-ambition').click(function(){
			jQuery('.about-container').fadeOut(100).delay(200);
			jQuery('#jack-ambition-content').fadeIn(100);
			return false;
		});
		jQuery('#jack-skills').click(function(){
			jQuery('.about-container').fadeOut(100).delay(200);
			jQuery('#jack-skills-content').fadeIn(100);
			return false;
		});
		jQuery('#jack-approach').click(function(){
			jQuery('.about-container').fadeOut(100).delay(200);
			jQuery('#jack-approach-content').fadeIn(100);
			return false;
		});
		jQuery('#jack-interests').click(function(){
			jQuery('.about-container').fadeOut(100).delay(200);
			jQuery('#jack-interests-content').fadeIn(100);
			return false;
		});
	};
	about_menu();
	
	function create_slideshow(){
		//Add the nav buttons
		jQuery("#slideshow").before('<ul id="slide-nav"><li id="prev"><div><a>Previous</a></div></li><li id="next"><div><a>Next</a></div></li></ul>');
		//Hide the overflow
		jQuery("#slideshow").css("overflow", "hidden");
		//Add the pagination then start the cycle plugin
		jQuery("ul.slides").after('<div id="slideshow-navigation"><div id="pagination"></div></div>').cycle({
			fx: 'fade',
			pause: 1,
			timeout: 0,
			prev: '#prev',
			next: '#next',
			pager:  '#pagination'
		})
		//Add the slideshow switcher to the nav bar
		//jQuery('#slideshow-navigation').prepend('<ul class="category-nav"><li class="ux-design-slides selected">User Experience Design</li><li  class="website-slides">Web Design &amp; Dev</li></div>');
	}
	
	create_slideshow();
	
	function change_slides() {
		jQuery('.category-nav li').click(function(){
			
			
			var tabClass = (this).className;
			jQuery('#slideshow-navigation').remove();
			jQuery('#slideshow ul.slides').removeClass('slides').hide();
			
			jQuery('#slideshow').find('.' + tabClass).addClass('slides').show();
			
			jQuery("#slideshow ul.slides").after('<div id="slideshow-navigation"><div id="pagination"></div></div>').cycle({
					fx: 'fade',
					pause: 1,
					timeout: 0,
					prev: '#prev',
					next: '#next',
					pager:  '#pagination'
				})
				
			var uxClassName = "ux-design-slides";
			var webClassName = "website-slides";
			//var selected = " selected";
//			
//			if(tabClass === uxClassName){
//				uxClassName += selected;
//			}else{
//				webClassName += selected;
//			}
				
			//jQuery('#slideshow-navigation').prepend('<ul class="category-nav"><li class="' + uxClassName + '">User Experience Design</li><li  class="' + webClassName + '">Web Design &amp; Dev</li></div>');
			
			jQuery('#slideshow-navigation').prepend('<ul class="category-nav"><li class="ux-design-slides">User Experience Design</li><li  class="website-slides">Web Design &amp; Dev</li></div>');
			
			
			change_slides();
			
			//var active_slides_class_name = jQuery('#slideshow ul').attr('class');
			
	
			
			
			
			
			//jQuery(this).addClass('.active-slide-group');//append('<div class="active-slide-group"></div>');
			
		})
		
	}
	
	change_slides();
	

	
	
	
	jQuery(".test-img").hover(function() {
		jQuery(this).animate({width:'61%'});
		},
		function() {
		jQuery(this).animate({width:'60%'});
	});
	
	function change_slide_control_visibility(){
		jQuery("ul#slide-nav li div").delay(1000).fadeOut();
		jQuery("ul#slide-nav li").hoverIntent(function() {
			//if(jQuery("ul#slide-nav li div").is(':hidden')){
				jQuery(this).children('div').stop().fadeIn();
				},
				function() {
				jQuery(this).children('div').fadeOut();
			//}
		});
	};
	
	function hide_first_prev(){
		jQuery(function() {
			if(jQuery('#pagination a:first-child').hasClass('activeSlide')){
				jQuery('ul#slide-nav li#prev div').hide();
			};
		})
	}
	
	
	jQuery(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	jQuery('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
	});
	
	
	
	

	
	
	//jQuery('#portfolio-slideshow')
//	.before('<div class="portfolio-pagination">') 
//	.cycle({ 
//	    fx: 'fade', 
//	    cleartypeNoBg:true,
//	    timeout: 6000,
//	   speed:  '600',
//	    pager:  '#portfolio-pagination' 
//	 });
	//jQuery('#landing-slider').cycle('pause'); Use to pause on load
	

});