var Zoomy = Class.create({

	initialize: function(element, options) {
	  	
		this.options = {
      		appearDuration: 0.5,
			closeButton: false,
			draggable:false,
			hideCaption:false
    	}
		Object.extend(this.options, options || {});

    this.element  = $(element);
	this.addEvent = this.prepareZoom.bindAsEventListener(this);
	this.element.observe("click", this.addEvent);
  	},
  
  prepareZoom: function(event) {
		
		Event.stop(event);	
		
		new Effect.Opacity(this.element, { from: 1.0, to: 0.3, duration: 0.5 });
		
		var zClose		= (this.options.draggable || this.options.closeButton) ? "<span id='close'></span>" : "";
			
		var zSrc 		= this.element.readAttribute('href');
			
		var zTitle		= this.element.readAttribute('title');
			
		var zCaption 	= (!this.options.hideCaption) ? "<p>"+ zTitle + zClose +"</p>" : "";
			
		if ($('zoomy')) { $("zoomy").remove(); }
			
		$(document.body).insert("<div id='zoomy'>"+ zCaption +"<img src='"+ zSrc +"' alt='"+ zTitle +"' /></div>");
		$('zoomy').hide();
			
		var mX = Event.pointerX(event);
		var mY = Event.pointerY(event);;
			
        var imgPreloader = new Image();			
		imgPreloader.onload = (function(){			
			this.showZoom(mX,mY);	        
        }).bindAsEventListener(this);
		imgPreloader.src =  zSrc;
			
	},
	
	showZoom: function(mX,mY) {
		
		var zoomDim 	= $('zoomy').getDimensions();
		var zWidth  	= zoomDim.width;
		var zHeight 	= zoomDim.height;
	
		var globalDim	= document.viewport.getDimensions();
		var wWidth		= globalDim.width;
		var wHeight		= globalDim.height;
		var zoom_x, zoom_y;
			
		var Yscroll = document.viewport.getScrollOffsets().top;
		var mouse_x =  mX;
		var mouse_y =  mY - Yscroll;
			
		if ( (mouse_x - (zWidth/2) >= 0 ) &&  (mouse_x + (zWidth/2) <= wWidth)){ 
	  		zoom_x = mouse_x - (zWidth/2);
		} else if ( mouse_x + (zWidth/2) > wWidth ) {
			zoom_x = wWidth - zWidth-2;
		} else {
	  		zoom_x =0;
		}
			
		if ( mouse_y - (zHeight/2) >= 0 ){ 
			if ( mouse_y + (zHeight/2) > wHeight ) {
				zoom_y = wHeight - zHeight + Yscroll-2;
			}
			else {
				zoom_y = mouse_y - (zHeight/2)+ Yscroll-2;
			}
		}
		else {
			zoom_y = 0 + Yscroll;
	  	}

		$('zoomy').setStyle({top: zoom_y + 'px', left: zoom_x + 'px'});
	 	new Effect.Appear('zoomy', { duration: this.options.appearDuration} );
		this.setZoom();
		 
		if (this.options.draggable){
			new Draggable('zoomy');
		}		
	
	},
	
	hideZoom: function() {	
	
		$("zoomy").remove();
		new Effect.Opacity(this.element, { from: 0, to: 1, duration: 0.5 });
	},
	
	setZoom: function() {
			
		$('zoomy').observe('click',function(event) {
			if(event.element() ==  $('close')) {
				this.hideZoom();
    		}
			if ((!this.options.closeButton) && (!this.options.draggable) ) {
				this.hideZoom();
			}
		}.bindAsEventListener(this));
			
	}
  
});