var picturesPerPage = 4; // number of images to include on each faux page
var currentPage = 0;
var pages = []; // array of the faux pages

// a helper function to get an HTML string of a DOM element.
// this is needed to get Prototype's Insertion object to work
// with Scriptaculous's Builder object
function getElementHTML(element) {
	wrapper = Builder.node('div');
	wrapper.appendChild(element);
	return wrapper.innerHTML;
}

function paginateGallery() {
	galleryArea = $('content');
	pictures = Array.from(galleryArea.getElementsByTagName("div"));
	numPages = Math.ceil(pictures.length/picturesPerPage);

	// create new pages and move the pictures onto the pages
	for(var i=0; i<numPages; i++) {
	  var newPage = Builder.node('div', {className:'gallerypage hidden'});
	  pages.push(newPage);
	  for (var j=0; j<picturesPerPage; j++) {
		currentPictureNum = j+i*picturesPerPage;
		if (currentPictureNum == pictures.length) { /* no more pictures! */ break; }
		else if (currentPictureNum == pictures.length - 1) {
			// just one picture left
			newPage.appendChild(pictures[currentPictureNum]);
		}
		else {
			// make sure adjacent pictures are the same height
			if (j % 2 == 0) {
				// get measurements for left-hand image
				colOnePicture = $(pictures[currentPictureNum]);
				colOneHeight = parseInt(colOnePicture.getHeight());
				colOnePadding = parseInt(Element.getStyle(colOnePicture, 'padding-top')) +
								parseInt(Element.getStyle(colOnePicture, 'padding-bottom')) +
								parseInt(Element.getStyle(colOnePicture, 'border-top-width')) +
								parseInt(Element.getStyle(colOnePicture, 'border-bottom-width')) + 1;
			}
			if (j % 2 == 1) {
				// get measurements for right-hand image
				colTwoPicture = $(pictures[currentPictureNum]);
				colTwoHeight = parseInt(colTwoPicture.getHeight());
				
				//compare the two images
				if (colOneHeight < colTwoHeight) {
					colOnePicture.style.minHeight = (colTwoHeight - colOnePadding) + "px";
				}
				if (colOneHeight > colTwoHeight) {
					colTwoPadding = parseInt(Element.getStyle(colTwoPicture, 'padding-top')) +
									parseInt(Element.getStyle(colTwoPicture, 'padding-bottom')) +
									parseInt(Element.getStyle(colTwoPicture, 'border-top-width')) +
									parseInt(Element.getStyle(colTwoPicture, 'border-bottom-width')) - 1;
					colTwoPicture.style.minHeight = (colOneHeight - colTwoPadding) + "px";
				}
			}
			newPage.appendChild(pictures[currentPictureNum]);
		}	
	  }
	}
	for(var i=0; i<numPages; i++) {
		// on each page, build the pagination controls
		paginationArea = Builder.node('ul', {className: 'pagination'});

		// first add the '<<'s
		if (i>0) {
			targetPage = i-1;
			paginationArea.appendChild(Builder.node('li', [
					Builder.node('a', {href:'#', onclick:'switchPage('+targetPage+')'}, ['<<'])
				]))
		}
		else {
			paginationArea.appendChild(Builder.node('li', { className: 'inactivepaginationarrows'}, ['<<']))
		}
		
		for (var j=0; j<numPages; j++) {
		// now add the page #s
			if (j == i) {
				paginationArea.appendChild(Builder.node('li', [String(j+1)]))
			}
			else {
				paginationArea.appendChild(Builder.node('li', [
						Builder.node('a', {href:'#', onclick:'switchPage('+j+')'},[String(j+1)])
					]))
			}
		}

		// last add the '>>'s
		if (i<numPages-1) {
		    targetPage = i+1;
			paginationArea.appendChild(Builder.node('li', [
					Builder.node('a', {href:'#', onclick:'switchPage('+targetPage+')'}, ['>>'] )
				]))
		}
		else {
			paginationArea.appendChild(Builder.node('li', { className: 'inactivepaginationarrows'}, ['>>'] ))
		}
		new Insertion.Top(pages[i], getElementHTML(paginationArea));
		
		// add each new page to the gallery area
		galleryArea.appendChild(pages[i]);
	}

	pages[currentPage].removeClassName('hidden');
}

function switchPage(pageNum) {
	if ((pageNum >= 0) && (pageNum < pages.length) && (pageNum != currentPage)) {
		pages[pageNum].removeClassName('hidden');
		pages[currentPage].addClassName('hidden');
		currentPage = pageNum;
	}
	return false;
}

Event.observe(window, 'load', paginateGallery);