var index = 0;
$(document).ready(function(){
	var linksArea = $(".links");
	var links = $(".link", linksArea);
	
	var linksWidth = linksArea.width() - 200;
	var linkWidth = links.width();
	var maxVisible, total;
	maxVisible = Math.floor(linksWidth / linkWidth);
	total = links.length - maxVisible;

$(window).resize(function() {
         var linksWidth = linksArea.width() - 200;
        var linkWidth = links.width();
        maxVisible = Math.floor(linksWidth / linkWidth);
        total = links.length - maxVisible;
reveal_and_hide();
});	
	var preBtn = $("<a class='preBtn' />").text("<<");
	var fwdBtn = $("<a class='fwdBtn'  />").text(">>");
	
	var reveal_and_hide = function(e) {
		if(index == 0) {
			$(preBtn).addClass("inactive");
		} else if(index == total){
			$(fwdBtn).addClass("inactive");
		} else {
			$(preBtn).removeClass("inactive");
			$(fwdBtn).removeClass("inactive");
		}
		
		var links = $(".links .link");
		$(links).css({display: "none"});
		var visible = links.slice(index, index + maxVisible);
		$(visible).css({display: ""});
	};
	
	var preHandler = function(e){
		e.preventDefault();
		if(index > 0) {
			index -= 1;
		}
		reveal_and_hide();
		return false;
	};
	var fwdHandler = function(e) {
		e.preventDefault();
		if(index < total) {
			index += 1;
		}
		reveal_and_hide();
		return false;
	};
	
	$(preBtn).click(preHandler).prependTo(linksArea);
	$(fwdBtn).click(fwdHandler).appendTo(linksArea);
	
	reveal_and_hide();
})