

var zoomImage = function() {
	
	var options = arguments[0] || {};
	var self = this;
	var container, viewfinder, imagesize, id;
	
	this.moveviewfinder = function(e) {
		
		var c_pos = container.getPosition();
		var scroll = window.getScroll();
		var offset = -5;
		
		var debug = '';
		
		debug += '\nCurrent\n';
		debug += '-----------------------\n';
		
		for( key in c_pos) {
			debug += key + ' = ' + c_pos[key] + '\n'
		}
		
		debug += '\nScroll\n';
		debug += '-----------------------\n';
		
		for( key in scroll) {
			debug += key + ' = ' + scroll[key] + '\n'
		}

		var n_pos = {'x': (e.client.x - c_pos.x), 'y': ((e.client.y - c_pos.y ) + scroll.y)};
		
		debug += '\nNew Position\n';
		debug += '-----------------------\n';
		
		for( key in n_pos) {
			debug += key + ' = ' + n_pos[key] + '\n'
		}
		
		debug += '\nClient\n';
		debug += '-----------------------\n';
		
		for( key in e.client) {
			debug += key + ' = ' + e.client[key] + '\n'
		}
		
		//alert(debug);
		
		viewfinder.setStyles({
			'left': n_pos.x + offset,
			'top': n_pos.y + offset,
			
			'backgroundImage': 'url(' + options['l_image'] + ')',
			'backgroundPosition': '-' + ((n_pos.x - offset) * 2) + 'px -' + ((n_pos.y - offset) * 2) + 'px',
			'backgroundRepeat': 'no-repeat'
		});
		
	};
	
	this.viewfinder = function(mode) {
		
		id = "viewfinder" + options['id'];
		
		switch(mode) {
			case "open" :
			
				viewfinder = new Element("div", {
					'id': id,
					'styles': {
						'width': 300,
						'height': 300,
						'position': 'absolute',
						'top': 0,
						'left': 0
					},
					'events': {
						'click': function(e) {
							window.location = options['l_image'];
						}
					}
				});

				container.addEvent("mousemove", self.moveviewfinder);
				viewfinder.inject(container);
			
			break;
			case "close" :
			
				container.removeEvent("mousemove", self.moveviewfinder);
				$(id).destroy();
			
			break;
		};
	};
	
	this.start = function() {
		
		imagesize = { 
			'height' : options['img'].getStyle("height").toInt(),
			'width': options['img'].getStyle("width").toInt()
		};
		
		container = new Element("div", {
			'id': 'imageBox' + options['id'],
			'styles': {
				'height': imagesize.height,
				'width': imagesize.width,
				'position': 'relative',
				'float': 'right',
				'margin': '5px'
			},
			'events': {
				'mouseenter': function() {
					self.viewfinder('open');
				},
				'mouseleave': function() {
					self.viewfinder('close');
				}
			}
		});
		
		// setup new elements
		var parent = options['img'].getParent();
		parent.empty();
		
		options['img'].inject(container);
		container.inject(parent);
		
	};
	
	
};
