var banner = {
    'arrayOfSlides': null,
    'index': 0,
    'noOfSlides': 0,
    'interval': 7500,
    'hidden' : false
};

banner.init = function() {
    $('.banner:first').addClass('active');
    banner.setupControls();
    $('.dots li').bind('click', function(event) { banner.changeOnClick(this); });
    $('.controls img').bind('click', function(event) { banner.toggleTimer(); });

    banner.startTimer();
    banner.changeSlide(0); // force the first slide to load
}

banner.setupControls = function() {
    banner.arrayOfSlides = $('.banner');
    banner.noOfSlides = $(banner.arrayOfSlides).length;

    $('<img class="play" src="images/pause.png" width="15" height="16" alt="#" />').appendTo('.controls');

    $('<ul class="dots"></ul>').insertAfter('.play');
    for (var i = 0; i < banner.noOfSlides; i++) {
        $('.dots').append('<li><a href="#">Banner ' + (i + 1) + '</a></li>');
    }
    $('.dots li:first').addClass('active');
}

banner.changeOnTimer = function() {
    if (banner.hidden) return;

    if (banner.index == (banner.arrayOfSlides.length - 1)) {
        banner.index = 0;
    }
    else {
        banner.index = banner.index + 1;
    }
    banner.changeSlide(banner.index);
}

banner.changeOnClick = function(clicked) {
    if (banner.hidden) return;

    banner.resetTimer();

    banner.index = $.inArray(clicked, $('.dots li'));
    banner.changeSlide(banner.index);
}

banner.changeSlide = function(e) {
    if (banner.hidden) return;

    $('.banner').removeClass('active').eq(e).addClass('active');
    $('.dots li').removeClass('active').eq(e).addClass('active');

    banner.source = $('.banner.active > img').attr('src');
    if (banner.source) $('body').css('background-image', 'url(' + banner.source + ')');
}

banner.hide = function() {
    banner.hidden = true;
    $('body').css('background-image', '');
    banner.stopTimer();
}

banner.show = function() {
    banner.hidden = false;
    $('body').css('background-image', 'url(' + banner.source + ')');
    banner.startTimer();
}

banner.startTimer = function() {
    banner.timer = window.setInterval('banner.changeOnTimer();', banner.interval);

    $('.controls img.pause')
        .addClass('play')
        .removeClass('pause')
        .attr('src', 'images/pause.png');
}

banner.stopTimer = function() {
    if (banner.timer != null) window.clearInterval(banner.timer);
    banner.timer = null;

    $('.controls img.play')
        .addClass('pause')
        .removeClass('play')
        .attr('src', 'images/play.png');
}

banner.resetTimer = function() {
    banner.stopTimer();
    banner.startTimer();
}

banner.toggleTimer = function() {
    if (banner.timer != null) banner.stopTimer();
    else banner.startTimer();
}

$(document).ready(function() {
    banner.init();
});