/**
 * zoom/Image
 * @autor:Bernhard Zürn
 * Ironshark Entertainment
 */
//Instanz für die lupe anlegen
var zoomImage = Class.create();

//Prototyp-Klasse
zoomImage.prototype = 
{
	//erstellt ein LupenElement
	createMagnifier:function()
	{
		//Lupen-Element erstellen
		magnifier = document.createElement('div');
		magnifier.id = "magnifier";

		document.body.appendChild(magnifier);
		
		$('magnifier').className = 'magnifier';
		
		$('magnifier').setStyle({
			  width: '100px',
			  height: '100px',
			  position: 'absolute',
			  top: '0px',
			  left: '0px',
			  overflow:'visible'
		});
		$('magnifier').hide();
	},
	//erstellt ein Elemnt für das Vergrößerte Bild
	createMagnifiedImage:function(xPos,yPos)
	{				
		if(!$('zoomImageHolder')) 
		{
			return;
		}
		$('zoomImageHolder').className = 'zoomImageHolder';
				
		$('zoomImageHolder').setStyle({
			overflow:'hidden',
			width:'200px',
			height: '200px',
		    position:'absolute'
		});
	},
	//Initialisierung
	initialize:function()
	{		
		//Es sind noch keien weiteren Events eingetreten:
		eventHistory=0;
	
		// vergrößerungsfaktor:
		zoomLevel=2;
		
		if(!$('mainImage')) {
			return;
		}
		
		//ID des zu vergrößernden Bildes
		var magnificantImage=$('mainImage');
		
		//Wo befindet sich das Bild ?
		var coord=magnificantImage.viewportOffset();
		var magnificantImageTop=coord[1];
		var magnificantImageLeft=coord[0];
		
		// wen vorher gescrollt wurde wird es ausgeglichen
		var scrollOffset = document.viewport.getScrollOffsets();
		magnificantImageLeft += scrollOffset[0];
		magnificantImageTop += scrollOffset[1];
		
		//größe des Bildelements ermitteln
		var dimensions=$(magnificantImage.id).getDimensions();
		
		//Höhe und Breite
		magnificantImage.width=dimensions.width;
		magnificantImage.height=dimensions.height;
		
		//Lupe erstellen
		this.createMagnifier();
		
		//vergrößertes Bild erstellen
		this.createMagnifiedImage((magnificantImage.width*2),200);
		
		//beim window resize wird die bildposition erneut abgefragt
		Event.observe(window,'resize',function()
		{
			coord = magnificantImage.viewportOffset();
			magnificantImageLeft = coord[0];
			magnificantImageTop = coord[1];
			
			scrollOffset = document.viewport.getScrollOffsets();
			magnificantImageLeft += scrollOffset[0];
			magnificantImageTop += scrollOffset[1];
		});
		
		//Bewegungen der Maus überwachen
		$(window.document).observe('mousemove', function(event)
		{
			// Wo befindet sich der Mauszeiger ? 
			mouseX=Event.pointerX(event);
			mouseY=Event.pointerY(event);
			
			//An welcher Stelle befindet sich die Maus über dem Bild ?
			mouseOverImageX=2*(mouseX-magnificantImageLeft-50);
			mouseOverImageY=2*(mouseY-magnificantImageTop-50);
			
			// Befindet sich die Maus über dem Bild?
			if(((mouseX>=magnificantImageLeft)&&(mouseX<=magnificantImageLeft+magnificantImage.width))&&((mouseY>=magnificantImageTop)&&(mouseY<=magnificantImageTop+magnificantImage.height)))
			{
				//Mouse-Over
				if(eventHistory==0)
				{
					//Merken das Maus sich über Bild bewegt hat
					eventHistory=1;
					
					//Lupe anzeigen
					if($('magnifier')) $('magnifier').show();
					
					//vergrößertes Bild anzeigen
					if($('zoomImageHolder')) $('zoomImageHolder').show();
				}
				//MouseMove
				else
				{
					//Lupe verschieben
					if($('magnifier')) {
						
						var positionX=0;
						var positionY=0;
						
						// Begrenzung X auf Bildbreite
						if(mouseX-magnificantImageLeft > magnificantImage.width-50)
						{
							positionX = magnificantImageLeft+magnificantImage.width-100;
						}
						else if(mouseX-magnificantImageLeft <= 50)
						{
							positionX = magnificantImageLeft;
						}
						else
						{
							positionX = mouseX-50;
						}
						
						// Begrenzung Y auf Bildhöhe
						if(mouseY-magnificantImageTop > magnificantImage.height-50)
						{
							positionY = magnificantImageTop+magnificantImage.height-100;
						}
						else if(mouseY-magnificantImageTop <= 50)
						{
							positionY = magnificantImageTop;
						}
						else
						{
							positionY = mouseY-50;
						}
						
						//Positionsfix alle Browser
						positionY += 1;
						positionX += 1;
						
						$('magnifier').setStyle({
							top:  positionY+'px',
							left: positionX+'px'
						});
					}
					//vergrößertes Bild positionieren
					if($('zoomImage')) {
						
						var positionX=0;
						var positionY=0;
						
						// Begrenzung X auf Bildbreite
						if(mouseX-magnificantImageLeft > magnificantImage.width-50)
						{
							positionX = 2*(magnificantImage.width-100);
						}
						else if(mouseX-magnificantImageLeft <= 50)
						{
							positionX = 0;
						}
						else
						{
							positionX = mouseOverImageX;
						}
						
						// Begrenzung Y auf Bildhöhe
						if(mouseY-magnificantImageTop > magnificantImage.height-50)
						{
							positionY = 2*(magnificantImage.height-100);
						}
						else if(mouseY-magnificantImageTop <= 50)
						{
							positionY = 0;
						}
						else
						{
							positionY = mouseOverImageY;
						}
						
						$('zoomImage').setStyle({
							margin: -positionY+'px 0 0 -'+positionX+'px'
						});
					}
				}
			}
			else
			{
				//MouseOut
				if(eventHistory==1)
				{
					//Event-History zurücksetzen
					eventHistory=0;
					
					//Lupe verstecken
					if($('magnifier')) $('magnifier').hide();
					
					//vergrößertes Bild verstecken
					if($('zoomImageHolder')) $('zoomImageHolder').hide();
				}
			}
		});
		
	}
};

var clickZoom = Class.create();

//Prototyp-Klasse
clickZoom.prototype = {
	initialize: function(){		
		
		// prüfen ob Bild vorhanden ist
		if ($('clickZoomHolder')) 
		{
			this.addListener();
		}
		
	},
	addListener: function(){
		$('mainImage').observe('click', function(event)
		{
			$('clickZoomHolder').style.display = 'block';
			$('czBg').style.display = 'block';
		});
		$('zoomLink').observe('click', function(event)
		{
			event.stop();
			$('clickZoomHolder').style.display = 'block';
			$('czBg').style.display = 'block';
		});
		$('clickZoomHolder').observe('click', function(event)
		{
			$('clickZoomHolder').style.display = 'none';
			$('czBg').style.display = 'none';
		});
	}
};

Event.observe(window,'load',function() {
  	//zi = new zoomImage();
	cz = new clickZoom();
	
});