/**
 * Zoom
 *
 * @author Fran Naranjo
 * @date 2007-01
 */
var Zoom = new Class({
	opciones : {},

/*	x : 0,
	y : 0,
	relacion : { x : 1, y : 1 },
	imagen : { x : 1880, y : 800 },
	ventanaGrande : { x : 252 , y : 252 },
	ventanaPeque : { x : 270, y : 115 },
	ventanaZoom : { x : ventanaGrande['x']*ventanaPeque['x']/imagen['x'], y : ventanaGrande['y']*ventanaPeque['y']/imagen['y'] },
	ventanaZoomBorde : 0,
	dragArea : { xMin : 0, xMax : 0, yMin : 0, yMax : 0 },*/
	zoomElement : null,
	maskElement : null,
	grandeElement : null,
	peqElement : null,

	initialize : function(zoom, mask, grande, peq, opciones) {
		this.opciones = Object.extend({
			'x' : 0,
			'y' : 0,
			'relacion' : { 'x' : 1, 'y' : 1 },
			'imagen' : { 'x' : 1880, 'y' : 800 },
			'ventanaGrande' : { 'x' : 252 , 'y' : 252 },
			'ventanaPeque' : { 'x' : 270, 'y' : 115 },
			//'ventanaZoom' : { 'x' : ventanaGrande['x']*ventanaPeque['x']/imagen['x'], 'y' : ventanaGrande['y']*ventanaPeque['y']/imagen['y'] },
			'ventanaZoom' : { 'x' : 0, 'y' : 0 },
			'ventanaZoomBorde' : 0,
			'dragArea' : { 'xMin' : 0, 'xMax' : 0, 'yMin' : 0, 'yMax' : 0 }
		}, opciones || {});

		this.zoomElement = zoom;
		this.maskElement = mask;
		this.grandeElement = grande;
		this.peqElement = peq;

		//this.opciones.extend(opciones || {});

		// Inicializamos 
		this.opciones['ventanaZoom'] = { 
			'x' : this.opciones['ventanaGrande']['x']*this.opciones['ventanaPeque']['x']/this.opciones['imagen']['x'],
			'y' : this.opciones['ventanaGrande']['y']*this.opciones['ventanaPeque']['y']/this.opciones['imagen']['y'] 
		},
		
		// Inicializamos
		this.zoomElement.setStyles({
			'borderWidth' : this.opciones['ventanaZoomBorde'] + 'px',
			'position' : 'absolute',
			'z-index' : 1000,
			'width' : (this.opciones['ventanaZoom']['x'] - 2 * this.opciones['ventanaZoomBorde']) + 'px',
			'height' : (this.opciones['ventanaZoom']['y'] - 2 * this.opciones['ventanaZoomBorde']) + 'px'
		});
		this.maskElement.setStyles({
			'width' : (this.opciones['ventanaZoom']['x'] - 2 * this.opciones['ventanaZoomBorde']) + 'px',
			'height' : (this.opciones['ventanaZoom']['y'] - 2 * this.opciones['ventanaZoomBorde']) + 'px',
			'z-index' : 1001,
			'margin' : '0px',
			'padding' : '0px'
		});
		this.grandeElement.setStyles({
			'width' : (this.opciones['ventanaGrande']['x']) + 'px',
			'height' : (this.opciones['ventanaGrande']['y']) + 'px'
		});
		this.peqElement.setStyles({
			'width' : this.opciones['ventanaPeque']['x'] + 'px',
			'height' : this.opciones['ventanaPeque']['y'] + 'px',
			'position' : 'relative'
		});

		//this.peqElement.addEvent('mouseover', function() {myZoom.show.bindWithEvent(myZoom)});
		//this.peqElement.onmouseover = myZoom.show;
	},

	show : function() {
		var peq = this.peqElement;
		this.opciones['x'] = peq.offsetLeft;
		this.opciones['y'] = peq.offsetTop;
		this.opciones['dragArea'] = {
			'xMin' : (this.opciones['ventanaZoom']['x']/2),
			'xMax' : this.opciones['ventanaPeque']['x']-(this.opciones['ventanaZoom']['x']/2),
			'yMin' : (this.opciones['ventanaZoom']['y']/2),
			'yMax' : this.opciones['ventanaPeque']['y']-(this.opciones['ventanaZoom']['y']/2)
		};

		this.opciones['relacion'] = { 
			'x' : this.opciones['ventanaGrande']['x'] / this.opciones['ventanaZoom']['x'],
			'y' : this.opciones['ventanaGrande']['y'] / this.opciones['ventanaZoom']['y']
		};

		this.zoomElement.setStyles({
			'visibility' : 'visible'
		});

		document.addEvent('mousemove', this.showCoords);
		this.zoomElement.setStyles({
			'cursor' : 'move'
		});
	},
	
	dontshow : function() {
		window.removeEvent('mousemove');
		myZoom.zoomElement.setStyles({
			'visibility' : 'hidden'
		});
	},

	showCoords : function(evento) {
		evento = evento || window.event;

		var actual = { 'x' : evento.clientX-myZoom.opciones['x'], 'y' : evento.clientY-myZoom.opciones['y'] };
		
		if(actual['x'] < 0 || actual['x'] > myZoom.opciones['ventanaPeque']['x'] || actual['y'] < 0 || actual['y'] > myZoom.opciones['ventanaPeque']['y']) {
			myZoom.dontshow();
		}
		else {
			if(actual['x'] < myZoom.opciones['dragArea']['xMin'])
				actual['x'] = myZoom.opciones['dragArea']['xMin'];
			if(actual['x'] > myZoom.opciones['dragArea']['xMax'])
				actual['x'] = myZoom.opciones['dragArea']['xMax'];
			if(actual['y'] < myZoom.opciones['dragArea']['yMin'])
				actual['y'] = myZoom.opciones['dragArea']['yMin'];
			if(actual['y'] > myZoom.opciones['dragArea']['yMax'])
				actual['y'] = myZoom.opciones['dragArea']['yMax'];
			
			zoomActual = {
				'x' : (actual['x']+myZoom.opciones['x']-myZoom.opciones['ventanaZoom']['x']/2),
				'y' : (actual['y']+myZoom.opciones['y']-myZoom.opciones['ventanaZoom']['y']/2)
			};

			var nuevo = {
				'x' : ((zoomActual['x']-myZoom.opciones['x']) * myZoom.opciones['relacion']['x']),
				'y' : ((zoomActual['y']-myZoom.opciones['y']) * myZoom.opciones['relacion']['y'])
			};

			myZoom.zoomElement.setStyles({
				'left' : zoomActual['x'] + 'px',
				'top' : zoomActual['y'] + 'px'
			});

			myZoom.grandeElement.setStyles({
				'backgroundPosition' : '-' + nuevo['x'] + 'px -' + nuevo['y'] + 'px'
			});
		}	
	}
});