$(document).ready(function() {
	
	//dropDownMenu();
	
	noteSlider(4000);
	
	portfolio();
	
	changeCSS();
	
});

function dropDownMenu() {
	
	$("#menu ul li ul").css({display: "none"});
	  
	$("#menu ul li").hover(function() {
		$(this).find('ul:first').stop().css({ display: 'inline', opacity: 0 }).animate({ opacity: 1 }, 300); //Slides down when hover the UL
		$(this).children('a').addClass("hovered"); //Adds a hovered class, so you can see the menu path you are following
	}
	,function() {
		$(this).find('ul:first').stop().animate({ opacity: 0 }, 300); //Slides up on mouseleave
		$(this).children('a').removeClass("hovered"); //removes the hovered class.
	});
	
}

function noteSlider($time) {
	
	//adds the current class to the first slide
	$('#slider_note ul li:first').addClass('current');
	
	//hovering effect
	$('#slider_note ul li').hover(function() {
		
		$(this).children('div').css({ opacity: 0, display: 'block' }).stop().animate({ opacity: 1 }, 300);
		
	}, function() {
		
		$(this).children('img').stop().animate({ opacity: 1 }, 200);
		$(this).children('div').stop().animate({ opacity: 0 }, 200);
		
	});
	
	if(typeof(isHovered) == 'undefined') { var isHovered = 0; }
	//If no item has been hovered yet, the variable isHovered doesn't exist, so we create it. 
		
	$("#slider_note").hover(function() { // Whenever an item is hovered
		isHovered = 1; //Setting isHovered 1, we stop the autsliding from going on
	}, function() {
		isHovered = 0;//Setting isHovered 1, we make the autsliding go on
	});
	
	setInterval(function() { if(isHovered == 0) { nextNoteSlide(); } }, $time);
	
	$('#slider_note_left').click(function(){ prevNoteSlide(); });
	$('#slider_note_right').click(function(){ nextNoteSlide(); });
	
}

function nextNoteSlide() {
	
	$currentNote = $('#slider_note ul li.current');
	$nextNote = $('#slider_note ul li.current').next();
	
	//alert($nextNote.length);
	
	if($nextNote.length == 00) {
		
		$nextNote = $("#slider_note ul li:first"); 
		
	}
	
	$nextNote.addClass('next');
	$nextNote.stop().css({ left: '-171px' }).animate({ left: 0 }, {duration: 800, easing: 'easeOutBounce', complete: function() {
		
		$currentNote.removeClass('current').css({ left: '171px' });
		$nextNote.removeClass('next').addClass('current');
		
	}});
	
	
}

function prevNoteSlide() {
	
	$currentNote = $('#slider_note ul li.current');
	$nextNote = $('#slider_note ul li.current').prev();
	
	//alert($nextNote.length);
	
	if($nextNote.length == 00) {
		
		$nextNote = $("#slider_note ul li:last"); 
		
	}
	
	$nextNote.addClass('next');
	$nextNote.stop().animate({ left: 0 }, {duration: 800, easing: 'easeOutBounce', complete: function() {
		
		$currentNote.removeClass('current').css({ left: '171px' });
		$nextNote.removeClass('next').addClass('current');
		
	}});
	
	
}

function portfolio() {
	
	$('.portfolio_image ul li').hover(function() {
		
		$(this).children('img').stop().animate({ opacity: .7 }, 400);
		$(this).children('div').stop().css({ display: 'block', opacity: 0 }).animate({ opacity: 1 }, 400);
		
	}, function() {
		
		$(this).children('img').stop().animate({ opacity: 1 }, 250);
		$(this).children('div').stop().animate({ opacity: 0 }, 250);
		
	});
	
}

function changeCSS() {
	
	$('#dark_css').click(function() {
		$('link:first').attr("href", 'css/style_dark.css');
			
			Cufon.replace('#content h1, #content h2,  #content h3,  #content h4,  #content h5,  #content h6, #footer h3', { fontFamily: 'HelveticaNeue LT 67 MdCn' });
			
			Cufon.replace('h1 em, h2 em, h4 em, h3 em, h5 em, h6 em', { fontFamily: 'HelveticaNeue LT 45 Light' });
;
	});
	
	$('#blue_css').click(function() {
		$('link:first').attr("href", 'css/style_blue.css');
;
	});
	
	$('#green_css').click(function() {
		$('link:first').attr("href", 'css/style_green.css');
;
	});
	
	$('#orange_css').click(function() {
		$('link:first').attr("href", 'css/style_orange.css');
;
	});
	
	$('#brown_css').click(function() {
		$('link:first').attr("href", 'css/style_brown.css');
;
	});
	
	$('#dark_green_css').click(function() {
		$('link:first').attr("href", 'css/style_dark_green.css');
;
	});
	
	$('#cyan_css').click(function() {
		$('link:first').attr("href", 'css/style_cyan.css');
;
	});
	
	$('#grey_css').click(function() {
		$('link:first').attr("href", 'css/style_grey.css');
;
	});
	
	$('#pink_css').click(function() {
		$('link:first').attr("href", 'css/style_pink.css');
;
	});
	
	$('#purple_css').click(function() {
		$('link:first').attr("href", 'css/style_purple.css');
;
	});
	
}