var interval;
var canClick = true;
$(document).ready(function() {
    Cufon.replace('.sidebar-title', { color: '#000000' });
    $("a#join").fancybox({ 'hideOnContentClick': false, 'frameWidth': 445, 'frameHeight': 375 });
    buildBannerNumber();
});
function buildBannerNumber() {
    var numberOfBanner = $('#banner_placeholder div').children().size();
    var retHtml = '<span>';
    for (var i = 1; i <= numberOfBanner; i++) {
        if (i == 1)
            retHtml += '<span id=' + i + ' class=active onclick="setActiveBannerMarker(this.id)">' + i + '</span>'
        else
            retHtml += '<span id=' + i + ' onclick="setActiveBannerMarker(this.id)">' + i + '</span>'
    }
    retHtml += '</span>';
    $('.menuBackground').html(retHtml)
}
function setActiveBannerMarker(id) {

    clearInterval(interval);
    if (canClick) {

        canClick = false;
        var $activeBanner = $('.menuBackground SPAN.active');
        var index = (1 * id) - 1;
        var $active = $('#banner_placeholder DIV.active');

        $activeBanner.removeClass('active');
        $('#' + id).addClass('active');

        $active.addClass('last-active');
        $($('#banner_placeholder DIV:eq(' + index + ')')).css({ opacity: 0.0 })
                .addClass('active')
                .animate({ opacity: 1.0 }, 1000, function() {
                    $active.removeClass('active last-active');
                    canClick = true;
                });
    }
}
function slideSwitch() {
    var $active = $('#banner_placeholder DIV.active');
    var $activeBanner = $('.menuBackground SPAN.active');

    if ($active.length == 0) $active = $('#banner_placeholder DIV:last');
    if ($activeBanner.length == 0) $activeBanner = $('.menuBackground SPAN SPAN:first');

    var $next = $active.next().length ? $active.next() : $('#banner_placeholder DIV:first');
    var $nextBanner = $activeBanner.next().length ? $activeBanner.next() : $('.menuBackground SPAN SPAN:first');

    $active.addClass('last-active');

    $next.css({ opacity: 0.0 })
            .addClass('active')
            .animate({ opacity: 1.0 }, 1000, function() {
                $active.removeClass('active last-active');
            });

    $nextBanner.addClass('active');
    $activeBanner.removeClass('active');
}
function startInterval() {
    interval = setInterval("slideSwitch()", 5000);
}
$(function() {

    startInterval();
});
function showMenu() {
    $(".menuBackground").css("display", "block");
}
function hideMenu() {

    $(".menuBackground").css("display", "none");
}