$(document).ready(function() {

	// ombres caixes
	$(".box").append("<span class='ombra'></span><span class='celo'></span>");

	var scrollable = $('.scrollable');
	scrollable.each(function() {
		var t = $(this);
		var items = t.children('div.items');
		var itemsList = items.children('ul');
		var boxes = itemsList.children('li');
		var boxesMaxHeight = 0;
		// add navigation buttons
		t.before('<a class="prev browse left" id="scrollablePrev"></a>');
		t.after('<a class="next browse right" id="scrollableNext"></a>');
		var pButton = $('#scrollablePrev');
		var nButton = $('#scrollableNext');
		pButton.addClass('disabled');
		// prepare
		var boxesCount = boxes.length;
		//var boxesWidth = itemsList.children('li').children('a').outerWidth(true);
		var boxesWidth = 208;


		var curPos = 0;
		var curMargin = 0;
		// sliding
		pButton.click(function() {
			if (curPos > 0) {
				curMargin = curMargin - boxesWidth;
				itemsList.animate({'marginLeft': '-' + curMargin + 'px'});
				curPos--;
				nButton.removeClass('disabled');
			}
			if (curPos == 0) {
				pButton.addClass('disabled');
			}
			return false;
		});
		nButton.click(function() {
			if (curPos < (boxes.length - 4)) {
				curMargin = curMargin + boxesWidth;
				itemsList.animate({'marginLeft': '-' + curMargin + 'px'});
				curPos++;
				pButton.removeClass('disabled');
			}
			if (curPos == (boxes.length - 4)) {
				nButton.addClass('disabled');
			}
			return false;
		});
		// boxes treatment
	});

});