// <script>
var Welcome = Class.create();
Welcome.prototype = {

	initialize: function(){

		// class properties
	//this.groupSize  = 15;	
	//	this.showMoreId = 'showMoreCourses';
				
		// hide all courses
		//$$('#courseContainer li').each(function(li){ Element.hide(li); });
		
		// show next group
		//this.showNextCourseGroup(false);
				
	},
	
	showNextCourseGroup: function(doEffects){

		this.handleMoreLinkDisplay();

		$$('#courseContainer ul').each(function(ulList){
				ulList.immediateDescendants().findAll(function(el){
					return !el.visible();
				}).each(function(li, index){
					if (index < this.groupSize){
						if (doEffects){
							//new Effect.ScrollTo('showMoreCourses',{queue:'end'});
							new Effect.Appear(li,{
								duration:1.5, 
								afterFinish : this.handleMoreLinkDisplay.bind(this)
							});
						}
						else{
							Element.show(li);
						}
					}
				}.bind(this))
			}.bind(this));

	},
	
	handleMoreLinkDisplay: function(){
		if ($$('#courseContainer li').all(function(el){	return el.visible(); })){
			new Effect.Fade($('showMoreContainer'),{duration:.3});
		}
		else if (!$('showMoreCourses')){
				new Insertion.After($('courseContainer'),'<p class="hilight" id="showMoreContainer"><a id="showMoreCourses" onclick="return false;" href="">show more clubs</a></p>');
				Event.observe($('showMoreCourses'), "click", this.showNextCourseGroup.bindAsEventListener(this));
		}
	}
	
};


Event.observe(window, "load", function() { new Welcome() } );