﻿var BANNER_SLIDE_LEFT_TIME = 500;
var BANNER_SLIDE_FROM_BEHIND_LEFT_TIME = 300;
var BANNER_SLIDE_BOOST_MULTIPLIER = 15;

var bannerWidth;

var banner_isSliding;

// Initialize banner
$(initBanner);

// Banner tabs initialization
function initBanner() {
	bannerWidth = $("#banner_body").first().width();
	tab_headerWidth = $(".tab_header", "#banner_body").first().width()
	var tabCount = $("#banner_body > .tab").length;
	$('.tab_body').css("width", bannerWidth - (tab_headerWidth * tabCount) + tab_headerWidth);
	$('.tab_body').css("margin-left", $('.tab_header').width);


	$(".tab").each(function (index) {
		var tabHeaderWidth = $(".tab_header", "#banner_body").first().width();

		$(this).click(function () {
			tab_onclick($(this));
		}).css({
			"left": bannerWidth - (tabCount - index) * tabHeaderWidth,
			"z-index": index
		});
	});
	$('.tab').css("display", "block");
	$("#hot_strip").animate({ "left": 0 }, BANNER_SLIDE_LEFT_TIME, function () {
		$("#hot_strip").css("z-index", 42);
	});
	// Fire up event handler
	$(".tab.closed", "#banner_body").first().click();
}


function tab_onclick($sender) {
	if (banner_isSliding) {
		return;
	}

	$sender.unbind();
	banner_isSliding = true;

	// Local vars
	var banner_indexes = new Array;
	var $displayed = $(".tab.displayed", "#banner_body");
	var th_width = $(".tab_header", "#banner_body").width();
	var sender_index = getPositionIndex($sender);
	var slidingTabs = $(".tab.closed", "#banner_body").filter(function () {
		var $tab = $(this);
		var posIndex = getPositionIndex($tab);
		if (posIndex < sender_index) {
			banner_indexes[$tab[0].id] = posIndex; // Caching indexes
			return true;
		}
		return false;
	});
	var leftedTabs = $(".tab.closed", "#banner_body").filter(function () {
		return getPositionIndex($(this)) > sender_index;
	});

	// First slide
	if ($displayed.length === 0) {
		$sender.removeClass("closed").addClass("displayed")
			   .animate({ "left": 0 }, BANNER_SLIDE_LEFT_TIME, function () {
			   	banner_isSliding = false;
			   });
		return;
	}

	banner_indexes[$displayed[0].id] = 0;

	// Slide tabs that are before sender to left
	if (slidingTabs.length > 0) {
		for (var i = 0; i < slidingTabs.length; i++) {
			var $current = $(slidingTabs[i]);
			var posIndex = banner_indexes[$current[0].id];

			$current.animate({ "left": th_width * posIndex }, BANNER_SLIDE_LEFT_TIME - posIndex * BANNER_SLIDE_BOOST_MULTIPLIER);
		}
	}

	// Slide sender to left
	$sender.animate({ "left": th_width * sender_index }, BANNER_SLIDE_LEFT_TIME - sender_index * BANNER_SLIDE_BOOST_MULTIPLIER, function () {

		// Hide tabs behind left border
		for (var i = 0; i < slidingTabs.length; i++) {
			$(slidingTabs[i]).animate({ "left": 0 }, BANNER_SLIDE_LEFT_TIME * 0.8);
		}

		$displayed.removeClass("displayed").addClass("closed");

		$sender.animate({ "left": 0 }, BANNER_SLIDE_LEFT_TIME * 0.8, function () {

			$sender.removeClass("closed").addClass("displayed");

			// Move tabs behind right border
			for (var key in banner_indexes) {
				$("#" + key).css("left", bannerWidth - (banner_indexes.length - banner_indexes[key]) * th_width);
			}

			recalculateZIndexes(sender_index);

			// Slide tabs from behind right border
			var offset = th_width * (slidingTabs.length + 1); // sliding tabs + old displayed

			leftedTabs.add($displayed).add(slidingTabs).each(function () {
				var boost = getPositionIndex($(this));
				$(this).stop().animate({ "left": "-=" + offset }, BANNER_SLIDE_FROM_BEHIND_LEFT_TIME * 0.9 - boost * BANNER_SLIDE_BOOST_MULTIPLIER, function () {
					// Bind events handlers
					bindToEvents($displayed);
					banner_isSliding = false;
				});
			});
		});
	});
}


function getPositionIndex($tab) {
	var i = (parseInt($tab.css("left")) - ($(".tab_body", "#banner_body").first().width() - $(".tab_header", "#banner_body").first().width()))
			/ $(".tab_header", "#banner_body").first().width();
	return i > 0 ? i : 0;
}

function recalculateZIndexes(senderIndex) {

	var $tabs = $(".tab", "#banner_body");

	for (var i = 0; i < $tabs.length; i++) {
		var z = parseInt($($tabs[i]).css("z-index"));

		z = z - senderIndex < 0
							  ? $tabs.length + (z - senderIndex)
							  : z - senderIndex;

		$($tabs[i]).css("z-index", z);
	}
}

function bindToEvents($tabs) {
	for (var i = 0; i < $tabs.length; i++) {
		$($tabs[i]).click(function () {
			tab_onclick($(this));
		});
	}
}
