var Box = {
	showBox: function( box )
	{
		var boxId = '#box_' + box;

		if( $( boxId ).is( ':visible' ) )
		{
//			$('.carousel').jcarousel('stopAuto');
			this.hideBox(box);
		}
		else
		{
			$( 'div.box-self' ).fadeOut( 200 );
			$( boxId ).fadeIn( 500 );

//			$('.carousel').jcarousel('startAuto', 5);
		}
	},

	hideBox: function( box )
	{
		var boxId = '#box_' + box;
		$( boxId ).fadeOut( 200 );
	},
	
	initCarousel: function( carousel )
	{
//		carousel.options.start = 1;
		
		$('.jcarousel-control a').bind('click', function() {
			carousel.scroll($.jcarousel.intval($(this).text()));
			return false;
		});

		carousel.clip.hover(
			function() {
				carousel.stopAuto();
			},
			function() {
				carousel.startAuto();
			}
		);
	},
	
	itemCarouselSetActive: function(carousel, item, idx, state) 
	{
		$('a.control').removeClass('active');
		$('a.control-idx-' + idx).addClass('active');
	}

};

$(document).ready(function() {
	$('ul#boxes li.box').hover(
		function() {
			Box.showBox( $(this).attr('id') );
		},
		function() {
			Box.hideBox( $(this).attr('id') );
		}
	);

	$('.carousel').jcarousel({
		scroll: 1,
		wrap: 'last',
		initCallback: Box.initCarousel,
		itemFirstInCallback: Box.itemCarouselSetActive
//		buttonNextHTML: '<div id="jcarousel-next-horizontal"></div>',
//		buttonPrevHTML: '<div id="jcarousel-prev-horizontal"></div>',
	});
});