var ROTATION_TIME = 7500;
var TRANSITION_TIME = 1000;

var mhTimer, images, features;
var currentImgIndex = -1;

$(document).ready(function () {
    $('.feature img').addClass('imglist').appendTo("#screens");
    var imglist_menu = $('<ul id="imglist_menu"></ul>').appendTo('#controls');
    features = $('.feature');
    images = $(".imglist");
    if (images.length > 1)
        images.each(function (index) { $("<li><a href='javascript:void(0);' title='' onclick='showNextFeature(" + index + ");'>&nbsp;</a></li>").appendTo(imglist_menu); });
    showNextFeature(-1);
    resetTimer();
});

function showNextFeature(imgToShow) {
    if (images.length > 1 || currentImgIndex == -1) {
        if (currentImgIndex > -1) {
            $(images[currentImgIndex]).fadeOut(TRANSITION_TIME);
            $(features[currentImgIndex]).fadeOut(TRANSITION_TIME);
        }

        if (imgToShow > -1) {
            currentImgIndex = imgToShow;
            resetTimer();
        }
        else
            currentImgIndex = currentImgIndex < (images.length - 1) ? currentImgIndex + 1 : 0;

        $(images[currentImgIndex]).fadeIn(TRANSITION_TIME);
        $(features[currentImgIndex]).fadeIn(TRANSITION_TIME);
        $("#imglist_menu li").each(function (index) {
            $(this).removeClass("selected");
            if (index == currentImgIndex)
                $(this).addClass("selected");
        });
    }
}

function resetTimer() {
    window.clearInterval(mhTimer);
    mhTimer = window.setInterval(function () { showNextFeature(-1); }, ROTATION_TIME);
}