// JavaScript Document

//create a "hide all" function
//create a parameter so you can pass the element
var hideAll = function(fxElementObject){
    fxElementObject.set({
        '0': {
            'display': 'none'
        },
        '1': {
            'display': 'none'
        },
        '2': {
            'display': 'none'
        },
        '3': {
            'display': 'none'
        }
    });
}
 
//here we create a function for each content element
var showFunctionOne = function() {
        //first, call the hideAll function
        //then pass "this" as the Fx.element object
    hideAll(this);
 
        //start the Fx.element morph for the index that corresponds to the click event
    this.start({
        '0': { 'display': ['none', 'block'], 'opacity': [0,1], 'duration': 500 }
    });
}
 
var showFunctionTwo = function() {
    hideAll(this);
 
    this.start({
        '1': { 'display': ['none', 'block'], 'opacity': [0,1], 'duration': 500 }
    });
}
 
var showFunctionThree = function() {
    hideAll(this);
 
    this.start({
        '2': { 'display': ['none', 'block'], 'opacity': [0,1], 'duration': 500 }
    });
}
 
var showFunctionFour = function() {
    hideAll(this);
 
    this.start({
        '3': { 'display': ['none', 'block'], 'opacity': [0,1], 'duration': 500 }
    });

}


//set the styles for the links
var lunchActive = function() {
	$('lunch-button').setStyles({'color':'#a32519','font-weight':'bold'});
	$('supper-button').setStyles({'color':'#000000','font-weight':'normal'});			
	$('brunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('cocktails-button').setStyles({'color':'#000000','font-weight':'normal'});
} 

var supperActive = function() {
	$('lunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('supper-button').setStyles({'color':'#a32519','font-weight':'bold'});			
	$('brunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('cocktails-button').setStyles({'color':'#000000','font-weight':'normal'});
} 

var brunchActive = function() {
	$('lunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('supper-button').setStyles({'color':'#000000','font-weight':'normal'});			
	$('brunch-button').setStyles({'color':'#a32519','font-weight':'bold'});
	$('cocktails-button').setStyles({'color':'#000000','font-weight':'normal'});
} 

var cocktailsActive = function() {
	$('lunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('supper-button').setStyles({'color':'#000000','font-weight':'normal'});			
	$('brunch-button').setStyles({'color':'#000000','font-weight':'normal'});
	$('cocktails-button').setStyles({'color':'#a32519','font-weight':'bold'});
} 

 
window.addEvent('domready', function() {
	
	$('lunch').setStyles({'display':'block'});
	
    //create your array to pass to Fx.elements
    var morphElements = $$('.hidden');
 
    //create a new Fx.Element object
    var elementEffects = new Fx.Elements(morphElements, {
    //set the link option to cancel
		link: 'cancel'
	});
 
    $('lunch-button').addEvent('click', showFunctionOne.bind(elementEffects));
    $('supper-button').addEvent('click', showFunctionTwo.bind(elementEffects));
    $('brunch-button').addEvent('click', showFunctionThree.bind(elementEffects));
    $('cocktails-button').addEvent('click', showFunctionFour.bind(elementEffects));

    $('lunch-button').addEvent('click', lunchActive);
    $('supper-button').addEvent('click', supperActive);
    $('brunch-button').addEvent('click', brunchActive);
    $('cocktails-button').addEvent('click', cocktailsActive);
	
});