var _featSpeed = 15000; //speed of animation in ms

var _feat = 1;
var _maxFeat;
var _animTmr;

function runAnim() {
    _feat++;
    var newX = ((_feat - 1) * 1000);
    $('#FeatFrame').animate({ scrollLeft: newX }, 'slow', null, function () {
        $('ul#feat_nav li').removeClass('sel');

        if (_feat > _maxFeat) {
            //return to 1
            _feat = 1;
            
            $('#FeatFrame').scrollLeft('0px');
        }

        $('li#featNavItem' + _feat).addClass('sel');
    });
}

function setupAnim() {
    _maxFeat = $('div.feature').size();
    var lastFeat = $('#feat1').clone().css('left', ((_maxFeat) * 1000) + 'px').attr('id', 'feat' + (_maxFeat + 1));
    lastFeat.appendTo('#FeatFrame');

    for (var i = 1; i <= _maxFeat; i++) {
        var obj = $('<li id="featNavItem' + i + '">' + i + '</li>').attr('featId', i);
        obj.click(function () {
            stopAnim();
            var fid = $(this).attr('featId');
            _feat = fid - 1;
            runAnim();
            startAnim();
        });

        $('ul#feat_nav').prepend(obj)
    }

    $('li#featNavItem1').addClass('sel');
    startAnim();
}

function stopAnim() {
    window.clearInterval(_animTmr);
}

function startAnim() {
    _animTmr = window.setInterval('runAnim()', _featSpeed);
}

function loadFeatures() {    
    $('div.feature').each(function () {
        var p = $(this).attr('imgPath');
        if (p) {
            $(this).children('img').attr('src', p);
        }
    });

    $('.feature:last img').load(function () {
        setupAnim();
    });
}

function setupNavigation() {
    $("ul.nav_hor > li").hover(function () {
        $(this).find("ul.subnav").stop().css('height', '').slideDown('fast').show();
    }, function () {
        $(this).find("ul.subnav").stop().slideUp('fast');
    });
}

$(document).ready(function () {
    setupNavigation();
    loadFeatures();
});