$(document).ready(function(){

	$("#news-carousel").jCarouselLite({
		auto: 4000,
		speed: 1000,
		vertical: true,
		visible: 2
	});

	var picturePage = $("li.selected").attr("id");
	
	function Swap(picture) {
		
		$('#header-box').addClass('loading');
		
		var img = new Image();
		$(img).load(function () {
			$(this).hide();
			$('#header-box').empty();
			$('#header-box').removeClass('loading').append(this);
			$(this).fadeTo(1500,1);
		})
		.attr({
			"src": 'images/header/'+picture+'.jpg',
			"class": 'picture'
		});
	
	}
	
	Swap(picturePage);
	
	//transitions
	//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
	var style = 'easeOutElastic';
		
	//Retrieve the selected item position and width
	var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
	var default_width = $('#lava li.selected').width();

	//Set the floating bar position and width
	$('#box').css({left: default_left});
	$('#box .head').css({width: default_width});

	//if mouseover the menu item
	$('#lava li').hover(
	
		function () {
			
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 

			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1500, easing: style});	

			var pictureMenu = $(this).attr("id");
			if (pictureMenu != picturePage){
				Swap(pictureMenu);
			}

		},
		
		function() {
		
			var pictureMenu = $(this).attr("id");
			if (pictureMenu != picturePage){
				Swap(picturePage);
			}
		
		});
		
	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#lava').mouseleave(function () {

		//Retrieve the selected item position and width
		default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		default_width = $('#lava li.selected').width();
			
		//Set the floating bar position, width and transition
		$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
		$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		

	});

	$("div.content").hide();

	$("div.toggler").click(function () {

		$(this).fadeOut("normal",function(){$(this).next("div.content").fadeIn("normal");});
	});

	$("a.thickbox").fancybox({
		'titlePosition': 'inside'
	});
	
	$("a.youtube").click(function() {
		$.fancybox({
                  'padding'             : 0,
                  'autoScale'  			: false,
                  'transitionIn'        : 'none',
                  'transitionOut'       : 'none',
                  'title'               : this.title,
                  'width'               : 680,
                  'height'              : 495,
                  'href'                : this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
                  'type'                : 'swf',
                  'swf'					: {'allowfullscreen':'true', 'wmode':'transparent'}
                  });
                 return false;
		}); 
	
});