var contentElementWidth = 980;
var elementCount = 0;
var contentIndex = 0;
var imageIndex = 0;
var rotateTimeout;
var waitTime = 8000;
var animationTime = 800;
var captionWidth = 190;

$(document).ready(function() {

       elementCount = $('#banners ul').children('li').length;
	   channelNumbersWidth = elementCount * 21;
       channelPanelWidth = captionWidth + channelNumbersWidth;
		$('#channelLinks').width(channelNumbersWidth);

       $('#banners ul').width((elementCount * contentElementWidth)+980);
       $('#banners ul').css({'position': 'relative'});
       $('#banners ul').append('<li>'+$('#banners ul li:eq(0)').html()+'</li>');
       $('#channelLinks a').click(function(e) {
           e.preventDefault();
           navNumber = $(this).html();
		   //console.log(navNumber);
           updateContent(navNumber - 1);
       });

   $('#banners ul').css({display: 'block'});
       $('#banners ul').animate({opacity: 1}, 1000, "swing", function() {
           initGallery();
       });
});

function initGallery() {
       rotateTimeout = setTimeout(function() {
               rotateImage();
       }, waitTime);
};

function updateContent(index) {
   imageIndex = index-1;
   contentIndex = index-1;
   updateText(imageIndex);
   clearTimeout(rotateTimeout);
   rotateImage();
}

function updateText(index) {
   var anchor = $('#banners ul li a:eq('+index+')');
   var newLink = $(anchor).attr('href');
   //$('.channelBody h1').html('<a href="'+newLink+'">'+$(anchor).attr('title')+'</a>');
   //$('.channelBody span').html($('img', anchor).attr('alt'));
   //$('.csFeatureImage img').attr('src','admin-resources/image-tools.php?w=83&h=77&c=1&e=0&src=' +$('.thumbSrc', anchor).html());
   $('#channelLinks a').removeClass('selected');
   //$('.csViewMoreBtn').attr('href', newLink);
   //$('.csFeatureImage a').attr('href', newLink);
   $('#channelLinks a:eq('+index+')').addClass('selected');
}

function rotateImage() {
   imageIndex++;
       contentIndex = contentIndex == elementCount-1 ? 0 : contentIndex+1;
       updateText(contentIndex);
   if(imageIndex == elementCount+1){
       imageIndex = 1;
       $('#banners ul').css({right: '0px'});
   }
    $('#banners ul').stop(true, true);
    $('#banners ul').animate({right:(imageIndex*contentElementWidth)+'px'}, animationTime, "swing");
       rotateTimeout = setTimeout(function() {
               rotateImage();
       }, waitTime);
};