var JUHPZoom = Class.create();
JUHPZoom.prototype = {
	initialize : function(element, options) {
		this.options = Object.extend({
			boxWidth : 440,
			boxHeight : 380,
			boxBorder : 4,
			imageWidth : 240,
			imageHeight : 150,
			cursorWidth : 240,
			cursorHeight : 150,
			ratioWidth : 1,
			ratioHeight : 1
		}, options || {});

		this.id = element.identify();
		this.element = $(element);
		this.container = new Element('div', {
			'id': 'juhp-zoom-container-'+this.id,
			'class': 'juhp-zoom-container'
		}).insert({
			top: new Element('img', {
				'id': 'juhp-zoom-medium-'+this.id,
				'src': this.element.childElements()[0].title,
				'title': this.element.childElements()[0].alt
			}),
			bottom: new Element('div', {
				'id': 'juhp-zoom-cursor-'+this.id,
				'class': 'juhp-zoom-cursor'
			}).setStyle({
				'position' : 'absolute',
				'width' : '1px',
				'height' : '1px'
			}).morph('opacity: 0.4')
		}).insert({
			bottom: new Element('img', {
				'src' : '/images/kategori_over.png',
				'class' : 'overthingy'
			})
		}).observe('click', function(o) {
			this.clickety();
		}.bind(this)).observe('mouseover', function(o) {
			$('juhp-zoom-box-'+this.id).setStyle({ 'marginTop' : '0px' });
			this.measurePositions();
			$('juhp-zoom-cursor-'+this.id).setStyle({
				'width' : this.options.cursorWidth + 'px',
				'height' : this.options.cursorHeight + 'px'
			}).show();
		}.bind(this)).observe('mouseout', function(o) {
			$('juhp-zoom-box-'+this.id).setStyle({ 'marginTop' : '-10000px' });
			$('juhp-zoom-cursor-'+this.id).hide();
		}.bind(this)).observe('mousemove', function(o) {
			var eCursor = $('juhp-zoom-cursor-'+this.id);
			var eCursorImage = $$('#juhp-zoom-container-'+this.id+' img')[0];
			var eCursorImageLayout = eCursorImage.getLayout();
			var eBoxImage = $('juhp-zoom-box-'+this.id).firstChild;
			var eBoxImageLayout = eBoxImage.getLayout();

			var mathWidth = eBoxImageLayout.get('width') <= this.options.boxWidth ? 1 : this.options.boxWidth / eBoxImageLayout.get('width'); //eBoxImage.getWidth();
			var mathHeight = eBoxImageLayout.get('height') <= this.options.boxHeight ? 1 : this.options.boxHeight / eBoxImageLayout.get('height'); //eBoxImage.getHeight();
			var mathX = o.pageX - eCursorImage.cumulativeOffset()[0];
			var mathY = o.pageY - eCursorImage.cumulativeOffset()[1];
			var cursorWidth = eCursorImageLayout.get('width') * mathWidth; //eCursorImage.getWidth() * mathWidth;
			var cursorHeight = eCursorImageLayout.get('height') * mathHeight; //eCursorImage.getHeight() * mathHeight;

			var newPosX = mathX - (cursorWidth / 2);
			var newPosY = mathY - (cursorHeight / 2);
			var posMaxX = eCursorImageLayout.get('width') - cursorWidth;
			var posMaxY = eCursorImageLayout.get('height') - cursorHeight;
			var newPosRealX = newPosX < 0 ? 0 : (newPosX >= posMaxX ? posMaxX : newPosX);
			var newPosRealY = newPosY < 0 ? 0 : (newPosY >= posMaxY ? posMaxY : newPosY);
			var percentX = newPosRealX / eCursorImageLayout.get('width');
			var percentY = newPosRealY / eCursorImageLayout.get('height');

			eCursor.setStyle({
				'marginLeft' : newPosRealX + 'px',
				'marginTop' : newPosRealY + 'px'
			});

			eBoxImage.setStyle({
				'marginLeft' : -(eBoxImage.getWidth() * percentX) + 'px',
				'marginTop' : -(eBoxImage.getHeight() * percentY) + 'px'
			});
		}.bind(this));
		this.preloadImage = new Image();
		this.element.childElements().each(function (o) {
			o.observe('click', function(e) {
				this.preloadImage.src = e.element().title;
				this.preloadImage.src = e.element().alt;
				this.click(e.element());
			}.bind(this));
		}.bind(this));
		this.element.insert({ top: this.container });
		this.element.insert({
			top: new Element('div', {
				'id': 'juhp-zoom-box-'+this.id,
				'class': 'juhp-zoom-box'
			}).insert({
				top: new Element('img')
			})
		});
		$('juhp-zoom-box-'+this.id).setStyle({
			'width' : this.options.boxWidth + 'px',
			'height' : this.options.boxHeight + 'px',
			'marginLeft' : -(this.options.boxWidth + this.options.boxBorder) + 'px',
			'marginTop' : '-10000px'
		});
		$('juhp-zoom-box-'+this.id).firstChild.style.position = 'absolute';
		$$('#juhp-zoom-container-'+this.id+' img')[0].style.float = 'left';
		$('juhp-zoom-box-'+this.id).firstChild.src = $$('#juhp-zoom-container-'+this.id+' img')[0].title;
		$(document.body).insert({
			top: new Element('div', {
				'id': 'juhp-zoom-thezoom-'+this.id,
				'class' : 'juhpcursor'
			}).setStyle({
				'position' : 'fixed',
				'width' : '100%',
				'height' : '100%',
				'backgroundColor' : '#000',
				'zIndex' : '3000',
				'opacity' : .5
			}).observe('click', function(o) {
				this.clicketyOut();
			}.bind(this)).morph('opacity: 0').hide()
		});
	},
	click : function(image) {
		$('juhp-zoom-medium-'+this.id).src = image.title;
		$('juhp-zoom-medium-'+this.id).title = image.alt;
		$('juhp-zoom-box-'+this.id).firstChild.src = image.alt;
	},
	clickety : function() {
		$('juhp-zoom-thezoom-'+this.id).show().morph('opacity: 0.5', { duration : .5, fps : 60 });
		var newImageElement = new Element('img', {
			'id': 'juhp-zoom-thezoomimg-'+this.id,
			'class' : 'juhpcursor',
			'src' : $('juhp-zoom-medium-'+this.id).title
		}).setStyle('opacity: 0').observe('click', function(o) {
			this.clicketyOut();
		}.bind(this));
		$(document.body).insert({ top : newImageElement });
		var docDim = document.viewport.getDimensions();
		$('juhp-zoom-thezoomimg-'+this.id).setStyle({
			'position' : 'fixed',
			'zIndex' : '3001',
			'margin' : '0 auto',
			'maxHeight' : document.viewport.getHeight() + 'px'
		});
		var imgDim = {
			width : $('juhp-zoom-thezoomimg-'+this.id).measure('width'),
			height : $('juhp-zoom-thezoomimg-'+this.id).measure('height')
		}
		$('juhp-zoom-thezoomimg-'+this.id).setStyle({
			'top' : ((docDim.height / 2) - (imgDim.height / 2)) + 'px',
			'left' : ((docDim.width / 2) - (imgDim.width / 2)) + 'px'
		});
		$('juhp-zoom-thezoomimg-'+this.id).morph('opacity: 1', { duration : .75 });
	},
	clicketyOut : function() {
		$('juhp-zoom-thezoomimg-'+this.id).morph('opacity: 0', {
			duration : .3,
		});
		$('juhp-zoom-thezoom-'+this.id).morph('opacity: 0', {
			duration : .5,
		});
		(function(){
			$('juhp-zoom-thezoom-'+this.id).hide();
			if ($('juhp-zoom-thezoomimg-'+this.id)) {
				$('juhp-zoom-thezoomimg-'+this.id).remove();
			}
		}.bind(this)).delay(.5);
	},
	measurePositions : function() {
		var eCursorImageLayout = $$('#juhp-zoom-container-'+this.id+' img')[0].getLayout();
		var eBoxImageLayout = $('juhp-zoom-box-'+this.id).firstChild.getLayout();
		this.options.ratioWidth = eBoxImageLayout.get('width') <= this.options.boxWidth ? 1 : this.options.boxWidth / eBoxImageLayout.get('width');
		this.options.ratioHeight = eBoxImageLayout.get('height') <= this.options.boxHeight ? 1 : this.options.boxHeight / eBoxImageLayout.get('height');
		var cursorWidth = this.options.ratioWidth * eCursorImageLayout.get('width');
		var cursorHeight = this.options.ratioHeight * eCursorImageLayout.get('height');
		this.options.cursorWidth = Math.round((cursorWidth > 1 && isFinite(cursorWidth) ? cursorWidth : 1)*100)/100;
		this.options.cursorHeight = Math.round((cursorHeight > 1 && isFinite(cursorHeight) ? cursorHeight : 1)*100)/100;
	}
}
Event.observe(window, 'load', function() {
	$$('div[rel=juhp-zoom]').each(function(element) {
		zoom = new JUHPZoom(element);
	});
});