//pagination.css must be used to make this thing look nice.
//requires jQuery 1.3.1+

var headerId, colorFilter, columns, comboOption, currentPage, displayList, maxItemsPage, pageNoBuffer, rawDisplayList, sizeFilter, sizeOptions, colorOptions, sortBy, sortList, srcContainer, viewAllOption;

function buildRawDisplayList(srcContainer) {

	var displayList = [];
	$('#' + srcContainer).children().each( function (i,e){ displayList.push(getItemData(e)); } );

	return displayList;
}

function subify(list) {
	
	var tempList = [];
	
	for( var i in list ) {
		if( list[i].hasOwnProperty('type') ) {
			if( sortBy === 0 && sizeFilter === 0 && colorFilter === 0 ) {
				if( list[i].type == 'section' ) {
					tempList.push( list[i] );
				}
			} else {
				if( list[i].type == 'sub-item' ) {
					tempList.push( list[i] );
				}
			}
		} else {
			tempList.push( list[i] );
		}
	}
	
	return tempList;
}

function buildHeaderControls() {

	var nextSelect;

	//Build Filter Drop-downs
	var div = $("#navPageFilters");
	var list = [];
	div.empty();
	
	//	Size Dropdown
	if($("#size-options").length > 0) {
		var zSizeList = $("#size-options").attr('title').split(";");
		for( var i in zSizeList ) {
			var sizeItems = zSizeList[i].split(",");
			list.push(sizeItems.splice(0,1));
			sizeOptions[list[i]] = sizeItems;
		}
		addFilterSelect(list, "size", "Size");
	}
	
	//	Color Dropdown
	if($("#color-options").length > 0) {
		list = [];
		var zColorList = $("#color-options").attr('title').split(";");
		for( i in zColorList ) {
			var colorItems = zColorList[i].split(",");
			list.push(colorItems.splice(0,3));
			colorOptions[list[i][0]] = colorItems;
		}
		addFilterSelect(list, "color", "Color", true);
	}
	
	//	Sort By Dropdown
	nextSelect = $("<select id='sortBy'>");
	for( i in sortList) {
		nextSelect.append("<option value='" + i + "'>" + sortList[i] + "</option>");
	}
	nextSelect.bind('change', sortChange);
	div.append(nextSelect);	
	
	//Reset Button
	div.append("<a href='javascript:resetFilters();'><img src='http://lib.store.yahoo.net/lib/mydivascloset/reset.gif' /></a>");
	
	//	Items per Page dropdown
	if( !viewAllOption ) {
		var itemArray = $("#maxItems-options").attr('title').split(",");
		nextSelect = $("<select id='maxItems-select'>");
		for( i in itemArray ) {
			nextSelect.append("<option value='" + itemArray[i] + "'>" + itemArray[i] + " items / page</option>");
		}
		nextSelect.append("<option value='0'>Show All</option>");
		setMaxItemsPage(nextSelect.val());
		nextSelect.bind('change', setView);
		$('#navPageLinksWrap').empty().prepend(nextSelect);
		$('#navPageLinksWrap').append("<div id='navPageLinks' />");
	} else {
		maxItemsPage = displayList.length;
	}
}

/****************************************************************************************************************************/

//	Populate navPageLinks
function buildNavPageLinks() {
	
	if(!viewAllOption) {
		var navDiv = $("#navPageLinks").empty();
		
		if( maxItemsPage != displayList.length ) {
		
			var pageCount = Math.ceil(displayList.length/maxItemsPage);
			
			var navArrow;
			
			//Draw '<', if not Page 1 - add <a> to go back
			if( currentPage == 1 ) {
				navArrow = $("<span style='color:#ccc'>&lt;&nbsp;</span>");
			} else {
				navArrow = $("<a href='javascript:navArrow(-1)'>&lt;</a><span>&nbsp;</span>");
			}
			navDiv.append(navArrow);
			
			//Check to see if I should write a "1... " because the actual page is not less than the page buffer
			if( currentPage > pageNoBuffer + 1 ) {
				navDiv.append(pageNo(1));
				if( currentPage != pageNoBuffer + 2 ) {
					navDiv.append("<span>...&nbsp;</span>");
				}
			}
			
			for( var i = currentPage - pageNoBuffer ; i <= currentPage + pageNoBuffer; i++) {
				if( i > 0 && i <= pageCount ) {
					navDiv.append(pageNo(i));
				}
			}
			
			if( currentPage < pageCount - pageNoBuffer ) {
				if( currentPage != pageCount - (pageNoBuffer + 1) ) {
					navDiv.append("<span>...&nbsp;</span>");
				}
				navDiv.append(pageNo(pageCount));
			}
			
			if( currentPage == pageCount ) {
				navArrow = $("<span style='color:#ccc'>&gt;&nbsp;</span>");
			} else {
				navArrow = $("<a href='javascript:navArrow(1)'>&gt;</a><span>&nbsp;</span>");
			}
			navDiv.append(navArrow);
		}
	
		navDiv.append("<span>&nbsp;&nbsp;" + displayList.length + "&nbsp;Items");
		$('#pagingFooter').empty();
		if( !viewAllOption && (displayList.length != maxItemsPage) ) {
			$('#pagingFooter').append(navDiv.clone(true));
			$('#pagingFooter').css('display', 'block');
		} else {
			$('#pagingFooter').css('display', 'none');
		}
	}
}

