/**
 * @author Alex Lapinski @ Avenue A | Razorfish
 * @version 1.0
 * @date July 23, 2008
 * 
 * A menu which allows for the hiding of extra assessment menu items.
 * The number of items is limited to the height of another html element on the page (an image), Since the structure of the menu
 * is within an un-ordered list, and each element does not have a fixed height, the number of visible items varies from page to page.
 * For this, The total possible height is computed (based on the image), and then we loop though each of the menu elements compiling a projected
 * height. Once we exced the possible height, we take the element just before that one, and cap the number of viewable items at that.
 * 
 * When the user clicks the "Show More" button, the height of the next item is factored into the current height, minus the top most element in view
 * and if the new set of menu items will fit within the possible height of the menu, it is allowed to be placed inside the viewable menu. If not, 
 * nothing happens and the user must click the "Show More" again, and the element at the top of the menu is removed, thus making space.
 * 
 * The menu is constructed as a loop, where the first element in the list initially comes after the last element in the list. This allows for
 * an easy navigation method of the long list.
 * 
 * 
 * Usability:
 * 
 * 	If the user does not have javascript, they are able to view the very long list of elements, since the rotating list is only added with this script.
 * This preserves the usability of the page for users without access to a javascript enabled browser.
 */


// 
// Attach the Initilization Method
// 
window.addEvent("domready",function(){

	var ASSESSMENT_MENU_CONTAINER_SELECTOR = "#assessments";
	var ASSESSMENT_MENU_SELECTOR = "#assessments ul";
	var ASSESSMENT_MENU_HEIGHT = "350";
	
	var menuContainer = document.getElement(ASSESSMENT_MENU_CONTAINER_SELECTOR);
	var menu = document.getElement(ASSESSMENT_MENU_SELECTOR);

	// If for some reason, the nessecary elements were not found, exit gracefully
	if( !$defined(menuContainer) || !$defined(menu) ) return;

	var menuItems = menu.getElements("li");

	var maxPossibleHeight = Number(ASSESSMENT_MENU_HEIGHT);
	var differenceInHeight = menuContainer.getSize().y - menu.getSize().y;

	// Check to see that the new height of the menu doesn't clip a menu item in parts
	var projectedHeight = 0; // Running total
	var lastVisibleItemIndex = (menuItems.length > 0 ) ? menuItems.length-1 : 0; // This will be the index of the last visible menu item
			
	for( var i = 0; i < menuItems.length; i++ ) {
		projectedHeight += menuItems[i].getSize().y;	
		
		//
		// The projected height has exceeded the maxPossible height
		// So set the last visible index to the item just before this one.
		if( projectedHeight >= maxPossibleHeight ) {
			lastVisibleItemIndex = i-1;
			break;
		}	
	}
	
	// If the lastVisbileItemIdex was not changed from its initilized value, exit (since all items will fit on page)
	if( lastVisibleItemIndex == menuItems.length-1 ) return;
	
	// Resize the height of the assessments menu
	menuContainer.setStyle("height",(Number(ASSESSMENT_MENU_HEIGHT)+50)+"px");
	menu.setStyle("height",maxPossibleHeight);
	
	// Hide all of the elements after the lastVisibleItemIndex
	for( var i = lastVisibleItemIndex; i < menuItems.length; i++ ) {
		menuItems[i].setStyle("display","none");
	}

	// Create the "Show More" button
	var showMoreBtn = createShowMoreButtons(menu,menuItems,lastVisibleItemIndex);
		
	// Add the "Show More" Button to the page	
	showMoreBtn.inject(menu,'after');
	
	
	
	
	
	// Advance the Assessment menu such that the current item is within view.
	var currentElement = menu.getElement("li a.current");
	var firstElement = menuItems[0];
	if( $defined(currentElement) ) { 
	    while( firstElement.getElement("a").get("text") != currentElement.get("text") )
	    {
	       	menuItems = menu.getElements("li");
		
		    firstElement = menuItems[0];
		    firstElement.setStyle("display","none");
		
		    var tempElement = firstElement.clone({keepId:true});
		    firstElement.dispose();
		    tempElement.inject(menuItems[menuItems.length-1],'after');
		
		    // move the item after 'show more' to in front of it
		    var nextElement = menuItems[lastVisibleItemIndex];
		
		    var currentVisibleItems = menu.getElements("li").filter(function(item){return item.getStyle("display") != "none";});
		    var currentHeight = 0;
		    currentVisibleItems.each(function(item){
			    currentHeight += item.getSize().y;
		    });
		
		    nextElement.setStyle("display","block");
		    
		    menuItems = menu.getElements("li");
		    firstElement = menuItems[0];
	    }
	}
});


