// JavaScript Document
var selectedMenuItem = false;

var selectedBGColor = "#cc0000";
var selectedColor = "#fff";
var baseBGColor = "#dadada";
var baseColor = "#888";
var backgroundImage = "/media/gridmenugenerator/images/critics_left_pic.jpg";
var menuBg = "/media/gridmenugenerator/images/menu_bg.png";
var menuWidth = 779;
var itemWidth = 0;
var itemHeight = 150;
var menuHeight = 25;

var menuContainer = null;
var menu = null;
var topItems = null;

function menuItemFocus (elem) {
	selectedMenuItem = elem;
}

function showMenuItems() {
}

function menuItemClick(e, obj) {
	setSelectedItem(obj)
}

function initItems(menu) {
	for (i in elem) {
		var header = children[0];
		var content = children[1];
		var background = children[2];
		
		// menu header
		var headAttributes = {
			backgroundColor: { to: baseBGColor }
		};
		var headAnim = new YAHOO.util.ColorAnim(header, headAttributes);
		headAnim.duration = 0;
		header.style.color = '#888888';
		headAnim.animate();
		
		// menu content
		var contentAttributes = {
			opacity: { to: 0.0 }
		};
		var contentAnim = new YAHOO.util.ColorAnim(content, contentAttributes);
		contentAnim.duration = 0.3;
		contentAnim.animate();			

		// menu bg
		var bgAttributes = {
			opacity: { to: 0.0 }
		};
		var bgAnim = new YAHOO.util.ColorAnim(background, bgAttributes);
		bgAnim.duration = 0.0;
		bgAnim.animate();			
	}
}

function setSelectedItem(elem) {
	var prev = selectedMenuItem;
	selectedMenuItem = elem;
	if (prev !== elem) {
		selectMenuItem(elem);
		deselectMenuItem(prev);
	}
}

function selectMenuItem(elem) {
	var children = YAHOO.util.Dom.getChildren(elem);
	
	for (c in children) {
		//alert(children);
	}
	
	var header = children[0];
	var headerText = YAHOO.util.Dom.getFirstChild(header);
	var content = children[2];
	var background = children[1];
	
	// menu header
	var headAttributes = {
		backgroundColor: { to: selectedBGColor }
	};
	var headAnim = new YAHOO.util.ColorAnim(header, headAttributes);
	headAnim.duration = 0.3;
	headerText.style.color = selectedColor;
	headAnim.animate();
	
	// menu content
	var contentAttributes = {
		opacity: { to: 1.0 }
	};
	var contentAnim = new YAHOO.util.ColorAnim(content, contentAttributes);
	contentAnim.duration = 0.3;
	contentAnim.animate();			

	// menu bg
	var bgAttributes = {
		opacity: { to: 0.7 }
	};
	var bgAnim = new YAHOO.util.ColorAnim(background, bgAttributes);
	bgAnim.duration = 0.3;
	bgAnim.animate();	
}

function deselectMenuItem(elem) {
	if (elem !== false) {
		var children = YAHOO.util.Dom.getChildren(elem);
		
		for (c in children) {
			//alert(children);
		}
		
		var header = children[0];
		var headerText = YAHOO.util.Dom.getFirstChild(header);
		var content = children[1];
		var background = children[2];
		
		// menu header
		var headAttributes = {
			backgroundColor: { to: baseBGColor }
		};
		var headAnim = new YAHOO.util.ColorAnim(header, headAttributes);
		headAnim.duration = 0.3;
		headerText.style.color = baseColor;
		headAnim.animate();
		
		// menu content
		var contentAttributes = {
			opacity: { to: 0.0 }
		};
		var contentAnim = new YAHOO.util.ColorAnim(content, contentAttributes);
		contentAnim.duration = 0.3;
		contentAnim.animate();			

		// menu bg
		var bgAttributes = {
			opacity: { to: 0.0 }
		};
		var bgAnim = new YAHOO.util.ColorAnim(background, bgAttributes);
		bgAnim.duration = 0.3;
		bgAnim.animate();
	}
}

function init() {
	menuContainer = document.getElementById('grid_menu_container');
	menuContainer.style.background = 'url(' + backgroundImage + ') left no-repeat';

	menu = document.getElementById('grid_menu');
	if (menu !== null) {
		// Get all the top menu items
		topItems = YAHOO.util.Dom.getElementsByClassName('menu_item', 'div');
		//initItems(topItems);
		var paddingWidth = 0;
		if (topItems.length > 1)
			paddingWidth = (topItems.length - 1);
				
		if (topItems.length > 0) {
			// Calculate each item width
			itemWidth = Math.floor(((menuWidth-paddingWidth)/topItems.length));
			
			var remainderWidth = menuWidth  - ((itemWidth*topItems.length) + paddingWidth);
			//alert(paddingWidth);
			//selectedMenuItem = topItems[0];
			
			// Iterate over all the top menu items
			for (i in topItems) {
				if (i == (topItems.length - 1))
					itemWidth = itemWidth + remainderWidth;
				topItems[i].style.width = itemWidth + 'px';
				
				var children = YAHOO.util.Dom.getChildren(topItems[i]);
				children[0].style.width = itemWidth + 'px';
				for (c in children) {
					if (c != 2)
						children[c].style.width = itemWidth + 'px';
					if (c != 0)
						children[c].style.height = itemHeight + 'px';
				} // for children
								
				// Finally add the event listener
				YAHOO.util.Event.addListener(children[0], "mouseover", menuItemClick, topItems[i]);
			} // for topItems
		}
		
		var verticalGridLines = YAHOO.util.Dom.getElementsByClassName('vertical_grid_line', 'div');
		for (i in verticalGridLines) {
			verticalGridLines[i].style.height = (itemHeight + menuHeight) + 'px';
		}
		
		document.getElementById('grid_menu_container').style.height = (itemHeight + menuHeight) + 'px';
		document.getElementById('grid_menu_container').style.width = menuWidth + 'px';
		document.getElementById('contentTable').style.height = YAHOO.util.Dom.getViewportHeight() + 'px';
		document.getElementById('footer').style.height = 25 + 'px';	
	} // if menu !== null
}

YAHOO.util.Event.onDOMReady(init);