Event.observe(window, 'load',
	function() { 
		$$('.zoomable').each( function(item) {
			new ZoomImage(item);
			
		} );
		
		$$('.zoomablesmall').each( function(item) {
		    new ZoomImageSmall(item);
		} );
	}
);
	

var ZoomImage = Class.create();
Object.extend(
	ZoomImage.prototype, {
		initialize: function(img) {
			this._img = img;
			this._width = this._img.width;
			this._selected = false;
			this._over = false;
			this._eL2 = this.mouseOver.bindAsEventListener(this);
			this._eL3 = this.mouseOut.bindAsEventListener(this);
			Event.observe(this._img, 'mouseover', this._eL2);
//			Event.observe(this._img, 'mouseout', this._eL3);			
	
		},
		mouseOver: function(mouseEvent) {
			if ((!this._selected) && (!this._over)) {
				Event.stopObserving(this._img, 'mouseover', this._eL2);
				Event.observe(this._img, 'mouseout', this._eL3);	
				var x = Math.abs(Math.min(0,Position.cumulativeOffset(this._img)[0] - 65)) ;
				this._img.addClassName('ontop');
				this._img.up().addClassName('ontop');
				this._img.up(1).addClassName('ontop');
				this._img.up(2).addClassName('ontop');
				this._img.up(3).addClassName('ontop');
				this._img.up(4).addClassName('ontop');
				this._img.up(5).addClassName('ontop');
				
				this._over = true;
				
				style = 'width:' + (2 * this._width) + 'px;height:' + (2 * this._width) + 'px;top:' + (-this._width / 2) + 'px;left:' + (x +(-this._width / 2)) + 'px;';
				//this._img.setStyle(style);
				try {
					this._effect.cancel()
		
				} catch (e) {
					
				}
				
				this._effect = 
					new Effect.Morph(
						this._img,
						{duration: 0.5, style: style}
					);
				
				
			}
		},
		mouseOut: function(mouseEvent) {
			if ((!this._selected) && (this._over)) {
				Event.observe(this._img, 'mouseover', this._eL2);
				Event.stopObserving(this._img, 'mouseout', this._eL3);	
				this._img.removeClassName('ontop');
				this._img.up().removeClassName('ontop');
				this._img.up(1).removeClassName('ontop');								
				this._img.up(2).removeClassName('ontop');								
				this._img.up(3).removeClassName('ontop');								
				this._img.up(4).removeClassName('ontop');								
				this._img.up(5).removeClassName('ontop');								

				this._over = false;
				
				style = 'width:' + (this._width) + 'px;height:' + (this._width) + 'px;top:0px;left:0px;';

				try {
					this._effect.cancel()
				} catch (e) {
					
				}
				this._effect = 
					new Effect.Morph(
						this._img,
						{duration: 0.5, style: style }
					);
				
			}
		}
	}
);

	var ZoomImageSmall = Class.create();
	Object.extend(
	ZoomImageSmall.prototype, {
	    initialize: function(img) {
	        this._img = img;
	        this._width = this._img.width;
	        this._selected = false;
	        this._over = false;
	        this._eL2 = this.mouseOver.bindAsEventListener(this);
	        this._eL3 = this.mouseOut.bindAsEventListener(this);
	        Event.observe(this._img, 'mouseover', this._eL2);
	        //			Event.observe(this._img, 'mouseout', this._eL3);			

	    },
	    mouseOver: function(mouseEvent) {
	        if ((!this._selected) && (!this._over)) {
	            Event.stopObserving(this._img, 'mouseover', this._eL2);
	            Event.observe(this._img, 'mouseout', this._eL3);
	            var x = Math.abs(Math.min(0, Position.cumulativeOffset(this._img)[0] - 65));
	            this._img.addClassName('ontop');
	            this._img.up().addClassName('ontop');
	            this._img.up(1).addClassName('ontop');
	            this._img.up(2).addClassName('ontop');
	            this._img.up(3).addClassName('ontop');
	            this._img.up(4).addClassName('ontop');
	            this._img.up(5).addClassName('ontop');

	            this._over = true;

	            style = 'width:' + (3 * this._width) + 'px;height:' + (3 * this._width) + 'px;top:' + (-this._width) + 'px;left:' + (x + (-this._width)) + 'px;';
	            //this._img.setStyle(style);
	            try {
	                this._effect.cancel()

	            } catch (e) {

	            }

	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);


	        }
	    },
	    mouseOut: function(mouseEvent) {
	        if ((!this._selected) && (this._over)) {
	            Event.observe(this._img, 'mouseover', this._eL2);
	            Event.stopObserving(this._img, 'mouseout', this._eL3);
	            this._img.removeClassName('ontop');
	            this._img.up().removeClassName('ontop');
	            this._img.up(1).removeClassName('ontop');
	            this._img.up(2).removeClassName('ontop');
	            this._img.up(3).removeClassName('ontop');
	            this._img.up(4).removeClassName('ontop');
	            this._img.up(5).removeClassName('ontop');

	            this._over = false;

	            style = 'width:' + (this._width) + 'px;height:' + (this._width) + 'px;top:0px;left:0px;';

	            try {
	                this._effect.cancel()
	            } catch (e) {

	            }
	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);

	        }
	    }
	}
);

function showCommentBox() {
	if (!$('writeComment').visible()) {  
		new Effect.SlideDown(
			'writeComment', {
				queue: 'end', 
				duration: 0.7, 
				afterFinish: function() {
					$('comment').focus();
				}
			}
		);
	} else { 
		new Effect.SlideUp(
			'writeComment', {
				queue: 'end', 
				duration: 0.7
			}
		); 
	}
}
function showAnswerBox() {
	if (!$('writeAnswer').visible()) {  
		new Effect.SlideDown(
			'writeAnswer', {
				queue: 'end', 
				duration: 0.7, 
				afterFinish: function() {
					$('comment').focus();
				}
			}
		);
	} else { 
		new Effect.SlideUp(
			'writeAnswer', {
				queue: 'end', 
				duration: 0.7
			}
		); 
	}
}
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();