Effect.Style = Class.create(Effect.Base, {
  initialize: function( element, style, options ) {
	this.style = style;
  	this.blind_options = options;
	this.effect_state = 'from';
	this.element = $(element);
  },
  toggle_effect: function() {
  	this.effect_state == 'from' ?
	  this.start_effect() :
	  this.rewind_effect();
  },
  start_effect: function() {
  	if( this.effect_state == 'to' )
  		return;
  	var now = 0.0;
  	if( this.position )
	 	now = this.position;
  	this.effect_state = 'to';
  	this.start( Object.extend( this.blind_options, { from: now, to: 1.0 } ));
  },
  rewind_effect: function() {
    if( this.effect_state == 'from' )
      return;
  	var now = 1.0;
    if( this.position )
		  now = this.position;
		this.effect_state = 'from';
		this.start( Object.extend( this.blind_options, { from: now, to: 0.0 } ));
  },
  calculate_style: function( position ) {
  	var distance = this.blind_options.end - this.blind_options.start;
	return position * distance + this.blind_options.start;
  },
  update: function( position ) {
  	var styles = {}
	styles[ this.style ] = this.calculate_style( position ) + 'px';
  	this.element.setStyle( styles );
  }
});

//top nav dropdown script
Event.observe(window, 'load', loadnav, false);	

function loadnav() {
	$('nav').down('ul').childElements().each(
		function( nav ) {
			var drop = nav.down('ul');
			if( !nav || !drop )
				return;
			$('main').blind = new Effect.Style($('main'), 'height', {start: 32, end: 600, duration: .5} );
			drop.blind = new Effect.Style(drop, 'top', { start: -drop.getHeight()+25, end: 25, duration: .5, delay: .0 } );
			nav.observe( 'mouseover', function() {
				$('main').blind.start_effect();		 
				drop.blind.start_effect();
			});
			nav.observe( 'mouseout', function(e) {
																			
				if( e.relatedTarget == nav || e.relatedTarget.up('#'+nav.id) )
					return;
				drop.blind.rewind_effect();
				$('main').blind.rewind_effect();
				
			});
			drop.observe( 'mouseover', function() {
				drop.blind.start_effect();
				
			});
		});
}