Практическое применение JavaScript на простом примере галереи

var idx = 0; 
var count = 0; 

var pictures = ['001.png', '002.png', '002.png', '001.png', '001.png',
				'001.png', '002.png', '001.png', '002.png', '001.png',
				'002.png', '001.png', '001.png', '001.png', '002.png',
				'001.png', '001.png', '002.png', '002.png', '001.png']

window.onload = function() {
	

        var next = document.getElementById('next');
        var previous = document.getElementById('back')
        next.onclick = getNextPage;
        previous.onclick = getPreviousPage;
        getNumericButtons();
        addImagesToPaginator();

	    window.addEventListener('keyup', handler, false);

	}

function handler(event) {
	
	var KEY_CODE = { LEFT:37, RIGHT:39 };
	var numericButtons = document.getElementById('numericButtons');
	var quantityPagesInPgn = getQuantityPagesOfPaginator()-1;

	switch (event.keyCode) {
		
		case KEY_CODE.LEFT:
			if (count == 0) {
				break;
			}
			getPreviousPage();
			break;
		default:
			if (count == quantityPagesInPgn) {
				break;
			}
			getNextPage();
			break;
	}

}

function addImagesToPaginator() {
	
	var numericButtons = document.getElementById('numericButtons');
	var imgPath = 'static/img/';
	var next = document.getElementById('next');
	var previous = document.getElementById('back')
	var bodyContainer = document.getElementById('bodyContainer');
	var quantityImgsOnPage = 8;
	var img = document.createElement('IMG');
	img.className = 'imgContainer';
	for (var i=0; i<quantityImgsOnPage; i++) {
		if (pictures[idx]) {
		img.src = imgPath+pictures[idx];
		bodyContainer.appendChild(img.cloneNode(true));
		idx += 1;
		}
	} 

	//activate and deactivate buttons next and back
	if (idx <= 8) {
		previous.disabled = true;
		numericButtons.firstChild.disabled = true;
	} else if (idx >= pictures.length) {
		next.disabled = true;
		numericButtons.lastChild.disabled = true;
	}
}

function removeImagesFromPaginator() {
	var bodyContainer = document.getElementById('bodyContainer');
	while (bodyContainer.hasChildNodes()) {
		bodyContainer.removeChild(bodyContainer.firstChild);
	}

}

function getNextPage() {
	
	count += 1;
	console.log('count_next', count)
	
	var numericButtons = document.getElementById('numericButtons');
	var previous = document.getElementById('back');
	var buttonsArray = numericButtons.getElementsByTagName('INPUT');
	previous.disabled = false;
	removeImagesFromPaginator();
	addImagesToPaginator();

	buttonsArray[count].disabled = true;
	if (count > 0 ) {
		buttonsArray[count-1].disabled = false;
	}	
}

function getPreviousPage() {
	
	count -= 1;
	console.log('count_back', count)
	
	var bodyContainer = document.getElementById('bodyContainer');
	var numericButtons = document.getElementById('numericButtons');
	var next = document.getElementById('next');
	var buttonsArray = numericButtons.getElementsByTagName('INPUT');
	var imagesOnPage = bodyContainer.getElementsByTagName('IMG').length;
	next.disabled = false;
	idx = idx-imagesOnPage-8;
	removeImagesFromPaginator();
	addImagesToPaginator();
	
	buttonsArray[count].disabled = true;
	if (count >= 0 ) {
		buttonsArray[count+1].disabled = false;
	}

}

function getQuantityPagesOfPaginator() {
	// function returning quantity pages of pagination
	var count = 8;
	var quantity = 1;
	while (true) {
		count += 8;
		quantity += 1;
		if (count >= pictures.length) {
			return quantity;
		}
	}
}

function getNumericButtons() {

	var quantityPagesInPgn = getQuantityPagesOfPaginator();
	var numericButtons = document.getElementById('numericButtons');
	var numericButton = document.createElement('INPUT');
	numericButton.type = 'button';

	for (var val = 1; val <= quantityPagesInPgn; val++) {
		numericButton.value = val;
		numericButtons.appendChild(numericButton.cloneNode(true));
	}
	
	var allNumericButtons = numericButtons.getElementsByTagName('INPUT');
	for (var i = 0; i < allNumericButtons.length; i++) {
		allNumericButtons[i].onclick = getActionForNumericButtons;
	}
}

function getActionForNumericButtons() {
	
	var buttonsArray = numericButtons.getElementsByTagName('INPUT');
	buttonsArray[count].disabled = false;
	this.disabled = true;
	count = parseInt(this.value) -1;
	idx = (parseInt(this.value)*8)-8;
	removeImagesFromPaginator();
	addImagesToPaginator();
	var next = document.getElementById('next');
	var previous = document.getElementById('back')
	
	if (count > 0) {
		previous.disabled = false;
	} else {
		previous.disabled = true;
	}
	if (count+1 == buttonsArray.length) {
		next.disabled = true;
	} else {
		next.disabled = false;
	}
}