/*
 * ============================================================================ 
 * (c) 2005 - 2010 Liss-Design Aachen, Deutschland 
 * ----------------------------------------------------------------------------
 * File:         .js                                                           
 * Description:                                                                
 * ============================================================================
 */
$( function ()
{
	var $navItem,
	thisLeft,
	thisTop,
	thisWidth,
	thisHeight,
	$slider = $(".slider");

	$slider
		.css("top", $(".active").position().top)
		.css("left", $(".active").position().left)
		.width($(".active").width())
		.height($(".active").height())
		.data("origTop", $slider.position().top)
		.data("origLeft", $slider.position().left)
		.data("origWidth", $slider.width())
		.data("origHeight", $slider.height())
		;

	var activate = function () {
		$navItem   = $(this);
		thisTop    = $navItem.position().top;		
		thisLeft   = $navItem.position().left;
        thisWidth  = $navItem.width();
        thisHeight = $navItem.height();
		$slider.stop().animate (
				{
					top:    thisTop,
					left:   thisLeft,
					width:  thisWidth,
					height: thisHeight
				}
				,300
				//,'swing'
		);
	};
	var deactivate = function () {
		$slider.stop().animate(
				{
					top:    $slider.data("origTop"),
					left:   $slider.data("origLeft"),
					width:  $slider.data("origWidth"),
					height: $slider.data("origHeight")
				});
	};

	$(".item").hover (activate, deactivate);
	$(".item").focusin (activate);
	$(".item").focusout (deactivate);
});