$(function() {

	// make #panes scrollable.
	$("#scrollable").scrollable({
		items:'#panes',
		size:1,

		// each time scrolling occurs, the active player is unloaded
		onSeek: function() {
			$f().unload();
		}
		
	// use navigator plugin. see: http://flowplayer.org/tools/scrollable.html#navigator
	}).navigator({
		navi: 'ul.tabs',
		naviItem: 'a',
		activeClass:'current' 
	});

	
	// select player containers with jQuery and make them playable with Flowplayer
	$("#panes a").flowplayer({src: "http://www.hddenver.com/home/swf/flowpayer.commercial-3.2.7.swf",wmode: "transparent"},   
	{key: '#$1fec82facb791860e3b',
	clip : {			
        autoPlay: true
		},
		canvas: {
		   backgroundColor: 'white',
		   backgroundGradient: 'none',
		   outline: 'black'
		  
},
		plugins: {			
        controls: {
			autoPlay: true,
			sliderBorderWidth: 	'0',
			scrubberHeightRatio: '0.4',
			sliderColor:'#006488',
			width: '55%',
			backgroundGradient: [1.0, 0.0, 1.0],
			timeColor: '#black',
			buttonColor: 	'#889AA4',
			buttonOverColor: 	'#006488',
            backgroundColor: '#dadada'            
        }
    }
	})
});