$(document).ready(function() {	

	// set variables after active is difined so we can load main
	var $load = $('#articles_thumb ul li:first');
	var imgAlt = $load.find('img').attr("alt");
	var imgSrc = $load.find('a').attr("href");
	var imgDesc = $load.find('.block').html();
	
	// load main image and block
	$("#main_image img").attr({ src: imgSrc, alt: imgAlt});
	$("#main_image .block").html(imgDesc);
	
	// show info
	$("#main_image .block").show();

	// set opacity
	$("#main_image .block").animate({ opacity: 1 }, 1, function(){ if ($.browser.msie) { this.style.removeAttribute('filter'); } });
	$("#articles_thumb ul li").animate({ opacity: 1 }, 1 );
	
	// add the active class (highlights the very first list item by default)
	$("#articles_thumb ul li:first").addClass('active'); 
	$("#articles_thumb ul li:first").animate({ opacity: 1 }, 1);

	//runs function on click
	$("#articles_thumb ul li")
		.click(function () {
			$active = $(this);
			slideSwitchClick();
			return false;
		})
		// hover effects on list-item
		.hover(function(){ 
			// add class "hover" on hover
			$(this).addClass('hover');
			
			// if active list item, dont change opacity
			if ($(this).is(".active")) {
				return false;
			} else {
				$(this).animate({ opacity: .4 }, 100 );
			}
		}, function() {
			// remove class "hover" on hover out
			$(this).removeClass('hover');
			
			// if active list item, dont change opacity
			if ($(this).is(".active")) {
				return false;
			} else {
				$(this).animate({ opacity: 1 }, 100 );
			}
		});

	// runs function, set timer here
	$(function() {
		playSlideshow = setInterval( "slideSwitchTimed()", 8000 );
	});

	// pauses on hover
	$('#articles_thumb ul li.active')
		.hover(function() {
			clearInterval(playSlideshow);
		}, function() {
			playSlideshow = setInterval( "slideSwitchTimed()", 8000 );
		});
		
	$('#main_image .block')
		.hover(function() {
			clearInterval(playSlideshow);
		}, function() {
			playSlideshow = setInterval( "slideSwitchTimed()", 8000 );
		});

});

function slideSwitchTimed() {
	$active = $('#articles_thumb ul li.active').next();
	//goes back to start when finishes
	if ( $active.length == 0 ) $active = $('#articles_thumb ul li:first');
	slideSwitch();
}

function slideSwitchClick() {
	slideSwitch();
}

function slideSwitch() {
	var $prev = $('#articles_thumb ul li.active');

	// show active list-item
	$prev.removeClass('active');
	$prev.animate({ opacity: 1 }, 300);
	$active.addClass('active');
	$active.animate({ opacity: 1 }, 300);

	// set variables
	var imgAlt = $active.find('img').attr("alt");
	var imgSrc = $active.find('a').attr("href");
	var imgDesc = $active.find('.block').html();

	// if the list item is active/selected
	if ($(this).is(".active")) {
		return false;
	} else {
		// animate description and image
		$("#main_image .block").animate({ opacity: 0}, 300);
		
		// fades the image out
		$("#main_image img").delay(300).animate({ opacity: 0}, 400, function() {
			// fades the image back in
			$("#main_image img").attr({ src: imgSrc, alt: imgAlt}).animate({ opacity: 1}, 700);
			$("#main_image .block").delay(500).html(imgDesc).animate({ opacity: 1}, 300, function(){ if ($.browser.msie) { this.style.removeAttribute('filter'); } }); 
		});
		
		
		
	}
	
	return false;
}