//////////////-------------- VARIABLES ----------------//////////////
var currentHeaderImage = 5;

//////////////---------------- ONLOAD -----------------//////////////
window.addEvent('domready', function(){
	var list = $$('div.button_image');
		list.each(function(element)
		{
			var fade = new Fx.Tween(element, {duration: '800', transition: Fx.Transitions.Sine.easeOut,wait:false});
			element.addEvent('mouseenter', function()
				{
					fade.start('opacity',.4);
				});
			element.addEvent('mouseleave', function()
				{
					fade.start('opacity',1);
				});
		});
	var list = $$('div.right-button');
		list.each(function(element)
		{
			var fade = new Fx.Tween(element, {duration: '800', transition: Fx.Transitions.Sine.easeOut,wait:false});
			element.addEvent('mouseenter', function()
				{
					fade.start('opacity',.6);
					element.setStyle('color','#000');
				});
			element.addEvent('mouseleave', function()
				{
					fade.start('opacity',1);
					element.setStyle('color','#fff');
				});
		});
});


//////////////-------------- FUNCTIONS ----------------//////////////
function headerImageChanger(imageId)
	{
		var slide = new Fx.Morph('headerImage', {duration: 'long', transition: Fx.Transitions.Quad.easeOut});

		switch(imageId)
		{
			case 1:
				slide.start({left:-560});
				currentHeaderImage = 2;
				break;   
			case 2:
				slide.start({left:-1120});
				currentHeaderImage = 3;
				break;
			case 3:
				slide.start({left:-1680});
				currentHeaderImage = 4;
				break;
			case 4:
				slide.start({left:-2240});
				currentHeaderImage = 5;
				break;
			case 5: // same as 1
				$('headerImage').setStyle('left',0);
				slide.start({left:-560});
				currentHeaderImage = 2;
				break;
		}
	};