window.onload = function() {
	Rubber.ini();
	var info = document.getElementById('info');
	var onmove = document.getElementById('onmove');

	Rubber.onstart = function(r) {
		var orginal = document.getElementById('bild');
		var p = getPos(orginal);
	
		// Nur der Bereich des Bildes kann markiert werden.
		return (r.top >= p.top && r.left >= p.left 
		&& (r.width + r.left) <= (orginal.width + p.left)
		&& (r.height + r.top) <= (orginal.height + p.top)
		);
		
	}
	Rubber.onmove = function(r){
		var s = this.getSize();
		var p = this.getPos();
		var orginal = document.getElementById('bild');
		var p = getPos(orginal);
		
		if(onmove) {
		var out = onmove.getElementsByTagName('span');
		out[0].innerHTML = s.width;
		out[1].innerHTML = s.height;
		out[2].innerHTML = p.top;
		out[3].innerHTML = p.left;
		}
	
		// Nur der Bereich des bildes
		return (r.top >= p.top && r.left >= p.left 
		&& (r.width + r.left) <= (orginal.width + p.left)
		&& (r.height + r.top) <= (orginal.height + p.top)
		);

    }
    Rubber.onend = function() {
		
		/*
		Hier wird der Auschnitt berechnet, der markiert wurde
		und in einem DIV mit der Größe des Orginalbildes angezeigt
		d.h. es kann zu Verzerrungen kommen.
		*/
		var s = this.getSize();
		var p = this.getPos();
		var orginal = document.getElementById('bild');
		var zoom = document.getElementById('zoom');
		
		var zoom_faktor_x = parseInt( orginal.width / s.width * 100) / 100;
		var zoom_faktor_y = parseInt( orginal.height / s.height * 100) / 100;
		
		
		// Die Größe des Bildes
		zoom.firstChild.width = parseInt( orginal.width * zoom_faktor_x) ;
		zoom.firstChild.height = parseInt( orginal.height * zoom_faktor_y) ;
		
		// Die Position des Bildes
		var top = p.top - getPos(orginal).top;
		var left = p.left -  getPos( orginal).left;
		zoom.firstChild.style.top = -(top * zoom_faktor_y) + 'px';
		zoom.firstChild.style.left = -(left* zoom_faktor_x) + 'px';
		zoom.firstChild.style.display = 'inline';
		
		if(!info) return true;
		info.innerHTML = '<pre><small>'
		+ 'Position im Bild :<b>' + top + 'px</b> x <b>' + left + 'px</b> (oben x links)<br>'
		+ 'Größe            :<b>' +  s.width  + 'px</b> x <b>' +  s.height + 'px</b> (breite x höhe)<br>'
		+ 'zoom x/y         : ' + zoom_faktor_x + ' x ' + zoom_faktor_y 
		+ '= ' + zoom.firstChild.height + ' x ' + zoom.firstChild.width + '<br>'
		+ '</small></pre>'
		;
		return true;
    }
}

var getPos = function(obj) {
	var top = 0;
	var left = 0;
	var o = obj;
	do {
		top += parseInt(o.offsetTop);
		left += parseInt(o.offsetLeft);
		o = o.offsetParent;
	} while(o);
	return { top: top, left: left};
};