/*_________________________________________________________________________

    created       : 7/19/10
    last updated  : 6/11/11
_________________________________________________________________________*/   

//  PAGE VARIABLES
	var homePage;
	var admin;
	
	$(document).ready(function(){
		homePage = $('body.home').length;
		admin = $('#adminbar').length;
	});


//  ADD .FIRST CLASS
	$(document).ready(function(){
		$('li').first().addClass("first");
	});

//  SCROLL TO FOOTER (CONTACT)
	$(document).ready(function(){
		
		$('#mainNav a[href="/contact"]').click(function(e) {
			e.preventDefault();
			$.scrollTo('#footer', 1000);
			return false;
		});
	});

//  LOGO HOVER EFFECT
	$(document).ready(function(){

		/*  change CSS  */
			$('#logo h1 a .hover, #footerLogo h1 a .hover').css({"display":"block", "opacity":0});
	
		/*  hover  */
			$('#logo h1 a .hover, #footerLogo h1 a .hover').hover(
				function() {
					$(this).stop().animate(
						{
						'opacity': 1  
	            		}, 
	            		400,'easeOutSine')  
	            },  
	            function() {
	            	$(this).stop().animate(
	            		{  
	            		'opacity': 0  
	            		}, 
	            		400, 'easeOutSine')
	            }
	       )
	});

//  HIGHLIGHT PORTFOLIO ON HOMEPAGE
	$(document).ready(function(){
		$('.home #mainNav ul li:first').addClass('selectedPage');
	});

	
//  THUMBNAIL ROLLOVER EFFECT
	$(document).ready(function(){
		/*  hover  */
			$('.portfolioProject').hover(
				function() {
					$(this)
						.find('.projectDescription')
						.css({"cursor":"pointer"})
						.stop(true, true)
						.fadeIn(500,'easeOutSine')
				},  
	            function() {
	            	$(this)
	            		.find('.projectDescription')
	            		.stop(true, true)
	            		.fadeOut(700,'easeOutSine')
	            }
	       )
	});

//  FILTER THUMBNAILS
	$(document).ready(function() {
		if (homePage) {
			$('.portfolioProject').hide();
			$('.portfolioProject.featured').show();
		}
		
		$('#secondaryNav .filters a').not('#caseStudies').click(function(e) {
			e.preventDefault();
			if ( $('#mainContentBody').not(':animated') ) {
				//  Disable & Enable menu
					$('#secondaryNav .filters a').attr('disabled', true);
					$('#secondaryNav .filters .selected').removeClass('selected');
					$(this).parent().addClass('selected');
				
				//  Variables
					//var filterVal = $(this).text().toLowerCase().replace(' ','-');
					var filterVal = $(this).attr("id");
				
				//  Fade out all thumbnails
					$('#mainContentBody').animate({'opacity': 0}, 1000, function() {
					 	
					 	//  Show & Hide thumbnails
					 		if (filterVal == 'all') {  
					 			$('#mainContentBody .portfolioProject').show();
					 		} else {
					 			$('#mainContentBody .portfolioProject').each(function() {  
					 			      if(!$(this).hasClass(filterVal)) {  
					 			      	$(this).hide(); 
					 			      } else {
					 			      	$(this).show();
					 			      } 
					 			 });
					 		}
					 	
					 	//  Fade back in
					 		$('#mainContentBody')
					 		 	.css({'opacity':0})
					 		 	.animate({'opacity': 1}, 1800, 'easeOutSine'); 
					});
			} else {
				console.log("Clicked while animating...");
			}
		});
	});
	
