var a;
var z;
var wheelup;
var wheeldown;
var keydown; 
var keyup; 
var div_pos;
var width = 435
var height = 550
	  
function init(){
	a = 0;
	z = document.getElementById('content_middle_inner').offsetHeight /*- document.getElementById('content_middle').offsetHeight*/ +50;
	div_pos = getPosition(document.getElementById('content_middle'));
}

function top(){
	document.getElementById('content_middle_inner').style.top = '0px';
	a = 0;
}

function scrollen(wert) {
	b = wert;
	if ( keydown && a >= (z - (height-100))*-1 ) {
		a = a -b;	
		document.getElementById('content_middle_inner').style.top = a +'px';
		setTimeout("scrollen(b)",1);
	}
	if ( keyup && a <= 0  ) {
		a = a +b;	
		document.getElementById('content_middle_inner').style.top = a +'px';
		setTimeout("scrollen(b)",1);
	}
	if ( wheelup && a >= (z - (height-100))*-1  ) {
		a = a -b;	
		    
		document.getElementById('content_middle_inner').style.top = a +'px';
		wheelup = 0;
	}
	if ( wheeldown && a <= 0 ) {
		a = a +b;	
		if ( a > 0 )
			a = 0;
		document.getElementById('content_middle_inner').style.top = a +'px';
		wheeldown = 0;
	}
}

/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {

	if (delta < 0) {
		wheelup = 1;
		scrollen(25);	
	} else {
		wheeldown = 1;
		scrollen(25);	
	}
}
function mouse_pos(e) {
	if(!e) e = window.event;
		var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? 
		window.document.documentElement : window.document.body;
	return {
		// Position im Dokument
		top: e.pageY ? e.pageY : e.clientY + body.scrollTop - body.clientTop,
		left: e.pageX ? e.pageX : e.clientX + body.scrollLeft  - body.clientLeft 
	};

}

function getPosition(obj){
    var topValue= 0,leftValue= 0;
    while(obj){
	leftValue+= obj.offsetLeft;
	topValue+= obj.offsetTop;
	obj= obj.offsetParent;
    }
    return {
      left: leftValue,
      top: topValue
    }
}


function wheel(event){
	
	var border_top = div_pos['top'];
	var border_left = div_pos['left'];
	var border_bottom = border_top + height;
	var border_right = border_left + width;

	var objStart = document.getElementById('content_middle_inner');
	// Startwert
	var intOffsetLeft = objStart.offsetLeft;
	// Offset-Objekt
	var objOffset = {
	left: objStart.offsetLeft,
	top: objStart.offsetTop
	}

	// Elternelement mit Offset ermitteln
	var objHelpOffset = objStart.offsetParent;

	// Solange OffsetElemente existieren
	while(objHelpOffset){
	// Offsets addieren
	objOffset.left += objHelpOffset.offsetLeft;
	objOffset.top += objHelpOffset.offsetTop;
	// Nächstes OffsetElement
	objHelpOffset = objHelpOffset.offsetParent;
	}

    var p = mouse_pos(event);

	
	/*if (p['top'] > objOffset.top && p['top'] < (objOffset.top + height) && p['left'] > objOffset.left && p['left'] < (objOffset.left + width)) {*/
	if ( p['top'] > border_top && p['top'] < border_bottom && p['left'] > border_left && p['left'] < border_right ) {

		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
			if (window.opera) delta = -delta;
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta)
			handle(delta);
		    if (event.preventDefault)
		            event.preventDefault();
		    event.returnValue = false;
	} else {

  }
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;