//pagination.css must be used to make this thing look nice.

//Initialize paging
function initPaging() {
	currentPage		= 1;
	setLimit			= 12;	//This is the number of items in the pagination
	limit					= setLimit;
	maxPageItems	= 6;	//This is the maximum number of pages
	headerId			= 'pagingHeader';
	srcContainer	= 'wrapper';
	displayView		= 'gridView';
	sortMethod		= 'sortBestSeller';
	rawDisplayList		= buildDisplayList(srcContainer);
	displayList		= rawDisplayList.slice();
	viewToggle		= 'Down';
	colorList			= buildFilterList('color');
	sizeList			= buildFilterList('size');

	//grab the items and put them into an array called displayList
	for(var i = 0; i < displayList.length; i++) {
		displayList[i]['displayData'] = buildItemDisplay(displayList[i], displayView);
	}

	updateDisplay(currentPage);

	addFilterSelect(colorList, "color", "Colors");
	addFilterSelect(sizeList, "size", "Sizes");

}

// Update the current page
function updateDisplay(curPage, list) {
	currentPage  = curPage;
	if(!list) {
		list = displayList;
	}
	//Populate Header Controls
	//the navigation forward and back buttons
	populateHeaderControls(headerId, limit, currentPage, list, sortMethod, viewToggle);

	//remove duplicate items
	removeSrcItems(srcContainer);

	//rebuild the new displayList
	for(var i = 0; i < list.length; i++) {
		list[i]['displayData'] = buildItemDisplay(list[i], displayView);
	}

	//Show Display List
	showDisplayList(list, srcContainer, currentPage, limit)

}

//grab each item and return it
function buildDisplayList(srcContainer) {

	var displayList = [];
	var items = document.getElementById(srcContainer).childNodes;

	for(var i = 0; i < items.length; i++) {
		if(items[i].nodeType == 1) {
			displayList.push(getItemData(items[i].getAttribute('id')));
		}
	}
	return displayList;
}

//How the item is actually displayed
function buildItemDisplay(itemData, displayView) {

	switch(displayView) {
		case 'listView':
			var displayData  = '<dl class="viewModeList">';
		break;
		case 'gridView':
			var displayData  = '<dl class="viewModeGrid" style="text-align:center;">';
		default:
		break;
	}

	displayData +=	'<dd class="itemImage"><a id="'+itemData['url']+'" href="'+itemData['url']+'.html"><img src="'+itemData['image']+'" /></a></dd>';
	if(typeof(itemData['icon']) != 'undefined') {
		displayData +=	'<dd class="itemIcon"><img src="'+itemData['icon']+'" /></dd>';
	}
	displayData +=	'<dd class="itemTitle"><a href="'+itemData['url']+'.html">'+itemData['name']+'</a></dd>';
	if(itemData['reg-price'] != '$0.00') {
		displayData +=	'<dd class="itemPrice">Regular Price: '+ itemData['reg-price']+'</dd>';
	}
	if (itemData['sale-price']) {
		displayData +=	'<dd class="salesPrice">Sale Price: '+ itemData['sale-price']+'</dd>';
	}
	displayData +=	'</dl>';

	return displayData;
}

// sorting display
function sortDisplayList(sortValue, displayListo) {

	if(sortValue != sortMethod) {
		sortMethod = sortValue;
		switch(sortMethod) {
			case'sortPrice':
				displayListo.sort(comparePrice);
			break;
			case'sortName':
				displayListo.sort(compareName);
			break;
			case'sortBestSeller':
				displayListo = rawDisplayList.slice();
			break;
		}

		viewToggle = 'Down';
	} else {
		displayListo.reverse();
		if(viewToggle == 'Up') {
			viewToggle = 'Down';
		} else {
			viewToggle = 'Up';
		}
	}
	updateDisplay(currentPage, displayListo);
	return displayListo;
}

//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;
}

// Displays all the items for the current page.
function showDisplayList(displayList, srcContainer, currentPage, limit) {

	var srcContainer = document.getElementById(srcContainer);

	//current page items
	for(var i = ((currentPage - 1) * limit); i < (limit * currentPage); i++) {

		//to compensate for partial pages of data
		if(i < displayList.length) {
			//Preloader.add(displayList[i].image);
			sortedListItem = document.createElement('div');
			sortedListText = document.createTextNode(displayList[i].nodeValue);
			sortedListItem.innerHTML = displayList[i]['displayData'];
			srcContainer.appendChild(sortedListItem);
		}

	}

	//Preloader.onFinish(initXpress);
	//Preloader.load();
}
// grabs the items attributes.
function getItemData(elementId){
	var base = document.getElementById(elementId).getElementsByTagName('span');
	var itemData = new Object();

	for(var i = 0; i < base.length; i++) {
		if(base[i].getAttribute('title') != null) {
			itemData[base[i].getAttribute('id')] = base[i].getAttribute('title');
		}
	}

	return itemData;
}

