$(function() {
	// create containers for the thumbnails and splash images
	$('#closer-look-videos').prepend('<ul id="closer-look-thumbs">').append('<div id="player">');
	// create thumbnails -- playlist will replace variables
	$('#closer-look-thumbs').html('<li id="${id}"><a href="/closer-look/videos/${url}"><img src="/closer-look/images/thumbs/${image_id}.jpg" width="84" height="94" alt="${title}" /></a></li>');
	// create splash images -- playlist will replace variables
	$('#player').html('<a href="/closer-look/videos/${url}"><img src="/closer-look/images/splash/${image_id}.jpg" width="453" height="255" /><span>Take a closer look at ${title}</span></a>');
	// initialize Flowplayer
	$f('player', {
		src: '/_assets/flowplayer/flowplayer-3.2.5.swf',
		wmode: 'transparent'
	}, {
		clip: {
			baseUrl: 'http://www.terry.uga.edu/closer-look/videos/',
			autoPlay: false,
			autoBuffering: true,
			scaling: 'scale',
			accelerated: true
		},
		playlist: [
			{
				url: 'selevan.mp4',
				title: 'Hope Selevan',
				image_id: 'selevan',
				id: 'selevan'
			}, {
				url: 'gruber.mp4',
				title: 'Sam Gruber',
				image_id: 'gruber',
				id: 'gruber'
			}, {
				url: 'prather.mp4',
				title: 'Kameon Prather',
				image_id: 'prather',
				id: 'prather'
			}, {
				url: 'pippin.mp4',
				title: 'Anne Marie Pippin',
				image_id: 'pippin',
				id: 'pippin'
			}, {
				url: 'howard.mp4',
				title: 'Jeremy Howard',
				image_id: 'howard',
				id: 'howard'
			}, {
				url: 'shaub.mp4',
				title: 'Katie Shaub',
				image_id: 'shaub',
				id: 'shaub'
			}, {
				url: 'simpson.mp4',
				title: 'Charles Simpson',
				image_id: 'simpson',
				id: 'simpson'
			}, {
				url: 'diehl.mp4',
				title: 'Sara Diehl',
				image_id: 'diehl',
				id: 'diehl'
			}, {
				url: 'hogue.mp4',
				title: 'Zach Hogue',
				image_id: 'hogue',
				id: 'hogue'
			}, {
				url: 'releford.mp4',
				title: 'Rischa Releford',
				image_id: 'releford',
				id: 'releford'
			}, {
				url: 'caprioglio.mp4',
				title: 'Lisa Caprioglio',
				image_id: 'caprioglio',
				id: 'caprioglio'
			}, {
				url: 'van-asten.mp4',
				title: 'Mathieu Van Asten',
				image_id: 'van-asten',
				id: 'van-asten'
			}
		],
		canvas: {
			backgroundColor: '#000'
		},
		plugins: {
			controls: {
			   	url: '/_assets/flowplayer/flowplayer.controls-3.2.3.swf',
			   	play: true,
				volume: true,
				mute: true,
				time: false,
				stop: false,
				playlist: true,
				fullscreen: false,
				scrubber: true,
				playlist: true,
				tooltips: {
					buttons: true
				},
				// skinning
				// height: 24,
				// opacity: 1,
				
				// timeSeparator: ' ',
				backgroundColor: 'transparent',
				backgroundGradient: 'none',
				// border: '0px',
				// borderRadius: '0px',
				
				// autoHide: 'never',
				sliderColor: '#FFFFFF',
				sliderBorder: '1.5px solid rgba(160,160,160,0.7)',
				// sliderGradient: 'none',
				volumeSliderColor: '#FFFFFF',
				// volumeSliderGradient: 'none',
				volumeBorder: '1.5px solid rgba(160,160,160,0.7)',
				volumeBorderRadius: 0,
				
				// scrubberBorderRadius: 0,
				
				// buttonColor: '#ffffff',
				// buttonOverColor: '#ffffff',
				// bufferColor: '#445566',
				
				timeColor: '#ffffff',
				// timeBorder: '0px solid rgba(0,0,0,.3)',
				// timeBorderRadius: 0,
				durationColor: '#535353',
				// timeBgColor: 'rgb(0,0,0,0)',
				
				tooltipColor: 'rgba(255, 255, 255, 0.7)',
				tooltipTextColor: '#000000'
			}, gatracker: {
				url: '/_assets/flowplayer/flowplayer.analytics-3.2.1.swf',
				/*labels: {
					start: "Start",
					play: "Play",
					pause: "Pause",
					resume: "Resume",
					seek: "Seek",
					stop: "Stop",
					finish: "Finish",
					mute: "Mute",
					unmute: "Unmute",
					fullscreen: "Full Screen",
					fullscreenexit: "Full Screen Exit"
				},*/
				debug: false,
				trackingMode: "AS3",
				googleId: "UA-3051968-1"
			}
		},
		onLoad: function() {
			this.setVolume(80);
		}
	}).playlist('#closer-look-thumbs', {
		loop: false,
		playOnClick: false
	}).playlist('#player', { //also allow the images inside of '#player' to be clicked to play the video
		loop: false,
		playOnClick: false
	}).ipad();
	$("#closer-look-thumbs li").hover(function() {
		$(this).css({'z-index' : '10'}).addClass('hover').find('img').stop().animate({
			marginTop: '-55px',
			marginLeft: '-47px',
			top: '50%',
			left: '50%',
			width: '84px',
			height: '98px',
			padding: '5px'
		}, 200);
	} , function() {
		$(this).css({'z-index' : '0'}).removeClass('hover').find('img').stop().animate({
			marginTop: '0',
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '60px',
			height: '70px',
			padding: '2px'
		}, 200);
	});
	$('#player').cycle({
		fx: 'fade',
		speed: 500,
		timeout: 0,
		random: 1,
		pager: '#closer-look-thumbs',
		pagerEvent: 'mouseover',
		pauseOnPagerHover: true,
		pagerAnchorBuilder: function(idx, slide) {
			// return sel string for existing anchor
			return '#closer-look-thumbs li:eq(' + (idx) + ') a';
		}
	});
});