function createShowMoreButtons(menu,menuItems,lastVisibleItemIndex) {
	
	var scrollBtnContainer = new Element("div");
	scrollBtnContainer.className += "scrollBtnContainer ";
	
	var scrollDownBtn = new Element("a");
	var scrollUpBtn = new Element("a");
	
	var scrollDownBtnClickHandler = function(e){
	
		menuItems = menu.getElements("li");
		if( menuItems.length <= 1 ) return null;
		
		if( $defined(e) )
		    new Event(e).preventDefault();
		
		var firstElement = menuItems[0];
		firstElement.setStyle("display","none");
		
		var tempElement = firstElement.clone({keepId:true});
		firstElement.dispose();
		tempElement.inject(menuItems[menuItems.length-1],'after');
		
		// move the item after 'show more' to in front of it
		var nextElement = menuItems[lastVisibleItemIndex];
		
		var currentVisibleItems = menu.getElements("li").filter(function(item){return item.getStyle("display") != "none";});
		var currentHeight = 0;
		currentVisibleItems.each(function(item){
			currentHeight += item.getSize().y;
		});
		
		nextElement.setStyle("display","block");		
	};
	
	var scrollUpBtnClickHandler = function(e){
	    
		menuItems = menu.getElements("li");
		if( menuItems.length <= 1 ) return null;
		
		if( $defined(e) )
		    new Event(e).preventDefault();
		
		// Last element in list becomes first element in list
		var lastListElement = menuItems[menuItems.length-1];
		
		// Last visible item gets hidden
		var lastVisibleElement = menuItems[lastVisibleItemIndex];
		lastVisibleElement.setStyle("display","none");
		
		// inject the last List element into the head of the list
		var tempElement = lastListElement.clone({keepId:true});
		tempElement.setStyle("display","block");
		lastListElement.dispose();
		tempElement.inject(menuItems[0],'before');
		
		// Recalculate the current Height
		var currentVisibleItems = menu.getElements("li").filter(function(item){return item.getStyle("display") != "none";});
		var currentHeight = 0;
		currentVisibleItems.each(function(item){
			currentHeight += item.getSize().y;
		});

        
	};
	
	scrollDownBtn.set("id","scrollDownAssessments"); // Note, chaging this ID will require CSS changes to maintain the style
	scrollDownBtn.set("text","Scroll Down");
	scrollDownBtn.set("href","#");
	scrollDownBtn.title = "Click to Scroll Down for More Assessments";
	scrollDownBtn.alt = "Click to Scroll Down for More Assessments";
	scrollDownBtn.addEvent("click",scrollDownBtnClickHandler);
	
	scrollUpBtn.set("id","scrollUpAssessments"); // Note, chaging this ID will require CSS changes to maintain the style
	scrollUpBtn.set("text","Scroll Up");
	scrollUpBtn.set("href","#");
	scrollUpBtn.title = "Click to Scroll Up for More Assessments";
	scrollUpBtn.alt = "Click to Scroll Up for More Assessments";
	scrollUpBtn.addEvent("click",scrollUpBtnClickHandler);
		
	if( scrollBtnContainer.appendChild ) {
	    scrollBtnContainer.appendChild(scrollUpBtn);
	    scrollBtnContainer.appendChild(scrollDownBtn);
	}
		
	return scrollBtnContainer;		
}