//Опции настройки меню
var menuConfig = {
	/* ==================
	 * Числовые настройки
	 */
	widthOut: 165,
	widthOver: 148,
	widthSelected: 250,
	textTopOver: 250,
	textTopOut: 100,
	textHeightOver: 150,
	textHeightOut: 80,
	optCount: 6,

	/* ===================================
	 * Переход по ссылкам из главного меню
	 */
	href: {
		0: 'http://about.toowto.com/',
		1: 'http://products.toowto.com/',
		2: 'http://maintenance.toowto.com/',
		3: 'http://development.toowto.com/',
		4: 'http://web.toowto.com/',
		5: 'http://learning.toowto.com/'
	},

	/* =====================
	 * Объявления для класса
	 */
	selectedOption: undefined,
	selectedID: 0,

	/* =========================================
	 * Извлечем порядковый номер выбранного блока
	 */
	setSelectedOption: function(pSelectedOption) {
		this.selectedOption = pSelectedOption;
		this.selectedID = this.getSelectedID();
	}, //end setSelectedOption

	/* =========================================
	 * Вернем порядковый номер выбранного блока
	 */
	getSelectedID: function() {
		var thisID = parseInt( jQuery(this.selectedOption).attr("id").substring('opt'.length) );
		return isNaN(thisID) ? 0 : thisID;
	}, //end getSelectedID

	/* ========================================================
	 * Сменить фон и увеличить ширину блока при наведениии мыши
	 */
	optionWidthMouseOver: function() {
		//jQuery("#infoDiv").html("this.selectedID == " + this.selectedID);
		var thisConfig = this;
		var nowValues = [];
		//Сначала анимируем выбранный блок
		jQuery(this.selectedOption).addClass("content_hover").stop(true, true).animate({
			//Анимируем выезд и расширение
			"width": this.widthSelected + "px",
			"left": (this.selectedID * this.widthOver) + "px"
		}, {
			duration: 300,
			step: function(now, fx) {
				//запомним новое значение анимирующегося в данный момент свойства
				nowValues[fx.prop] = now;
				//Синхронно будем двигать вправо следующий за выбранным блок
				if ( jQuery("#opt" + (thisConfig.selectedID + 1)) )
					jQuery("#opt" + (thisConfig.selectedID + 1)).css({
						"left": (nowValues['left'] + nowValues['width']) + "px"
					});
				//var data = fx.prop + ') start == ' + fx.start + " | end == " + fx.end + " | now == " + now;  jQuery('body').append('<div>' + data + '</div>');
			}
		});
		//Раздвигаем все остальные блоки
		for (var i = this.optCount - 1; i >= 0 ; i--) {
			if (i != this.selectedID) {
				//Блоки справа двигаем в обратном порядке, слева - в прямом
				var k = (i < this.selectedID) ? (i) : (this.optCount - i + this.selectedID);
				//Для элементов справа нужно учитывать ширину выбранного блока
				var thisLeft = (k < this.selectedID) ? (k * this.widthOver) : ((k - 1) * this.widthOver + this.widthSelected);
				if (k != (this.selectedID + 1)) {
					jQuery("#opt" + k).stop(true, true).animate({
						//Блоки разъезжаются с анимацией
						"left": thisLeft + "px"
					}, 300);
				}
				jQuery("#opt" + k).css({
					//Блоки сужаются
					"width": this.widthOver + "px"
				}, 300);
				//jQuery("#infoDiv").append(jQuery('<br>current DIV == opt' + k));
			}
		}
	}, //end optionWidthMouseOver

	/* ==============================================
	 * вернуть ширину блока при снятии указателя мыши
	 */
	optionWidthMouseOut: function() {
		jQuery(this.selectedOption).removeClass("content_hover");
		//Cдвигаем все опции в исходное положение
		for (var i = 0; i < this.optCount; i++) {
			//Блоки справа двигаем в обратном порядке, слева - в прямом
			var k = (i <= this.selectedID) ? (i) : (this.optCount - i + this.selectedID);
			//Теперь все блоки, в том числе выбранный, будут находиться на одинаковом расстоянии
			var thisLeft = k * this.widthOut;
			jQuery("#opt" + k).stop(true, true).animate({
				//Блоки съезжаются с анимацией
				"left": thisLeft + "px"
			}, 300).css({
				//Возвращаем исходную ширину
				"width": this.widthOut + "px"
			});
		}
	}, //end optionWidthMouseOut

	/* ====================================
	 * показываем слой-пленку с затемнением
	 */
	plenkaShow: function() {
		var thisConfig = this;
		//Покажем слой путем изменения прозрачности
		jQuery("#opt" + this.selectedID + " div.plenka").css({
			"opacity": 0.2
		});
		jQuery("#opt" + this.selectedID + " div.textContent").stop(true, true).animate({
			"margin-top": -this.textTopOver
		}, 400, 'linear', function() {
			//Начинаем выцветание текста только после того, как табличка завершила движение вверх
			jQuery("#opt" + thisConfig.selectedID + " div.textLabel").stop(true, true).animate({
				"opacity": 1
			}, 600).css({
				"display": "block"
			}).css({
				"margin-top": 
					jQuery("#opt" + thisConfig.selectedID + " div.textContent")[0].offsetHeight -
					jQuery("#opt" + thisConfig.selectedID + " div.textTitle")[0].offsetHeight -
					jQuery("#opt" + thisConfig.selectedID + " div.textLabel")[0].offsetHeight
			})
		}).css({
			"height": this.textHeightOver
		});
		jQuery("#opt" + this.selectedID + " div.textTitle").css({
			"margin-top": -this.textHeightOver
		});
	}, //end plenkaShow

	/* ====================================
	 * скрываем слой-пленку с затемнением
	 */
	plenkaHide: function() {
		//Покажем слой путем изменения прозрачности
		jQuery("#opt" + this.selectedID + " div.plenka").css({
			"opacity": 0
		});
		jQuery("#opt" + this.selectedID + " div.textContent").stop(true, true).css({
			//"бросаем" табличку вниз с более высокого положения
			"margin-top": -this.textTopOver - 50
		}).animate({
			"margin-top": -this.textTopOut
		}, 400).css({
			"height": this.textHeightOut
		});
		jQuery("#opt" + this.selectedID + " div.textTitle").css({
			"margin-top": -this.textHeightOut
		});
		jQuery("#opt" + this.selectedID + " div.textLabel").css({
			"opacity": 0,
			"display": "none"
		});
	} //end plenkaHide
};

jQuery(document).ready(function() {
	/* ============================================
	 * Задать событие наведения мышки на опцию меню
	 */
	jQuery("div.content div.option").hover(function() {
		//onMouseOver
		menuConfig.setSelectedOption(this);
		//показываем слой-пленку с затемнением
		menuConfig.plenkaShow();
		//регулируем ширину блока
		menuConfig.optionWidthMouseOver();
	}, function() {
		//onMouseOut
		menuConfig.setSelectedOption(this);
		//скрываем слой-пленку с затемнением
		menuConfig.plenkaHide();
		//восстанавливаем ширину блока
		menuConfig.optionWidthMouseOut();
	})
	/* ==========================================
	 * Задать событие щелчка мышкой по опции меню
	 */
	.click(function() {
		menuConfig.setSelectedOption(this);
		location.href = menuConfig.href[ menuConfig.getSelectedID() ];
	});
	jQuery("div.logo").click(function() {
		location.href = menuConfig.href['0'];
	});
});