// Update the current page
function updateDisplay(curPage) {

	currentPage  = parseInt(curPage, 10);
	//Draw nav Numbers & Arrows
	buildNavPageLinks();	
	//Sort it
	sortDisplayList();
	//Sort List
	showDisplayList();
	
}

function selectPage(evt) {
	
	updateDisplay($(this).text());
	
	evt.preventDefault();
	
	return false;
	
}

function pageNo(num) {
	
	var jQ;

	if( num != currentPage ) {
		jQ = $("<a href='#'>" + num + "</a><span>&nbsp;</span>");
		jQ.bind('click', selectPage );
	}	else {
		jQ = $("<span>[" + num + "]&nbsp;</span>");
	}
	
	return jQ;

}

function getItemData(element) {
	
	var itemData = {};

	$(element).children().each(function () {
																			itemData[$(this).attr('id')] = $(this).attr('title');
																				});
	return itemData;
}

function navArrow(change) {
	
	updateDisplay(currentPage + change);
}

//	Fill in the Src Container with Items
function showDisplayList() {

	var wrapper = $("#" + srcContainer).empty();
	var displayTable = $("<table width='795' cellpadding='0' cellspacing='0' border='0'>");
	
	var currentRow, currentCell;
	var lastItem = (maxItemsPage * currentPage) < displayList.length ? maxItemsPage * currentPage : displayList.length;
	for( var i = ((currentPage - 1) * maxItemsPage); i < lastItem; i++ ) {
		if(i % columns === 0) {
			if( i > 0 ) {
				displayTable.append(currentRow);
			}
			currentRow = $("<tr>");
		}
		
		currentCell = $("<td>");
		
		var itemTable = $("<table align='center'>");
		itemTable.append("<tr><td colspan='2' align='center'><a href='" + displayList[i].id + ".html'><img src='" + displayList[i].image + "'/></a></td></tr>");

		//Add New + Plus Size buttons
		var itemRow = $("<tr>");
		var itemCell = $("<td>");
		if(new Date(displayList[i]['new-date']) > new Date()) {
			itemCell.append("<img src='http://lib.store.yahoo.net/lib/mydivascloset/new.gif' /><br/>");
		}
		if(displayList[i]['plus-size'] == 'yes') {
			itemCell.append("<img src='http://lib.store.yahoo.net/lib/mydivascloset/plus-size.gif' />");
		}
		itemRow.append(itemCell);	
		itemRow.append("<td align='center'><a href='" + displayList[i].id + ".html' class='pag-name'>" + displayList[i].name + "</a></td>");
		
		itemTable.append(itemRow);
		currentCell.append(itemTable);
		currentRow.append(currentCell);

	}
	
	//Fill in extra cells in case there's only one row on a table
	if(currentRow) {
		for( i = 0; i < currentRow.children().length % 3; i++ ) {
			currentRow.append("<td>&nbsp;</td>");
		}
	}
	
	displayTable.append(currentRow);
	wrapper.append(displayTable);	
}

//	Sort the displayList and updateDisplay
function sortDisplayList() {
	
	switch(sortBy) {
		case 0:
			var tempDisplayList = displayList;
			displayList = [];
			for( var i in rawDisplayList) {
				if($.inArray(rawDisplayList[i], tempDisplayList) != -1) {
					displayList.push(rawDisplayList[i]);
				}
			}
			break;

		case 1:
			displayList = displayList.sort(compareName);
			break;
			
		case 2:
			displayList = displayList.sort(compareName).reverse();
			break;

		case 3:
			displayList = displayList.sort(comparePrice);
			break;
			
		case 4:
			displayList = displayList.sort(comparePrice).reverse();
			break;
	}
}

//change event for sort dropdown box
function sortChange() {
	
	sortBy = parseInt($(this).val(), 10);
	
	sortDisplayList();
	updateDisplay(1);
}

//SORTING FUNCTIONS
function comparePrice(a,b) {
	return a.price - b.price;
}

function compareBestSeller(a,b) {
	if(a.bestseller === null) { a.bestseller = 0;}
	if(b.bestseller === null) { b.bestseller = 0;}
	return b.bestseller - a.bestseller;
}

