var XerxesFisheye = function(config){
	Ext.apply(this, config);
}

XerxesFisheye.prototype = {
	holder: "",
	pieceSelector: "A",//All links in the holder should fisheye
	selectedSelector: ".activeStep",//item with class "currentStep" is the one selected by default
	defaultPiece: null,
	pieces: null,
	easing:"bounceOut", //Easing to use on the animation
	selectedWidth: 150, //Minimum length a selected item can be
	minWidth: 50, //Minimum width of each piece
	currentEl:null,
	revertTimer:null,
	revertDelay:1000, //Delay before reverting - in milliseconds
	init: function(holder){
		this.holder = Ext.get(holder);
		this.prepEvents();
	},
	prepEvents: function(){
		pieces = this.holder.select(this.pieceSelector);
		this.pieces = pieces;
		pieces.each(function(i){
			i.on('mouseover', this.eOver, this);
			i.on('mouseout', this.eOut, this);
			i.setWidth(this.minWidth, true);
		}, this);
		this.defaultPiece = this.holder.select(this.selectedSelector)
		this.makeSelected(this.defaultPiece);
	},
	getSelectedWidth:function(){
		var tWidth = this.holder.getComputedWidth(); //Total width of holder
		tWidth -= (this.pieces.getCount() - 1) * (this.minWidth+12);
		if(tWidth < this.selectedWidth)tWidth = this.selectedWidth;
		return tWidth;
	},
	makeSelected:function(element){
		if(element == this.currentEl)return;
		Ext.Fx.syncFx();
		if(this.currentEl)this.currentEl.setWidth(this.minWidth, {duration:0.5,easing:this.easing});
		element.setWidth(this.getSelectedWidth(), {duration:0.5,easing:this.easing});
		this.currentEl = element;
	},
	eOver: function(e){
		if(this.revertTimer)clearTimeout(this.revertTimer);
		var sel = Ext.get(e.getTarget(this.pieceSelector));
		this.makeSelected(sel);
	},
	eOut: function(e){
		this.revertTimer = this.makeSelected.defer(this.revertDelay,this,[this.defaultPiece]);
	}
}