$(document).ready(function() {
    ReadJCList();
	$('.CaseStudies ul').jcarousel({
        scroll: 1,
		visible: 6,
		auto: 2,
        initCallback: mycarousel_initCallback,
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
	
	$('.Gallery .MainContent ul li:first').addClass("active");
	
	$('.Gallery .MainContent ul').galleria({
	history   : true, // activates the history object for bookmarking, back-button etc.
	clickNext : true, // helper for making the image clickable
	insert    : '#main_image', // the containing selector for our main image
	onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
		
		// fade in the image & caption
		image.css('display','none').fadeIn(1000);
		caption.css('display','none').fadeIn(1000);
		
		// fetch the thumbnail container
		var _li = thumb.parents('li');
		
		// fade out inactive thumbnail
		_li.siblings().children('img.selected').fadeTo(500,0.3);
		
		// fade in active thumbnail
		thumb.fadeTo('fast',1).addClass('selected');
		
		// add a title for the clickable image
		image.attr('title','Next image >>');
	},
	onThumb : function(thumb) { // thumbnail effects goes here
		
		// fetch the thumbnail container
		var _li = thumb.parents('li');
		
		// if thumbnail is active, fade all the way.
		var _fadeTo = _li.is('.active') ? '1' : '0.3';
		
		// fade in the thumbnail when finnished loading
		thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
		
		// hover effects
		thumb.hover(
			function() { thumb.fadeTo('fast',1); },
			function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
		)
	}
});

});

var mycarousel_itemList = new Array();
ReadJCList = function() {
var JCList;
if ($('.CaseStudies ul li')!=null){
    JCList=$('.CaseStudies ul li');
    for (var i = 0; i < JCList.length; i++) {
        mycarousel_itemList[i]=JCList[i].innerHTML;
    }
}
}

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_itemList[idx - 1]);

	if(typeof pngFix == 'function') {
		pngFix();
	}
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
    carousel.startAuto();
};

function mycarousel_initCallback(carousel)
{
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};