$(document).ready(function(){
	
			// Подключаем плагин
		$('.nav-jobs-catalog').scroll({content:'.nav-jobs-catalog-wrap ul', postAction: 'resetElHandlers'});
		resetElHandlers();
	});

	
	/**
	* Переустанавливает обработчики в списке элементов. Ф-ция используется:
	* 	- при первичной иициализации страницы
	* 	- передается в плагин скролла и вызывается там как пост-обработчик для переназначения обработчиков каждому эл-ту.
	*		это необходимо потому, что от позиции эл-та в списке зависит тип обработчика, который на него вешается
	* Метод live использовать не получается.
	*/
	resetElHandlers = function(){
			// Удаляем существующие обработчики с элементов
		$('.nav-jobs-catalog-wrap ul li a').unbind();
		
			// Если мышку навели на первый блок - он "раскрывается" вправо
			// Если на второй и последующие, которые видны целиком - они раскрываются влево
			// Если на последний, который виден частично - он сдвигается влево до полной видимости, а потом раскрывается влево		
		var firstEl = $('.nav-jobs-catalog-wrap ul li').first();
		var containerWidth = $('.nav-jobs-catalog-wrap').width();
		var widthTmp = 0, maxWidth = 320, normalWidth = 167;
		$('.nav-jobs-catalog-wrap ul li a').each(function(index, domEl){
			widthTmp += $(this).outerWidth();
			var widthDiff = containerWidth - widthTmp;
			if (0 === index) {
				$(this).SetMEnterHandlerFirst(maxWidth, normalWidth)
			} else if ( widthDiff > 0 ) {
				$(this).SetMEnterHandler(firstEl, maxWidth, normalWidth, 0);
			} else {
				$(this).SetMEnterHandler(firstEl, maxWidth, normalWidth, widthDiff);
			}
		});
	}	

	jQuery.fn.SetMEnterHandlerFirst = function(maxWidth, normalWidth){
		$(this).mouseenter(function(){
			$(this).children('img').stop(true,true).delay(230).show(70);
			$(this).stop(true).css('background', '#FFF').animate({width: maxWidth}, 300);		
		}).mouseleave(function(){
			$(this).children('img').stop(true,true).hide(70);
			$(this).stop(true).css('background', '#F3F3F4').animate({width: normalWidth}, 300);
		});
		return $(this);
	}	
	
	jQuery.fn.SetMEnterHandler = function(firstEl, maxWidth, normalWidth, widthDiff){
		$(this).mouseenter(function(){
			$(this).children('img').stop(true,true).delay(230).show(70);
			$(this).stop(true).css('background', '#FFF').animate({width: maxWidth}, 300);
			$(firstEl).stop(true).animate({"margin-left": -(maxWidth-normalWidth-widthDiff)}, 300);
		}).mouseleave(function(){
			$(this).children('img').stop(true,true).hide(70);
			$(this).stop(true).css('background', '#F3F3F4').animate({width: normalWidth, "margin-left": 0}, 300);
			$(firstEl).stop(true).animate({"margin-left": 0}, 300);
		})
	}