// JavaScript Document
var fisheye = new Class({
	Implements: [Options, Events],
	options: {
		handle : 'handle',
		minWidth : 80,
		minHeight : 76,
		maxWidth : 122,
		maxHeight : 145,
		maxX : -25,
		maxY : -25,
		minX : 0,
		minY : 0,
		duration : 300
	},
	initialize: function(options) {
		this.setOptions(options);
		this.handle = $(this.options.handle);
		this.items = $$(this.handle.getElements('img'));
		this.minWidth = this.options.minWidth;
		this.minHeight = this.options.minHeight;
		this.maxWidth = this.options.maxWidth;
		this.maxHeight = this.options.maxHeight;
		this.minX = this.options.minX;
		this.minY = this.options.minY;
		this.maxX = this.options.maxX;
		this.maxY = this.options.maxY;
		this.duration = this.options.duration;
		this.effects = [];
		this.el_magnify_src = [];
		this.el_shrink_src = [];
		this.items.each(function(el) {
			this.el_magnify_src[el.id] = this.getMagnifyPath (el.src,el.id);
			this.el_shrink_src[el.id] = el.src

			newimg = new Image();
			newimg.src = this.el_magnify_src[el.id];
			el.largeImg = $(newimg);
			el.largeImg.setStyles({
				'height': this.minHeight,
				'width': this.minWidth,
				'left': this.minX,
				'top': this.minY,
				'z-index':-1
			});
			el.largeImg.inject(el.getParent());
			el.addEvent('mouseover',function() { el.setStyle('z-index',-2); })
			el.largeImg.addEvent('mouseover', function() { this.magnify(el); }.bind(this));
			el.largeImg.addEvent('mouseleave',  function() { this.shrink(el); }.bind(this));
			el.largeImg.addEvent('focus', function() { this.magnify(el); }.bind(this));
			el.largeImg.addEvent('blur',  function() { this.shrink(el); }.bind(this));
			this.effects[el.id] = new Fx.Morph(el.largeImg, {duration: this.duration, transition: Fx.Transitions.Quad.easeOut});
		}, this);
	},
	getMagnifyPath : function (imgPath, imgId) {
		var parsedObject = xtractFile(imgPath);
		var path = parsedObject.path;
		var file = parsedObject.file;
		var extension = parsedObject.extension;
		var el_magnify_src = path + "/about_" + imgId + "_magnify.png";
		return el_magnify_src;
	}, 
	magnify: function(el) {
		obj = this;
		el.parent = $(el.getParent('li'));
		this.effects[el.id].cancel();
		el.parent.setStyle('z-index', 100);
		el.largeImg.setStyle('opacity',1);
		this.effects[el.id].start({
			'height': this.maxHeight,
			'width': this.maxWidth,
			'left': this.maxX,
			'top': this.maxY,
			'z-index':1,
			'opacity':1,
			wait: true
		});
		
	},
	shrink: function(el) {
		el.set('src', this.el_shrink_src[el.id]);
		this.effects[el.id].cancel();
		el.parent.setStyle('z-index', 0);
		this.effects[el.id].start({
			'height': this.minHeight,
			'width': this.minWidth,
			'left': this.minX,
			'top': this.minY, 
			'z-index':-1,
			'opacity':0.1,
			 wait: true
		}).chain(function() {
			el.setStyle('z-index',0);
		});

	}
});

window.addEvent('domready', function() { 
	var fisheye1 = new fisheye({ handle:'dock', maxWidth:122, minWidth:80, maxHeight:145, minHeight:76, maxX : -32,	maxY : -32 });
});