// JavaScript Document

$(document).ready(function() {
	var currPage = "home";
	
	// INTRO ANIMATION
	$("#tagline, #homePg, .playBtn, .contentPg").hide();
	
	//comment out to play intro
/*	$("#intro").remove();
	$("#content").removeAttr("style");
	startHomeAni();*/
	//------------------

	$("#intro img").hide();
	$('#intro').waitForImages(function() {
		//$("#logo-mask img").animate({marginLeft: 800}, 1500, function(){
		$("#logo-lg").fadeIn(500, function(){
			$("#tagline").fadeIn(500, function(){
				$("#content").removeAttr("style");
				$("#intro").delay(900).fadeOut(400, function(){
					$("#intro").remove();
					startHomeAni();
				});
			});
		});
	});
	
	
	
	
	// BUTTON HOVER FADING --------------------------------------------------------------------------------------------------------
	  $(".btn").animate( { "opacity" : .5 }, 0);
	  //$("#footer .btn").animate( { "opacity" : .5 }, 0);
	  
	  $(".btn").hover(function() {
		 $(this).stop().animate( { "opacity" : 1 }, 200);
			}, function() {
			$(".btn").stop().animate( { "opacity" : .5 }, 200);
			// $(this).width($(this).width());
		});
		
		$('#nav li.btn div').each(function(){
		  $(this).width($(this).width() + 7);
		});
		
		
	// HOME PAGE ANIMATION ----------------------------------------------------------------------------------------------------------
	function startHomeAni() {
		$("#home-ani").cycle({fx: "fade", speed: 1000, timeout: 5000,  next:'#nextBtn', prev:'#prevBtn'});
		$("#homePg").fadeIn(500);
		$("#nextBtn img, #prevBtn img").animate( { "opacity" : 0 }, 200);
	}
	
	// SLIDESHOW CONTROLS ----------------------------------------------------------------------------------------------------------
	$(".pauseBtn").click(function(){
			$("#"+currPage+"-ani").cycle("pause");
			$("#"+currPage+"Pg .pauseBtn").hide();
			$("#"+currPage+"Pg .playBtn").show();
		});
	
	$(".playBtn").click(function(){
			$("#"+currPage+"-ani").cycle("resume");
			$("#"+currPage+"Pg .playBtn").hide();
			$("#"+currPage+"Pg .pauseBtn").show();
		});
	
	  $(".pauseBtn").hover(function() {
		 $(".pauseBtn img").animate( { "opacity" : 0 }, 200);
			}, function() {
			 $(".pauseBtn img").animate( { "opacity" : 1 }, 200);;
		});
		
		 $(".playBtn").hover(function() {
		 $(".playBtn img").animate( { "opacity" : 0 }, 200);
			}, function() {
			 $(".playBtn img").animate( { "opacity" : 1 }, 200);;
		});
	
	 // $(".pagerContainer a").hover(function() {
		 $(".pagerContainer a").live("mouseover", function() {
	//	 $("a:hover img").stop().animate( { "opacity" : 1 }, 200);//// CHANGE TO LIVE
			$(this).find("img").stop().animate( { "opacity" : 1 }, 200); 
			}).live("mouseout", function() {
			 $("a img").stop().animate( { "opacity" : 0 }, 200);;
		});
	
	
	  $(".teamDots").hover(function() {
		$(".dot", this).children("img").stop().animate( { "opacity" : 1 }, 200);
			}, function() {
			 $(".dot img").stop().animate( { "opacity" : 0 }, 200);;
		});
	
		//homepage slideshow next and prev buttons
		$("#nextBtn, #prevBtn").click(function(){
				// pause the slideshow and show correct play/pause btns
				$("#home-ani").cycle("pause");
				$("#"+currPage+"Pg .pauseBtn").hide();
				$("#"+currPage+"Pg .playBtn").show();
		});
		
	 $("#nextBtn").hover(function() {
		 $("#nextBtn img").animate( { "opacity" : 1 }, 200);
			}, function() {
			 $("#nextBtn img").animate( { "opacity" : 0 }, 200);
		});
		
	 $("#prevBtn").hover(function() {
		 $("#prevBtn img").animate( { "opacity" : 1 }, 200);
			}, function() {
			 $("#prevBtn img").animate( { "opacity" : 0 }, 200);
		});
	
	// NAVIAGTION CASES ----------------------------------------------------------------------------------------------------------
	
	var navClicked
		$("#nav .btn").live("click", function() {
		navClicked = $(this).attr("id");
		
				
		//fade out visible page and then fade in the page that was clicked from the nav
		$("#content #"+currPage+"Pg:visible").fadeOut(100, function(){ $("#"+navClicked+"Pg").fadeIn(); });
		$("#"+currPage+"").removeClass("activePg activeBtn");
		$("#"+currPage+"").animate( { "opacity" : .5 }, 200);
		//$("#"+currPage+"").addClass("btn");
		
		
		// add active class to the page and clicked button
		$("#"+navClicked+"").animate( { "opacity" : 1 }, 200);
		$("#"+navClicked+"").removeAttr("style", "filter");
		$("#"+navClicked+"").addClass("activePg activeBtn");
		//$("#"+navClicked+"").removeClass("btn");
		 currPage = navClicked;
		//alert("currPage = "+currPage+" navClicked = "+navClicked);
			
		// initialize page for clicked link
		switch(navClicked)
		{
		case "philosophy":
			// start slideshow
			//$("#philosophy-ani").cycle("destroy");
			
			$("#philosophy-ani").stop(true, true).cycle("fade"); 
			/*$("#philosophy-ani").clearQueue();
			$("#philosophy-ani").cycle("fade");*/ 
		  break;
		case "testimonials":
			//$('#testimonials-ani').cycle("destroy");
			$("#testimonials-ani").stop(true, true).cycle("fade"); 

			$("#tst-pager").html("More");
			
			// create pager
			var bc = $('#testimonialsPg .pagerContainer'); 
			var $container = $("#testimonials-ani").cycle({fx: "fade", speed: 1000, timeout: 7000,  pager: '#tst-pager', updateActivePagerLink: null,
   			 pagerAnchorBuilder: function(idx, slide) { 
        		// return selector string for existing anchor 
		  		 return '<a href="#"><img src="img/pager-dot-dark.png" class="pagerDot" /></a>';
   			 }});
			 
			 //fade out pager hover image
			 $(".pagerContainer img").animate( { "opacity" : 0 }, 0 );
			 
			 //pause slideshow when click on pager
			 $(".pagerContainer a").click(function(){
				 $("#"+currPage+"-ani").cycle("pause");
				 $("#"+currPage+"Pg .pauseBtn").hide();
				 $("#"+currPage+"Pg .playBtn").show();
			});
			
			if (navigator.appVersion.indexOf("Mac")!=-1) {
				$("#tst-pager").addClass('mac');
			} else {
				$("#tst-pager").addClass('pc');
			}
			
		  break;
		 case "who":
		  //fade out pager hover image
			$(".pagerContainer img").animate( { "opacity" : 0 }, 0 );
			$("#team2Txt, #team1Txt").hide()
			$("#ceoTxt").show()
			$("#ashleyRollover").animate( { "opacity" : 0 }, 0 );
			// show the first page of team members
			$("#team1dot").click(function(){
				$(".teamTxt:visible").fadeOut(100, function(){
					$("#team1Txt").fadeIn(100);	
				});
				$("#ashleyImg").removeClass("t2");
				$("#ashleyImg").addClass("t1");
				$("#team1dot").addClass("activeSlide");
				$("#team2dot").removeClass("activeSlide");
			});
			// show the second page of team members
			$("#team2dot").click(function(){
				$(".teamTxt:visible").fadeOut(100, function(){
					$("#team2Txt").fadeIn(100);
				$("#ashleyImg").removeClass("t1");
				$("#ashleyImg").addClass("t2");
				$("#team2dot").addClass("activeSlide");
				$("#team1dot").removeClass("activeSlide");
				});
			});
			// show the CEO page
			$("#ceoImg, #ashleyRollover").click(function(){
				$(".teamTxt:visible").fadeOut(100, function(){
					$("#ceoTxt").fadeIn(100);
				});
				$("#ashleyImg").removeClass("t2");
				$("#ashleyImg").removeClass("t1");
				$("#team1dot").removeClass("activeSlide");
				$("#team2dot").removeClass("activeSlide");
			});
			// CEO hover
			 $("#ceoImg, #ashleyRollover").hover(function() {
				 $("#ashleyRollover").animate( { "opacity" : .7 }, 200);
				}, function() {
			 	$("#ashleyRollover").stop().animate( { "opacity" : 0 }, 200);;
			});
		  break;
		case "portfolio":
			// clear out slideshow on portfolio click
			$("#portfolio-ani, #soldThumbs, #soldHoverThumbs, #saleList, #soldList").empty();
			//$('#portfolio-ani').cycle("destroy");
			$('#portfolio-ani').clearQueue();
			
			//get home info from json
			getSoldHomes()
			
			//always start on thumbs view
			$("#soldThumbsView").show();
			$("#soldSpecsView").hide();
			
			//hide the right side of thumbs view
			$("#showSold").animate({"opacity" : 0}, 0);
		  
		   $(".soldHomeBtn").live("mouseover", function() {
				 $("img", this).stop().animate( { "opacity" : 0 }, 200);
				// populate the right side home preview
				 btnId = ".ph"+$(this).attr("id");
				 $("#soldNameList "+btnId).stop().animate( { "opacity" : 1 }, 200);
						 //populateHomePreview(btnId, currPage);
				 // fade in preview
				 $("#showSold").stop().animate( { "opacity" : 1 }, 200);
				}).live("mouseout", function() {
			 	$(".soldHomeBtn img").stop().animate( { "opacity" : 1 }, 200);
					 $("#soldNameList "+btnId).stop().animate( { "opacity" : .5 }, 200);
							//$("#showSold").stop().animate( { "opacity" : 0 }, 200);
				//$("#showSold").empty();
			});
			
			
			 $("#soldThumbsView li").live("mouseover", function() {
				$(this).stop().animate( { "opacity" : 1 }, 200);
				listItemClass = $(this).attr("class");
				$("#soldHoverThumbs div."+listItemClass+" img").stop().animate( { "opacity" : 0 }, 200);
		    }).live("mouseout", function() {
				$("li").stop().animate( { "opacity" : .5 }, 200);
				$(".soldHomeBtn img").stop().animate( { "opacity" : 1 }, 200);
			});
			
			//click thumb and enter specs view
			$(".soldClick").die().live("click", function() {
				var clickedSold = $(this).attr("id");
				sold_home(clickedSold);
					
			});
			
			//click name and enter specs view
			//$("#soldNameList li").die().live("click", function() {
			$('#soldNameList').undelegate().delegate('li', 'click', function() {
				var clickedSold = $(this).attr("class");
				clickedSold = clickedSold.replace('ph', '');
				sold_home(clickedSold);
			});
		 
		 	// specs view button rollovers
			 //$(".specsBtn").live("mouseenter", function() {
			$("#soldThumbs li.sh").live("mouseenter", function() {
					// $("#soldThumbs li:hover a img").stop().animate( { "opacity" : 0 }, 200);
					$(this).find("img").stop().animate( { "opacity" : 0 }, 200);
			     }).live("mouseleave", function() {
			 		$("#soldThumbs li.sh img").stop().animate( { "opacity" : 1 }, 200);
			});
			
			$("#woodsideBack").hide();
			$("#soldSpecsView .backBtn").show();
		 
		 	//click back button and enter thumbs view
			$(".backBtn").click(function(){
				$("#soldSpecsView").fadeOut(200, function(){$("#soldThumbsView").fadeIn(200);});
				$("#portfolio-ani, #soldThumbs").empty();
				$('#portfolio-ani').clearQueue();
				//$('#portfolio-ani').cycle("destroy");
			});
		  
		  break;
		 case "inProgress":	
			 // clear out the thumbnails that are there
			 $("#hoverThumbs").empty();	
			 $("#hoverThumbs").empty();	
			 
			// get home info from json
			getInProgressHomes();
			
			//always show the thumbnail view first
			$("#thumbsView").show();
			$("#specsView").hide();
							 
			// hide the home preview on the right
		 	$("#showHome").animate({"opacity" : 0}, 0);
			
		 	// thumbnail view button rollovers
			$(".homeBtn").live("mouseenter", function() {
				 $("img", this).stop().animate( { "opacity" : 0 }, 200);
				// populate the right side home preview
				 btnId = $(this).attr("id");
				 populateHomePreview(btnId, currPage);
				 // fade in home preview
				 $("#showHome").stop().animate( { "opacity" : 1 }, 200);
				 
				}).live("mouseleave", function() {
			 	$(".homeBtn img").stop().animate( { "opacity" : 1 }, 200);
				$("#showHome").stop().animate( { "opacity" : 0 }, 200);
				$("#showHome").empty();
			});
			
			// specs view button rollovers
			$(".specsRollover").live("mouseenter", function() {
					 //$(".specsRollover:hover img").stop().animate( { "opacity" : 0 }, 200);
					 $(this).find("img").stop().animate( { "opacity" : 0 }, 200);
			     }).live("mouseleave", function() {
			 		$("div.specsRollover img").stop().animate( { "opacity" : 1 }, 200);
			});
			
			// click the specs thumb buttons to browse images
			 $(".specsBtn").live("click", function() {
				  	var currSpec = $(this).attr("id");
					specsBrowse(btnId, currSpec);
					
					$("#zoomHover").hide();
					// update specs thumbnails (show active in color)
					$(".activeSpec img").animate( { "opacity" : 1 }, 200);
					$(".specsBtn").removeClass("activeSpec").addClass("specsRollover");
					$(this).addClass("activeSpec").removeClass("specsRollover");
					$(".activeSpec img").animate( { "opacity" : 0 }, 200);
			 });
				
			// zoom button uses lightbox 2 plugin
			$('#zoomHover a').lightBox({overlayBgColor: '#FFF'});
			
				// specs view zoom button rollovers
			 $("#zoomHover").hover(function() {   
				 $("img", this).stop().animate( { "opacity" : 0 }, 200);
				}, function() {
			 	$("#zoomHover img").stop().animate( { "opacity" : 1 }, 200);
			});	
			
			//click thumb and enter specs view
			$(".ipClick").die().live("click", function(){
				var clickedHome = $(this).attr("id");
				ip_home(clickedHome)
			})
		 
		 		//click back button and enter thumbs view
			$("#ipBackBtn").click(function(){
				$("#specsView").fadeOut(200, function(){$("#thumbsView").fadeIn(200);});
			});
			
			
			
		// woodside hack
			 $("#woodsideBridge").live("click", function() {
					woodsideBridge();
				 });
		
			
		 
		  break;
		case "contact":
		// hide form error message 
		$("#validation").hide();
		$("#fname").attr("value","*First Name");
		$("#lname").attr("value","*Last Name");
		$("#email").attr("value","*Email Address");
		
		  break;
		case "designCenter":
			// start the slideshow
			$("#designCenter-ani").clearQueue();
			$("#designCenter-ani").cycle("fade"); 
		  break;
		default:
		  
		}
		
		});
	
	//header links
	$("#clientAccess, .newsletterBtn, .miltonBtn").click(function(){
		navClicked = $(this).attr("id");
		$("#content #"+currPage+"Pg:visible").fadeOut(100, function(){ $("#"+navClicked+"Pg").fadeIn(); });
		// remove active classes from page being left
		$("#"+currPage+"").removeClass("activePg activeBtn");
		$("#"+currPage+"").animate( { "opacity" : .5 }, 200);
		$("#"+currPage+"").addClass("btn");
		// add active class to the page and clicked button
		$("#"+navClicked+"").animate( { "opacity" : 1 }, 200);
		$("#"+navClicked+"").addClass("activePg activeBtn");
		$("#"+navClicked+"").removeClass("btn");
		 currPage = navClicked;
	});
	
	
	
	// CONTACT FORM -------------------------------------------------------------------------------------------------------------------
			// Place ID's of all required fields here.
			required = ["fname", "lname", "email"];
			// If using an ID other than #email or #error then replace it here
			email = $("#email");
			// The text to show up within a field when it is incorrect
			emptyerror = "Please fill all required fields";
			emailerror = "Please enter a valid e-mail.";
			
			$(".contactBtn").click(function(){
				//Validate required fields
				for (i=0;i<required.length;i++) {
					var input = $('#'+required[i]);
					if ((input.val() == "") || (input.val() == "*First Name") || (input.val() == "*Last Name") || (input.val() == "*Email Address")) {
						$("#validation").text(emptyerror);
						$("#validation").fadeIn(250);
						$('#'+required[i]).addClass("needsfilled");
					} else {
						input.removeClass("needsfilled");
					}
				}
				
				// Validate the e-mail.
				if (!/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
					email.addClass("needsfilled");
					$("#validation").text(emailerror);
					$("#validation").fadeIn(250);
					//email.val(emailerror);
				}
				
					//if any inputs on the page have the class 'needsfilled' the form will not submit
				if ($(":input").hasClass("needsfilled")) {
					return false;
				} else {
					$("validation").fadeOut(100);
					send_email();
					return true;
				}
				
				
				
			});
	
	// clear textfield
	$(":input").focus(function(){	
					$(this).val("");	
				   if ($(this).hasClass("needsfilled") ) {
						$(this).val("");
						$(this).removeClass("needsfilled");
				   }
				});
	
	// send data to php and refresh form area with ajax
	function send_email() {

		var data_fname = $("#fname").attr("value");
		var data_lname = $("#lname").attr("value");
		var data_email = $("#email").attr("value");
		var data_msg = $("#message").attr("value");
		var dataString = 'name= '+ data_fname + ' ' + data_lname + '&email= ' + data_email + '&message= ' + data_msg;  
		//alert (dataString);return false;  
		$.ajax({  
		  type: "POST",  
		  url: "send_email.php",  
		  data: dataString,  
		  success: function() {  
			$('#contactWrapper').html("<div id='message'></div>");  
			$('#message').html("<div class='contactConfirm'>Your request has been sent</div>");
		  }  
		}); 
		return false;  
	}
	
	// end contact form
	
	// IN PROGRESS SECTION ----------------------------------------------------------------------------------------------------------
	// show in progress specs
	function ip_home(i) {
		// clear the elements to be populated
		$("#specsList, #specsLeft, #homeType").remove();
		
		// populate thumbnail buttons
		$("#thumbsView").fadeOut(200, function(){	
			//set up stationary elements
			$("#specsView").prepend("<div id='specsList'><div class='darkTxt'>"+json.ipHomes[i].stAddrs+"</div><br />"+json.ipHomes[i].specsTxt+"</div><div id='specsLeft'><div id='specsImg' style='background-image:url(img/inProgress/"+json.ipHomes[i].specsImg[0].fullSize+")'>&nbsp;</div><div id='specsThumbs'></div><div id='homeType'>"+json.ipHomes[i].styleDesc+"</div></div>");
		
			// get total number of specs images
			var numThumbs = 0;
			$.each(json.ipHomes[i].specsImg, function() { numThumbs++ });
			
			//create thumbnails
			var j = 0;
			for (j=0; j < numThumbs; j++) {
				$("#specsThumbs").append("<div class='specsBtn specsRollover' id='"+j+"' style='background-image:url(img/inProgress/"+json.ipHomes[i].specsImg[j].specThumbColor+")'><img src='img/inProgress/"+json.ipHomes[i].specsImg[j].specThumbBW+"' width='35' height='35' alt='"+json.ipHomes[i].stAddrs+"' title='"+json.ipHomes[i].stAddrs+"' /></div>");
				
				// SET THE FIRST THUMB TO ACTIVE
				if (j == 0) {
					$(".specsBtn").addClass("activeSpec").removeClass("specsRollover");
					$(".specsBtn img").animate( { "opacity" : 0 }, 200);
				}
			}	
			// fade in	
			$("#specsView").fadeIn(200);
		});
	}
	
	
	
	
	function specsBrowse(i, k) {
		bgImg = "url(img/inProgress/"+json.ipHomes[i].specsImg[k].fullSize+")";
		zoomTxt = "img/inProgress/"+json.ipHomes[i].specsImg[k].zoom;
		
		$("#specsImg").fadeOut(200, function(){
			if (json.ipHomes[i].specsImg[k].zoom != "none") {
					$("#zoomHover a").attr("href", zoomTxt);
					$("#zoomHover").show();
			} else {
					$("#zoomHover").hide();
			}
			
			// HACK FOR 9 WOODSIDE
			if (json.ipHomes[i].specsImg[k].zoom == "click") {
					$("#zoomHover").hide();
			}
			// HACK FOR 9 WOODSIDE
			if (json.ipHomes[i].specsImg[k].zoom == "click") {
				$("#specsImg").html("<img src='img/transparent.png' width='480px' height='320px' id='woodsideBridge'>");
			} else {
				$("#specsImg").html(" ");
				}
			
			$(this).css("background-image", bgImg).fadeIn(200);
		});
		
	}
	

		// get infor for in progress homes
	  function getInProgressHomes(){
		  //  function getInProgressHomes(callback){ OLD 
		json = $.getJSON("../data/inProgress.json", function(homeData){
				json = homeData;
				
				// get total number of homes
				numHomes = 0;
				$.each(json.ipHomes, function() { numHomes++ });
				
				//create thumbnails all avialable homes
				var i = 0;
				for (i=0; i < numHomes; i++) {
					// thumbnails
					$("#hoverThumbs").append("<div class='homeBtn ipClick' id='"+i+"' style='background-image:url(img/inProgress/"+json.ipHomes[i].thumbRollover+")'><img src='img/inProgress/"+json.ipHomes[i].thumbImg+"' width='75' height='75' alt='"+json.ipHomes[i].stAddrs+"' title='"+json.ipHomes[i].stAddrs+"' /></div>");
					
				}
				 
			});  
	  }
	  
	  // populate the home preview on the right
	  function populateHomePreview(i, crPg) {
		  if (crPg == "inProgress") {
			  // In Progress home preview
		  $("#showHome").html(" <img src='img/inProgress/"+json.ipHomes[i].specsImg[0].fullSize+"' width='470' height='244' alt='"+json.ipHomes[i].stAddrs+"' title='"+json.ipHomes[i].stAddrs+"' /><div id='homeAddrss'>"+json.ipHomes[i].stAddrs+"</div><div id='homeDesc'>"+json.ipHomes[i].styleDesc+"</div><div id='homeBlurb'>"+json.ipHomes[i].homeBlurb+"</div>")
		} else if (crPg == "portfolio") {
			// Portfolion home preview
			 $("#showSold").html(" <div id='previewImg' style='background-image:url(img/sold/"+jsonSold.soldHomes[i].showImgs[0].fullSize+")'/>&nbsp;</div><div id='soldDesc'>"+jsonSold.soldHomes[i].styleDesc+"</div>");
			}
	  }
		
		
		// PORTFOLIO SECTION ----------------------------------------------------------------------------------------------------------
		
		// get info for sold homes
		function getSoldHomes() {
			jsonSold = $.getJSON("../data/sold.json", function(soldData){
				jsonSold = soldData;
				
				// get total number of homes
				numHomes = 0;
				$.each(jsonSold.soldHomes, function() { numHomes++ });
				
				var i = 0;
				for (i=0; i < numHomes; i++) {
				  $("#soldHoverThumbs").append("<div class='soldHomeBtn soldClick ph"+i+"' id='"+i+"' style='background-image:url(img/sold/"+jsonSold.soldHomes[i].thumbRollover+")'><img src='img/sold/"+jsonSold.soldHomes[i].thumbImg+"' width='110' height='90' alt='"+jsonSold.soldHomes[i].styleDesc+"' title='"+jsonSold.soldHomes[i].styleDesc+"' /></div> ");
				  
				  	// sort homes into sold and for sale lists
					var soldStatus = jsonSold.soldHomes[i].soldStatus;
					if(soldStatus == "sold") {
						  $("#soldList").append("<li class='ph"+i+"' style='opacity: 0.5;'>"+jsonSold.soldHomes[i].displayAddrs+"</li>");
					} else {
						
						 $("#saleList").append("<li  class='ph"+i+"'  style='opacity: 0.5;'>"+jsonSold.soldHomes[i].displayAddrs+"</li>");
					}
				  
				}
				$("#soldList li, #saleList li").stop().animate( { "opacity" : .5 }, 0);
			});
		}
	
		
	// show sold specs
	function sold_home(i) {
		$("#portfolio-ani, #soldThumbs").empty();
		
		//set up stationary elements
		$("#soldSpecsDesc").text(""+jsonSold.soldHomes[i].styleDesc+"");
		
		// get total number of specs images
		var numThumbs = 0;
		$.each(jsonSold.soldHomes[i].showImgs, function() { numThumbs++ });
		
		//show sold thumbs in two cols if more than 12
		if (numThumbs < 13) {
			$("#soldThumbs").removeClass("doubleCol");
		} else {
			$("#soldThumbs").addClass("doubleCol");
		}
		
		
		// populate slideshow with fullsize images
		var j = 0;
		for (j=0; j < numThumbs; j++) {
			//remove file extension to get thumb select key
			var fileName = jsonSold.soldHomes[i].showImgs[j].fullSize;
 			 fileName = fileName.substring(0, fileName.indexOf('.'))+"_sm";
			 // add fullsize image
			$("#portfolio-ani").append("<img src='img/sold/"+jsonSold.soldHomes[i].showImgs[j].fullSize+"' alt='"+fileName+"' width='650' height='375' />")
		}
		
		
		$("#soldThumbsView").fadeOut(200, function(){
			//clear out 
			
			//set up spec view
			$("#soldSpecsView").fadeIn(200);
			
			// redefine Cycle's updateActivePagerLink function 
			$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
				//animate fade in and out of active pager item
				var prevSlideIndex = currSlideIndex - 1;
				$(pager).find('li').addClass("sh").removeClass('activeLI').filter('li:eq('+currSlideIndex+')').removeClass("sh").addClass('activeLI'); 
				$(pager).find('li img').animate( { "opacity" : 1 }, 500);
				$(pager).find('li img:eq('+currSlideIndex+')').animate( { "opacity" : 0 }, 500);
			}; 
		
			
			// start slideshow	 
			$('#portfolio-ani').cycle({ 
				timeout: 3000, 
				pager:  '#soldThumbs', 
				pagerAnchorBuilder: function(idx, slide) { 
					var thColor = slide.alt+"-color.jpg";
					var thBW = slide.alt+"-bw.jpg";
					//add pager with image name from the alt text
					return '<li class="sh" style="background-image:url(img/sold/'+ thColor +')"><a href="#"><img src="img/sold/' + thBW + '" /></a></li>'; 
				}
			}); 
			
			$('#soldThumbs').hide();
			$('#soldThumbs').waitForImages(function() {
				$(this).fadeIn(300);
			});
			
		});
	}
		
	
		
	function woodsideBridge() {
		navClicked = "portfolio";
		currPage = "inProgress"
		
		//fade out visible page and then fade in the page that was clicked from the nav
		$("#content #"+currPage+"Pg:visible").fadeOut(100, function(){ $("#"+navClicked+"Pg").fadeIn(); });
		$("#"+currPage+"").removeClass("activePg activeBtn");
		$("#"+currPage+"").animate( { "opacity" : .5 }, 200);
		//$("#"+currPage+"").addClass("btn");
		
		// add active class to the page and clicked button
		$("#"+navClicked+"").animate( { "opacity" : .5 }, 200);
		$("#"+navClicked+"").removeAttr("style", "filter");
		$("#"+navClicked+"").addClass("activePg activeBtn");
		//$("#"+navClicked+"").removeClass("btn");
		 currPage = navClicked;
		
		//set up portfolio section to open with woodside
		jsonWoodside = $.getJSON("../data/sold.json", function(woodsideData){
		jsonWoodside = woodsideData;
		
		var w = 0;
		$("#portfolio-ani, #soldThumbs").empty();
		
		//set up stationary elements
		$("#soldSpecsDesc").text(""+jsonWoodside.soldHomes[w].styleDesc+"");
		
		// get total number of specs images
		var numThumbs = 0;
		$.each(jsonWoodside.soldHomes[w].showImgs, function() { numThumbs++ });
				  
		// populate slideshow with fullsize images
		var j = 0;
		for (j=0; j < numThumbs; j++) {
			//remove file extension to get thumb select key
			var fileName = jsonWoodside.soldHomes[w].showImgs[j].fullSize;
 			 fileName = fileName.substring(0, fileName.indexOf('.'))+"_sm";
			 // add fullsize image
			$("#portfolio-ani").append("<img src='img/sold/"+jsonWoodside.soldHomes[w].showImgs[j].fullSize+"' alt='"+fileName+"' width='650' height='375' />")
		}
		
			$("#soldThumbs").addClass("doubleCol");

		
			
			
			$("#soldThumbsView").hide();
			//clear out 
			//set up spec view
			$("#soldSpecsView").fadeIn(200);
			
			// redefine Cycle's updateActivePagerLink function 
			$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
				//animate fade in and out of active pager item
				var prevSlideIndex = currSlideIndex - 1;
				$(pager).find('li').addClass("sh").removeClass('activeLI').filter('li:eq('+currSlideIndex+')').removeClass("sh").addClass('activeLI'); 
				$(pager).find('li img').animate( { "opacity" : 1 }, 500);
				$(pager).find('li img:eq('+currSlideIndex+')').animate( { "opacity" : 0 }, 500);
			}; 
		
			
			// start slideshow	 
			$('#portfolio-ani').cycle({ 
				timeout: 3000, 
				pager:  '#soldThumbs', 
				pagerAnchorBuilder: function(idx, slide) { 
					var thColor = slide.alt+"-color.jpg";
					var thBW = slide.alt+"-bw.jpg";
					//add pager with image name from the alt text
					return '<li class="sh" style="background-image:url(img/sold/'+ thColor +')"><a href="#"><img src="img/sold/' + thBW + '" /></a></li>'; 
				}
			}); 
			
			$("#woodsideBack").show();
			$("#soldSpecsView .backBtn").hide();
			
			$('#soldThumbs').hide();
			$('#soldThumbs').waitForImages(function() {
				$(this).fadeIn(300);
			});
			
			//change class on back button
			
			//$("#soldSpecsView .bottomInfo > .btn").removeClass("backBtn").addClass("woodsideBack");
			
				
			/// BACK BUTTON
			$("#woodsideBack").click(function(){
					$(this).hide();
					$("#soldSpecsView .backBtn").show();	
					//$("#soldSpecsView .bottomInfo .btn").removeClass("woodsideBack").addClass("backBtn");
					
					$("#portfolioPg").fadeOut(200, function(){
						$("#inProgressPg #thumbsView").hide();
						$("#portfolio-ani, #soldThumbs").empty();
						$('#portfolio-ani').clearQueue();
						$("#inProgressPg").fadeIn();
						
						navClicked = "inProgress";
						currPage = "portfolio";
						
						//fade out visible page and then fade in the page that was clicked from the nav
						$("#content #"+currPage+"Pg:visible").fadeOut(100, function(){ $("#"+navClicked+"Pg").fadeIn(); });
						$("#"+currPage+"").removeClass("activePg activeBtn");
						$("#"+currPage+"").animate( { "opacity" : .5 }, 200);
						//$("#"+currPage+"").addClass("btn");
						
						// add active class to the page and clicked button
						$("#"+navClicked+"").animate( { "opacity" : .5 }, 200);
						$("#"+navClicked+"").removeAttr("style", "filter");
						$("#"+navClicked+"").addClass("activePg activeBtn");
						//$("#"+navClicked+"").removeClass("btn");
						 currPage = navClicked;
					});
					
				});
				
				
		
		});
	
	}	
		
		
		
		
	
	//// end of it all
});
