var scrollInterval = 30;
var scrollDiff;
var scrollElem;
var scrollTimeout;

addScrollbars();

function addScrollbars() {
	var elements = $$(".transparentinfo");
	
	for (var i = 0; i < elements.length; i++) {
		elements[i].setOpacity(0.8);
		
		if (elements[i].getHeight() > 350) {
			enableScrolling(elements[i]);
		}
	}
}

function enableScrolling(elem) {
	elem.setStyle({
		overflow: "hidden",
		height: "290px"
	});
	
	elem.insert({before: '<div class="transparentinfo_scrolldown"></div>'});
	elem.insert({before: '<div class="transparentinfo_scrollup"></div>'});
	elem.insert({bottom: '<p style="height: 70px"></p>'});
	
	var up = elem.previous();
	var down = up.previous();

	customizeElement(up, scrollUp, elem.identify());
	customizeElement(down, scrollDown, elem.identify());
}

function customizeElement(element, callback, scrolling_for) {
	element.observe("mouseover", callback);
	element.observe("mouseout", scrollStop);
	element.setAttribute("scrolling_for", scrolling_for);
	//element.setOpacity(0.5);
}

function scrollUp(event) {
	scrollDiff = -5;
	scrollStart(event, "transparentinfo_scrollup_background");
}

function scrollDown(event) {
	scrollDiff = 5;
	scrollStart(event, "transparentinfo_scrolldown_background");
}

function scrollStart(event, css) {
	var elt = Event.findElement(event, 'div');
	elt.addClassName(css);
	
	scrollElem = $(elt.getAttribute("scrolling_for"));	
	scrollTimeout = setInterval("scrollDo()", scrollInterval);	
}

function scrollStop(event) {
	var elt = Event.findElement(event, 'div');
	var classNames = $w(elt.className);
	
	for (var i = 0; i < classNames.length; i++) {
		if (classNames[i].endsWith("_background")) {
			elt.removeClassName(classNames[i]);
			break;
		}
	}
	
	clearInterval(scrollTimeout);
}


function scrollDo() {
	scrollElem.scrollTop += scrollDiff;
}