var NavSlide = new Class({
	Implements: Options,
	options:{
		duration:400
	},
	initialize: function(el,options){
		this.setOptions(options);
		this.instance = el;
		
		this.pointer = new Element('img',{
			'src':this.options.background,
			'id':this.options.pointerID,
			'styles':{
				'position':'absolute',
				'display':'block',
				'width':29,
				'height':13
			}
		});

		
		this.pointer.inject(el);
		
		this.origPosition = this.positionPointer();
		
		this.effect = new Fx.Morph(this.pointer,{duration:this.options.duration});
		for(var i = 0; i < this.options.targetEls.length;i++){
			this.options.targetEls[i].addEvent('mouseenter',this.movePointerOver.bindWithEvent(this));
			this.options.targetEls[i].addEvent('mouseleave',this.movePointerOut.bindWithEvent(this));
		}
	},
	positionPointer:function(){
		var activeEl = this.instance.getElement(this.options.activeClass);
		if(activeEl) {
			var position = this.calculatePosition(activeEl)
			this.pointer.setStyle('left',position);
			return position;
		} else {
			this.opacity = true;
			this.pointer.setOpacity(0);
			var size = this.instance.getSize();
			var position = -30;			
			this.pointer.setStyle('left',position);
			return position;
		}
		
	},
	calculatePosition:function(el){
		var activeElPos = el.getPosition(this.instance);
		var activeElSize = el.getSize();
		var arrowSize = this.pointer.getSize();
		var position = activeElPos.x + (activeElSize.x / 2) - ((arrowSize.x / 2));
		return position;
	},
	movePointerOver:function(e){
		if(this.opacity){
			this.pointer.setOpacity(1);
		}
		this.effect.cancel();
		this.effect.start({
			'left':this.calculatePosition(e.target)
		});
	},
	movePointerOut:function(){
		if(this.opacity){
			this.pointer.setOpacity(0);
		}
		this.effect.cancel();
		this.effect.start({
			'left':this.origPosition
		});
	}
});