// JavaScript Document
$(document).ready(function(){
	$('#gallery li').each(function(idx) {
        $(this).data('index', (++idx));
    });
	$('#gallery li img').hide();
	/*$('#gallery li img').css('opacity', 0).each(function() {
		// when img is loaded, animate opacity to 1
		if (this.complete || this.readyState == 'complete') { $(this).animate({'opacity': 1}, 300) } 
		else { $(this).load(function() { $(this).animate({'opacity': 1}, 300) }); }
	});*/
	$('#gallery').jcarousel({		
        scroll: 7,
        initCallback: initCallbackFunction
    });
    function initCallbackFunction(carousel) {
        $('#img').bind('image-loaded',function() {
            var idx =  $('#gallery li.active').data('index') - 3; // take scroll param and subtract 3 to keep selected image in the middle
            carousel.scroll(idx);
            return false;
        });
        $(document).bind('keydown', 'right', function(e){ $.galleria.next(); });
        $(document).bind('keydown', 'left', function(e){ $.galleria.prev();	});
    };
	$('#img').addClass('gallery');
	$('ul#gallery').galleria({
		insert :'#img',
		clickNext : true, // make image clickable
		onImage : function(image,caption,thumb) { // image effects
			$('#img').trigger('image-loaded');
			// fade in the image & caption
			if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				image.css('display','none').fadeIn(500);
			}
			caption.css('display','none').fadeIn(500);
			var _li = thumb.parents('li'); // fetch the thumbnail container
			_li.siblings().children('img.selected').fadeTo(500,0.3); // fade out inactive thumbnail
			thumb.fadeTo('fast',1).addClass('selected'); // fade in active thumbnail
			//image.attr('title','Next image'); // add a title for the clickable image
		},
		onThumb : function(thumb) { // thumbnail effects
			var _li = thumb.parents('li'); // fetch the thumbnail container
			var _fadeTo = _li.is('.active') ? '1' : '0.3'; // if thumbnail is active, fade all the way.
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); // fade in the thumbnail when finished loading
			// 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
			)
		}
	});
	$('<div id="navbottom" align="center"><p><a id="prev" onclick="$.galleria.prev()">&laquo; PREVIOUS</a> | <a id="next" onclick="$.galleria.next()">NEXT &raquo;</a></p></div>').insertAfter($("div#maingallery")); // create thumbnail navigation
});