var d = document;
var setup = {
	
	vars : {
		menuItems : [],
		infoCards : []
	},
	
	init : function ()
	{		
		setup.vars.menuItems = d.getElementById('card_menu').getElementsByTagName('span');		
		for(i=0; i<setup.vars.menuItems.length; i++)
		{
			var idFor = setup.getId(setup.vars.menuItems[i]);
			setup.vars.menuItems[i].onclick = setup.setMenu;
		}
		cards = d.getElementById('section_two').getElementsByTagName('div');
		for(i=0; i<cards.length; i++)
		{
			if(cards[i].className.match('card'))
			{
				setup.vars.infoCards.push(cards[i]);
			}
		}
	},
	
	getId : function (obj)
	{
		id = obj.id.substring(obj.id.indexOf(':')+1, obj.id.length);
		return id;
	},
	
	setMenu : function ()
	{		
		menu = this;
		card = setup.getId(menu);
		// set active menu item
		for(i=0; i<setup.vars.menuItems.length; i++)
		{
			if(setup.vars.menuItems[i].id != menu.id) setup.vars.menuItems[i].removeAttribute('class');
			else setup.vars.menuItems[i].setAttribute('class', 'active');
		}		
		// set active card
		for(i=0; i<setup.vars.infoCards.length; i++)
		{
			if(setup.vars.infoCards[i].id.match(card)) setup.vars.infoCards[i].style.display = 'block';
			else setup.vars.infoCards[i].style.display = 'none';
		}
		
	}	
	
	
};

window.onload = setup.init;