$(document).ready(function() {

	 $('#controls a, #tabs a').click(function() {
 	 return false; // Cancel default behaviour of anchor.
	 });


	// Get the class attribute of selected tab and pass the value to our function.
	 $('#tabs a').click(function() {
	 var selTab = $(this);

     if (selTab.hasClass("orange")) {changePanel("#panel1");}
     if (selTab.hasClass("blue")) {changePanel("#panel2");}
     if (selTab.hasClass("purple")) {changePanel("#panel3");}
	 });
    // -----------------------------------------------------------------------

	$('nav a').click(function() {
	 var curClick = $(this);
	 $("#tabs a").removeClass("active");

	 if (curClick.attr("title") == "home") {
	 changePanel("#panel1");
	 $("#tabs a.orange").addClass("active"); // Change "tabs" class.
	 }
     
     if (curClick.attr("title") == "services") {
	 changePanel("#panel2");
	 $("#tabs a.blue").addClass("active");
	 }
	 
	 if (curClick.attr("title") == "our work") {
	 changePanel("#panel3");
     $("#tabs a.purple").addClass("active");
	 }
	
	// need to add class to nav item to indicate active state.
	
	$(this).parents("li").siblings().removeClass("active");
	curClick.parents("li").addClass("active");
	
	// create logic for condition "if home page" return false, don't refresh page. Otherwise, yes, we need the prefix index.php to hash tag
	
	 });
    // -----------------------------------------------------------------------


 
    // Panel behaviour when a tab is selected. 
	function changePanel(showPanel) {
   
	   	   var hideEls = $("header, #tabs");
		   var showPanel = showPanel;
		   var curPanel = $(".panel.cur");
		   var panels = $(".panel");
		   var inactivePanels = $(".panel:not(.cur)");
		   var controls = $("#controls");
   
		   var panelHeight = panels.height(); // Retrieve height of panels.
		   panelHeight = "-" + panelHeight; // Concatenate negate operator to number.
		   panelHeight = parseFloat(panelHeight); // Change type from str. to number. 
   

		   /* --------------------------------------------------------------------
		   The following declaration serves to pull any 
		   inactive panel off-screen by 100%. 
		   ------------------------- > */ inactivePanels.css("top" , panelHeight);
   
		   controls.slideUp(); // Controls seen on panel2.
   
		   panels.removeClass("cur");

		   $(showPanel).addClass("cur");
   
           curPanel.css("z-index", "3");
		
		   $(showPanel).css("z-index", "4").animate({"top" : "0"}, 2000, 'easeOutBounce', resetStack);

		   function resetStack() {
     		 
		     $(showPanel).siblings().css({"top" : panelHeight});
		     if (showPanel == "#panel2") {controls.slideDown();}
     
		   } // < End resetStack();
   
	} // < End changePanel();
 
 	changePanel("#panel1");
	// -----------------------------------------------------------------------
	
	
	
	// When user hovers over image, (our work) put focus on anchor / button.
	$("#panel3 img").hover(function() {
	var btn = $(this).parents(".col").siblings().children().children(".btn");
	btn.animate({"opacity" : "0.6"}, 500);
	}, function() {
	var btn = $(this).parents(".col").siblings().children().children(".btn");
	btn.animate({"opacity" : "1"});
	});
	
	
	
	// -----------------------------------------------------------------------
	
	
	
	// Controls for "our work" panel.
	$("#controls2 a").click(function() {
	
	$("#controls2 a").removeClass("cur");
	$(this).addClass("cur");
	$("#panel3 article.cur").removeClass("cur"); // Remove class for cur. folio piece
	
	var articles = $("#panel3 article");
	var itemNum = $(this).parents("li").index();
	
	if (itemNum == "0") {articles.eq(0).addClass("cur");}
	if (itemNum == "1") {articles.eq(1).addClass("cur");}
	if (itemNum == "2") {articles.eq(2).addClass("cur");}
	
	});
	
	
	
	// -----------------------------------------------------------------------
	
	
	
	
	// Dropdown smooth transition.
	$("nav .dropdown").hover(function() {
	var dropdown = $(this).children(".dropdown");
	dropdown.hide();
	dropdown.stop(true,true).slideDown();
	}, function() {
	var dropdown = $(this).children(".dropdown");
	dropdown.stop(true,true).slideUp();
	});
	
	
	
	
	// -----------------------------------------------------------------------
	
	
	//If there is a hashtag in url suffix, force click event. 
	// $('#target').click();
	
	//we need to get uri.
	
	var services = $("nav li:nth-child(4)");
	var ourwork = $("nav li:nth-child(5)");
	
	if(window.location.hash == "#services") {
	
	  $('#tabs a.blue').click();
	  $("nav li").removeClass("active");  
	  services.addClass("active");
	  changePanel("#panel2");
	
	} else if (window.location.hash == "#our-work") {
		
	  $('#tabs a.purple').click();
	  ourwork.addClass("active");
	
	} else {
	//
	}


});