var loadingWaitIcon = $('<img src="images/ajax-loader.gif" width="128" height="15" />').css({position:'absolute', zIndex:1000, top:'200px', left:'50%'});
var loadingIconReady = false;
if( $('body').get(0) ){
	loadingIconReady = true;
	$('body').append( loadingWaitIcon );
}
/**
 * Gallery Slideshow
 */
$(function(){
	var delay = 3000; /* Delay between animations in miliseconds - 1000 = 1 second.*/
	var fade = 750; /* Duration of fade in animation in miliseconds - 1000 = 1 second */
	var curLayer = 0; /* start from layer number 0 is first image */
	var zIndex = 3; /* z-index value. layers will use this value +/- 1 either side */
	var layers = $('#gallery a img').css({zIndex: zIndex, opacity:0});
	/**
	 * Bring Layer to front and Fade in Animation with callback to cycleLayers.
	 */
	var fadeInLayer = function(i){
		$(layers[i]).css({zIndex:zIndex+1}).animate({'opacity':1}, fade, cycleLayers);
	}
	/**
	 * Calculate next image, current image and previous image and layer zindex and opacity accordingly
	 */
	var cycleLayers = function(){
		var l = layers.length, c = curLayer;
		$(layers[c<=0?l-1:c-1]).css({opacity:0, zIndex:zIndex-1});
		$(layers[c=curLayer=c>=l?0:c]).css({opacity:1,zIndex:zIndex});
		setTimeout(function(){ fadeInLayer(c+1==l?0:c+1); ++curLayer;}, delay);
	}
	/**
	 * Start the cycle layer process.
	 */
	if(layers.length) cycleLayers();	
	/**
	 * Add site loading
	 */
	if(!loadingIconReady) $('body').append( loadingWaitIcon );
	$(window).load(function(){
		setTimeout( function(){ loadingWaitIcon.fadeOut(); }, 1000 );
	});
});

/**
 * Toggle Display of Carousel containers
 */
$(function(){
	var slideTime = 500; // length of time of slide animations in milliseconds (1000 = 1 second)
	var buttonHeight = $('span.carousel_button').outerHeight(); // calculate button heights
	var cheight = $('#artist_carousel').outerHeight(); // artist_carousel height
	var firstload = true;
	/**
	 * Bind click events to carousel button links
	 */
	$('.carousel_button').click(function(){
	 if(firstload){
		 $('#artist_carousel, #menu_carousel' ).css({visibility:'hidden'});
		 firstload = false;
	 }
		if($(this).hasClass('active')){
			hideCarousel(this);
		}else{
			var other = $('.carousel_button.active').removeClass('active')[0];
			if(other){
				hideCarousel(other);
				showCarousel(this, true);
			}else{
				showCarousel(this);
			}
		}
	});
	/**
	 * hide the selected carousel and animate buttons back to bottom
	 */
	function hideCarousel(span){
		if(!span) return;
		var id = span.id.replace(/button/,'_carousel');
		$(span).removeClass('active');
		$('.carousel_button').animate({bottom:0}, slideTime);
		$('#carousels').animate({height:buttonHeight}, slideTime, function(){ $('#artist_carousel, #menu_carousel' ).css({visibility:'hidden'}); } );
	}
	/**
	 * Show the selected carousel and call slide animation
	 */
	function showCarousel(span, pause){
		var div = $('#'+ span.id.replace(/button/,'_carousel') ), h = 0;
		$(span).addClass('active');
		if(pause)	setTimeout(function(){
			slideCarousel(div);
		}, slideTime+100);
		else{
			slideCarousel(div);
		}
	}
	/**
	 * Slide the carousel container up to the required height, also slide up the required button(s)
	 */
	function slideCarousel(div){
		$(div).css({visibility:'visible'});
		var h = $(div.children()[0]).outerHeight(true);
		if(div.attr('id')=='artist_carousel'){
			$('span#artistbutton').animate({bottom:h}, slideTime);
		}else{
			$('.carousel_button').animate({bottom:h}, slideTime);
		}
		$('#carousels').animate({height:h+buttonHeight}, slideTime);
	}

});

/**
 * Initialise the carousels and hide after initialisation
 */ 
$(function() {
   if( $('#carousels').get(0) ) jQuery('ul#menu_carousel_list').jcarousel();
});

/**
 * Initialise Scollpane area
 */
$(function(){
	$('.scroll-pane').jScrollPane({
		scrollbarWidth: 20,
		dragMaxHeight: 50,
		reinitialiseOnImageLoad: false
	});
});