$(function() {
	if ($.browser.msie) {
		$(window).scroll(scrollableTop);
	}
	else {
		$(document).scroll(scrollableTop);
	}

	$('.scrollable-top').each(function() {
		$(this).attr('absTop', $(this).offset().top);
		$(this).attr('absLeft', $(this).offset().left);
		$(this).attr('relTop', $(this).top);
		$(this).attr('relLeft', $(this).left);
		if ($(this).attr('stop')) $(this).attr('stopTop', $('#'+  $(this).attr('stop')).offset().top + $('#'+  $(this).attr('stop')).height());
		$(this).attr('w', $(this).width());
		$(this).attr('h', $(this).height());
		$(this).attr('mode', 'relative');
		$(this).css({ position: 'relative' });
	});
});

function scrollableTop() {
	var scrollTop = $(document.body).scrollTop();

	$('.scrollable-top').each(function() {
		var absTop = $(this).attr('absTop');
		var absLeft = $(this).attr('absLeft');
		var stopTop = parseInt($(this).attr('stopTop'));
		var stop = parseInt(scrollTop + $(this).height());
		//$(this).html('scrollTop: ' + scrollTop + '; relativeTop: ' + absTop + '<br>stopTop: ' + stopTop + '; stop: ' + stop);
		if (scrollTop > absTop) {
			if ($.browser.msie) {
				var top;
				if (stop > stopTop) {
					top = stopTop - stop;
				}
				else top = 0;
				
				$(this).css({ position: 'absolute', top: scrollTop + top + 'px', left: absLeft + 'px',  width: $(this).attr('w') + 'px' });
				$(this).attr('mode', 'fixed');
			}
			else {
				var selfTop;
				if (stop > stopTop) {
					selfTop = stopTop - stop;
				}
				else selfTop = 0;
				
				$(this).css({ position: 'fixed', top: selfTop + 'px', left: absLeft + 'px', width: $(this).attr('w') + 'px' });
				$(this).attr('mode', 'fixed');
			}
		}
		else {
			if ($.browser.msie) {
				$(this).css({ position: 'absolute', top: $(this).attr('relTop') + 'px', left: $(this).attr('relLeft') + 'px' });
			}
			else {
				$(this).css({ position: 'relative', left: '0px' });
			}
			$(this).attr('mode', 'relative');
		}
	});
}