$(document).ready(function(){

	$('.accordion').accordion({
		autoHeight  : false,
		collapsible : true,
		active      : false // start compressed
	});

	$('#slider1')
	.anythingSlider({
		width          : 400,
		height         : 300,
		startStopped   : true,
		toggleControls : true,
		theme          : 'metallic',
		navigationFormatter : function(i, panel){
			return '<img src="images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg">';
		}
	})
	.find('.panel:not(.cloned) img') // ignore the cloned panels
		.attr('rel','group')           // add all slider images to a colorbox group
		.colorbox({
			width: '90%',
			height: '90%',
			href: function(){ return $(this).attr('src'); },
			// use $(this).attr('title') for specific image captions
			title: 'Press escape to close',
			rel: 'group'
		});

	$('#slider2')
	.anythingSlider({
		width               : 600,
		height              : 350,
		startStopped        : true,
		resizeContents      : false,
		navigationFormatter : function(i, panel){
			return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'][i - 1];
		}
	})
	.anythingSliderFx({
		// base FX definitions
		// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ] - 'time' and 'easing' are optional parameters
		'.quoteSlide'         : [ 'top', '500px', '1000', 'easeOutElastic' ],
		'.expand'             : [ 'expand', '10%', '400', 'easeOutBounce' ],
		'.textSlide h3'       : [ 'top left', '200px', '500', 'easeOutCirc' ],
		'.textSlide img,.fade': [ 'fade' ],
		'.textSlide li'       : [ 'listLR' ] 
	});

	$('#slider3')
	.anythingSlider({
		width               : 500,
		height              : 400,
		startStopped        : true,
		navigationFormatter : function(i, panel){
			return ['Top', 'Right', 'Bottom', 'Left'][i - 1];
		}
	})
	.anythingSliderFx({
		'.caption-top'    : [ 'caption-Top', '50px' ],
		'.caption-right'  : [ 'caption-Right', '130px' ],
		'.caption-bottom' : [ 'caption-Bottom', '50px' ],
		'.caption-left'   : [ 'caption-Left', '130px' ]
	})
	
	// add a close button (x) to the caption
	.find('div[class*=caption]')
		.css({ position: 'absolute' })
		.prepend('<span class="close">x</span>')
		.find('.close').click(function(){
			var cap = $(this).parent(),
				ani = { bottom : -50 }; // bottom
			if (cap.is('.caption-top')) { ani = { top: -50 }; }
			if (cap.is('.caption-left')) { ani = { left: -150 }; }
			if (cap.is('.caption-right')) { ani = { right: -150 }; }
			cap.animate(ani, 400, function(){ cap.hide(); } );
		});

	
});