window.onload = function() {
	Rubber.ini(addEvent);
	
	var onmove = null;
	var orginal = document.getElementById('bild');
	var p = getPos(orginal);
	
	// Eine Kopie des Bildes anlegen 
	// und daneben platzieren
	var copy = orginal.cloneNode(true);
	var container = document.createElement('div');

	container.style.position = 'absolute';
	container.style.display = 'inline';

	container.style.width = orginal.offsetWidth + 'px';
	container.style.height = orginal.offsetHeight + 'px';
	container.style.overflow = 'hidden';
	
	copy.style.position = 'absolute';
	copy.style.top = '50%';
	copy.style.left = '50%';
	copy.style.display = 'none';
	
	container.appendChild(copy);
	orginal.parentNode.appendChild(container);
	
	// Das Rubberband soll nur auf dem Bild aktiv sein
	Rubber.bound(
	new Rect(p.top, p.left, orginal.height, orginal.width )
	);
	
    // onmouseup
	// Den Ausschnitt berechnen und anzeigen
	Rubber.onend = function(r) {
		var o = getPos(orginal);
		
		container.firstChild.style.position = 'absolute';
		container.firstChild.style.display = '';
		
		// Die Position der Kopie im Container berechnen
		var top = r.top - o.top;
		var left =  r.left - o.left;
		container.firstChild.style.top = -(r.top - o.top)  + 'px';
		container.firstChild.style.left = -(r.left - o.left) + 'px';
		
		// Nur den Auschnitt anzeigen
		container.style.width =  r.width + 'px';
		container.style.height =  r.height + 'px';
		
		// Den Container zentriert neben dem Orginal anzeigen
		left = o.left + o.width + o.width/2 - r.width/2;
		top = o.top + o.height/2 - r.height/2;
		
		container.style.top = top  + 'px';
		container.style.left = left + 'px';

		return true;
    }
}

// Hilfsfunktion
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, width:obj.offsetWidth, height:obj.offsetHeight};
};