function clearElement(parentId, elementId) {
	if(document.getElementById(elementId) != null) {
		document.getElementById(parentId).removeChild(document.getElementById(elementId));
	}
}

// creates all the pages and buttons for the header.
function populateHeaderControls(headerId, limit, currentPage, displayList, sortMethod, viewToggle) {

	//remove Item if it already exists
	clearElement('navViewList', 'viewList');

	var viewList = document.createElement('ul');
		viewList.id        = 'viewList';
		viewList.className = 'headerList';

	document.getElementById('navViewList').appendChild(viewList);

	var listArray = [];
		listArray.push(['gridView','Grid View']);
		listArray.push(['listView','List View']);
		listArray.push(['viewAllItems','View All Items']);

		for(i = 0; i < listArray.length; i++) {
			//create li and a for views
			viewListLink            = document.createElement('a');
			viewListLink.href       = 'javascript:;';
			viewListLink.id         = listArray[i][0];
			viewListLink['onclick'] = new Function( 'setView("' + listArray[i][0] + '")' );
			viewListLink.appendChild(document.createTextNode(listArray[i][1]));

			viewListItem = document.createElement('li');
			viewListItem.appendChild(viewListLink);

			//add item to viewsList
			viewList.appendChild(viewListItem);
		}

	//remove Item if it already exists
	clearElement('navPageLinks', 'pageList');
	clearElement('navPageCount', 'pageInfo');

	var pageInfo       = document.createElement('span');

	//adding if statement so totalPages is never 0
	if(Math.floor(displayList.length / limit) == 0){
		var totalPages = 1;
	}
	else {
		//round up so no items are left out
		var totalPages = Math.ceil(displayList.length / limit);
	}
	var message        = 'Page ' + currentPage + ' of ' + totalPages;
	var pageInfoText   = document.createTextNode(message);
	var firstPage      = Math.floor(currentPage - (maxPageItems / 2));
	var lastPage       = (firstPage + maxPageItems -1);

	if(firstPage <= 0){
		firstPage = 1;
		lastPage  = maxPageItems;
	}

	if(lastPage > totalPages){
		lastPage  = totalPages;
		firstPage = (lastPage - maxPageItems) + 1;
		if(firstPage <= 0) {
			firstPage = 1;
		}
	}

	pageInfo.id        = 'pageInfo';
	pageInfo.appendChild(pageInfoText);
	document.getElementById('navPageCount').appendChild(pageInfo);

		//individual pages
		var pageList           = document.createElement('ul');
			pageList.id        = 'pageList';
			pageList.className = 'headerList';

		document.getElementById('navPageLinks').appendChild(pageList);

		//Pages Start Link
		pageListItem            = document.createElement('li');

		//add Start Element to Page List
		pageList.appendChild(pageListItem);

		if(totalPages > maxPageItems && currentPage > 1) {
			pageStartLink            = document.createElement('a');
			pageStartLink.href       = 'javascript:;';
			pageStartLink['onclick'] = new Function( 'setPage(' + (1) + ' )' );
			pageStartLink.appendChild(document.createTextNode('|<'));

			pageListItem.className  = 'pageStartOn';
			pageListItem.appendChild(pageStartLink);
		} else {
			pageListItem.className  = 'pageStartOff';
			pageListItem.appendChild(document.createTextNode('|<'));
		}

		//Previous Page Link
		pageListItem            = document.createElement('li');

		//add Previous Element to Page List
		pageList.appendChild(pageListItem);

			if(currentPage > 1) {
				pagePrevLink            = document.createElement('a');
				pagePrevLink.href       = 'javascript:;';
				pagePrevLink['onclick'] = new Function( 'setPage(' + (currentPage - 1) + ' )' );
				pagePrevLink.appendChild(document.createTextNode('<Prev'));

				pageListItem.className  = 'pagePrevOn';
				pageListItem.appendChild(pagePrevLink);
			} else {
				pageListItem.className  = 'pagePrevOff';
				pageListItem.appendChild(document.createTextNode('<Prev'));
			}

		//Individual Page Links and Current Page
		for(var i = firstPage; i <= lastPage; i++) {

			if(i == currentPage) {
				pageListItem           = document.createElement('li');
				pageListItem.className = 'pageCurrent';
				pageListItem.appendChild(document.createTextNode(i));
			} else {
				pageListLink            = document.createElement('a');
				pageListLink.href       = 'javascript:;';
				pageListLink['onclick'] = new Function( 'setPage(' + i + ' )' );
				pageListLink.appendChild(document.createTextNode(i));

				pageListItem = document.createElement('li');
				pageListItem.className  = 'pageLink';
				pageListItem.appendChild(pageListLink);
			}

			//add item to pageList
			pageList.appendChild(pageListItem);
		}

		//Next Page Link
		pageListItem            = document.createElement('li');

		//Add Next Element to Page List
		pageList.appendChild(pageListItem);

		if(currentPage < totalPages) {
			pageNextLink            = document.createElement('a');
			pageNextLink.href       = 'javascript:;';
			pageNextLink['onclick'] = new Function( 'setPage(' + (currentPage + 1) + ' )' );
			pageNextLink.appendChild(document.createTextNode('Next>'));

			pageListItem.className  = 'pageNextOn';
			pageListItem.appendChild(pageNextLink);
		} else {
			pageListItem.className  = 'pageNextOff';
			pageListItem.appendChild(document.createTextNode('Next>'));
		}

		//Pages End Link
		pageListItem            = document.createElement('li');

		//add End Element to Page List
		pageList.appendChild(pageListItem);

		if(totalPages > maxPageItems && currentPage < totalPages) {
			pageEndLink            = document.createElement('a');
			pageEndLink.href       = 'javascript:;';
			pageEndLink['onclick'] = new Function( 'setPage(' + (totalPages) + ' )' );
			pageEndLink.appendChild(document.createTextNode('>|'));

			pageListItem.className  = 'pageEndOn';
			pageListItem.appendChild(pageEndLink);
		} else {
			pageListItem.className  = 'pageEndOff';
			pageListItem.appendChild(document.createTextNode('>|'));
		}

	//remove Item if it already exists
	clearElement('navSortList', 'sortList');

	var sortList           = document.createElement('ul');
		sortList.id        = 'sortList';
		sortList.className = 'headerList';

	document.getElementById('navSortList').appendChild(sortList);

	var listArray = [];
		listArray.push(['sortPrice','Price']);
		listArray.push(['sortName','Name']);
		listArray.push(['sortBestSeller','Newest to Oldest']);

		for(i = 0; i < listArray.length; i++) {

			//create li and a for sort options
			sortListLink               = document.createElement('a');
			sortListLink.href          = 'javascript:;';
			sortListLink.id            = listArray[i][0];
			sortListLink['onclick']    = new Function( 'setSort("' + listArray[i][0] + '")' );
			if(listArray[i][0] == sortMethod) {
				sortListLink.className = 'sortSelected' + viewToggle;
			}
			sortListLink.appendChild(document.createTextNode(listArray[i][1]));

			sortListItem            = document.createElement('li');
			sortListItem.appendChild(sortListLink);

			//add item to sortList
			sortList.appendChild(sortListItem);

		}
}

