Webcard = Class.create({
	settings: 	$H({
					'#about':	$H({
									'title': 'Acerca de Javier Parra Cervantes',
									'div': 'about'
								}),
					'#twitter':	$H({
									'title': 'Twitter de Javier Parra Cervantes',
									'div': 'twitter_div'
								}),
					'#contact':	$H({
									'title': 'Contacta a Javier Parra Cervantes',
									'div': 'contact'
								}),
					'#experiments':	$H({
									'title': 'Experimentos de Javier Parra Cervantes',
									'div': 'experiments'
								})
				}),
	div:	false,
	current_hash:	false,
	initialize: function(){
		this.show();
		controldiv = $('controles');
		controlinks = $A(controldiv.getElementsByTagName('a'));
		controlinks.each(
			function(cl){
				ref = cl.getAttribute('href');
				if(ref.indexOf('#') != -1){
					hsh = ref.split('#');
					hsh = hsh.pop();
					
					cl.onclick = this.show.bind(this, '#'+hsh);
				}
			}.bind(this)
		);
	},
	
	show: function(hash){
		if(!hash)
			hash = location.hash;
		if(!hash || !this.settings.get(hash)) hash = '#about';

		pagesettings = this.settings.get(hash);
		div = $(pagesettings.get('div'));
		
		if(hash == this.current_hash){
			new Effect.Highlight(div.parentNode, {duration: 0.4, startcolor: '#ffffff', endcolor: '#7d7f86'});
			return false;
		}
		this.current_hash = hash;

		if(this.div){
/* 			new Effect.BlindUp(this.div, {queue: 'end'}) */
			new Effect.Parallel(
				[
					new Effect.Fade(this.div, {sync: true}),
					new Effect.BlindUp(this.div, {sync: true})
				],
				{
					duration: 0.8,
					queue: 'end',
					sync: false
				}
			);		
		}

		this.div = div;
		if(!this.div) throw('No existe el div de '+hash+' '+pagesettings.get('div'));
		document.title = pagesettings.get('title');

/* 		new Effect.BlindDown(this.div, {queue: 'end'}); */
		new Effect.Parallel(
			[
				new Effect.Appear(this.div, {sync: true}),
				new Effect.BlindDown(this.div, {sync: true})
			],
				{
					duration: 0.8,
					queue: 'end',
					sync: false
				}
		);
	}
});