<!-- It is important to change the elements indicated below to match your environment. There are also some IDs in the form elements to help--if you change them, you must also change them in the JavaScript -->

<!-- Tabs: html/css that controls the display of the tabs. The data-lib-tab coincides with if tab == in the JS, changes here would need to be reflected in the JS.  -->
<ul class="nav nav-tabs">
  <li class="active"><a class="lib-tab" href="#onesearch" data-lib-tab="everything">Everything</a></li>
  <li><a class="lib-tab" href="#books" data-lib-tab="books">Books</a></li>
  <li><a class="lib-tab" href="#textbooks" data-lib-tab="textbooks">Course Reserves</a></li>
  <li><a class="lib-tab" href="#articles" data-lib-tab="articles">Articles</a></li>
  <li><a class="lib-tab" href="#dvds" data-lib-tab="dvds">DVDs</a></li>
</ul>



  
  
<div class="tab-content">

	 
	 <!-- Script that converts the query string into valid parameter -->
	<script>
		function searchPrimo() {
		document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
		}
	</script>
	
	<!-- change domain of  URL below to match yours -->
	<form  id="simple" name="searchForm" method="get" target="_blank" action="https://caccl-deanza.primo.exlibrisgroup.com/discovery/search" onsubmit="searchPrimo()">
		
		<!-- Search box -->
		<div class="input-group input-group-lg" style="width: 100%;">
			<label for="primoQueryTemp" style="color:#fff;background-color:#000;" class="hidden">Search Text</label>
			<input aria-label="OneSearch for Articles, Books, and more" class="form-control" type="text" id="primoQueryTemp" value="" placeholder="Find Everything">
			   
			<!-- Hidden Fields, these are the initial settings, are updated dynamically when different tabs are clicked on-->
			<!-- Customizable Parameters CHANGE THESE for your school -->
			<input type="hidden" name="vid" value="01CACCL_DEANZA:DEANZA">
			<input type="hidden" name="tab" value="Everything">
			<input type="hidden" name="search_scope" value="MyInst_and_CI">
			
			<!-- Fixed parameters DON'T CHANGE THESE -->
			<input type="hidden" name="mode" value="basic">
			<input type="hidden" name="displayMode" value="full">
			<input type="hidden" name="bulkSize" value="10">
			<input type="hidden" name="highlight" value="true">
			<input type="hidden" name="dum" value="true">
			<input type="hidden" name="query" id="primoQuery">
			<input type="hidden" name="displayField" value="all">
			<input type="hidden" name="pcAvailabiltyMode" value="true">
		   
			<!-- Search Button -->
			<div class="input-group-btn">
				<button class="btn light no-icon-after" id="go" onclick="searchPrimo()">Search</button>
			</div>
		   
		</div>
	
	</form>
</div>

<script>
//JavaScript to change the tabs and dynamically update the hidden based on selected tab
	$( document ).ready(function() {
		$(".lib-tab").on("click", function(e){
			e.preventDefault();
			$("#simple input[type='hidden']").remove();
			$('<input>', {type: 'hidden',name: 'query', id: 'primoQuery'}).appendTo('#simple');
			
			// update your 'vid' code here
			add_hidden_field("vid","01CACCL_DEANZA:DEANZA");
			add_hidden_field("pcAvailabiltyMode","true");
			var tab = $(this).data("lib-tab");
			update_tabs($(this).closest("li"));
			
			// update each of these tabs to reflect the different scopes, tabs, etc. need to match data-lib-tab in tabs  
			if( tab == "everything") {
				$("#primoQueryTemp").attr("placeholder","Find Everything");
				add_hidden_field("tab","Everything");
				add_hidden_field("search_scope", "MyInst_and_CI");
				add_hidden_field("mode", "basic");
				add_hidden_field("displayMode", "full");
				add_hidden_field("bulkSize", "10");
				add_hidden_field("highlight", "true");
				add_hidden_field("dum", "true");
				add_hidden_field("displayField", "all");
			} else if(tab == "books") {
				$("#primoQueryTemp").attr("placeholder","Find Books");
				add_hidden_field("tab","Everything");
				add_hidden_field("search_scope", "MyInst_and_CI");
				add_hidden_field("displayField", "all");
				add_hidden_field("mfacet", "rtype,include,books,1");
				add_hidden_field("mfacet", "rtype,include,book_chapters,1");
			} else if(tab == "textbooks") {
				$("#primoQueryTemp").attr("placeholder","Find Textbooks");
				add_hidden_field("tab","CourseReserves");
				add_hidden_field("search_scope", "CourseReserves");
				add_hidden_field("displayField", "all");
			} else if(tab == "articles") {
				$("#primoQueryTemp").attr("placeholder", "Find Articles");
				add_hidden_field("tab","Everything");
				add_hidden_field("search_scope", "MyInst_and_CI");
				add_hidden_field("displayField", "all");
				add_hidden_field("mfacet", "rtype,include,articles,1");
				add_hidden_field("mfacet", "rtype,include,newspaper_articles,1");
			} else {
				$("#primoQueryTemp").attr("placeholder","Find DVDs");
				add_hidden_field("tab","FindDVDs");
				add_hidden_field("search_scope", "FindDVDs");
				add_hidden_field("displayField", "all");
			}
		});
	});

	function update_tabs(el) {
		$(el).addClass("active");
		$(el).siblings().removeClass("active");
	}

	function add_hidden_field(el_name, el_value){
		$('<input>', {type: 'hidden',name: el_name,value: el_value}).appendTo('#simple');
	}
</script>