// Globale Variablen

// Zoombereich (div)
var bereich;

// Karte (img)
var karte;

// Rein- oder Rauszoomen?
var isZoomIn = true;
var zoomFaktor = 0.5;

// Versatz der Bobbel auf Karte
var korrX, korrY;

// Verschieb-Variablen



// Array-Ablage für Original-Bobbel- und -Link-Position
var bobbelX = new Array();
var bobbelY = new Array();

var extLinkX = new Array();
var extLinkY = new Array();


function zoomInOut (Event) 
{
	// Event einfangen
	Event = window.event? window.event : Event;
	
	// Zoom-Out nur, wenn nicht von Karte kommt (dort Drag!)
	var woher =window.event? event.srcElement : Event.target;
	if (woher == karte && !isZoomIn) return;	
	
	// Cursor ändern
	if (isZoomIn) karte.style.cursor = 'url(../layout/hand_open.cur), move';
	else karte.style.cursor = 'url(../layout/lupe.cur), auto';
	
	// Maus-Position
	var mausX = Event.layerX ? Event.layerX : Event.offsetX;
	var mausY = Event.layerY ? Event.layerY : Event.offsetY;
	
	// Zoom-Faktor anpassen
	zoomFaktor = 1 / zoomFaktor;
	
	// Verschiebung des Kartenursprungs
	var zoomX = (mausX * zoomFaktor) - mausX; 
	var zoomY = (mausY * zoomFaktor) - mausY;
	
	// Karte:
	var karteWidth = parseInt(karte.style.width);
	var karteHeight = parseInt(karte.style.height);
	
		// Karte anpassen...
	// 1) Breite und Höhe der Karte
	karte.style.width = (karteWidth * zoomFaktor) + "px"
	karte.style.height = (karteHeight * zoomFaktor) + "px"; 
		
	// 2) Position der Karte	
	karte.style.left = (isZoomIn ? -zoomX : 0)  + "px" ;
	karte.style.top = (isZoomIn ? -zoomY : 0)  + "px" ;

	
	// Bobbel und Links verschieben
	moveBobbel (zoomX, zoomY, isZoomIn);
	moveExtLinks (zoomX, zoomY, isZoomIn);
	
	// Button zum Herauszoomen nehmen
	document.getElementById('zoom_out').style.visibility = (isZoomIn ? 'visible' : 'hidden');
		
	// Move de-/aktivieren
	if (isZoomIn) dragobject.initialize();
	else dragobject.remove();
		
	// Zoom de-/aktivieren
	karte.onmousedown = (isZoomIn ? '' : zoomInOut);	
		
	// Zoom umdrehen...
	isZoomIn = !isZoomIn;		
}


function moveBobbel(bezugX, bezugY, isMove)
{
	// Zoom-Bereich:
	var bereichWidth = parseInt(bereich.style.width);
	var bereichHeight = parseInt(bereich.style.height) + parseInt(bereich.style.top) - 10;
	
	// Bobbel verschieben
	// Dazu alle Bobbel (hier mit ID pegelXXX) durchlaufen und verschieben
	var nr=0;
	var bobbel = document.getElementById("pegel" + nr);
	while (bobbel != undefined)
	{
		var links = parseInt(bobbel.style.left);
		var oben = parseInt(bobbel.style.top);
		
	  if (isZoomIn) 
	  {
	  	// Original-Werte in Array ablegen
	  	bobbelX[nr] = links;
	  	bobbelY[nr] = oben;
	  }
		else
		{
			links = bobbelX[nr];
			oben = bobbelY[nr];
		}
		
		if (isMove)	  	
	  {
	  	// Neue Position berechnen
	  	links = (((links-korrX) * zoomFaktor) - bezugX + korrX);
	  	oben = (((oben-korrY)*zoomFaktor) -bezugY + korrY);
		}
		
		bobbel.style.left = links + "px";
		bobbel.style.top = oben + "px";		

		 
		// Noch sichtbar?
		if (links > bereichWidth 
				|| oben > bereichHeight
				|| oben < korrY
				|| links < korrX)
			bobbel.style.visibility = 'hidden';
		else
			bobbel.style.visibility = 'visible';		
		
	
		// Nächsten Bobbel holen		
		nr++;
		bobbel = document.getElementById("pegel" + nr);
	} 
}

