/* 
	All scripting in Flowplayer home page. You can freely
	study it and steal ideas to your site.
*/

$(function() { 

	$("#demo div.item").show();
	
	/*
		tabbed navigation uses our jquery.scrollable tool, see:
		
		http://flowplayer.org/tools/scrollable.html
	*/	
	$("#content").scrollable({
		items:'#demo',
		size:1, 
		navi:'.navi',
		
		onSeek: function() {
			$f().unload();	
				
		}
	});
	
	
//{{{ the player 
		
	// just the player without specialities
	$f("player1", {src:v.core}, {

		onLastSecond: function() {
			this.getPlugin("play").css({ opacity: 0 });	
		}
	});
	
//}}}
	

//{{{ plugins
		
	$f("player2", v.core, {
		clip:  {
			scaling:'scale',
			
			// TODO: fadeIn()
			onStart: function() {
				var p = this.getPlugin("content");
				p.setHtml($("#content0").html()).fadeIn(2000);
			},
			
			// animation stuff
			onCuepoint: [[8000, 18000], function(clip, point) {
				var c = this.getPlugin("content");
				
				if (point == 8000) {
					c.setHtml($("#content1").html());
					c.css({background:'#005617', backgroundGradient:'medium'});
					c.animate({bottom:13, height:125}, 2000);
					
					// screen to the top-left corner
					this.getScreen().animate({top:10,left:10, height:140, width:180}, 3000);
					
					// hide controls
					this.getControls().animate({top:300});
					
				}
				
				if (point == 18000) {
					this.reset();
					c.hide();
				}
			}]
		},
		
		plugins: {
			  
			// content plugin, initially hidden
			content: {
				url:v.content,
				backgroundGradient:'low',
				height:100,
				display: 'none',
				opacity:0,
				background:'url(/img/title/flash24.png) no-repeat 310 10',
				 
				style: {
					b: {color:'#ffea00', leading: 6}
				}
			}
		},
		
		onFinish: function() {
			this.unload();	
		}
		
	});
	
//}}}


//{{{ streaming
	$f("player3", v.core, {
		
		// playlist entries
		playlist: [
			
			{
				url: 'http://flowplayer.org/video/Extremists.flv',
				title: 'Extremists - surfing video',
				from:'lighthttpd server + VP6 encoding',
				time:'4:00 min',
				provider:'lighty'
			},
			 
			{
				url:'metacafe',
				title: 'Metacafe',
				from:'FMS hosted by Influxis',				 
				time:'1:25 min',
				provider: 'fms',
				duration: 85
			},
			
			{
				url:'http://blip.tv/file/get/KimAronson-TwentySeconds4461.flv', 
				from:'From blib.tv video sharing site', 
				title: 'Playing with an egg',
				time:'0:22 min'
			}
		],
		
		// load streaming providers as plugins 
		plugins: {
			lighty:  {	
				url: v.pseudostreaming
			},
			
			fms: { 
				url: v.rtmp, 
				netConnectionUrl: ''
			},
		
			controls: {
      borderRadius: '0px',
      backgroundColor: '#efeced',
      progressGradient: 'medium',
       backgroundGradient: 'high',
      bufferGradient: 'none',
      buttonColor: '#FF007F',
      sliderGradient: 'none',
      sliderColor: '#FF007F',
      buttonOverColor: '#000000',
      durationColor: '#ffffff',
      bufferColor: '#FF007F',
      progressColor: '#FF007F',
      timeColor: '#FFFFFF',
   	opacity:1.0,
				playlist: true
			}
		}
		
	/*
		setup playlist into div#playlist. uses HTML playlist JavaScript plugin:
		
		http://flowplayer.org/plugins/javascript/playlist.html
	*/
	
	}).playlist("div.petrol:first");

//}}}

	 
//{{{ scripting


	// setup player into overlayed content
	var player = $f("overlay_player", v.core, {	
		clip:  {
			scaling: 'scale',
			url:'http://blip.tv/file/get/KimAronson-TwentySeconds4461.flv'
		},

		plugins: {
			
			// disable controlbar
			controls:  {
				backgroundColor:'transparent', 
				backgroundGradient:'none', 
				height:50, 
				bottom:10,
				autoHide:'always',
				all:false,
				play:true,
				scrubber:true
			},
			
			/*
				setup "hello" plugin in our example it's not loaded dynamically 
				as in the example code. all these styling properties would not fit into the page! 
			*/	
			hello: {
				url:v.content,
				opacity:0,
				left:0,				 
				height:0,
				width:0,
				borderRadius:30,
				backgroundColor:'#112233',
				backgroundGradient:'medium',
				padding:20,
				style: {
					p:  {
						fontSize:28,
						color:'#ffffff'
					}
				},
				html:'<img align="right" src="img/title/flash24.png"/><p>This is our content plugin</p>'
			}
			
		}
	});


	
	// the example code on the front page
	player.onStart(function() {
		var p = this.getPlugin("hello")
		p.animate({left:'50%',top:'50%',height:140,width:'96%',opacity:0.95}, 4000); 
	});	  
	
	
	/*
		when a[@rel] is clicked it opens up overlayed video content
		it uses our jquery.overlay tool, see:
		
		http://flowplayer.org/tools/overlay.html
	*/ 
	$("a[@rel]").overlay({
		
		// this demo script is run when overlay is in place
		onLoad: function() {			
			$f("overlay_player").load(); 
		}, 
		
		// unload player when overlay is closed
		onClose: function() {
			$f().unload();	
		}
		
	});
	
//}}}
	

	
	// preload largest images for future use
	window.onload = function() {
		setTimeout(function() {
			var base = "http://static.flowplayer.org/img";
			new Image().src = base + "/commerce/products-hero.jpg";
			new Image().src = base + "/player/splash.jpg";
			new Image().src = base + "/player/splash.png";
			new Image().src = base + "/global/sidenav.png";
			new Image().src = base + "/form/btn/login_search.png";				
		}, 2000);              
	} 
	
});