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

	var hashmarks;
	var menus;
	var cover_widths;

	hashmarks 	= $$('div#header div.hashmark');
	menus		= $$('div#header div.menu_block');

	cover_widths = [310,94,110,55,85,87,240];

	//var hashHash = new Hash('logo_menu_hash':[5,5],'about_menu':[5,5],'club_clever_menu':[5,5],'media_menu':[5,5],'on_tour_menu':[5,5],'sponsors_menu':[5,5],'contact_menu':);
	//var menuHash = new Hash({'logo_menu':[5,5],'about_menu':[5,5],'club_clever_menu':[5,5],'media_menu':[5,5],'on_tour_menu':[5,5],'sponsors_menu':[5,5],'contact_menu':});


	var navi = new KillerNav(hashmarks, cover_widths);
	//navi.log();



})

var KillerNav = new Class({
	options: {			
	},
	initialize: function(hashmarks, cover_widths, options){			
		this.setOptions(options);
		this.hashes = hashmarks;
		this.widths = cover_widths;
		this.chain(
			this.move_bars(),
			this.cover_up()
		)
	},
	cover_up: function(){
		widths = this.widths;

		var old_widths = new Array();						
		var effects = new Array();

		this.hashes.each(function(el,idx){
			old_widths.push(el.getStyle('width'));
			el.setStyle('width', widths[idx]);
			effects.push(new Fx.Morph(el, {duration: '1500', link: 'chain', transition: 'expo:in'}));
		})
		this.chain(
			(function(){this.scroll_out()}).delay(2500,this),
			(function(){this.skinny_hashes(effects, old_widths)}).delay(2500,this)			
		)

	},
	scroll_out: function(){		
		this.header_fx  = new Fx.Morph($('header'), {duration: '1200', link: 'chain', transition: 'expo:out'});
		this.header_fx.start({
			'right': [900,0],
			'opacity': [0,1]					
		});	
	},
	skinny_hashes: function(effects, old){
		effects.each(function(el,idx){
			change_to = old[idx];			
			el.start({
				'width':[change_to]
			})
		})
		$('intro_div').setStyle('display','none');
	},
	move_bars: function() {	
		function fade_img(){
			this.intro_img_fx  = new Fx.Morph($('intro_img'), {duration: '2200', link: 'chain', transition: 'linear'});
			this.intro_img_fx.start({
				'opacity': [1,0]					
			})
		}
		
		this.vert_fx  = new Fx.Morph($('vert_bar'), {duration: '1200', link: 'chain', transition: 'linear'});
		this.forz_fx  = new Fx.Morph($('forz_bar'), {duration: '1200', link: 'chain', transition: 'linear'});
		this.horz_fx  = new Fx.Morph($('horz_bar'), {duration: '1200', link: 'chain', transition: 'linear', onComplete: function(){fade_img()}});
		
		this.chain(
			this.vert_fx.start({
				'opacity': [0,1],
				'bottom': [590,-90]					
			}),
			this.forz_fx.start({
				'opacity': [0,1],
				'left': [900,0]					
			}),
			this.horz_fx.start({
				'opacity': [0,1],
				'right': [900,0]					
			})			
		)			
	}
	

});
KillerNav.implement(new Options, new Events, new Chain);