var DropdownLinkNavigation = Class.create({
	
	delay: 700,
	
	initialize: function(link,target,context) {
		
		this.link = link;
		this.target = target;
		
		if( !context ) {
			this.context = {
				element: link,
				corner: 'bl'
			}
		} else {
			this.context = context;
		}
		
		// position element
		this.positionTarget();
		
		// set resize listener
		Event.observe( window, 'resize', this.positionTarget.bindAsEventListener(this) );
		
		// show nav when link is rolled over
		Event.observe( this.link, 'mouseover', this.show.bindAsEventListener(this) );
		
		// create hide thread when link is left
		Event.observe( this.link, 'mouseout', function() { 
			this.hideCallback = window.setTimeout(this.hide.bindAsEventListener(this), this.delay);
		}.bindAsEventListener(this) );
		
		// create hidetimeout when nav is rolled out
		Event.observe( this.target, 'mouseout', function() { 
			this.hideCallback = window.setTimeout(this.hide.bindAsEventListener(this), this.delay);
		}.bindAsEventListener(this) );
		
		// clear hide timeout when nav is rolled over
		Event.observe( this.target, 'mouseover', function() {
			if( this.hideCallback ) {
				window.clearTimeout( this.hideCallback );
			}
		}.bindAsEventListener(this));
	
	},
	
	positionTarget: function() {
		
		this.target.style.top = ( this.context.element.cumulativeOffset().top + this.context.element.getHeight() ) + 'px';
		
		if( this.context.corner == 'bl' ) {
			this.target.style.left = ( this.context.element.cumulativeOffset().left ) + 'px';
		} else if( this.context.corner == 'br' ) {
			var br = this.context.element.cumulativeOffset().left + this.context.element.getWidth();
			this.target.style.left = ( br - this.target.getWidth() ) + 'px';
		}
	},
	
	show: function() {
		
		if( this.hideCallback ) {
			window.clearTimeout( this.hideCallback );
		}
		this.target.style.visibility = 'visible';
		
	},
	
	hide: function() {
		
		this.target.style.visibility = 'hidden';
		
	}
	
});