$(document).ready(function(){
								 
								
	function bannercarousel_initCallback(carousel) {
		// create external navigation
		var nav_container = '<div style="position: absolute; top: 390px; right: 0px; z-index: 5000;"><div class="banner-controls-navi"></div></div>';
		$('.banner-content').prepend(nav_container);
		
		if($('.banner-element').length > 1) {
			$('.banner-element').each(
					function(intIndex){
						var index = intIndex + 1;
						// give the first one an active state
						if (intIndex != 0) {
							$('.banner-controls-navi').prepend('<span class="banner-navi-item" id="'+index+'"></span>');
						} else {
							$('.banner-controls-navi').prepend('<span class="banner-navi-item-cur" id="'+index+'"></span>');
						}
					 }
				 );
		}
		
		$('.banner-controls-navi span').bind('click', 
				function() {
					carousel.scroll($.jcarousel.intval($(this).attr('id')));
					// change class of the btn
		
					var old = jQuery('.banner-navi-item-cur').removeClass('banner-navi-item-cur').addClass('banner-navi-item');
					$(this).addClass('banner-navi-item-cur');
					return false;
				}
		);

		
};

/* set the point in the nav */
function bannernav_reset(carousel,element,index,operation) {
			$('.banner-navi-item-cur').removeClass('banner-navi-item-cur').addClass('banner-navi-item');
			$('.banner-controls-navi #'+jQuery(element).attr('jcarouselindex')).addClass('banner-navi-item-cur');
};
		
		// init Carusel
		$('.banner-content').jcarousel({
        	animation: 'slow',
			wrap: 'both',
			scroll: 1,
			auto: 6,
			initCallback: bannercarousel_initCallback,
			itemVisibleInCallback: bannernav_reset
			});
		
		
	
 });