/*
 * Clorox.com FlowPlayer Video Parameters
 * Video: Clorox How to Videos 2009	
 * Updated: 12/18/2009
 * 
 */

$(document).ready(function() {
	
	// set first li to be selected
	$('#howto-video-baby-products').addClass('current');
	// video autoplays, so record a google analytics
	$clxcommon.trackAnalyticsPageView('video','howto-video-baby-products-autoplay');

	// play each video when the corresponding link is clicked
	$('li.playVideo').click(function() { 
	        
	    $('li.playVideo').removeClass('current');
	    $(this).addClass('current');
	         	         
	    // play the clip specified in href- attribute with Flowplayer 
	    $f().play($(this).children().children('a').attr('href'));

		// Track the plays in Google analytics, using the tag 'video' and the id
		// of the <li> as the name of the video
		$clxcommon.trackAnalyticsPageView('video',this.id);
	        
	    // by returning false normal link behaviour is skipped 
	    return false; 
	});

	$('div#videoPlayer').flowplayer({src: '/swf/products/flowplayer.commercial-3.0.7.swf', wmode: 'opaque'},  { 
	
		<!-- Licences: Needed to remove Flowplayer logo from player  -->
		key: '@fa943acd24518e30046',	<!-- clorox.com Licence. Comment out when testing in Staging -->
		<!-- key: '#@fa943acd24518e30046', -->  		//<!--staging.clorox.com Licence. Comment out when going Live -->
	
		// default clip
		clip:{ 
			url: '/swf/products/flv/video-nurseries.f4v',
			autoPlay: true,
			autoBuffering: true
		},											
		
		// canvas: { backgroundImage: 'url(/img/video.jpg)' },
		
		plugins: {
			controls: {
				sliderColor: '#b8b8b8',
				buttonColor: '#8a8a8a',
				progressGradient: 'medium',
				progressColor: '#808080',
				borderRadius: '0px',
				bufferColor: '#fcfcfc',
				tooltipTextColor: '#ffffff',
				durationColor: '#ffffff',
				tooltipColor: '#5F747C',
				backgroundGradient: 'high',
				volumeSliderGradient: 'high',
				sliderGradient: 'none',
				timeBgColor: '#555555',
				backgroundColor: '#bababa',
				volumeSliderColor: '#111111',
				bufferGradient: 'none',
				buttonOverColor: '#3b82f1',
				timeColor: '#ffffff',
				height: 20,
				fullscreen: false,
				opacity: 1.0
			}
		}
	});
	
});