function moveExtLinks(bezugX, bezugY, isMove)
{
	// Zoom-Bereich:
	var bereichWidth = parseInt(bereich.style.width);
	var bereichHeight = parseInt(bereich.style.height) + parseInt(bereich.style.top) - 10;
	
	// Links verschieben
	// Dazu alle Links (hier mit ID extlinkXXX) durchlaufen und verschieben
	var nr=0;
	var extLink = document.getElementById("extlink" + nr);
	while (extLink != undefined)
	{
		
		// Vorläufig weg, da Posion nicht stimmt
		if (isZoomIn || isMove)
				extLink.style.visibility = 'hidden';
		else
			extLink.style.visibility = 'visible';		
		
		
		
//		var links = parseInt(extLink.style.left);
//		var oben = parseInt(extLink.style.top);
//		
//	  if (isZoomIn) 
//	  {
//	  	// Original-Werte in Array ablegen
//	  	extLink[nr] = links;
//	  	extLink[nr] = oben;
//	  }
//		else
//		{
//			links =extLink[nr];
//			oben = extLink[nr];
//		}
//		
//		if (isMove)	  	
//	  {
//	  	// Neue Position berechnen
//	  	//links = (((links-korrX) * zoomFaktor) - bezugX + korrX) + '.' + links;
//	  	//oben = (((oben-korrY)*zoomFaktor) -bezugY + korrY) + '.' + oben;
//	  	
//	  	
//	  	links = ((links * zoomFaktor) -bezugX);
//	  	oben = ((oben * zoomFaktor) - bezugY);
//		}
//		
//		extLink.style.left = links + "px";
//		extLink.style.top = oben + "px";		
//
//		 
//		// Noch sichtbar?
//		if (links > bereichWidth 
//				|| oben > bereichHeight
//				|| oben < korrY
//				|| links < korrX)
//			extLink.style.visibility = 'hidden';
//		else
//			extLink.style.visibility = 'visible';		
		
	
		// Nächsten extLink holen		
		nr++;
		extLink = document.getElementById("extlink" + nr);
	} 
}


function initZoomAndDrag (idKarte, idZoomBereich, korrXStationen, korrYStationen) 
{
	// Versatz-Korrektur übernehmen
	korrX = korrXStationen;
	korrY = korrYStationen;
	
	// Zoombereich und Karte zuweisen
	karte = document.getElementById(idKarte);
	bereich = document.getElementById(idZoomBereich);
	
	// Zoom und HerausZoom aktivierten
  karte.onmousedown = zoomInOut;
  document.getElementById('zoom_out').onclick = zoomInOut;
  
  // Cursor anpassen
  karte.style.cursor = 'url(../layout/lupe.cur), auto';

	// Drag initialisieren
	//dragobject.initialize()
}





/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject=
{
	z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
	initialize:function()
	{
		document.onmousedown=this.drag
		document.onmouseup=this.dragStop
	},
	
	remove:function()
	{
		document.onmousedown=''
		document.onmouseup=''
	},
	
	drag:function(e)
	{
		// Nur, wenn schon reingezoomt
		if (isZoomIn) return;
		
		var evtobj=window.event? window.event : e
		this.targetobj=window.event? event.srcElement : e.target
		if (this.targetobj== karte)
		{
			this.dragapproved=1
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault)
				evtobj.preventDefault()
				
			karte.style.cursor = 'url(../layout/hand_closed.cur), move';	
			document.onmousemove=dragobject.moveit
		}
	},
	
	moveit:function(e)
	{
		var evtobj=window.event? window.event : e
		if (this.dragapproved==1)
		{
			var newX = this.offsetx+evtobj.clientX-this.x;
			var newY = this.offsety+evtobj.clientY-this.y;
			
			// Karte verschieben
			this.targetobj.style.left = newX+"px";
			this.targetobj.style.top = newY+"px";
			
			// Bobbel und Externe Links verschieben
			moveBobbel (-newX, -newY, true);
			moveExtLinks (-newX, -newY, true);
			
			return false
		}
	},
	
	dragStop:function()
	{
		this.dragapproved=0
		karte.style.cursor = 'url(../layout/hand_open.cur), move';
	}
}
	

/* ++++++++++++++++++++++++++++++ */