$(document).ready(function(){
	$('#carousel').jcarousel({
		visible: 4,
		scroll: 1,
		wrap: 'both'
	});
	var i = 1;
	// Highlight first carosuel item
	// Show first room shot
	$('.jcarousel-item-'+i).find('img').removeClass('transparency');
	$('.room_shot').find('.interior_image-'+i).removeClass('hidden');
	
	// Autoscroll if we have more than 1 item
	if ($('.jcarousel-item').length > 1) {
		startScroll();
	}
	
	// Function to change highlighted image
	function highlight(direction){
		// Forward
		if (direction == "forward") {
			// Scroll the carousel right as long as the last image is not visible 
			// #carousel's left property will equal the number of carousel items 
			// minus 4 (visible items) times -102 (width of a carousel item) px
			if ($('#carousel').css('left') !=  ((($('.jcarousel-item').length) - 4) * -102 )+"px") {
				scrollRight();
			}
			i++; // Increment i
			// Once we highlight the last item, start over
			if(i > $('.jcarousel-item').length) {
				i = 1;
				scrollRight();
			}
		// Reverse
		} else if (direction == "reverse") {
			// Scroll the carousel left as long as the first image is not visible
			// #carousel's left property will = 0px when first image is visible
			if ($('#carousel').css('left') != '0px') {
				scrollLeft();
			}
			i--; // decrement i
			// Once we highlight the first item, start over at the end
			if(i < 1) {
				i = $('.jcarousel-item').length;
				scrollLeft();
			}
		}
		
		$('.room_shot').find('img').addClass('hidden'); // Hide all room shot images
		$('.room_shot').find('.interior_image-'+i).removeClass('hidden'); // Show current interior image
		$('.jcarousel-item').find('img').addClass('transparency'); // Unhighlight all carousel items
		$('.jcarousel-item-'+i).find('img').removeClass('transparency'); // Highlight current
	}
	
	// Scrolls the carousel left
	function scrollLeft(){
		$('.jcarousel-prev').click();
	}	
	// Scrolls the carousel right
	function scrollRight(){
		$('.jcarousel-next').click();
	}
	
	var intervalId;
	// Start autoscroll
	function startScroll(){
		//Launch the scroll every 5 seconds
		intervalId = window.setInterval(function() {highlight("forward");}, 5000);
	}	
	// Stop autoscroll
	function stopScroll(){
		intervalId = window.clearInterval(intervalId);
	}
	
	$('.carousel').hover(stopScroll,startScroll); // stop scroll when carousel is hovered over, start otherwise
	$('.carousel .previous_button').click(function() {highlight("reverse");}); // previous button click
	$('.carousel .next_button').click(function() {highlight("forward");}); // next button click
	
	// When hovering over a carousel item
	$('.jcarousel-item').hover(
		function () {
			$('.room_shot').find('img').addClass('hidden'); // Hide all room images
			// Show room image for carousel item currently hovered over
			$('.room_shot').find('.interior_image-'+ $(this).attr('jcarouselindex')).removeClass('hidden');
			$('.jcarousel-item').find('img').addClass('transparency'); // Unhighlight all c images
			$(this).find('img').removeClass('transparency'); // highlight hovered over c image
		},
		// When not hovering over a carousel item
		function () {
			$('.room_shot').find('img').addClass('hidden'); // Hide all room images
			// Show last room image from auto scroll
			$('.room_shot').find('.interior_image-'+ i).removeClass('hidden');
			$(this).find('img').addClass('transparency'); // unhighlight current image
			$('.jcarousel-item-'+i).find('img').removeClass('transparency'); // Highlight last image from auto scroll
		}
	);	
});