/***************************************************************
*                                                              *
* CSS MODIFIED FROM: Keith Driessen (AKA Castle Rock Kip)      *
*                             *
*                                                              *
***************************************************************/

// ALRIGHT - LET'S FUCKING DO THIS!
$(document).ready(function(){

	
	/*******************************************************************
	* LOAD UP ALL THEM IMAGES FIRST...                                 *
	*                                                                  *
	*                                                                  *
	*******************************************************************/
	$(window).load(function() {
		letsFuckingParty();
		slipNslide();
	});
	
	
		
	/*******************************************************************
	* TIME TO FUCKIN' PARTY!                                           *
	*                                                                  *
	*                                                                  *
	*******************************************************************/
	function letsFuckingParty(){

		
		// SLIDE EM ON IN!
		$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
		$('#slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
		
		// SHOW 'N' HIDE THE MENU
		$('#menu').toggle(function(){
			$('#vertCon').stop().animate({width:'215px'}, 666, 'easeInOutExpo');
			$('#rightSide').stop().animate({left:'295px'}, 666, 'easeInOutExpo');
			$('#closeBox, #closeGrave').css({'left':'295px'});
			$('.infoArea, #graveArea').css({'left':'375px'});
		}, function(){
			$('#vertCon').stop().animate({width:'0px'}, 666, 'easeInOutExpo');
			$('#rightSide').stop().animate({left:'79px'}, 666, 'easeInOutExpo');
			$('#closeBox, #closeGrave').css({'left':'79px'});
			$('.infoArea, #graveArea').css({'left':'159px'});
		});
		
	
		// PROJECTS INFO BOX
	//	$('#plus').click(function(){
//			$('#infoBox, #closeBox').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
//			$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
//			$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
//			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
	//	});
//		$('#xxx').click(function(){
//			$('#infoBox, #closeBox').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
//			$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
//			$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
//		});
	
	
		// GRAVE INFO BOX
		$('#logoWrap').click(function(){
			$('#graveBox, #closeGrave').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
			$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
			$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
		});
		$('#xxxGrave').click(function(){
			$('#graveBox, #closeGrave').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
			$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
			$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
		});
	
		
	
		/***************************************************************
		* THE BIGGER THE BETTER! (Yes, that is what she said)          *
		*                                                              *
		*                                                              *
		***************************************************************/
		var fsImg = $('.slideImg');
		var startwidth= 1227; 
		var startheight= 920;
		var ratio = startheight/startwidth;
		var imagewidth = $(this).width();
		var imageheight = $(this).height();
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
	
		function fillerup(){
			
			if ((browserheight/browserwidth) > ratio){
				fsImg.height(browserheight);
				fsImg.width(browserheight / ratio);
			} else {
				fsImg.width(browserwidth);
				fsImg.height(browserwidth * ratio);
			};
		
			// CENTER IMGS VERTICALLY + HORIZONTALLY
			fsImg.css('left', (browserwidth - fsImg.width())/2);
			fsImg.css('top', (browserheight - fsImg.height())/2);
			
			// SMALL-ASS SCREEN ALERT
			if ((browserheight <= 480) || (browserwidth <= 900)) {
				// $('#smallScreenCon').stop().animate({top:'0%'}, 666, 'easeInOutExpo');
			} else {
				// $('#smallScreenCon').stop().animate({top:'-100%'}, 666, 'easeInOutExpo');
			};
	
		};
		
	
	
		$(window).resize(function(){	
			imagewidth = $(this).width();
			imageheight = $(this).height();
			browserwidth = $(window).width();
			browserheight = $(window).height();
			fillerup();
			$('#thumbCon').stop().animate({top:'0px'}, 1349, 'easeInOutExpo');
		});
	
		fillerup();
	
	
	};
	
	
	
	
	/*******************************************************************
	* SHIT GOES LEFT RIGHT UP N DOWN. SLIP AROUND WITH THE SWEETNESS   *
	*                                                                  *
	*                                                                  *
	*******************************************************************/
	function slipNslide(){
	
		// HI. DON'T MIND US FOR NOW
		var inmotion;
		var prevIndex;
	
	
		/***************************************************************
		* CLICKS AND KEYBOARD CONTROLS. BECAUSE OPTIONS ARE NICE.      *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		// CLICKS FOR NEXT/PREV PROJECTS
		$('.navBlock.right').click(nextProj);
		$('.navBlock.left').click(prevProj);
	
		// CLICKS FOR NEXT/PREV SLIDES PER PROJECT
		$('.navBlock.up').click(prevSlider);
	    $('.navBlock.down').click(nextSlider);
	
		// KEYBOARD CONTROLS
		$(document).keydown(function(e){
		
			var keyCode = e.keyCode || e.which,
		    	arrow = {sleft:37, sright:39, sup:38, sdown:40};

		  	switch (keyCode) {
		    	case arrow.sup:
		      		prevSlider();
					if(inmotion) return false;
		    	break;
			    case arrow.sdown:
			      	nextSlider();
					if(inmotion) return false;
			    break;
				case arrow.sleft:
		      		prevProj();
					if(inmotion) return false;
		    	break;
				case arrow.sright:
			      	nextProj();
					if(inmotion) return false;
			    break;
		  	};
	
		});
	
	
	
		/***************************************************************
		* HORIZONTAL PROJECTS.									       *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		// SET INITIAL PROJECT TO BE ACTIVE
		if ($('#slideCon .activeProj').length == 0) $('#slideCon > div:first').addClass('activeProj currentProj');
		if ($('#thumbCon .curThumb').length == 0) $('#thumbCon > li a:first').addClass('curThumb');
		$('#infoBox > section:first').show();
	
	
		// NEXT PROJECT
		function nextProj() {	
		
		    if(inmotion) return false;
			else inmotion = true;
		
			var activeproj = $('.activeProj');
			activeproj.removeClass('currentProj');
			activeproj.stop().animate({'left':'-100%'}, 1349, 'easeInOutExpo', function(){
				activeproj.removeClass('activeProj');
				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
				prevproj.children('.eachSlideCon').not('.activeSlide').css({'top':'100%'});
				reSetter();
				inmotion = false;
			});
	
		    if (activeproj.length == 0) activeproj = $('#slideCon > div:last');
			
		    var nextproj = activeproj.next().length ? activeproj.next() : $('#slideCon > div:first');
		    var prevproj = nextproj.prev().length ? nextproj.prev() : $('#slideCon > div:last');
		
			$('.prevProj').removeClass('prevProj');
			prevproj.addClass('prevProj');
		
		    nextproj.css({'left':'100%'}).addClass('currentProj');
			nextproj.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
				nextproj.addClass('activeProj');
			});
		
			// SYNC UP THUMBS ON VERTICAL MENU
			var curLink = nextproj.attr('id');
			var thisNewLink = $('a[data-target="'+curLink+'"]');
			var thumb = $('.thumbImg');
			var thumbImg = $('.thumbImg img');
		
			thumbImg.stop().animate({opacity:1}, 200);
			thumb.removeClass('curThumb');
			thisNewLink.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:0.20}, 0);
			thumbOvers();
		
			setIndex();
		
			// SYNC UP THE BLAH BLAH BLAH...
			var blah = $('.theBlah');
			var thisNewBlah = $('.'+curLink);
		
			blah.fadeOut(666, 'easeInOutExpo');
			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
		
			reSetter();

		};
	
		// PREV PROJECT
		function prevProj() {
		
			if(inmotion) return false;
			else inmotion = true;
	
			var activeproj = $('.activeProj');
			activeproj.removeClass('currentProj');
			activeproj.stop().animate({'left':'100%'}, 1349, 'easeInOutExpo', function(){
				activeproj.removeClass('activeProj');
				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
				prevproj.children('.eachSlideCon').not('.activeSlide').css({'top':'100%'});
				reSetter();
				inmotion = false;
			});

		    if (activeproj.length == 0) activeproj = $('#slideCon > div:first');
		
		    var nextproj =  activeproj.prev().length ? activeproj.prev() : $('#slideCon > div:last');
		    var prevproj =  nextproj.next().length ? nextproj.next() : $('#slideCon > div:first');
	
			$('.prevProj').removeClass('prevProj');
			prevproj.addClass('prevProj');

			nextproj.css({'left':'-100%'}).addClass('currentProj');
			nextproj.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
				nextproj.addClass('activeProj');
			});
		
			// SYNC UP THUMBS ON VERTICAL MENU
			var curLink = nextproj.attr('id');
			var thisNewLink = $('a[data-target="'+curLink+'"]');
			var thumb = $('.thumbImg');
			var thumbImg = $('.thumbImg img');
		
			thumbImg.stop().animate({opacity:1}, 200);
			thumb.removeClass('curThumb');
			thisNewLink.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:0.20}, 0);
			thumbOvers();
		
			setIndex();
		
			// SYNC UP THE BLAH BLAH BLAH...
			var blah = $('.theBlah');
			var thisNewBlah = $('.'+curLink);
		
			blah.fadeOut(666, 'easeInOutExpo');
			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
		
			reSetter();

		};
	
	
	
		/***************************************************************
		* VERTICAL   SLIDES. KEEP READING - THIS IS SO NEAT!           *
		*                                                              *
		*                                                              *
		***************************************************************/

		// NEXT SLIDE
		function nextSlider() {	
		
		    if(inmotion) return false;
			else inmotion = true;
	
			var currentslide = $('.activeSlide');
			currentslide.stop().animate({'top':'-100%'}, 1349, 'easeInOutExpo', function(){
				currentslide.removeClass('activeSlide');
				inmotion = false;
			});

		    if (currentslide.length == 0) currentslide = $('.currentProj > div:last');
		
		    var nextslide = currentslide.next().length ? currentslide.next() : $('.currentProj > div:first');
		    var prevslide = nextslide.prev().length ? nextslide.prev() : $('.currentProj > div:last');
	
			var slidecount = $('.control_count .cur_count').html();
			currentslide.next().length ? slidecount++ : slidecount = 1;
			if(slidecount < 10){
				$('.control_count .cur_count').html('0'+slidecount);
			} else if(slidecount >= 10){
				$('.control_count .cur_count').html(slidecount);
			};
	
			$('.prevSlide').removeClass('prevSlide');
			prevslide.addClass('prevSlide');
	
		    nextslide.css({'top':'100%'});
			nextslide.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
				nextslide.addClass('activeSlide');
			});
		
		};
	
		// PREV SLIDE
		function prevSlider() {
		
			if(inmotion) return false;
			else inmotion = true;
	
			var currentslide = $('.activeSlide');
	
			currentslide.stop().animate({'top':'100%'}, 1349, 'easeInOutExpo', function(){
				currentslide.removeClass('activeSlide');
				inmotion = false;
			});
	
		    if (currentslide.length == 0) currentslide = $('.currentProj > div:first');
		
		    var nextslide =  currentslide.prev().length ? currentslide.prev() : $('.currentProj > div:last');
		    var prevslide =  nextslide.next().length ? nextslide.next() : $('.currentProj > div:first');
	
			var slidecount = $('.control_count .cur_count').html();
			currentslide.prev().length ? slidecount-- : slidecount = $('.currentProj > *').size();
			if(slidecount < 10){
				$('.control_count .cur_count').html('0'+slidecount);
			} else if(slidecount >= 10){
				$('.control_count .cur_count').html(slidecount);
			};
	
			$('.prevSlide').removeClass('prevSlide');
			prevslide.addClass('prevSlide');

			nextslide.css({'top':'-100%'});
			nextslide.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
				nextslide.addClass('activeSlide');
			});
		
		};
	
	
	
		/***************************************************************
		* RESET COUNTER, SLIDES AND THUMBS. WHY? BECAUSE. I SAID SO.   *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		function reSetter(){
		
			// USE ACTIVE PROJECT TO DETERMINE ACTIVE SLIDE
			if ($('.currentProj .activeSlide').length == 0) $('.currentProj > div:first').addClass('activeSlide');
		
			$('.activeSlide').css({'top':'0%'});
		
			var slidecount = $('.control_count .cur_count').html();
			var slidetotal = $('.control_count .tot_count').html();
			if(slidecount < 10){
				$('.control_count .cur_count').html('0'+1);
			} else if(slidecount >= 10){
				$('.control_count .cur_count').html(1);
			};
			if($('.currentProj > *').size() < 10){
				$('.control_count .tot_count').html('0'+($('.currentProj > *').size()));
			} else if($('.currentProj > *').size() >= 10){
				$('.control_count .tot_count').html($('.currentProj > *').size());
			};
		
		};
	
		reSetter();
	
	
	
		/***************************************************************
		* THUMB BOX SLIDER!                                            *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		$('.curThumb img').stop().animate({opacity:0.20}, 0);
	
		// THUMB HOVERS
		function thumbOvers(){
		
			$('.thumbImg').hover(function(){
				var thisThumb = $(this);
				var thisImg = thisThumb.children('img');

				if(!(thisThumb.hasClass('curThumb')) ){
					thisImg.stop().animate({opacity:0.20}, 200);
				};
			}, function(){
				var thisThumb = $(this);
				var thisImg = thisThumb.children('img');
			
				if(!(thisThumb.hasClass('curThumb')) ){
					thisImg.stop().animate({opacity:1}, 200);
				};
			});
		
		};
	
		thumbOvers();

		// THUMB CLICKERS
		$('.thumbImg').click(function(){
		
			if(inmotion) return false;
			else inmotion = true;
		
			var thisThumb = $(this);
			var thumb = $('.thumbImg');
			var thumbImg = $('.thumbImg img');
			var curLink = thisThumb.attr('data-target');
		
		
			var eachProj = $('.eachProj');
			var activeproj = $('.activeProj');
			var nextProj = $('#'+curLink);
		
			var totProj = $('#thumbCon .thumbImg');
	        var projCount = totProj.length;
	        var curIndex = thisThumb.data('index');
	        var nextIndex = curIndex + 1;
	        if (nextIndex === projCount) { nextIndex = 0; }
	        var nextStep = $(totProj[nextIndex]);

			var blah = $('.theBlah');
			var thisNewBlah = $('.'+curLink);
		
		
			thumbImg.stop().animate({opacity:1}, 200);
			thumb.removeClass('curThumb');
			thisThumb.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:0.20}, 0);
			thumbOvers();
	
			// SET THIS PREVINDEX
			prevIndex = prevIndex || 0;
	
			// IF ITEM CLICKED IS ABOVE CURRENT ITEM IN THE LIST, SLIDE NEXT PROJECT IN FROM BOTTOM
	        if (prevIndex < curIndex) {
				eachProj.removeClass('currentProj prevProj');
				activeproj.stop().animate({'left':'-100%'}, 1349, 'easeInOutExpo', function(){
					activeproj.removeClass('activeProj');
					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
					eachProj.children('.eachSlideCon').not('.activeSlide').css({'top':'100%'});
					reSetter();
					inmotion = false;
				});

				nextProj.css({'left':'100%'}).addClass('currentProj');
				$('.currentProj').stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
					$(this).addClass('activeProj');
				});
			
				blah.fadeOut(666, 'easeInOutExpo');
				thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
			
				reSetter();
	
	        } else if (prevIndex > curIndex){
				eachProj.removeClass('currentProj prevProj');
				activeproj.stop().animate({'left':'100%'}, 1349, 'easeInOutExpo', function(){
					activeproj.removeClass('activeProj');
					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
					eachProj.children('.eachSlideCon').not('.activeSlide').css({'top':'100%'});
					reSetter();
					inmotion = false;
				});

				nextProj.css({'left':'-100%'}).addClass('currentProj');
				$('.currentProj').stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
					$(this).addClass('activeProj');
				});
			
				blah.fadeOut(666, 'easeInOutExpo');
				thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
			
				reSetter();

	        } else { inmotion = false; };
	
			// COMPARE THESE TO INTIAL GLOBAL VAR
			setIndex();
		
		});
	
		function setIndex(){
			var curIndex = $('.curThumb').data('index');
			prevIndex = curIndex;
		};
	
	
		/***************************************************************
		* MOVE IT LIKE YOU GROOVE IT.                                  *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		$('#sliderBox').mousemove(function(e){
		
			if($(this).height() < $('#thumbCon').height()) {
				var distance = e.pageY - $(this).offset().top;
				var percentage = distance / $(this).height();
				var targetY = -Math.round(($('#thumbCon').height() - $(this).height()) * percentage);
			
				if(e.pageY < 157){
					$('#thumbCon').stop().animate({top:'0px'}, 2000, 'easeOutCirc');
				} else {
					$('#thumbCon').stop().animate({top:targetY+'px'}, 2000, 'easeOutCirc');
				};
			};
		
		});
		
	};
	
});