var contentDiv, oddLis, evenLis, aniMs, stepHeight, targetElement, timer;
var isActive = new Array();
var timerPauseMs = 8000;
var clicked = false;
var loading;
function LoadHeader(targetSelector, anMs) {
    
    if (anMs === undefined)
        aniMs = 400;
    else
        aniMs = anMs;
    
    targetElement = $(targetSelector);
    var target = targetElement.find("ul");
    contentDiv = targetElement.find("div.content");
    var top = 5;

    evenLis = target.find("li:even"); // The normal li's
    oddLis = target.find("li:odd"); // The slide-in li's
      
    loading = $("div#whoosj-loading");
         
    stepHeight = contentDiv.find("div:first").height();
    contentDiv.css({ "top": stepHeight, "display": "block" });

    var position = targetElement.position();
    var backgroundBorder = $("div#background-border");
    backgroundBorder.css({ "top": position.top, "left": position.left });
   
    for (i = 0; i < evenLis.length; i++) {
        isActive[i] = false;
    }

    oddLis.each(function(ix, el) {
        el = $(el);
        var elHeight = el.height();
        el.css("top", top + "px");
        top -= 4;
        top += elHeight;
    });
    evenLis.each(function(ix, el) {
        el = $(el);
        el.click(function() {
            clicked = true;
            clearTimeout(timer);
            loading.stop().css("display", "none");
            var active = -1;
            for (i = 0; i < isActive.length; i++) {
                if (isActive[i]) {
                    active = i;
                    isActive[i] = false;
                    break;
                }
            }
            if (active > -1)
                WhoosjAnimate($(oddLis[active]), active, false, aniMs);
            WhoosjAnimate($(oddLis[ix]), ix, true, aniMs);
            isActive[ix] = true;
        });
    });

    targetElement.mouseenter(function() {
        clearTimeout(timer);
        loading.stop().css("width", 0);
    });

    targetElement.mouseleave(function() {
        if (!clicked) {
            timer = setTimeout(function() { StartWhoosjTimer(); }, timerPauseMs);
            loading.animate(
						{ width: '940' },
						timerPauseMs - 100,
						'linear'
					);
        }
    });

    StartWhoosjTimer();
}

function StartWhoosjTimer() {
    var active = -1;
    for (i = 0; i < isActive.length; i++) {
        if (isActive[i]) {
            active = i;
            isActive[i] = false;
            break;
        }
    }
    if (active > -1)
        WhoosjAnimate($(oddLis[active]), active, false, aniMs);
    active++;
    if (active >= isActive.length)
        active = 0;
    WhoosjAnimate($(oddLis[active]), active, true, aniMs);
    isActive[active] = true;
    loading.animate(
				{ width: '940' },
				timerPauseMs - 100,
				'linear'
			);
    timer = setTimeout(function() { StartWhoosjTimer(); }, timerPauseMs);
}

function WhoosjAnimate(el, index, isStartAni, aniMs) {
    loading.stop().css("width", 0);
    var right = '-6';
    if (!isStartAni)
        right = '-340';
    el.stop().animate(
				{ right: right },
				aniMs
			);
    var top = -index * stepHeight;
    if (isStartAni) {
        contentDiv.animate(
					{ top: top },
					aniMs
				);
    }
}