var numPages = 0;
var currentPage = 1;
var oldPage = 1;

document.observe("dom:loaded", function() {
	// set the image paging to have the correct link classes!
	if(numPages > 1){
		$('im-next').className = 'btn-media-2';
	}
});

function imagesLeft(){
	if(numPages!=0 && currentPage > 1){
		new Effect.Move('application-images', { x: 413,  duration:0.5 });
		currentPage--;
		updatePagerStyles();
	}
}
function imagesRight(){
	if(numPages!=0 && currentPage < numPages){
		new Effect.Move('application-images', { x: -413, duration:0.5 });
		currentPage++;
		updatePagerStyles();
	}
}
function imagePage(page){
	var change = page - currentPage;
	new Effect.Move('application-images', { x: (-413*change), duration:0.5 });
	currentPage = page;
	if(currentPage == numPages){
		$('im-next').className = 'btn-media-1';
	} else {
		$('im-next').className = 'btn-media-2';
	}
	updatePagerStyles();
}
function updatePagerStyles(){
	if(currentPage == 1){
		$('im-prev').className = 'btn-media-1';
	} else {
		$('im-prev').className = 'btn-media-2';
	}
	if(currentPage < numPages){
		$('im-next').className = 'btn-media-2';
	}
	var pages = $$('#mediactrls div');
	for(var i=1; i<pages.length-1; i++){
		if(i == oldPage){
			pages[i].className = 'btn-media-2';
			var els = pages[i].select('a');
			els[0].className = "";
		}
		if(i == currentPage){
			pages[i].className = 'btn-media-1';
			var els = pages[i].select('a');
			els[0].className = "on";
		}
	}
	oldPage = currentPage;
}