$(document).ready(function(){

	
	/* LOADING*/
	$(window).load(function() {
		startUp();
		UpDownLeftRight();
	});
	
	var infopen = false;
	
	function infoBoxOpen(){
			$('#infoBox, #closeBox').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
			infopen = true;
				if($('.activeSlide').hasClass('moviCon')){
					$('#feeler').fadeOut(0, 'easeInOutExpo');
				}
	};	
		
	function infoBoxClose(){
			$('#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(); 
				if($('.activeSlide').hasClass('moviCon')){
					$('#feeler').fadeIn(1349, 'easeInOutExpo');
				}
			});
			infopen = false;		
	};
	
	
		
	function startUp(){
		
		
		// INITIAL ANI
		$('#loadCon').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
		$('#slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
		$('#navCon').stop().animate({bottom:'0%'}, 2200, 'easeInOutExpo');
		$('#logo').stop().animate({top:'40px'}, 3200, 'easeInOutExpo');
		$('#feeler').fadeOut(100, 'easeInOutExpo');
		
		// MENU TOGGLE
		$('#menu').toggle(function(){
			$('#feeler').stop().animate({bottom:'168px'},666, 'easeInOutExpo');
			$('#vertCon').stop().animate({height:'118px'}, 666, 'easeInOutExpo');
			$('#navCon').stop().animate({bottom:'118px'}, 666, 'easeInOutExpo');

		}, function(){
			$('#feeler').stop().animate({bottom:'48px'},666, 'easeInOutExpo');
			$('#vertCon').stop().animate({height:'0px'}, 666, 'easeInOutExpo');
			$('#navCon').stop().animate({bottom:'0px'}, 666, 'easeInOutExpo');
		});
		
		
		
		
		//
		
		
	
		// DETAILS BOX
		
		
			
		$('#prod').click(function (){
			infoBoxOpen();		
		});		
			
		$('#xxx').click(function (){
			infoBoxClose();
		});
			
		
		/////
		
			$(document).keydown(function(e){
		
			var keyCode = e.keyCode || e.which,
		    	arrow = {inf:73};

			  	switch (keyCode) {
			    	case arrow.inf:
						if(infopen == false){
							infoBoxOpen();
						} else if(infopen == true){
							infoBoxClose();
						}
						
				 };
			});
		
		/////
		
	
		// ABOUT BOX
		$('#logo').click(function(){
			$('#cgBox, #closeAb').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
		});
		$('#xxxAbout').click(function(){
			$('#cgBox, #closeAb').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
			$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
		});
	
		
		
	
		
	
		/***************************************************************
		* IMAGE SCALING          *
		*                                                              *
		
	***************************************************************/
	

		
		var cImg = $('.slideImg');
		var fsImg = $('.full');
		var sImg = $('.stand');
		var mImg = $('.moviImg');
		var startwidth= 64; 
		var startheight= 39;
		var ratio = startheight/startwidth;
		var imagewidth = $(this).width();
		var imageheight = $(this).height();
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
	
		function imgHandle(){

			
			if ((browserheight/browserwidth) > ratio){
				fsImg.height(browserheight);
				fsImg.width(browserheight / ratio);
			} else {
				fsImg.width(browserwidth);
				fsImg.height(browserwidth * ratio);
			};
			
		
			// CENTER IMGS VERTICALLY + HORIZONTALLY
			cImg.css('left', (browserwidth - cImg.width())/2);
			cImg.css('top', (browserheight - cImg.height())/2);
			
			fsImg.css('left', (browserwidth - fsImg.width())/2);
			fsImg.css('top', (browserheight - fsImg.height())/2);
			
			sImg.css('left', (browserwidth - sImg.width())/2);
			
			mImg.css('left', (browserwidth - mImg.width())/2);
			

			
			
		
		////
	
		};
	
		$(window).resize(function(){	
			imagewidth = $(this).width();
			imageheight = $(this).height();
			browserwidth = $(window).width();
			browserheight = $(window).height();
			imgHandle();
			$('#thumbCon').stop().animate({top:'0px'}, 1349, 'easeInOutExpo');
			
			
		});
		
		
	
		imgHandle();
		
		/***************************************************************
		* BLOCK ANI                                         *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		// UP
		$('.hovUp').hover(function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({top:'-39px'}, 200);
		}, function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({top:'0px'}, 200);
		});
	
	
		// DOWN
		$('.hovDown').hover(function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({top:'0px'}, 200);
		}, function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({top:'-39px'}, 200);
		});
	
	
		// LEFT
		$('.hovLeft').hover(function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({left:'-39px'}, 200);
		}, function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({left:'0px'}, 200);
		});
	
	
		// RIGHT
		$('.hovRight').hover(function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({left:'0px'}, 200);
		}, function(){
			var thisBlock = $(this);
			var thisRoll = thisBlock.children('.aBlock');
			thisRoll.stop().animate({left:'-39px'}, 200);
		});
	
	
		// LOGO
		$('#logo').hover(function(){
			$('#cglogo').stop().animate({top:'-39px'}, 200);
		}, function(){
			$('#cglogo').stop().animate({top:'0px'}, 200);
		});
		
		// deets
		$('#prod').hover(function(){
			$('#deets').stop().animate({top:'-39px'}, 200);
		}, function(){
			$('#deets').stop().animate({top:'0px'}, 200);
		});
	};
	
	
	
	
	/*******************************************************************
	* 2WAY CAROUSEL   *
	*                                                                  *
	*                                                                  *
	*******************************************************************/
	function UpDownLeftRight(){
	
		
		var inmotion;
		var prevIndex;
	

	
		// NEXT/PREV PROJECTS
		$('.navBlock.down').click(nextProj);
		$('.navBlock.up').click(prevProj);
	
		// NEXT/PREV IMAGES
		$('.navBlock.right').click(nextSlider);
	    $('.navBlock.left').click(prevSlider);
	
		// KEYS
		$(document).keydown(function(e){
		
			var keyCode = e.keyCode || e.which,
		    	arrow = {sleft:37, sright:39, sup:38, sdown:40};

		  	switch (keyCode) {
		    	case arrow.sleft:
		      		prevSlider();
					if(inmotion) return false;
		    	break;
			    case arrow.sright:
			      	nextSlider();
					if(inmotion) return false;
			    break;
				case arrow.sup:
		      		prevProj();
					if(inmotion) return false;
		    	break;
				case arrow.sdown:
			      	nextProj();
					if(inmotion) return false;
			    break;
		  	};
	
		});
	
	
	
		// 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();
			var ide = $('.curThumb .title').html();
			$('#deets').html(ide);
			
			
			
			
			///
			
			
			
			
			

	
	
		// NEXT 
		function nextProj() {	
		
			
		
		    if(inmotion) return false;
			else inmotion = true;
		
			var activeproj = $('.activeProj');
			
			
			
			activeproj.removeClass('currentProj');
			activeproj.stop().animate({'top':'-100%'}, 1000, 'easeInOutExpo', function(){
				activeproj.removeClass('activeProj');
				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
				prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
				reSetter();
				inmotion = false;
				//slipup();
			});
	
		    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({'top':'100%'}).addClass('currentProj');
			nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
				nextproj.addClass('activeProj');
			});
		
			// MARRY UP MINI MENU
			var curLink = nextproj.attr('id');
			var thisNewLink = $('a[data-target="'+curLink+'"]');
			var thumb = $('.thumbImg');
			var thumbImg = $('.thumbImg img');
		
			thumbImg.stop().animate({opacity:0.4}, 1000);
			thumb.removeClass('curThumb');
			thisNewLink.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:1}, 1000);
			
			var ide = $('.curThumb .title').html();
			$('#deets').html(ide);
			
///////////


			//thumbOvers();
		
			setIndex();
		
			// MARRY UP INFO
			var blah = $('.theBlah');
			var thisNewBlah = $('.'+curLink);
		
			blah.fadeOut(666, 'easeInOutExpo');
			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
		
			reSetter();

		};
	
		// PREV 
		function prevProj() {
		
		
		
			if(inmotion) return false;
			else inmotion = true;
			
			
	
			var activeproj = $('.activeProj');
			activeproj.removeClass('currentProj');
			activeproj.stop().animate({'top':'100%'}, 1000, 'easeInOutExpo', function(){
				activeproj.removeClass('activeProj');
				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
				prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
				reSetter();
				inmotion = false;
				//slipup();
			});
	
		    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({'top':'-100%'}).addClass('currentProj');
			nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
				nextproj.addClass('activeProj');
			});
		
			// MARRY UP THUMBS ON MIN MENU
			var curLink = nextproj.attr('id');
			var thisNewLink = $('a[data-target="'+curLink+'"]');
			var thumb = $('.thumbImg');
			var thumbImg = $('.thumbImg img');
		
			thumbImg.stop().animate({opacity:0.4}, 1000);
			thumb.removeClass('curThumb');
			thisNewLink.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:1}, 1000);
			
			var ide = $('.curThumb .title').html();
			$('#deets').html(ide);
			//thumbOvers();
		
			setIndex();
		
			// MARRY UP INFO
			var blah = $('.theBlah');
			var thisNewBlah = $('.'+curLink);
		
			blah.fadeOut(666, 'easeInOutExpo');
			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
		
			reSetter();

		};
	
	
	

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

		    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({'left':'100%'});
			nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
				nextslide.addClass('activeSlide');
			});
		
		};
		
		
		


	
		// PREV SLIDE
		function prevSlider() {
		
			if(inmotion) return false;
			else inmotion = true;
	
			var currentslide = $('.activeSlide');
	
			currentslide.stop().animate({'left':'100%'}, 1000, 'easeInOutExpo', function(){
				currentslide.removeClass('activeSlide');
				inmotion = false;
				//slipup();
			});
	
		    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({'left':'-100%'});
			nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
				nextslide.addClass('activeSlide');
			});
		
		};
		
		
		





		function slipup(){	
						
					var activeslide = $('.activeSlide');
					var browsermid = $(window).height() / 3;
			
					
		
					
					if(activeslide.hasClass('moviCon')){
					$('#logo').fadeOut(666, 'easeInOutExpo');
					$('#feeler').fadeIn(100, 'easeInOutExpo');
					
						$('#feeler').mousemove(function(e){
						
							if($(window).height() < $('.moviImg').height()) {
						
								var distance = e.pageY - $('.moviCon').offset().top;
								var percentage = distance / $(window).height();
								var targetY = -Math.round(($('.activeProj .moviImg').height() - $(window).height() + 41));
								//var wheight = $(window).height() - 300;
							
								if(e.pageY < browsermid){
									
									$('.activeProj .moviImg').stop().animate({top:'0px'}, 8000, 'easeOutCirc');
									//$('#itScrolls').stop().animate({top:'60px'}, 6000, 'easeOutCirc');
								} else {
									
									$('.activeProj .moviImg').stop().animate({top:targetY+'px'}, 8000, 'easeOutCirc');
									//$('#itScrolls').stop().animate({top:wheight+'px'}, 6000, 'easeOutCirc');
									
									
									
								};
							};
						
						});	
						
						
						}
						else {$('#logo').fadeIn(600, 'easeInOutExpo');
						$('.moviImg').stop().animate({top:'0px'}, 0, 'easeOutCirc');
						$('#feeler').fadeOut(0, 'easeInOutExpo');
						$('#feeler').unbind('mousemove');	
								}
					}
		
		
	


	
	
		//RESET
		
		function reSetter(){
		
		
			// USE ACTIVE PROJECT TO DETERMINE ACTIVE SLIDE
			
			if ($('.currentProj .activeSlide').length == 0) $('.currentProj > div:first').addClass('activeSlide');
		
			$('.activeSlide').css({'left':'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());
			};
			
			slipup();
			
			
		
		};
	
		reSetter();
		slipup();
	
	
	
		/***************************************************************
		* MINI MENU SLIDES                                             *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		$('#thumbCon img').stop().animate({opacity:0.4}, 1000);
		$('.curThumb img').stop().animate({opacity:1}, 1000);
	
		// THUMB HOVERS
		function thumbOvers(){
		
			$('.thumbImg').hover(function(){
				var thisThumb = $(this);
				var thisImg = thisThumb.children('img');

				if(!(thisThumb.hasClass('curThumb')) ){
					thisImg.stop().animate({opacity:0.2}, 200);
				};
			}, function(){
				var thisThumb = $(this);
				var thisImg = thisThumb.children('img');
			
				if(!(thisThumb.hasClass('curThumb')) ){
					thisImg.stop().animate({opacity:0.4}, 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:0.4}, 1000);
			thumb.removeClass('curThumb');
			thisThumb.addClass('curThumb');
			$('.curThumb img').stop().animate({opacity:1}, 1000);
			//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({'top':'-100%'}, 1000, 'easeInOutExpo', function(){
					activeproj.removeClass('activeProj');
					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
					eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
					reSetter();
					inmotion = false;
					//slipup();
					
				});

				nextProj.css({'top':'100%'}).addClass('currentProj');
				$('.currentProj').stop().animate({'top':'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({'top':'100%'}, 1000, 'easeInOutExpo', function(){
					activeproj.removeClass('activeProj');
					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
					eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
					reSetter();
					
					inmotion = false;
					//slipup();
				});

				nextProj.css({'top':'-100%'}).addClass('currentProj');
				$('.currentProj').stop().animate({'top':'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
	        //prevIndex = curIndex;
			setIndex();
		
		});
	
		function setIndex(){
			var curIndex = $('.curThumb').data('index');
			prevIndex = curIndex;

			var ide = $('.curThumb .title').html();
			$('#deets').html(ide);
			//thumbOvers();

		};
	
	
		/***************************************************************
		* SCROLLY WOLLY 			                                 *
		*                                                              *
		*                                                              *
		***************************************************************/
	
		$('#sliderBox').mousemove(function(e){
		
			if($(window).width() < $('#thumbCon').width()) {
				var distance = e.pageX - $(this).offset().left;
				var percentage = distance / $(window).width();
				var targetX = -Math.round(($('#thumbCon').width() - $(window).width()) * percentage);
			
				if(e.pageX < 195){
					$('#thumbCon').stop().animate({left:'0px'}, 8000, 'easeOutCirc');
				} else {
					$('#thumbCon').stop().animate({left:targetX+'px'}, 8000, 'easeOutCirc');
				};
			};
		
		});
				
		
		
				
	};
	
});