﻿jQuery.fn.chkboxfilter = function(items, settings) {
	// by extending the default settings, we don't modify the argument
	settings = jQuery.extend({
		filters: null,
		checked: true,
		itemsPerPage: 12
	}, settings);

/*
<div id="catFilters">
	<div id="pageLnks">
		<span id="curPageInfo"></span>
		<a class="prevPgLnk" style="padding-left:10px" href="#"><img src="/images/icons/prev-disabled.gif" alt="Previous Page" /></a>
		<a class="nextPgLnk" href="#"><img src="/images/icons/next-disabled.gif" alt="Next Page" /></a>
	</div>
	
	<input id="studentHousingChk" name="studentHousingChk" type="checkbox" checked="checked" /><label for="studentHousingChk">Student Housing</label>
	<input id="higherEdChk" name="higherEdChk" type="checkbox" checked="checked" /><label for="higherEdChk">Higher Education</label>
	<input id="k12Chk" name="k12Chk" type="checkbox" checked="checked" /><label for="k12Chk">K-12 Education</label>
</div>

*/
	var curPage = 1;
	var numPages = 1;
	var visibleItemsCnt = 0;
	
	// create filter elements (checkboxes and labels)
	if (settings.filters)
	{
		var chkBoxWrapper = document.createElement("div");
		chkBoxWrapper.setAttribute("id", "chkBoxWrapper");
		
		for (var i = 0; i < settings.filters.length; i++)
		{
			var chkBox = document.createElement("input");
			chkBox.setAttribute("id", "chkBoxFilter" + i);
			chkBox.setAttribute("name", "chkBoxFilter" + i);
			chkBox.setAttribute("type", "checkbox");
			chkBox.setAttribute("title", settings.filters[i]);
			$(chkBoxWrapper).append(chkBox);
			
			var chkBoxLabel = document.createElement("label");
			chkBoxLabel.setAttribute("for", "chkBoxFilter" + i);
			chkBoxLabel.innerHTML = settings.filters[i];
			$(chkBoxWrapper).append(chkBoxLabel);
		}
		
		$(this).append(chkBoxWrapper);
	}
	
	// page links (all elements are floated right, so elements are inserted in backwards order
	var pageLnksDiv = document.createElement("div");
	pageLnksDiv.className = "pageLnks";
	
	var nextPageAnchorElem = document.createElement("a");
	nextPageAnchorElem.setAttribute("id", "nextPageLnk");
	nextPageAnchorElem.setAttribute("href", "#");
	$(pageLnksDiv).append(nextPageAnchorElem);
	
	var prevPageAnchorElem = document.createElement("a");
	prevPageAnchorElem.setAttribute("id", "prevPgLnk");
	prevPageAnchorElem.style.paddingLeft = "10px";
	prevPageAnchorElem.setAttribute("href", "#");
	$(pageLnksDiv).append(prevPageAnchorElem);
	
	var curPageSpanElem = document.createElement("span");
	curPageSpanElem.className = "curPageInfo";
	$(pageLnksDiv).append(curPageSpanElem);
	
	$(this).append(pageLnksDiv);
	
	var curPageInfo = $(curPageSpanElem);
	var prevPageLnk = $(prevPageAnchorElem);
	var nextPageLnk = $(nextPageAnchorElem);
	
	var chkBoxFilters = $(this).find("input");

	// all items start off visible
	items.each(function() {
		$(this).addClass("visible");
	});
	visibleItemsCnt = items.length;
	numPages = Math.ceil(visibleItemsCnt / settings.itemsPerPage);
	numPages = (numPages < 1) ? 1 : numPages;
	
	// start off on page 1
	changePage(curPage);
	/* label "for" doesn't link w/ checkbox in IE.. below doesn't work
	chkBoxLabels.each(function() {
		$(this).click(function (event) {
			$(this).prev().click();
		});
	});*/
	
	// when category filter checkboxes are clicked
	chkBoxFilters.each(function() {
		if (settings.checked) $(this).attr("checked", "checked");
		else $(this).removeAttr("checked");
			
		$(this).click(function (event) {
			//$("#test").append("<br />" + $(this).is(':checked') + " : " + curPage);
			var clickedCategory = $(this).attr("title");
			
			// set checkbox label style and show/hide projects
			if ($(this).is(':checked')) 
			{
				$(this).next().css("font-weight", "bold");
				
				items.each(function() {
					if (clickedCategory == $(this).attr("rel"))
						$(this).addClass("visible");
				});
			}
			else 
			{
				$(this).next().css("font-weight", "normal");
				items.each(function() {
					if (clickedCategory == $(this).attr("rel"))
						$(this).removeClass("visible");
				});
			}
			
			// count the number of projects that are still visible
			visibleItemsCnt = 0;
			items.each(function() {
				if ($(this).hasClass("visible"))
					visibleItemsCnt++;
			});
			
			numPages = Math.ceil(visibleItemsCnt / settings.itemsPerPage);
			numPages = (numPages < 1) ? 1 : numPages;
			
			// reset to first page
			curPage = 1;
			changePage(curPage);
		});
	});
	
	// page links are clicked
	prevPageLnk.click(function (event) {
		event.preventDefault();
		if (curPage > 1)
			changePage(--curPage);
	});
	nextPageLnk.click(function (event) {
		event.preventDefault();
		if (curPage < numPages)
			changePage(++curPage);
	});
	
	function changePage(changePageTo) {
		curPage = changePageTo;
		
		var startIndex = (curPage - 1) * settings.itemsPerPage;
		var endIndex = (visibleItemsCnt < curPage * settings.itemsPerPage) ? visibleItemsCnt : curPage * settings.itemsPerPage;
		
		//curPageInfo.html("Page " + curPage + " of " + numPages);
		if (visibleItemsCnt == 0)
			curPageInfo.html("No items available");
		else
			curPageInfo.html("Displaying " + (startIndex + 1) + " - " + endIndex + " of " + visibleItemsCnt);
		
		var curIndex = 0; // of visisble projects
		items.each(function() {
			// if visible and within page range: show it!
			if ($(this).hasClass("visible")) 
			{
				if(curIndex >= startIndex && curIndex < endIndex)
					$(this).css("display", "block");
				else
					$(this).css("display", "none");
				curIndex++;
			}
			else
				$(this).css("display", "none");
		});
		
		if (curPage == 1) { prevPageLnk.addClass("disabled").html('<img src="/images/icons/prev-disabled.gif" alt="Previous Page" />'); }
		else { prevPageLnk.removeClass("disabled").html('<img src="/images/icons/prev.gif" alt="Previous Page" />'); }
		
		if (curPage == numPages) { nextPageLnk.addClass("disabled").html('<img src="/images/icons/next-disabled.gif" alt="Next Page" />'); }
		else { nextPageLnk.removeClass("disabled").html('<img src="/images/icons/next.gif" alt="Next Page" />'); }
	}
	
	return this;
};
