//<![CDATA[
/*
	name : AjaxListFlyout
	author : gregory tomlinson
	© 2008 AOL LLC
	
	dependencies : mootools 1.2
	
	Thie class expects HTML response
*/
var AjaxListFlyout = new Class({

	Implements: [Options, Events],

	options : {
		list : [],
		addListHover : false, 
		listHoverClass : 'hover',
		displayId : 'flyoutDisplayId',
		menuDisplayId : 'listFlyoutDisplayId',
		flyOutWrapperEl : 'ul',
		debug : false,
		addLoader : true, // injects a loader
		addFooter : true, // injects a custom footer
		tmpAjax : '/asylum/conversion/flyout.html',
		flyOutFile : 'flyout.html'
	},
	dataStore : 'flyOutData',
	list : [],
	
	initialize : function (options)
	{
		this.setOptions(options); // set options
		this.addList( this.options.list );
		
		// enable list
		this.setListEvents();
	},
	
	addList : function( list )
	{
		// an array of elements to look for 'anchor' tags in	
		$$( list ).each( function( l ) {
			this.list.include( $(l) );
		}, this );
	},
	
	setListEvents : function()
	{
		// attach event listeners
		this.list.each( function( el ) {
			el.addEvent( 'mouseenter', this.displayFlyout.bind(this, el) )
			
			if( this.options.addListHover )
			{
				el.addEvent( 'mouseenter', function(){ 
					el.setStyle("display", "block");
					el.addClass( this.options.listHoverClass ); 
					
				}.bind(this) )			
				
				el.addEvent( 'mouseleave', function(){ 
					var subEl = el.getElementsByTagName( this.options.flyOutWrapperEl );
					if( subEl.length > 0 ) {
						subEl[0].setStyle("display", "none");
						subEl[0].removeClass( this.options.listHoverClass );					
					}
					el.removeClass( this.options.listHoverClass ); 
					
				}.bind(this) )							
			}
		}, this )
		
	},
	
	displayFlyout : function( el )
	{
		// retreive my data!
		var d = el.retrieve(this.dataStore);		
		// get the data if nothing was stored
		if( d == null ) {
			this.insertLoading( el ); 
			el.set( 'send', { onSuccess : function( data ){
					this.storeData( data, this, el );
				}.bind( this ), 
				method : 'get'
			 } )
			if( this.options.debug ) el.send( this.options.tmpAjax );
			else el.send( this.buildURL( el ) );

		} else this.createAndShowFlyout(el, d);
	},
	
	storeData : function( data, mainClass, el )
	{
		el.store( this.dataStore, data );
		this.createAndShowFlyout( el, data );
	},
	
	createAndShowFlyout : function( appendEl, data )
	{
		var el = $( this.options.displayId );
		var lstEl = $( this.options.menuDisplayId );
		this.stripLoading();
		
		if( $chk( lstEl ) ) {
			// remove old class and strip id
			lstEl.removeClass( this.options.listHoverClass );
			lstEl.id = null;			
		}
		appendEl.id = this.options.menuDisplayId;
		
		if( ! $chk(el) ) {
			var el = new Element( this.options.flyOutWrapperEl );
			el.id = this.options.displayId;
		}
		
		el.setStyle('display', 'block');
		el.addClass( this.options.listHoverClass );		
		el.inject( appendEl );
		//el.innerHTML = data + this.insertCustomFooter( appendEl.getElementsByTagName('a')[0].href );	
		el.set('html', data + this.insertCustomFooter( appendEl.getElementsByTagName('a')[0].href ));	
	},
	
	buildURL : function( el ) {
		return el.getElementsByTagName('a')[0].href + this.options.flyOutFile;
	},
	
	insertLoading : function( el ) {
		if( ! this.options.addLoader ) return;
		var ul = new Element( this.options.flyOutWrapperEl );
		ul.id = 'flyout-loading';
		ul.setStyle("display", "block");
		ul.inject( el );
		//ul.innerHTML = '<li>loading</li>';	
		ul.set('html', '<li>loading</li>');	
	},
	
	stripLoading : function() {
		//.destroy	
		if( ! this.options.addLoader ) return;		
		var el = $('flyout-loading');
		if( $chk( el ) ) el.destroy();
	},
	
	insertCustomFooter : function( link ) {
		//this.options.flyOutWrapperEl;
		if( ! this.options.addFooter ) return;
		return "<li class='seeAll'><a href='"+link+"'>See All</a></li>";
	}
	
	// add a function for the custom wrapper


});

//]]>