$(function() {
	// Roll effect
	var rollEls = $('.roll');
	rollEls.each(function() {
		var rollEl = $(this);
		var nextEl = rollEl.next();
		
		// Create a link
		var rollHtml = rollEl.html();
		var newHtml = '<a href="#Roll">' + rollHtml + '</a>';
		rollEl.html(newHtml);
		
		// Hide all text until the next roll, or noroll
		var hiddenEls = new Array();
		while (nextEl.size() && (!nextEl.attr('class') || (nextEl.attr('class').indexOf('roll') === -1 && nextEl.attr('class').indexOf('noroll') === -1))) {
			nextEl.hide();
			hiddenEls.push(nextEl);
			nextEl.addClass('roll-hidden');
			nextEl = nextEl.next();
		}
		
		// Bind link @refactor! toggle doesn't work good
		var openRoll = function() {
			$('.roll-hidden:visible').hide();
			$('.open-roll').removeClass('open-roll');
            for (var i in hiddenEls) {
                hiddenEls[i].show();
            }
			rollEl.addClass('open-roll');
		};
		
		var closeRoll = function() {
            for (var i in hiddenEls) {
                hiddenEls[i].hide();
            }
			rollEl.removeClass('open-roll');
        };
		
        rollEl.children('a').click(function() {
		  	if (!rollEl.attr('class') || rollEl.attr('class').indexOf('open-roll') === -1) {
				openRoll();
			} else {
				closeRoll();
			}
			return false;
        });
	});
});