//  LIGHTBOX
	var lightboxIsActive = false;
	$(document).ready(function(){
		$('.portfolioProject').click(function() {
			if (!lightboxIsActive) {	
				lightboxIsActive = true;
				$('.portfolioProject').attr('disabled', true);
				createLightbox($(this));
			} else {
				console.log("Shouldn't be triggering a click...");
			}
		});
	});
	
	function createLightbox(target) {
	
		//  set variables
			var offset = target.offset();
			var thisX = offset.left + 15;
			var thisY = offset.top + 15;
		
		//  preloader
			var preloader = new Image();
				
			$(preloader)
				.attr('id', "preloader")
				.appendTo(target);
			
			preloader.onload = function(){	
		
				$(preloader)
					.hide()
					.fadeIn(600);
			}
			preloader.src = "/Websites/hisandheranderson/templates/hisandheranderson/images/bkgrd/thumbnailPreloader.gif";
		
		//  hide scrollbars
			//$('body').css('overflow-y', 'hidden');
		
		//  add lightboxOverlay to body
			$('<div id="lightboxOverlay"></div>')
		 		.css({'opacity' : 0.0})
		 		.hide()
		 		.appendTo('body');
		 
		//  add lightboxContainer to body
			$('<div id="lightboxContainer"><div id="lightboxContainerContent"></div></div>')
				.hide()
				.appendTo('body');
				
		//  ADD IMAGE CONTAINERS
			
			//  lightboxImageContainer
				$('<div id="lightboxImageContainer"></div>')
					.appendTo('#lightboxContainerContent')
					.hover(
						function() {
							$('#lightboxImageContainer .rollover')
								.stop()
								.animate({'opacity': 1}, 500,'easeOutSine')
						},  
					    function() {
					    	$('#lightboxImageContainer .rollover')
					    		.stop()
					    		.animate({'opacity': 0}, 700, 'easeOutSine')
					    }
					)
					/*.click(function() {
						if ( $('#lightboxContainer').not(':animated') ) {
							$('#lightboxImageContainer .rollover').trigger('click');
							console.log("Triggering a click to remove...");
						} else {
							console.log("Behaving properly...");
						}
					});*/
					
					//  rollover (close btn)
						$('<div class="rollover"></div>')
							.css({'opacity' : 0.0})
							.appendTo('#lightboxImageContainer')
							.mouseover(function(){
								$('#lightboxImageContainer .rollover').stop();
							})
							.click(function() {
								if ( $('#lightboxContainer').not(':animated') ) {
									removeLightbox(thisX, thisY);
								}
							});
							
			//  lightboxExplanationContainer
				$('<ul id="lightboxExplanationContainer"></ul>')
					.hide()
					.appendTo('#lightboxContainerContent')
					.show();
					
			//  lightboxThumbnailContainer
				$('<ul id="lightboxThumbnailContainer"></ul>')
					.hide()
					.appendTo('#lightboxContainerContent');
			
		//  ADD IMAGES
			var imageCache = [];
			var imagePathCache = [];
			var thumbnailCache = [];
			var thumbnailPathCache = [];
			var imageCounter = [];
			
			var projectLength = target.find('.projectThumbnails li').size();			
			for (var i=0; i<projectLength; i++) {
				
				//  mainImage
					var currentImage = new Image();
						
					$(currentImage)
						.attr('class', "mainImage")
						.prependTo('#lightboxImageContainer');
					
					imageCache.push(currentImage);		
					imagePathCache.push(target.find('li').eq(i).find('a').attr('href'));
					
					currentImage.onload = function(){	
						imageCounter.push(currentImage);
						if ($(imageCounter).length == projectLength) {
							expandLightbox(thisX, thisY, imageCache[0].width, imageCache[0].height);
						}
					}
					currentImage.src = imagePathCache[i];
				
				//  image explanations
					$('<div class="explanation"></div>')
						.appendTo('#lightboxExplanationContainer')
						.html(target.find('li').eq(i).find('.explanation').html());
										
				//  thumbnails
					var currentThumbnail = new Image();
					$(currentThumbnail)
						.appendTo('#lightboxThumbnailContainer')
						.wrap('<li class="thumbnail"></li>');
					
					thumbnailPathCache.push(target.find('li').eq(i).find('a img').attr('src'));
					
					currentThumbnail.onload = function(){
						if ($(imageCache).length == projectLength) {
							$('#lightboxThumbnailContainer li:first').addClass('active');
							
							$('#lightboxThumbnailContainer li').click(function() {
								if ( ! $(this).hasClass('active') ) {
									//  variables
										var oldIndex = $('#lightboxThumbnailContainer li.active').index();
										var oldImage = $(imageCache[oldIndex]);
										var oldExplanation = $('#lightboxExplanationContainer .explanation').eq(oldIndex);
										var targetIndex = $('#lightboxThumbnailContainer li').index(this);
										var targetImage = $(imageCache[targetIndex]);
										var targetExplanation = $('#lightboxExplanationContainer .explanation').eq(targetIndex);
										var animationTime = 400;
									
									//  add / remove class
										$('#lightboxThumbnailContainer li.active').removeClass('active');
										$(this).addClass('active');
									
									//  switch images	
										//  change size, re-order, & fade in
											if ( oldImage.width() != targetImage.width() || oldImage.height() != targetImage.height() ) {
												var startingWidth = $(oldImage).width();
												var startingHeight = $(oldImage).height();
												var destinationWidth = $(targetImage).width();
												var destinationHeight = $(targetImage).height();
												
												console.log("resizing image...")
												
												//  images 
													$(targetImage)
														.show()
														.css({
															'height' : startingHeight, 
															'width' : startingWidth,
															'opacity' : 0.0,
														})
														.appendTo($('#lightboxImageContainer'))
														.animate({
															width: destinationWidth,
															height: destinationHeight,
															opacity: 1.0,
														}, animationTime);
													
													$(oldImage)
														.fadeOut(animationTime);
														
												//  explanations
													$('#lightboxExplanationContainer')
														.animate({
															top: (destinationHeight + 12),
														}, animationTime);
														
													$(targetExplanation).fadeIn(animationTime);
														
													$(oldExplanation).fadeOut(animationTime);
													
										//  otherwise... re-order and fade-in
											} else {
												//  images
													$(targetImage)
														.hide()
														.appendTo($('#lightboxImageContainer'))
														.fadeIn(animationTime);
														
													$(oldImage)
														.fadeOut(animationTime);
														
												//  explanation
													$(targetExplanation).fadeIn(animationTime);
													$(oldExplanation).fadeOut(animationTime);
											}			
								}
							});
						}
					}
					currentThumbnail.src = thumbnailPathCache[i];
			}
		
		return false;

	}
	
	function expandLightbox(thumbX, thumbY, imageWidth, imageHeight) {
		//  set variables
			var startingX = thumbX;
			var startingY = thumbY;
			var endingX = ($(window).width() - imageWidth) / 2;
			var endingY = ( ($(window).height() - imageHeight) / 2 ) - 72;
			var animationTime = 400;
		
		//  hide & delete preloader
			$(preloader).fadeOut(300, function() {
				$(this).remove();
			});
		
		//  adjust vertical destination if window is too small
			if ( endingY < 72 ) {
				endingY = 72;
			}
			
			endingY = $(window).scrollTop() + endingY;
		

		//  lightboxContainer
			//  set starting values
				$('#lightboxContainer')
					.show()
					.css({'opacity' : 0.0})
					.css({'left' : startingX})
					.css({'top' : startingY});
					
			//  animate
				$('#lightboxContainer')	
					.animate({
						opacity: 1.0,
						left: endingX,
						top: endingY,
					}, animationTime, function() {
						//  animation complete
							$('#lightboxOverlay')
								.css({'height' : $('body').height()})	
								.show()
								.animate({opacity: 0.85}, animationTime*1.5);
							
							$('#lightboxThumbnailContainer')
								.fadeIn(animationTime);
					});
		
		//  top image
			//  set starting values	
				$('.mainImage').hide();
				$('.mainImage:last')
					.show()
					.css({'width' : 150})
					.css({'height' : 150})
			//  animate
					.animate({
						width: imageWidth,
						height: imageHeight
					}, animationTime, function() {
						//  animation complete
							$('#lightboxExplanationContainer .explanation:first')
								.fadeIn(animationTime * 2);
					});
		
		//  explanation
			$('#lightboxExplanationContainer')
				.css({
					'top' : ( imageHeight + 12 ),
					'width' : imageWidth,
				 });
	}
	
	function removeLightbox(thumbX, thumbY) {		
		//  set variables
			var animationTime = 400;
		
		//  animate			
			$('#lightboxThumbnailContainer')
				.fadeOut(animationTime/4, "easeOutSine");
				
			$('#lightboxContainer .rollover')
				.fadeOut(animationTime/4, "easeOutSine");
				
			$('#lightboxExplanationContainer')
				.fadeOut(animationTime/4, "easeOutSine");
			
			$('.mainImage')
				.animate({
					width: 150,
					height: 150,
				}, animationTime, "easeOutSine", function() {
					//  animation complete
						$('#lightboxOverlay')	
							.animate({
								opacity: 0.0,
							}, animationTime*2, "easeOutSine", function() {
								$(this).remove();
							});
				});
				
			$('#lightboxContainer')	
				.animate({
					opacity: 0.0,
					left: thumbX,
					top: thumbY,
				}, animationTime, function() {
					//  animation complete
						$(this).remove();
						$('.portfolioProject').removeAttr('disabled');
						lightboxIsActive = false;
				});
	}