function setPage(page) {
	updateDisplay(page);
}

function setSort(sortValue) {
	sortDisplayList(sortValue, displayList);
}

function setView(viewMode) {
	if(viewMode == 'viewAllItems') {
		limit        = displayList.length;
		currentPage  = 1;
	} else {
		limit       = setLimit;
		displayView = viewMode;
	}

	updateDisplay(currentPage);
}

function removeSrcItems(srcContainer) {

	var srcContainer = document.getElementById(srcContainer);

	if (srcContainer.hasChildNodes()) {
		while ( srcContainer.childNodes.length >= 1 ) {
			srcContainer.removeChild( srcContainer.firstChild );
		}
	}
}
//  buildFilterList(option)
function buildFilterList(option) {

	var filterList = new Array();

	$('.' + option + '-filter').each(function()	{
																								var opts = $(this).attr('title').split(",");
																								for (thing in opts) {
																									if($.inArray(opts[thing], filterList) == -1) {
																										filterList.push(opts[thing]);
																									}
																								}
																							});
	return filterList.sort();
}
// addFilterSelect()
function addFilterSelect(list, id, option) {
	var filter = $("<select id='"+id+"'>");
	filter.append("<option>All "+option+"</option>");
	for(x in list) {
		filter.append("<option>"+list[x]+"</option>");
	}
	filter.bind("change", filterItems);
	$("#navPageFilters").append(filter);
}

// filterItems()
function filterItems(evt) {
	var filterColor, filterSize;
	var allColor = ((filterColor = $("#color").val()) == "All Colors");
	var allSize = ((filterSize = $("#size").val()) == "All Sizes");

	displayList = new Array();
	for(x in rawDisplayList) {
		var matchColor, matchSize;
		if(allColor) {
			matchColor = true;
		} else {
			if(rawDisplayList[x].hasOwnProperty('color'))
				matchColor = (rawDisplayList[x]['color'].indexOf(filterColor) != -1);
			else
				matchColor = false;
		}
		if(allSize) {
			matchSize = true;
		} else {
			if(rawDisplayList[x].hasOwnProperty('size'))
				matchSize = (rawDisplayList[x]['size'].indexOf(filterSize) != -1);
			else
				matchSize = false;
		}
		if(matchColor && matchSize)
			displayList.push(rawDisplayList[x]);
	}

/*	for(cntr in rawDisplayList) {
		if((rawDisplayList[cntr].hasOwnProperty('color') || allColor) && ((rawDisplayList[cntr].hasOwnProperty('size') || allSize))) {
			if((rawDisplayList[cntr]['color'].indexOf(filterOn) != -1 || allColor) && (rawDisplayList[cntr]['size'].indexOf(filterOn) != -1 || allSize)) {
					displayList.push(rawDisplayList[cntr]);
			}
		}
	}*/

	updateDisplay(1);

}