var showOptionsTimeout = null; var delay = 650; var rotationTimeout = null; var rotationDelay = 7500;
var $messageContainer = null; var configuration = []; var activeOptionIndex = -1; var activeSectionIndex = -1;
var previousOptionIndex = null; var previousSectionIndex = null;

function move() {
    moveToNextItem(null, null);
}

function initialise() {
    var items = $j(".main-options li");
    $j(".main-options li a").fadeTo(0, 0.8);
    $j(".main-options").css('display', 'block');

    // wait for the options to finish displaying then show the message and active item
    showOptionsTimeout = window.setTimeout(function() {
        window.clearTimeout(showOptionsTimeout); setActiveItem(); move();
        rotationTimeout = window.setTimeout(move, rotationDelay);
    }, (delay * (items.length + 1)));

    // animate the left hand available options
    items.each(function(index) {
        var currentItem = this;
        window.setTimeout(function() {
            $j(currentItem).show().animate({ top: (55 * (index)) }, delay, function() { });
            $j(".main-options li:gt(" + (index) + ")").hide().css('top', (55 * (index)));
        }, delay * (index + 1));
    });
}
function setActiveItem() {
    if (previousOptionIndex != null) {
        //var previousItemIndex = activeOptionIndex - 1;
        if (previousOptionIndex == -1) { previousOptionIndex = configuration.length - 1; }
        configuration[previousOptionIndex].item.children('a')
        .animate({ backgroundColor: "#000", opacity: .8, width: 278 }, { queue: false, duration: 800 })
    }

    configuration[activeOptionIndex == -1 ? 0 : activeOptionIndex].item.children('a').eq(0)
            .animate({ backgroundColor: "#63be1b", opacity: 1.0, width: 293 }, { queue: false, duration: 800 })
            .fadeTo(0, 1.0);
}
function setMessage(message) { $messageContainer.html(message); }
function hideMessage(callBack) { var width = $messageContainer.outerWidth(); $messageContainer.animate({ opacity: .0, right: '-' + width }, 500, callBack); }
function showMessage(callBack) { $messageContainer.animate({ opacity: 1.0, right: '0' }, 500, callBack); }

function moveToNextItem(optionIndex, sectionIndex) {
    activeOptionIndex = activeOptionIndex == -1 ? 0 : activeOptionIndex;

    previousOptionIndex = activeOptionIndex;
    previousSectionIndex = activeSectionIndex;

    var currentOption = configuration[activeOptionIndex];
    var currentSection = currentOption.sections[activeSectionIndex == -1 ? 0 : activeSectionIndex];

    //alert(typeof optionIndex);
    //alert(optionIndex);

    if (optionIndex == null) { activeSectionIndex++; }
    else { activeOptionIndex = optionIndex; activeSectionIndex = sectionIndex; }

    // check to see if we need to move onto the next option
    if (activeSectionIndex == currentOption.sections.length) {
        activeOptionIndex++; activeSectionIndex = 0;
        // do we need to go to the first option
        if (activeOptionIndex == configuration.length) { activeOptionIndex = 0; }
    }

    // update the current selections
    var nextOption = configuration[activeOptionIndex];
    var nextSection = nextOption.sections[activeSectionIndex];  

    // hide the message
    hideMessage(function() {
        setMessage(nextSection.message);

        if (currentOption.section != nextOption.section) { nextOption.section.addClass('preactive'); setActiveItem(); }

        if (currentSection != nextSection) {
            nextSection.item.addClass('preactive');
            currentSection.item.fadeOut(1500, function() {

                nextSection.item.removeClass('preactive').addClass('active');
                currentSection.item.removeClass('active');
                showMessage();

                if (currentOption.section != nextOption.section) {
                    currentOption.section.removeClass('active');
                    nextOption.section.removeClass('preactive').addClass('active'); ;
                }
                currentSection.item.removeAttr('style');

                if (optionIndex == null) {
                    rotationTimeout = window.setTimeout(move, rotationDelay);
                }
            });
        }
        else { showMessage(); }
    });
}

$j().ready(function() {
    // configure the message container
    $messageContainer = $j('.message');

    // build our list of options & messages etc...
    $j('.main-options > li').each(function(index, item) {
        var sectionItems = []; var sectionId = $j(item).children('a').eq(0).attr('href'); var section = $j($j(item).children('a').eq(0).attr('href'));
        section.children('img').each(function(childIndex, childItem) { sectionItems.push({ item: $j(childItem), message: $j(childItem).attr('alt') }); });
        configuration.push({ item: $j(item), sectionId: sectionId, section: section, sections: sectionItems });
    });

    $j('.main-options > li > a').click(function() {
        clearTimeout(rotationTimeout);
        moveToNextItem($j(this).parent('li').index(), 0);
        return false;
    });

    $j('.main-options > li > a').mouseenter(function() {
        clearTimeout(rotationTimeout);
    }).mouseleave(function() { rotationTimeout = window.setTimeout(move, rotationDelay); });

    $messageContainer.mouseenter(function() {
        clearTimeout(rotationTimeout);
    }).mouseleave(function() { rotationTimeout = window.setTimeout(move, rotationDelay); });

    // lets get started!
    initialise();
});