//  SCROLL TO SERVICES
	$(document).ready(function(){
		
		$('.services #secondaryNav li a').click(function(e) {
			e.preventDefault();
			$.scrollTo($(this).attr('href'), 600);
			return false;
		});
	});


//  FORM FOCUS
	$(document).ready(function(){ 
		$('.fieldItem input, #contactForm .fieldItem textarea').focus(function () { 
			$(this).val(""); 
		}).blur(function() { 
	    	if ($(this).val() == "") { 
	        	$(this).val($(this)[0].defaultValue); 
	        } 
	        }); 
	});

//  BLOG AMPERSAND
	$(document).ready(function() {
		$('.blog h3 a').replaceText(/&/gi, '<span class="amp">&amp;</span>');
	});
	
//  BLOG ICON HOVER EFFECT
	$(document).ready(function(){
		/*  add .hover span  */
			$('.blog .aside .permalink a .label').wrapInner('<span class="hover" />');
			var target = $('.blog .aside .permalink a .label .hover')
		/*  change CSS  */
			$(target).css({"display":"block", "opacity":0});
	
		/*  hover  */
			$('.blog .aside .permalink a').hover(
				function() {
					$(this).find('.hover').stop().animate(
						{
						'opacity': 1  
	            		}, 
	            		400,'easeOutSine')  
	            },  
	            function() {
	            	$(this).find('.hover').stop().animate(
	            		{  
	            		'opacity': 0  
	            		}, 
	            		400, 'easeOutSine')
	            }
	       )
	});