// stel de flowplayer(s) in
function setupPlayers(){
// a- tags with class "flowplayer" are transformed into video players
flowplayer("player", "flowplayer/flowplayer-3.2.1.swf", {	
	clip: {
		// track start event for this clip
		onStart: function(clip) {
			_tracker._trackEvent("Videos", "Play", clip.url);
		},

		// track pause event for this clip. time (in seconds) is also tracked
		onPause: function(clip) {
			_tracker._trackEvent("Videos", "Pause", clip.url, parseInt(this.getTime()));
		},

		// track stop event for this clip. time is also tracked
		onStop: function(clip) {
			_tracker._trackEvent("Videos", "Stop", clip.url, parseInt(this.getTime()));
		},

		// track finish event for this clip
		onFinish: function(clip) {
			_tracker._trackEvent("Videos", "Finish", clip.url);
		}
	},

	// show stop button so we can see stop events too
	plugins: {
		controls: {
			stop: false,
			fullscreen: false,
			time: false,
			//mute: false,
			
			buttonColor: 'rgba(255, 255, 255, 0.9)',
			buttonOverColor: '#ffffff',
			backgroundColor: 'rgba(0,0,0, 0.9)',
			backgroundGradient: 'low',
			sliderColor: '#e2d6da',
			
			sliderBorder: '1px solid #808080',
			volumeSliderColor: '#e2d6da',
			volumeBorder: '1px solid #808080',
			
			timeColor: '#000000',
			durationColor: '#535353'
		}
	}
});
}
var preview;
// haal de data uit div#data en stop die per stukje in de scroll-div
function setupData(selectie){
	var i;
	
	$("#data").hide();
	$("#portfolio .items").html('');
	
	if(selectie) selector = "."+selectie;
	else selector = "";
	items = $("div#data>div"+selector);
	
	i=0;
	items.each(function(){
		if(i==0){
			$("#portfolio .items").append('<div>');
		}
		$(this).clone().appendTo("#portfolio .items>div:last");
		i++;
		if(i==4){
			$("#portfolio .items").append('</div>');
			i=0;
		}
	});
	
	
	$("#portfolio .items>div>div").addClass('item');
	
	var api = $("#portfolio").data("scrollable");
	if(api) api.begin(10); // scroll naar bovenaan
	
	$("#portfolio .item").click(function(){
		if($f("player")) $f("player").unload();
		if($(this).hasClass('film'))
			type = 'film';
		else
			type = 'website';
		//$(this).append('<span class="type">'+type+'</span>');
		referentieZelf = this;
		if(type == 'film'){
			preview = "<a id='player' class='flowplayer' style='background:url(images/"+type+"s/"+$(this).attr('id')+".jpg) no-repeat;' href='portfolio/"+type+"s/"+$(this).attr('id')+".flv'><img src='css/play_large.png' /></a>";
		}
		else{
			preview = "";
			urlSpan = $(this).find('.url');
			if(urlSpan.html())
				preview += "<a href='"+urlSpan.html()+"' target='_blank'>";
			preview += "<img src='images/"+type+"s/"+$(this).attr('id')+".jpg' />";
			if(urlSpan.html())
				preview += "</a>";
		}
		setTimeout(function(){
			$("#tekst").html($(referentieZelf).find(".content").html());
			$("#preview").html(preview);
			setupPlayers();
		},400);
		//$("#tekst").html($(this).find(".content").html())
		
		$("#site1").animate({width:'315px'}).animate({width:'860px'});
		
		
	});
	
	// het contactformulier
	$("#head .email").click(function(){
		if($f("player")) $f("player").unload();
		referentieZelf = this;
		// HIER MOET EEN CONTACTFORM KOMEN!
		preview = "<a class='flowplayer' style='background:url(images/schuur-klein.jpg) no-repeat;'></a>";
		setTimeout(function(){
			$("#tekst").html('Ik ben Ruben van de Ven, filmmaker en websiteontwikkelaar. Wilt u informatie over een nieuwe website of (bedrijfs)film dan kunt u mailen naar info@rubenvandeven.com.');
			$("#preview").html(preview);
			//setupPlayers();
		},400);
		//$("#tekst").html($(this).find(".content").html())
		
		$("#site1").animate({width:'315px'}).animate({width:'860px'});
		
		
	});
}

// bewaar scroller, voor het herinitialiseren van de navigator-plugin
var scroller;
function setupScroll(){
// initialize scrollable with mousewheel support
	$(".navi").html(''); // leeg de navigator
	// initialiseer scrollable alleen als het nog niet bestaan
	var api = $("#portfolio").data("scrollable");
	if(!api) scroller=$("#portfolio").scrollable({ vertical: true, mousewheel: true });
	// maak/vernieuw de navigator
	scroller.navigator({history: true});
	// fix een goede achtergrond
	$(".item").each(function(){
		if($(this).hasClass('film'))
			type = 'film';
		else
			type = 'website';
		
		$(this).css({'background-image':'url(thumbs/'+type+'s/'+$(this).attr('id')+'.jpg)'});
	});
	
	// verbreed de navi naar de goede breedte
	$("#actions .navi").css('width','0px');
	$("#actions .navi a").each(function(){
		$("#actions .navi").css('width',function(index, value){return parseFloat(value) +15;});
	});
}

function selectie(sel){
	$("#portfolio .items").fadeOut().fadeIn();
	$(".navi").fadeOut().fadeIn();
	$("#actions").fadeOut().fadeIn();
	setTimeout(function(){setupData(sel);setupScroll()},400);
}