Help back engineering sort by and items per page dropdown - jQuery

[HDFilmMaker2112]

I'm trying to back engineer the sort by and items per page drop down menus on this website:

 

http://www.bhphotovideo.com/c/buy/Music-Production-Software/ci/14793/N/4294550038

 

 

I found their javascript file:

 

function setItemsPerPage(form, itemsPerPage) {
form.itemsPerPage.value = itemsPerPage;
form.submit();
}
function setSortBy(form, sortBy) {
form.sortBy.value = sortBy;
form.submit();
}

$(document).ready(function(){

$(".jqDropDownLayer").bhLayer({
openerSelector:"sibling .jqDropDownOpener",
	closerSelector: "label",
	modal: true
}).bind("onBeforeShow", function(){
	$(this).siblings(".jqDropDownOpener").addClass("darker1");
	$(".productBlock:first").css("z-index","-1");
}).bind("onAfterHide", function(){
	$(this).siblings(".jqDropDownOpener").removeClass("darker1");
	$(".productBlock:first").css("z-index","0");
});
$(".jqDropDown").mouseleave(function(){
var hideLayer = $(this).find(".jqDropDownLayer");
if(hideLayer.hasClass("openBhLayer")) hideLayer.bhLayer("hide");
});

});

 

 

This is their HTML/CSS:

<script type="text/javascript" src="/FrameWork/js/sortby.js"> </script>
           
<form name="sortBy" method="get" action="http://www.bhphotovideo.com/c/search" style="float: left;" class="jqDropDown">
	<input type="hidden" name="Ns" id="sortBy" value="" />
   <div class="sortMain"><div class="sortby1 jqDropDownOpener"><a><label class="sortDisplay">Relevance
   
   </label><span>Sort by:</span></a></div>
   
	   <input type="hidden" name="ci" value="14793" />

	   <input type="hidden" name="N" value="4294550038" />


<div class="sortby2 jqDropDownLayer">
<ul>

<li><a><label onClick="setSortBy(this.form,'')">Relevance</label></a></li>
<li><a><label onClick="setSortBy(this.form,'p_PRICE_2|0')">Price: Low to High</label></a></li>
<li><a><label onClick="setSortBy(this.form,'p_PRICE_2|1')">Price: High to Low</label></a></li>
<li><a><label onClick="setSortBy(this.form,'p_PRODUCT_SHORT_DESCR|0')">Brand: A to Z</label></a></li>
<li><a><label onClick="setSortBy(this.form,'p_PRODUCT_SHORT_DESCR|1')">Brand: Z to A</label></a></li>
<li><a><label onClick="setSortBy(this.form,'p_OVER_ALL_RATE|1')">Top Rated</label></a></li>

</ul>
</div>
</div>

	<noscript>
		 <input type="image" src="/images/searcharrow.gif" border=0 name="image" alt="Search" align="absmiddle" hspace="2">
	</noscript>
</form>

<form method="get" action="http://www.bhphotovideo.com/c/search" style="float: left;" class="jqDropDown" >
	<input type="hidden" name="ipp" id="itemsPerPage" value="" />
	<div class="displayMain"><div class="display1 jqDropDownOpener"><a><label class="sortDisplay">75</label><span>Display:</span></a></div>


		<input type="hidden" name="ci" value="14793" />

		<input type="hidden" name="N" value="4294550038" />


	<div class="display2 jqDropDownLayer">	
	<ul>

	  <li><a><label onClick="setItemsPerPage(this.form,25);">25</label></a></li>

	  <li><a><label onClick="setItemsPerPage(this.form,50);">50</label></a></li>

	  <li><a><label onClick="setItemsPerPage(this.form,75);">75</label></a></li>

	  <li><a><label onClick="setItemsPerPage(this.form,100);">100</label></a></li>


	</ul>
	</div>
	</div>

</form>

 

Could I get an overview of what's doing what here? I've never used jQuery before.

 

Basically in the end I want it to function where it says:

 

Display: then a drop down of numbers; just like they have.

[Adam]

You want us to write a tutorial for you on how to create those menus?