// Flowplayer Embed

flowplayer("player", "/flash/flowplayer.commercial-3.0.7.swf", { 
	key: '$0b76bd8598209287a05',
    	clip: {
        	autoPlay: false,
            	autoBuffering: true
         },
         
		plugins:  { 
            controls:  {  
            	bufferColor: '#d52d2a',
            	progressColor: '#9b1917',
            	timeColor: '#cccccc'
        	}
		},         
			play: { 
            	url: '/flash/play_btn.png', 
            	width: 77, 
            	height: 77 
		}            
});

// get all links that are inside div#clips
var links = document.getElementById( 'clips' ).getElementsByTagName( 'a' );

// set all links to normal then bold the current link
var setCurrent = function ( self ) {
	for ( var i = 0; i < links.length; i++ ) {
		links[i].className = '';
	}
	self.className = 'curr_vid';
}

// loop those links and alter their click behaviour
for ( var i = 0; i < links.length; i++ ) {
	// make the first link in the sequence bold by default
	( i == 0 ) && ( setCurrent( links[i] ) );
	// add click events to play the video and bold the link
	links[i].onclick = function() {
		// play the clip specified in href- attribute with Flowplayer
		$f().play( this.getAttribute( 'href', 2 ) );
		setCurrent( this );
		// by returning false normal link behaviour is skipped
		return false;
	}
}