// JavaScript Document
$(document).ready(function(){
	// reset social menu items
 	$('#social li').css('top', '0');
	// social menu effects
	$('#social').delegate('li', 'mouseenter', function() {
		$(this).animate({top: '-10px'}, 200);
	});
	$('#social').delegate('li', 'mouseleave', function() {
		$(this).animate({top: '0'}, 200)
	});

	/**
	 * Positions the slider under the passed menu item
	 *
	 */
	function sliderTo(el, noAnim) {
		el = $(el);
		var elPos = el.position(),
			targetLeft,
			targetWidth,
			w;
		if(menuSlider.css('opacity') == 0)
			noAnim = true;
		menuSlider.stop(true).animate({opacity: 1}, {duration: 200});
		elPos.left += el.offsetParent().position().left;
		targetLeft = elPos.left;
		targetWidth = el.width() - menuSliderLeftWidth - menuSliderRightWidth;

		if(el.is(':first-child')) {
			w =	menuContainer.find('.menu_left').width();
			targetWidth += w;	// add an extra padding
			targetLeft -= w - 2;
		} else if(el.is(':last-child')) {
			w =	menuContainer.find('.menu_right').width();
			targetWidth += w - 2;	// add an extra padding
		}

		if(noAnim) {
			menuSliderInner.width(targetWidth);
			menuSlider.css('left', targetLeft);
		} else {
			menuSliderInner.animate({width: targetWidth}, {duration: 200, queue: false, easing: 'linear'});
			menuSlider.animate({left: targetLeft}, {duration: 200, queue: false, easing: 'linear'});
		}
	}

	function sliderSnapBack() {
		if(activeMenuItem) {
			sliderTo(activeMenuItem)
		} else {
			menuSlider.animate({opacity: 0}, {duration: 200});
		}
	}


	/** MAIN MENU **/
	// initializing
	var menuSlider = $('#selector'),
		menuSliderInner = menuSlider.find('.selector_body').first(),
		menuSliderLeftWidth = menuSlider.find('.selector_left').first().width(),
		menuSliderRightWidth = menuSlider.find('.selector_right').first().width(),
		menuContainer = $('#menu_container'),
		activeMenuItem = menuContainer.find('li.active').first();
	if(!activeMenuItem || !activeMenuItem.length) {
		// no active menu item - hide the slider
		activeMenuItem = undefined;
		menuSlider.css('opacity', 0);
	} else {
		// position the slider under the active menu item
		sliderTo(activeMenuItem, true);
	}

	// binding handlers
	menuContainer.delegate('li', 'mouseenter', function() {
		sliderTo(this);
	});
	menuContainer.bind('mouseleave', sliderSnapBack);
	/** /MAIN MENU **/	

});