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

//Initialize paging
function initPaging() {
	currentPage  = 1;
	setLimit     = 12;
	limit        = setLimit;
	maxPageItems = 12;
	headerId     = 'pagingHeader';
	srcContainer = 'wrapper';
	displayView  = 'gridView';
	sortMethod   = 'sortPrice';
	displayList  = buildDisplayList(srcContainer);
	viewToggle   = 'Down';

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

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

	//remove duplicate items
	removeSrcItems(srcContainer);
	
	//rebuild the new displayList
	for(var i = 0; i < displayList.length; i++) {
		displayList[i]['displayData'] = buildItemDisplay(displayList[i], displayView);
	}
	
	//Show Display List
	showDisplayList(displayList, 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 href="'+itemData['url']+'.html"><img src="'+itemData['image']+'" /></a></dd>';
	displayData +=	'<dd class="itemTitle"><a href="'+itemData['url']+'.html">'+itemData['name']+'</a></dd>';
	displayData +=	'<dd class="itemPrice">Online 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, displayList) {
	
	if(sortValue != sortMethod) {
		sortMethod = sortValue;
		switch(sortMethod) {
			case'sortPrice':
				displayList.sort(comparePrice);
			break;
			case'sortName':
				displayList.sort(compareName);
			break;
			case'sortBestSeller':
				displayList.sort(compareBestSeller);	
			break;
		}
		
		viewToggle = 'Down';
	} else {
		displayList.reverse();
		if(viewToggle == 'Up') {
			viewToggle = 'Down';
		} else {
			viewToggle = 'Up';
		}
	}
	
	updateDisplay(currentPage);
	return displayList;
}

//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) {
			sortedListItem = document.createElement('div');
			sortedListText = document.createTextNode(displayList[i].nodeValue);
			sortedListItem.innerHTML = displayList[i]['displayData'];
			srcContainer.appendChild(sortedListItem);
		}
		
	}
	
}
// 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       = '#';
			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       = '#';
			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       = '#';
				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       = '#';
				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       = '#';
			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       = '#';
			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','Best Seller']);
	
		for(i = 0; i < listArray.length; i++) {
		
			//create li and a for sort options
			sortListLink               = document.createElement('a');
			sortListLink.href          = '#';
			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 );              
		}
	}
}