/**
 * @author Administrator
 */


var str_showMoreTrendsText = "More Trends »";
var str_backTrendsText = "« Back";

var slct_trendMenu = "ul#trends";
var slct_moreTrendsBtn = "li a#moreTrends";

window.addEvent("domready",function(){

	// Get the Elements from the DOM
	var trendMenu = document.getElement(slct_trendMenu);
	
	// If the trendMenu does not exist, exit
	if( trendMenu == undefined || trendMenu == null ) return;
	
	var moreTrendsBtn = trendMenu.getElement(slct_moreTrendsBtn);
	
	// If the moreTrends Button does not exist, exit
	if( moreTrendsBtn == undefined || moreTrendsBtn == null ) return;
	
	var trendMenuItems = getTrendMenuItems(trendMenu);
	var numTrendMenuItems = trendMenuItems.length;
	
	var firstElementSet = {
		lowerIndex: 0,
		upperIndex: ((trendMenuItems.length >= 7) ? 6 : trendMenuItems.length-1)
	};
	var secondElementSet = {
		lowerIndex: firstElementSet.upperIndex+1,
		upperIndex: ((trendMenuItems.length == 14) ? 13 : trendMenuItems.length-1)
	}
	
	// Grab the first set of elements
	var firstSetElements = trendMenuItems.filter(function(item,index){
		return index >= firstElementSet.lowerIndex && index <= firstElementSet.upperIndex;
	});
		
	// Move the next set of elements into view
	var secondSetElements = trendMenuItems.filter(function(item,index){
		return index >= secondElementSet.lowerIndex && index <= secondElementSet.upperIndex;
	});
	
	
	var secondSetIsCurrent = isCurrent(secondSetElements);
	moreTrendsBtn.store("showMore",(numTrendMenuItems > 7));
		
	if( !secondSetIsCurrent ) {
		// Initially Hide all of the elements in the second set
		secondSetElements.each(function(item){
			item.setStyle("display","none");
		});
	} else {
		// Initially Hide all of the elements in the second set
		firstSetElements.each(function(item){
			item.setStyle("display","none");
		});
		
		// change the btn name
		moreTrendsBtn.set("html",str_backTrendsText);
		moreTrendsBtn.store("showMore",false); 
	}
	
	moreTrendsBtn.addEvent("click",function(event){
		new Event(event).preventDefault();
		
		var showMore = event.target.retrieve("showMore");
		
		if (showMore) {
			// Hide the First Set
			firstSetElements.each(function(item){
				item.setStyle("display", "none");
			});
			
			// Show the Second Set
			secondSetElements.each(function(item){
				item.setStyle("display","block");
			});
			
			// change the btn name
			event.target.set("html",str_backTrendsText);
			event.target.store("showMore",false); 
		} else {
			
			// Hide the Second Set			
			secondSetElements.each(function(item){
				item.setStyle("display","none");
			});
			
			// Show the First Set
			firstSetElements.each(function(item){
				item.setStyle("display", "block");
			});
			
			// change the btn name
			event.target.set("html",str_showMoreTrendsText);
			event.target.store("showMore",true); 
		}
		
	});	
});


//
// Get all of the menu items from the trend menu, excluding the current one and the moreTrends item
//
function getTrendMenuItems(trendMenu) {

	var trendMenuItems = trendMenu.getElements("li");

	// Remove the 'More Trends' Button from the list
	trendMenuItems = trendMenuItems.filter(function(item){ 
		var anchor = item.getElement("a");
		return anchor.get("id") != "moreTrends"; 
	});
	
	return trendMenuItems;
}

//
// Searches the given element set and returns true if one of the element's anchor child has the class 'current'
//
function isCurrent(elementSet) {
	var value = false;
	
	elementSet.each(function(item){
		value = item.getElement("a").hasClass("current") || value;
	});

	return value;
}