function resizeWrapper(){
	h = $('#splashback img').height();
	w = $('#splashback').width();
	
	fs = w/960*13;
	fs = (fs > 15.3) ? 15.3 : fs;
	$('body').css('fontSize', fs+'px');	


	//    Cufon.replace('a, span').CSS.ready(setSliders);

	setSliders();
	
	x = ((w-960)/2)+2;	
	$('#quote_float, #announce_float').css('paddingLeft',  x+ 'px');
	$('#announce_wrap').css('left', (x-15)/2+144 + 'px');
	$('#menu_box').css('height', (h+34) + 'px');
	$('#menu_box').css('marginTop', (45+(h/370)*65) + 'px');
	$('#title_float').css('top', (20+(h/370)*10) + 'px');
	
	ih = $('#slidingMenu').height();
	$('#slidingMenuDesc, #slidingMenu').css('marginTop', ((h-ih)/2) + 'px');
	
	$img = $('#splashback img');
	lft = $img.position().left + $img.width();
	rt = $('#slidingMenu').position().left;
	if (rt>lft){
		new_rt = lft+4 + $('#slidingMenu').width();
		new_rt = $(window).width() - new_rt;
		$('#slidingMenu').css('right', new_rt+'px');
		$('#slidingMenu li').css('float', 'left');	
	} else {
		$('#slidingMenu').css('right', '1px');
		$('#slidingMenu li').css('float', 'right');	
	}

	winh = $(window).height() - 3;
	doch = $('#quote_float').position().top+$('#quote_float').outerHeight() + 35;
	$('#wrapper').css('height', ((doch > winh) ? doch : doch) + 'px');
	
}
function setSliders() {
		var $menu 		= $("#slidingMenu");

		var $selected	= $menu.find('li:first');

		/**
		* this is the absolute element,
		* that is going to move across the menu items
		* it has the width of the selected item
		* and the top is the distance from the item to the top
		*/
		var $moving		= $('<li />',{
			className	: 'move',
			top			: $selected[0].offsetTop + 'px',
			width		: $selected[0].offsetWidth + 'px'
		});

		/**
		* each sliding div (descriptions) will have the same top
		* as the corresponding item in the menu
		*/
		$('#slidingMenuDesc > div').each(function(i){
			var $this = $(this);
			$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
		});

		/**
		* append the absolute div to the menu;
		* when we mouse out from the menu 
		* the absolute div moves to the top (like innitially);
		* when hovering the items of the menu, we move it to its position 
		*/
		$menu.bind('mouseleave',function(){
			moveTo($selected,400);
		})
		.append($moving)
		.find('li')
		.not('.move')
		.bind('mouseenter',function(){
			var $this = $(this);
			var offsetLeft = $this.offset().left - 20;
			//slide in the description
			$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
			//move the absolute div to this item
			moveTo($this,400);
		})
		.bind('mouseleave',function(){
			var $this = $(this);
			var offsetLeft = $this.offset().left - 20;
			//slide out the description
			$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
		});;

		/**
		* moves the absolute div, 
		* with a certain speed, 
		* to the position of $elem
		*/
		function moveTo($elem,speed){
			$moving.stop(true).animate({
				top		: $elem[0].offsetTop + 'px',
				width	: $elem[0].offsetWidth + 'px'
			}, speed, 'easeOutExpo');
		}		
}
