$(function(){

var body_hidden = true; 

// Build the fancy header
function renderHeader(char_map){

	var el = $('#primary');  
	el.find('h1').hide(); 
	
	$.each(char_map, function(i, data){
			el.append(_makeNode(data)); 
		}); 	
		
		var showNode = function(e){
			if(body_hidden){
					$('.inner-wrap').animate({
						opacity: 1
					}, 2000); 
			}
			var node = $(this).closest('.node'),  
				img = node.find('.node-img'); 
			var bg_offset = '0 ' + node.data('bg_offset') + 'px';  	
			img.css('background-position', bg_offset).show(); 
			node.find('.node_text').css('opacity', 0); 
		}; 
		var hideNode = function(e){
				var node = $(this).closest('.node'); 
				var img = node.find('.node-img'); 
				img.fadeOut(500, function(){
					img.hide();
					img.attr('src', ''); 
					node.find('.node_text').css('opacity', 1);
				}); 
		}; 
	
	$('.node').bind('mouseenter', showNode); 	
	$('.node').bind('mouseleave', hideNode); 
}

	
function _makeNode(data){	
	var node =  $('<div />', {
			'class' : 'node'
		}); 			
	node.append($('<div />', {
			'class' : 'node_text', 
			text : data.text
		}));		
	var img_class = 'node-img hide ' + data.img_node_class; 	
	node.append($('<div />', {
			'class' : img_class
		})); 		
	node.data('bg_offset', data.bg_offset); 		
	return node; 
} 

var char_map = [
	{
		text 		: 'S', 
		bg_offset : 0
	}, 
			{
		text 		: 'U', 
		//bg_offset : 180, 
		bg_offset : 360
	}, 
			{
		text 		: 'M', 
		bg_offset : 180
	}, 
			{
		text 		: 'M', 
		bg_offset : 900
	}, 
			{
		text 		: 'E', 
		bg_offset : 720
	}, 
			{
		text 		: 'R', 
		bg_offset : 540
	}, 
	{
		text 		: '',
		bg_offset : 540
	}, 
			{
		text 		: 'B',
		bg_offset: 720
	}, 
			{
		text 		: 'A', 
		bg_offset: 900
	}, 
			{
		text 		: 'B', 
		bg_offset: 180
	}, 
			{
		text 		: 'E', 
		bg_offset : 360
	}, 
	{
		text 		: 'S', 
		bg_offset: 0
	}
]; 


renderHeader(char_map); 

});