var lupe = new Lupe( ['lupe', 'lupeImg', 'lupeViewer', [134,100,136,75,5,640,280]] );
var scroller = new Scroller( ['facts', 30, 11, 35, 3000] );

function Lupe(params_Array)
{
	// Lupenfunktion, nach einem Skript von 2001
	// (c) endo.ch 2010 Christoph Berger, www.endo.ch

	var lupeObj = this;
	this.viewer = null; // DOM <div>-objekt der Lupe
	this.image = null; // DOM <div>-objekt des versteckten Bildes
	this.lupeActive = false; // true sobald Lupe angezeigt wird
	this.cssID = [params_Array[0], params_Array[1], params_Array[2]];
	this.vPos = params_Array[3];	// Breite Viewer, Höhe Viewer, Hotspot X, Hotspot Y, Breite Viewerrahmen, Breite Aktiver Bereich, Höhe Aktiver Bereich
	this.offsetTop = null;	// Offset-Position des Lupe-Gesamtblocks relativ zum Body
	this.offsetLeft = null;	// Offset-Position des Lupe-Gesamtblocks relativ zum Body
	
	this.lock = false; // Boolean Property zum Sperren 
	
	this.update = function(e) {
		x = (document.all) ? e.clientX + (document.documentElement.scrollLeft | document.body.scrollLeft) : e.pageX;
		y = (document.all) ? e.clientY + (document.documentElement.scrollTop  | document.body.scrollTop)  : e.pageY;
		x -= lupeObj.offsetLeft;
		y -= lupeObj.offsetTop;
		
		var isInsideBox = !(x<40 || x>lupeObj.vPos[5] || y<0 || y>lupeObj.vPos[6]);

		if (lupeObj.lupeActive) {
		
			if (lupeObj.viewer) {
				lupeObj.viewer.style.left = (x - lupeObj.vPos[2] ) + 'px';
				lupeObj.viewer.style.top 	= (y - lupeObj.vPos[3]) + 'px';
				lupeObj.viewer.style.visibility = 'visible';
			}
			
			if (lupeObj.image) {
				var p0 = y - lupeObj.vPos[3] + lupeObj.vPos[4];
				var p1 = x - lupeObj.vPos[2] + lupeObj.vPos[0] - lupeObj.vPos[4];
				var p2 = y - lupeObj.vPos[3] + lupeObj.vPos[1] - lupeObj.vPos[4];
				var p3 = x - lupeObj.vPos[2] + lupeObj.vPos[4];
				lupeObj.image.style.clip = 'rect('+p0+'px, '+p1+'px, '+p2+'px, '+p3+'px)'; 
				lupeObj.image.style.visibility = 'visible';
			}
			
			if (!isInsideBox)
				lupeObj.hideLupe();
		}
		else if(isInsideBox)
			lupeObj.showLupe();
	}
	
	this.showLupe = function(element) {
		if(!lupeObj.lock)
			lupeObj.lupeActive = true;
		//lupeObj.update(window.event);
	}
	
	this.hideLupe = function(element) {
		if (lupeObj.viewer) 
			lupeObj.viewer.style.visibility = 'hidden';
		if (lupeObj.image && !lupeObj.lock)
			lupeObj.image.style.visibility = 'hidden';
		lupeObj.lupeActive = false;
	}
	
	this.init = function(){
		
		// Handler für aktive Region (Lupe ein/aus)
		if (ele = document.getElementById(lupeObj.cssID[0])) {
			//lupeObj.addListener(ele, 'mouseover', function(e){ lupeObj.showLupe(e.srcElement||this)});
			//lupeObj.addListener(ele, 'mouseout', function(e){ lupeObj.hideLupe(e.srcElement||this)});
		
			// Offset des Lupe-Gesamtblocks berechnen
			var curleft = curtop = 0;	
			if (ele.offsetParent) {
				do {
					curleft += ele.offsetLeft;
					curtop += ele.offsetTop;
				} while (ele = ele.offsetParent);
			}
			lupeObj.offsetTop = curtop;
			lupeObj.offsetLeft = curleft;
		}
		
		if (ele = document.getElementById(lupeObj.cssID[1])) 
			lupeObj.image = ele;
		if (ele = document.getElementById(lupeObj.cssID[2])) 
			lupeObj.viewer = ele;

		lupeObj.addListener(document, 'mousemove', lupeObj.update);
	}
	
	
	
	this.addListener = function(element, event, listener, bubble) {
		if(element.addEventListener) {
			if(typeof(bubble) == 'undefined'){
				bubble = false;
			}
			element.addEventListener(event, listener, bubble);
		} else if(document.attachEvent) {
			element.attachEvent("on" + event, listener);
		}
	}
	
	// init nach Ende des Ladevorgangs aufrufen
	this.addListener(window, 'load', this.init);
}



function Scroller(params_Array)
{
	// Vertikaler Scroller
	// (c) endo.ch 2010 Christoph Berger, www.endo.ch

	var scrollerObj = this;
	this.block = null; // DOM <div>-objekt des Scrollblocks
	this.position = 0; // bereits gescrolltes Offset 
	this.blockID = params_Array[0];
	this.lineHeight = params_Array[1];	// Höhe der Zeile, Anzahl Pixel zum Scrollen
	this.blockHeight = params_Array[2]*this.lineHeight;	// Anzahl Zeilen => Gesamthöhe in Pixel
	this.scrollDelay = params_Array[3];	// Timeout-Delay fürs Scrollen um ein Pixel
	this.pause = params_Array[4];	// Timeout-Delay für ungescrollte Anzeige
	
	this.scroll = function(e) {
	
		scrollerObj.position++;
		if (scrollerObj.position >= scrollerObj.blockHeight)
			scrollerObj.position = 0;
			
		scrollerObj.clip();
		
		if (scrollerObj.position % scrollerObj.lineHeight == 0){
			//alert(scrollerObj.position);
			window.setTimeout (scrollerObj.scroll, scrollerObj.pause);
		}
		else
			window.setTimeout (scrollerObj.scroll, scrollerObj.scrollDelay);
	}
	
	this.clip = function() {
		//scrollerObj.block.style.clip = 'rect('+	scrollerObj.position + 'px, auto, auto, 0)';
		scrollerObj.block.style.marginTop = '-' + scrollerObj.position + 'px';

	}
	
	this.init = function(){
		
		if (ele = document.getElementById(scrollerObj.blockID)) {
			scrollerObj.block = ele;
			scrollerObj.position = 0;
			scrollerObj.clip();
			
			if (ele = document.getElementById('scrollerHidden'))
				ele.style.display = 'block';
				
			window.setTimeout (scrollerObj.scroll, scrollerObj.pause);
		}
	}
	
	
	
	this.addListener = function(element, event, listener, bubble) {
		if(element.addEventListener) {
			if(typeof(bubble) == 'undefined'){
				bubble = false;
			}
			element.addEventListener(event, listener, bubble);
		} else if(document.attachEvent) {
			element.attachEvent("on" + event, listener);
		}
	}
	
	// init nach Ende des Ladevorgangs aufrufen
	this.addListener(window, 'load', this.init);
}