var banner = {
	'index' : 0,
	'noOfSlides' : 0,
	'arrayOfSlides': null,
	'interval' : 5000
}

banner.init = function() {
	banner.arrayOfSlides = $('#banner .inner img');
    banner.noOfSlides = $(banner.arrayOfSlides).length;

    $('<img class="control pause" src="images/play.png" width="19" height="19" alt="#" />').appendTo('#banner');
	
	$('#banner .inner img:first').show().addClass('active');
	$('#banner .inner img').not(':first').hide().addClass('inactive');
	
	$('#banner .control').bind('click', function(event) { banner.toggleTimer(this); });
	
	banner.startTimer();
}

banner.changeOnTimer = function() {

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


banner.changeSlide = function(e) {
	$('#banner .inner img').addClass('inactive').removeClass('active').hide(); 
	$('#banner .inner img').eq(e).addClass('active').removeClass('inactive').show(); 
}


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

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

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

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

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

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