jQuery.noConflict();

var tabs;
var imgs;
var activeImgIndex;

jQuery(document).ready(function(){

	// all the tabs
	tabs = jQuery('.content-list a');

	// all the main images
	imgs = jQuery('.img-list img');

	// the index of the image that will show when the page loads
	activeImgIndex = 0;

	
	tabs.each(function(index, element){
		// bring the main image to the top of the index stack.
		if(index == activeImgIndex){
			imgs.eq(index).css('z-index','-1');
			jQuery(this).addClass('active');

		// make sure no other tabs are of class active
		}else{
			jQuery(this).removeClass('active');
			imgs.eq(index).css('z-index','-3').css('display','none');
		}
		
		jQuery(this).hover(
			function(){
				mouseOverHandler(index, this);
			},
			function(){
			}
		);
	});
});


function mouseOverHandler(index, element){
	
	// hide all images except the active image
	imgs.each(function(i, e){
		if(i != activeImgIndex){
			jQuery(this).css('z-index','-4');
		}
	});
	
	// if the tab currently being hovered over is not the active tab...
	if(!jQuery(element).hasClass('active')){

		// ...then place this tabs picture (still not visible) on top of the z-index stack and fade it in.
		//imgs.eq(activeImgIndex).css('z-index','-2');
		imgs.eq(index).hide().css('z-index','-1').fadeIn();
		
		// make the current tab the active tab
		jQuery(element).addClass('active');
		tabs.eq(activeImgIndex).removeClass('active');
		imgs.eq(activeImgIndex).css('z-index','-3');
		activeImgIndex = index;
	}	
}