$(document).ready(function() {
	
	// $('#preloader').delay(400).fadeOut(800,function(){$(this).remove();});
	// $('#page').delay(400).fadeIn(800);
		
	$(window).resize(function() {
		var new_width = $(window).width();
		var new_height = $(window).height();
		$('#projects_container ul li .project').css('left', new_width/2 + 'px');
		$('#projects_container ul li').css('width', new_width + 'px');
		$('#projects_container ul li .project').css('top', new_height/2 + 'px');
		$('#projects_container ul li').css('height', new_height + 'px');
	});
	
	$("#nav_projects").click(function(){
		$("#about").animate({left: "-50%"}, 500, "backin");
		$("#projects_container").delay(600).fadeIn(500);
	});
	
	$("#nav_projects").toggle(
		function(){
      		$("#overlay").css({"z-index": "1000"}).delay(100).fadeIn(0);
			$("#project_list").delay(300).fadeIn(500);
			$("#nav_about").css({"z-index": "0"});},
		function(){
			$("#project_list").delay(800).fadeOut(300);
			$("#overlay").delay(800).fadeOut(200, function(){
				$(this).css({"z-index": "0"});
				$("#nav_about").css({"z-index": "1900"});
			});
	});
	
	$("#nav_about").click(function(){
		$("#projects_container").fadeOut(400);
		$("#about").show().delay(400).animate({left: "50%"}, 500);
	});
	
	$("#project_list li").hover(
		function(){
      		$("a", this).animate({left: "15px"}, 150);},
		function(){
			$("a", this).animate({left: "0px"}, 150);
	});
	
	// Keyboard Navigation
	$(window).keyup(function (event) {
	  if (event.keyCode == 37) {
	  	$("#prev").click();
	  } else if (event.keyCode == 39) {
	  	$("#next").click();
	  }
	});
	
	$('#projects_container ul') 
	    .cycle({ 
	        fx: 'scrollHorz',
	        speed: 700,
			easing:  'easeinout',
	        timeout: 0,
			speedOut: 600,
			next: "#next",
			prev: "#prev",
			after: onAfter,
			pagerAnchorBuilder: function(idx, slide) { 
				return '#project_list li:eq(' + idx + ') a'; 
			}
    });

	function onAfter() {
		var new_width = $(window).width();
		var new_height = $(window).height();
		$('#projects_container ul li .project').css('left', new_width/2 + 'px');
		$('#projects_container ul li').css('width', new_width + 'px');
		$('#projects_container ul li .project').css('top', new_height/2 + 'px');
		$('#projects_container ul li').css('height', new_height + 'px');
		$(".project_info, .pager").fadeIn(300);
	}
	
    $('.project').each(function() {
        var show = $(this);

        show.cycle({ 
	        fx: 'fade',
	        speed: 400,
	        timeout: 0,
			pager: show.next('.pager')
        });
    });
	
	$("#contact ul li").hover(
		function(){
      		$(this).stop(true).animate({marginTop: "8px"}, 200);},
		function(){
			$(this).stop(true).animate({marginTop: "0px"}, 200);
	});
	
	$('.project_info h1').toggle(
		function(){
			$(this).next().animate({right: 0, opacity: "1"}, 250, "linear");
			$(this).prevAll().find("span").addClass("active");
		},
		function(){
			$(this).next().animate({right: "-300px", opacity: 0}, 500, "linear");
			$(this).prevAll().find("span").removeClass("active");
	});
	
	$('.btn_more_info').toggle(
		function(){
			$(this).next().next().animate({right: 0, opacity: "1"}, 250, "linear");
			$(this).find("span").addClass("active");
		},
		function(){
			$(this).next().next().animate({right: "-300px", opacity: 0}, 500, "linear");
			$(this).find("span").removeClass("active");
	});
	
	$(".project_info a").hover(
		function(){
      		$(this).stop(true).animate({backgroundPosition: "6px 6px"}, 150);},
		function(){
			$(this).stop(true).animate({backgroundPosition: "0 6px"}, 150);
	});
	
	$("#prev").hover(
		function(){
      		$(this).stop(true).animate({backgroundPosition: "-10px -100px"}, 150);},
		function(){
			$(this).stop(true).animate({backgroundPosition: "0 -100px"}, 150);
	});
	
	$("#next").hover(
		function(){
      		$(this).stop(true).animate({backgroundPosition: "-80px -100px"}, 150);},
		function(){
			$(this).stop(true).animate({backgroundPosition: "-90px -100px"}, 150);
	});
	
	$("#prev, #next").click(
		function(){
      		$(".project_info, .pager").fadeOut(200);
	});
	
	$("#resume a").hover(
		function(){
      		$("#resume img").stop(true).css({"-webkit-transform": "rotate(370deg)", "-moz-transform": "rotate(370deg)"});},
		function(){
			$("#resume img").stop(true).css({"-webkit-transform": "rotate(0deg)", "-moz-transform": "rotate(0deg)"});
	});
	
});