Aurora.Dropdown = new Class({
	
	Implements: [ Options, Event ],
	
	options: {
	
		id: '',
		
		dataType: 'static',
		items: [],
		pageLink: '',
		
		align: 'left',
		left: 0,
		top: 0,
		
		type: 'fade',
		
		width: '',
		height: '',
		css: '',
		
		duration: 150,
		transition: Fx.Transition.Linear
				
	},
	
	initialize: function( target, options )
	{
		this.setOptions( options );
	
		if ( $type( target ) == 'string' )
			this.target = $( target );
		else
			this.target = target;
	
	    this.container = new Element( 'div', { 'class': 'dropdown', style: 'overflow: hidden;' } ).inject( window.document.body );
	    
	    /* Add events to target */
	    this.target.addEvent( 'mouseenter', function( event ) {
	    
	    	if ( this.hiding )
	    		return;
	    
	    	this.inNav = true;
	    
	    	if ( this.$menu && this.$menu.isVisible() && this.inNav ) {
	    		// $log( 'Still in navigation, don\'t show again.' );
	    		return;
	    	}
	    	
	    	// $log( 'Mouse in navigation.' );
	    
	    	this.render();
	    	
	    }.bind( this ) );
	    
	    this.target.addEvent( 'mouseleave', function() {
	    
	    	if ( this.hiding )
	    		return;
	    
	    	this.inNav = false;
	    	// $log( 'Mouse no longer in navigation.' );
	    
	    	( function() {
	    	
	    		// Check if we are mousing around in the menu before hiding it
	    		if ( this.inMenu )
	    			return;
	    	
	    		this.hide();
	    		
	    		this.inNav = false;
	    		
	    	}.bind( this )).delay( 100 );
	    	
	    }.bind( this ) );
	    
	    
	    // Hide initially 
		this.hide();
	},
	
	render: function()
	{
		// If we already have the menu, just show it
	    if ( this.$menu )
	    {
	        this.show();
	        return;
	    }
	    
	    // Otherwise create it, add some events then render it
		this.$menu = new Element( 'div', { 'class': 'dropdown_container has-transparency', styles: this.options.css } ).inject( this.container );
		this.$inner = new Element( 'div', { 'class': 'dropdown_container_inner' } ).inject( this.$menu );
		
		this.$menu.setStyle( 'width', this.options.width );
		
		this.$menu.setStyles({ visibility: 'hidden', position: 'absolute', overflow: 'hidden' });
		
		/* Add events to menu */
		this.$menu.addEvent( 'mouseenter', function( event ) {
		
			if ( this.hiding )
	    		return;
		
			this.inMenu = true;
			// $log( 'Mouse in menu.' );
			
		}.bind( this ) );
	    
	    this.$menu.addEvent( 'mouseleave', function() {
	    
			if ( this.hiding )
	    		return;
	    
	    	( function() {
	    	
	    		this.inMenu = false;
	    		// $log( 'Mouse no longer in menu.' );
	    	
	    		if ( this.inNav ) {
	    			// $( 'Mouse now in navigation, don\'t hide menu' );
	    			return;
		    	}
		    	
		    	this.hide();
	    	
	    	}.bind( this )).delay( 100 );
	    	
	    }.bind( this ) );
		
		
		// Render items and display
		this.renderItems();   
		this.show();
	},
	
	show: function()
	{
		if ( !this.$menu )
			return;
			
		if ( this.hiding )
	    	return;
	
		// Special conditions for IE6
	    var isIE6 = false;
	    
	    if ( Browser.Engine.name = 'trident' && Browser.Engine.version == 4 )
	    	isIE6 = true;
	    	
	    // Calculate positioning
	    var position = this.target.getPosition();
	    var size = this.target.getSize();
	    
	    // $log( position );
	    // $log( size );
	    
	    // $log( 'Position: ', position );
	    // $log( 'Size: ', size );
	    
	    this.container.setStyles( { display: 'block', width: ( this.options.width ? this.options.width : size.x ), height: size.y } );
	    
	    if ( isIE6 )
        	this.$menu.setStyles( { 'width': ( size.x * 1.5 ) } );
	    
	    var x, y;
		    
		switch( this.options.align )
		{
			case 'left':
			  	x = position.x + ( size.x ) - ( this.$menu.getSize().x / 2 ) - 23;
			    y = position.y + size.y + this.options.top;
			    
			break;
			
			case 'middle':						
			  	x = position.x + ( size.x / 2 ) - ( this.$menu.getSize().x / 2 ) + this.options.left;
			    y = position.y + size.y + this.options.top;
						
			break;
			
			case 'right':
				x = position.x + ( size.x ) - ( this.$menu.getSize().x ) - this.options.left;
			    y = position.y + size.y + this.options.top;
			    
			break;
		}

        this.$menu.setStyles( { position: 'absolute', top: y, left: x } );
    
		switch( this.options.type )
		{	
			case 'vertical':
			
				this.$menu.setStyles({
					display: 'block',
					opacity: 1,
					height: 0,
					zIndex: 1000
				}).get( 'tween' )
					.setOptions({
						duration: this.options.duration,
						transition: this.options.transition
					})
					.start( 'height', newHeight );
					
			break;
			
			case 'fade':
			
				this.$menu.setStyles({
					display: 'block',
					opacity: 0,
					zIndex: 1000
				}).get( 'tween' )
					.setOptions({
						duration: this.options.duration,
						transition: this.options.transition
					})
					.start( 'opacity', 0, 1 );
			
			break;
			
			default:
				alert( 'Effect: ' + this.options.type + ' is not supported. Possible options are vertical & fade.' );
				return;
				
			break;
		
		}
		    	
	},
	
	hide: function()
	{
		if ( !this.$menu || !this.options.type )
			return;
			
		if ( this.hiding )
			return;
	
		var position = this.target.getPosition();
	    var size = this.target.getSize();
	
		switch( this.options.type )
		{	
			case 'vertical':
					
				this.hiding = true;
					
				this.$menu.setStyles({
					opacity: 1,
					zIndex: 500
				}).get( 'tween' )
					.setOptions({
						duration: this.options.duration,
						transition: this.options.transition
					})
					.start( 'height', 0 )
					.chain( (function() { this.hiding = false; }.bind( this )) );
					
			break;
			
			case 'fade':
			
				this.hiding = true;
			
				/* this.$menu.setStyles({
					opacity: 1,
					zIndex: 500
				}).get( 'tween' )
					.setOptions({
						duration: this.options.duration,
						transition: this.options.transition
					})
					.start( 'opacity', 0 )
					.chain( (function() { this.hiding = false; }.bind( this )) );
				*/
				
				this.$menu.set( 'opacity', 0 );
				
				this.hiding = false;

			break;
			
			default:
				alert( 'Effect: ' + this.options.type + ' is not supported. Possible options are vertical & fade.' );
				return;
				
			break;
		
		}
	},
	
	renderItems: function()
	{
		$log( 'Render items.' );
	
		var dataType = this.options.dataType;
		var items = this.options.items;
		
		switch( this.options.dataType )
		{
			case 'api':
			
				if ( $type( items ) != 'string' ) {
					$log( 'You must pass an apiKey to the Aurora.Dropdown function when using the API mode.' )
					return;
				}
				
				if ( !Aurora.dataAPI.data.load[ items ] ) {
					$log( 'API data not found.' );
					return;
				}
				
				// Create a copy of the array of the items
				var apiItems = $A( Aurora.dataAPI.data.load[ items ].results );
				
				if ( !apiItems )
				{
					$log( 'Items not found in API data.' );
					return;
				}
				
				$log( apiItems );
				
				// Populate the items array again
				items = [];
				
				apiItems.each( function( item, key ) {
				
					items.push({ label: item.name, url: item.itemId });
					
				});
			
			break;
			
			default:
				
				//
			
			break;
		}
			
		// Render the items
		items.each( function( item ) {
		
			var link = new Element( 'a', { 'class': 'dropdown_link', href: '/Site/SacredHeartFundraiser' + ( this.options.pageLink ? this.options.pageLink + item.url : item.url ), style: 'display: block;' } );
			
			link.set( 'html', '<span class="wrap1"><span class="wrap2">' + item.label + '</span></span>' );
			
			// Inject into menu
			link.inject( this.$menu );
		
		}.bind( this ));
	}
	
});

Aurora._dropdown = {};

Aurora.Dropdown.store = function( key, o ) { Aurora._dropdown[ key ] = o; return o }
Aurora.Dropdown.retrieve = function( key ) { return Aurora._dropdown[ key ]; }