function compareName(a,b) {
	var nameA = a.name.toLowerCase();
	var nameB = b.name.toLowerCase();
	if(nameA < nameB){ return -1; }
	if(nameA > nameB){ return 1; }
	return 0;
}

function setView() {
	
	setMaxItemsPage($(this).val());

	updateDisplay(1);

}

function setMaxItemsPage(val) {

	if(val == 0) { //Yes, i know, but I want it to equal it if it has to cast it too...
		maxItemsPage = displayList.length;
	} else {
		maxItemsPage = val;
	}

}

// addFilterSelect()
// list		- string[]	- array of options
// id			- string		- id of the <select>
// option	- string		- Default selection is "All " + option
// colors - boolean		- Add color back
function addFilterSelect(list, id, option, colors) {
	
	var filter = $("<select id='"+id+"'>");
	filter.append("<option value='0'>Any "+option+"</option>");
	for( var x in list ) {
		if(colors) {
			if(list[x][2] !== null) {
				filter.append("<option style='background-color:" + list[x][1] + ";color:" + list[x][2] + ";'>" + list[x][0] + "</option>");
			}	else {
				filter.append("<option style='background-color:" + list[x][1] + ";'>" + list[x][0] + "</option>");
			}
		} else {
			filter.append("<option>"+list[x]+"</option>");
		}
	}
	filter.bind("change", filterItems);
	$("#navPageFilters").append(filter);
}

function resetFilters() {

	colorFilter = 0;
	sizeFilter = 0;
	sortBy = 0;
	displayList = subify(rawDisplayList);
	
	buildHeaderControls();
	updateDisplay(1);
}

// filterItems()
function filterItems(evt) {

	var filterBy = "";

	if(comboOption) {
		filterBy = "combo";
	} else {
		filterBy = $(this).attr('id');
	}
		
	switch( $(this).attr('id') ) {
		case "color":
			if($(this).val() == "0") {
				colorFilter = 0;
			} else {
				colorFilter = $(this).val();
			}
			break;
		
		case "size":
			sizeFilter = $(this).val();
			break;
	}
	if(colorFilter === 0 && sizeFilter === 0) {
		displayList = subify(rawDisplayList);
	} else {
		var subRawList = subify(rawDisplayList);
		displayList = [];
		for( var i in subRawList ) {		//Each item in the full subified rawDisplayList
			var matchSize = false;
			var matchColor = false;
			if( sizeFilter !== 0 ) {
				if( subRawList[i].hasOwnProperty(filterBy) ) {
					var tempItemSizes = subRawList[i][filterBy].split(",");
					for( var j in tempItemSizes ) {		//Each element of the item's ['size'] array
						for ( var k in sizeOptions[sizeFilter] ) {		//Each element of the selected size's search terms
							if( tempItemSizes[j].toLowerCase().match(sizeOptions[sizeFilter][k].toLowerCase()) ) {
								matchSize = true;
								break;
							}
						}
					}
				}
			} else {
				matchSize = true;
			}
			if ( colorFilter !== 0 ) {
				if( subRawList[i].hasOwnProperty(filterBy) ) {
					var tempItemColors = subRawList[i][filterBy].split(",");
					for( j in tempItemColors ) {		//Each element of the item's ['color'] array
						for ( k in colorOptions[colorFilter] ) {		//Each element of the selected color's search terms
							if( tempItemColors[j].toLowerCase().match(colorOptions[colorFilter][k].toLowerCase()) ) {
								matchColor = true;
								break;
							}
						}
					}
				}
			} else {
				matchColor = true;
			}
			if( matchSize && matchColor ) { displayList.push( subRawList[i] ); }
		}
	}
	if( !viewAllOption ) {
		setMaxItemsPage($('#maxItems-select').val());
	} else {
		setMaxItemsPage(0);
	}
	
	updateDisplay(1);

}

//Initialize paging
function initPaging() {
	
	currentPage			= 1;
	pageNoBuffer		= 2;	//This is the maximum number of pages displayed surrounding the current page
	maxItemsPage		= 0;
	columns					= 3;
	headerId				= 'pagingHeader';
	srcContainer		= 'wrapper';
	sortList				= ["Sort By", "A to Z", "Z to A", "$$ - Low to High", "$$ - High to Low"];
	sortBy					= 0;
	sizeFilter			= 0;
	colorFilter			= 0;
	sizeOptions			= {};
	colorOptions		= {};
	comboOption			= ( $('#combo-option').attr('title') == "yes" ) ? true : false;
	viewAllOption		= ( $('#view-all-option').attr('title') == "yes" ) ? true : false;

	rawDisplayList	= buildRawDisplayList(srcContainer);
	displayList			= subify(rawDisplayList);
		
	buildHeaderControls();
	
	updateDisplay(currentPage);
	
}

window.onload = function() { if($("#wrapper").length > 0) { initPaging(); } };