/*
<div id="zoomContainer" style="overflow:hidden; height:300px; width: 436px; position:relative;">
	<img style="display:block; height:300px; width:436px;" src="http://8.content.collegehumor.com/d1/bt/f/e/bustedtees.eacf165fc970877d33a3ac3eb3b7cd4d.jpg" />
</div>

<script>
	var zoom = new Zoomer('http://1.content.collegehumor.com/d1/bt/9/8/bustedtees.a85b81096c5489160d53e398aad4144b.jpg');
</script>
*/

BT.ns(function() {with(BT) {
	Zoomer = Class.create({
		initialize: function(highResImg, options) {
			this.setOptions(options);
			
			this.highResImg = highResImg;
			this.container = $(this.options.container);
			this.img = $$('#' + this.options.container + ' img')[0];
			
			this.insertHighRes();
			
			Event.observe(this.container, 'mouseover', this.showZoom.bindAsEventListener(this));
			Event.observe(this.container, 'mouseout', this.hideZoom.bindAsEventListener(this));
			Event.observe(this.container, 'mousemove', this.moveZoom.bindAsEventListener(this));
			Event.observe(this.container, 'mouseleave', this.IEhideZoom.bindAsEventListener(this));
		},
		
		showZoom: function(e) {
			Element.show(this.zoomDiv);	 
		},
		
		hideZoom: function(e) {
			if(e.currentTarget != this.container) return;
			Element.hide(this.zoomDiv);
		},
		
		IEhideZoom: function(e) {
			Element.hide(this.zoomDiv);
		},
		
		moveZoom: function(e) {
			this.zoomImg.style.top = (this.zoomHeight / 2) - ((e.pageY - this.container.offsetTop) * this.options.zoomLevel) + 'px';
			this.zoomImg.style.left = (this.zoomWidth / 2) - ((e.pageX - this.container.offsetLeft) * this.options.zoomLevel) + 'px';
	
			this.zoomDiv.style.top = (e.pageY - this.container.offsetTop - (this.zoomHeight/2)) + 'px';
			this.zoomDiv.style.left = (e.pageX - this.container.offsetLeft - (this.zoomWidth/2)) + 'px';
		},
		
		insertHighRes: function() {
			var div = document.createElement('div');
			div.style.overflow = 'hidden';
			div.style.position = 'absolute';
			div.style.display = 'none';
			div.style.width = this.options.zoomWidth + 'px';
			div.style.height = this.options.zoomHeight + 'px';
			div.style.top = 0;
			
			var img = document.createElement('img');
			img.src = this.highResImg;
			img.style.position = 'relative';
						
			div.appendChild(img);
			
			this.container.appendChild(div);
			
			this.zoomHeight = Element.getHeight(div);
			this.zoomWidth = Element.getWidth(div);
			
			this.zoomDiv = div;
			this.zoomImg = img;
		},
	
	
		setOptions: function (options) {
			this.options = {
	      		container: 'zoomContainer',
	      		zoomHeight: 150,
	      		zoomWidth: 150,
	      		zoomLevel: 3
			};
			Object.extend(this.options, options || {});
		}
	});
}});