var loadImagesArray = Array();
var chainImages = Array();
var secs = 2;
var timerID = null
var timerRunning = false

var delay = 600;	

var checkLoading;

var projectPositions = Array();
var projectOpen = "-";
var HM;
var counter=0
var imagesLoaded = 0;
var imagesDisplayed = 0;
var loadingProject = 0;
var curProj;
var newsOpen=0;

//drawings//
var c;
var extraLine;
var container = $(document.body);
var nummer=0;
var metas;
var date;
var paper
var showLines=false
var offsetHeight

var offset
var mouseArr = new Array();
var mouseTimer;

var currentStamp;

var TextKolomTween = new Fx.Tween('tekst', {property: 'margin-top'});


window.addEvent('domready', function(){
	var t=setTimeout("mason()",100);
	StopTheClock();
    StartTheTimer();
    
    HM = new HistoryManager();
   	HM.start();
	HM.addEvent('project:added',function(value){
		alert(value);
	});
	HM.addEvent('hashChanged',function(new_hash){ 
    	urlOpen(new_hash) 
	}); 


    
    
    $('portfolio').addEvent('masoned', firstMason);
    
    
    
    paper = Raphael($("notepad"),1800, 4000);
    child = $('notepad').getChildren()
    test  = paper.canvas
    test.setStyle('position','absolute');
    test.setStyle('overflow','visible');
    
    
    var pageSize = window.getSize();
    offset = pageSize.x

	var pageSize = window.getSize();
    offset = pageSize.x

	$(document.body).addEvent('mousemove',function(e) { 
        var curtop=e.page.y;
		var curleft=e.page.x;
		mouseArr.push(new Array(curtop, curleft))
	});

	mouseTimer = saveMouse.delay(5000);

	
	loadImages();
	Hyphenator.config({
        		displaytogglebox : false,
        		minwordlength : 6
    });
    Hyphenator.run();
   
});

function saveMouse(){
	mouseTimer = saveMouse.delay(5000);
	if(mouseArr.length>0){
	//alert('a')
		//alert(mouseArr);
		uploadArr = '';
		uploadArr = JSON.encode(mouseArr);
		mouseArr.length = 0;

		var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
			//alert(json.content)
			
				
			//alert(mouseArr.length)
		}}).get({'mouseUpload':uploadArr,'offset':offset});

	}
	
}

function showEveryBody(){
	$('everybody').setStyle('visibility','visible');
}
function hideEveryBody(){
	$('everybody').setStyle('visibility','hidden');
}
function urlOpen(hash){

	if(hash==''){
		if(projectOpen != "-")closeAll();
	}else{
		
		var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
		
			if (projectOpen=="-"){
				//alert();
				selectProject(json.nummer,json.stamp, hash)
			}
			else if(projectOpen=="news"&&json.stamp!=currentStamp){
				if(loadingProject!=1)selectProject(json.nummer,json.stamp, hash)
			}
			else if (json.nummer!=projectOpen){
				
				selectProject(json.nummer,json.stamp, hash)
			}

		}}).get({'getProjectFromUrl':hash});
		
	}
}

window.addEvent('load', function(){

		
		
});

var onPageUpdate = function() {

}



function loadImages(){
	var projects =  $('portfolio').getChildren('.box');
	for(var i=0; i<projects.length; i++){
		projectBox = projects[i];
		imgHolder = projectBox.getChildren('.imgHolder');
		afbeelding = imgHolder[0].getChildren('.prjImg');
		loadImagesArray.push(afbeelding[0].id);
		
		
	}
	var myImages = Asset.images(loadImagesArray, {
    properties: {
        'class': 'myImage',
        title: 'myImage'
    },
    onComplete: function(){
    	imagesLoaded = 1;
        if (imagesDisplayed==0){
        	if (secs<1){
        		displayImages()
        		
        	}
        }
    }
	});
	
	
}

function checkLoaded(){
	if (loadingProject==1)loadingProject=0;
	clearInterval(checkLoading);
}
function selectProject(nummer,stamp, shortcut){
	
	//stop();
	checkLoading = setInterval(checkLoaded,1000);	
	if (loadingProject==0){
	
		

		loadingProject = 1;
		projectOpen = nummer;
		currentStamp = stamp;
		restore(nummer);
		
		if (nummer=='news'){
			project 			= $('newsStory');
			curProj				= project;
			project.setStyle('position','absolute');
			project.setStyle('width','840px');
			project.setStyle('margin-bottom','14px');
			project.setStyle('height','auto');
			
			project.setStyle('margin-top','0px');
			project.setStyle('top','0px');
			newsOpen = 1;
			
		}else{
			project = $(''+nummer);
		

			curProj				= project;
			projectTitel 		= project.getChildren('.projectTitel');
			projectOnderschrift = project.getChildren('.onderschrift');
			
			width 				= project.getStyle('width');
			
			projectTitel.setStyle('visibility','hidden');
			projectOnderschrift.setStyle('visibility','hidden');
			project.setStyle('width','840px');
			imgHolder 			= project.getChildren('.imgHolder');
			afbeelding 			= imgHolder[0].getChildren('.prjImg');
			projectLoading 		= imgHolder[0].getChildren('.imgLoading');
	
			projectLoading.setStyle('visibility','visible');
		}
		
		imageString='';
		var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
			
			title = json.title;
			text = json.text;
			images	= json.images
			links = json.links;
			videos = json.videos;
			commission	= json.commission;
			onderschrift = json.onderschrift;
			inCommission = json.inCommission;
			credits = json.credits;
			awards = json.awards;
			year = json.year;
			urlArray = Array();
			
			HM.set('project',shortcut);
			
			if (videos.length>0){
				video = videoString(videos[0]['content']);
				imageString+='<div class="projectVideo">'+video+'</div>';
			}
			for (var i=0; i<images.length;i++){
				urlArray.push('cms/content/large/'+images[i]['url']);
				imageString+='<div class="projectMediaHolder"><img src="cms/content/large/'+images[i]['url']+'"/></div>';
			}
			
			if (images.length==0){
				
				urlArray.push('html/img/cross.gif');
				imageString+='<div class="projectMediaHolder"><img src="html/img/cross.gif"/></div>';
			}

			getMediaContainer = project.getChildren('.projectMedia');
			mediaContainer = getMediaContainer[0];
			mediaContainer.set('html',imageString);
			
			var myImages = Asset.images(urlArray, {
			    properties: {
			        'class': 'myImage',
			        title: 'myImage'+title
			    },onProgress: function(){
			    	
			    },
			    onComplete: function(){
			    	
			    	//POPULATE INFORMATION
			    	
			        			        
			        
			    	headerLeft 	= '<span class="detailTitle">'+title+'</span><br/>'
			    	headerLeft += '<span class="detailDescriptionGrey">'+onderschrift+'</span><br/>';
			    	
			    	headerLeft += '<span class="detailDescriptionGrey">'+year+'</span>';
			    	commissionString=''
			    	if (inCommission==1){
			    		commissionString+='commissioned by<br/>'
			    	}
			    	commissionString+=commission;
			    	
			    	collaborationString=''
			    	if (credits!='')collaborationString+='in collaboration with<br/>'+credits;
			    	headerRight= '<span class="detailDescriptionGrey">'+commissionString+'<br/>'+collaborationString+'</span>';
			    	
			    	if (links.length>0){
			    		if (links[0]['meta'][0]){
			    			linkName = links[0]['meta'][0]['data'];
			    		}else linkName = links[0]['content'];
			    		
			    		linkHolder='';
			    		if(collaborationString!='')linkHolder+='<br/>';
			    		linkHolder+= '<a href="'+links[0]['content']+'" target="_blank">'+linkName+'</a>';
			    		
			    	}else linkHolder='';
			    	headerRight+= '<span class="detailDescriptionGrey">'+linkHolder+'</span><br/>'
			    	awardString = '';
			    	if (awards!=null)awardString='<div class="awardsPublications">'+awards+'</div>';
			    	text = text;
					infoString = '<div id="projectHeader"><div class="back" onClick="javascript:closeAll();"><img class="backImg" src="html/img/back.gif">back</div><div class="detailKolomL">'+headerLeft+'</div><div class="detailKolomR">'+headerRight+'</div></div><div id="leftCollumn" class="detailKolomL">'+text+'</div><div id="rightCollumnHolder"><div id="rightCollumn" class="detailKolomR">'+text+'</div>'+awardString+'</div>'
	
					
					
					getInfoContainer = project.getChildren('.projectInfo');
					
					infoContainer = getInfoContainer[0];
					
					infoContainer.set('html','');
					infoContainer.set('html','<div id="infoHolder">'+infoString+'</div>');
					$('infoHolder').setStyle('opacity',0);
					Hyphenator.config({
	        		displaytogglebox : false,
	        		minwordlength :6
	        		});
	        		
					Hyphenator.run();
					
					

			        
			        var t=setTimeout("setAll()",100);
					
	
			    }
			});
			
				
		}}).get({'getSingleProject':stamp});
		
			
		$('tekst').setStyle('opacity',0.3)
	
	}else{
		//	alert('a project is already loading...')
	}
}


function setAll(){
		
		

		$('portfolio').addEvent('masoned', masonComplete);

		mediaHeight = mediaContainer.getStyle('height').toInt();
		
		project.setStyle('height',mediaHeight+'px');
			
		infoContainer.setStyle('visibility','visible');
		mediaContainer.setStyle('visibility','visible');
				
		mason()
		
}

function firstMason(){
	//alert()
	$('portfolio').setStyle('visibility','visible')
	portfolioHoogte = $('portfolio').getStyle('height').toInt();
	portfolioPosition = $('portfolio').getPosition();
	
	$('notepad').setStyle('height',portfolioHoogte+portfolioPosition.y)

}
function masonComplete(){
	
	VideoJS.setupAllWhenReady();

	$('portfolio').removeEvent('masoned');
	kolomHoogte = $('leftCollumn').getStyle('height').toInt();
	newHoogte = Math.ceil((kolomHoogte/2)/18)*18;
	
	$('leftCollumn').setStyle('height',newHoogte+'px');
	$('rightCollumn').setStyle('margin-top','-'+newHoogte+'px');

	projectPosition = project.getPosition();
	projectTop = projectPosition.y;
	
	container 			= curProj.getChildren('.imgHolder');
	
	afbeelding 			= container[0].getChildren('.prjImg');
	afbeelding[0].setStyle('visibility','hidden')
	container[0].setStyle('visibility','hidden')
	
	
	underlay 			= container[0].getChildren('.imgUnderlay');
	overlay 			= container[0].getChildren('.imgOverlay');
	
	underlay[0].setStyle('visibility','hidden')
	overlay[0].setStyle('visibility','hidden')

	//CHECK tekstKolom
		
		
		tekstKolomHeight = $('tekst').getStyle('height').toInt();
		tekstKolomPosition = $('portfolio').getPosition();
		tekstKolomTop = tekstKolomPosition.y
		
		projectHeight = $('infoHolder').getStyle('height').toInt();
		
		var myFx = new Fx.Scroll(window)
		myFx.start(0, projectTop-30);;
		
		//$('tekst').setStyle('margin-top','0px');	
		TextKolomTween 			= new Fx.Tween('tekst', {property: 'margin-top'});
		var projectInfoTween 	= new Fx.Tween('infoHolder', {property: 'opacity'});	
		if (projectTop<(tekstKolomHeight+tekstKolomTop)){
			//MOVE TEKSTCOLLUMN DOWN
			
			newTextTopPosition = (projectTop-tekstKolomTop)+projectHeight+54;

			TextKolomTween.start(newTextTopPosition).chain(
			    //Notice that "this" refers to the calling object (in this case, the myFx object).
			    function(){ 
			    	projectInfoTween.start(1)
			    }
			); //Will fade the Element out and in twice.
			
		}else{
			projectInfoTween.start(1)
			// DO NOT MOVE TEKSTCOLLUMN DOWN
		}
		
		$('portfolio').addEvent('masoned', function(){
			projectPosition = project.getPosition();
			projectTop = projectPosition.y;
    		//alert(projectTop)
	});
	
	loadingProject = 0;
	
	projectLoading 		= imgHolder[0].getChildren('.imgLoading');
	projectLoading.setStyle('visibility','hidden');
	
	rollOut()

}
		
function restore(nummer){
	
	if (newsOpen==1){
		//$('tekst').setStyle('margin-top',0+'px');
		$('newsStory').setStyle('height','0');
		$('newsStory').setStyle('width','100%');
		$('newsStory').setStyle('margin-bottom','0');
		
		newsBox = $('newsStory');
		getInfoContainer = newsBox.getChildren('.projectInfo');

		infoContainer = getInfoContainer[0];
		infoContainer.setStyle('visibility','hidden');
		infoContainer.set('html','');
		getMediaContainer = newsBox.getChildren('.projectMedia');
		mediaContainer = getMediaContainer[0];
		mediaContainer.setStyle('visibility','hidden');
		mediaContainer.set('html','');
		projectBox.setStyle('height','auto');
		
		container 			= newsBox.getChildren('.imgHolder');
		afbeelding 			= container[0].getChildren('.prjImg');
		underlay 			= container[0].getChildren('.imgUnderlay');
		overlay 			= container[0].getChildren('.imgOverlay');
		loading 			= container[0].getChildren('.imgLoading');
	
	
		container[0].setStyle('visibility','visible')
		afbeelding[0].setStyle('visibility','visible')
		afbeelding[0].setStyle('opacity','1')
		underlay[0].setStyle('visibility','visible')
		overlay[0].setStyle('visibility','visible')
		loading[0].setStyle('visibility','hidden')

		newsOpen = 0;
	}else{
		
	}
	
	TextKolomTween 		= new Fx.Tween('tekst', {property: 'margin-top'});
	TextKolomTween.start(0)
	//$('tekst').setStyle('margin-top',0+'px');
	
	var projects =  $('portfolio').getChildren('.box');
	for(var i=0; i<projects.length; i++){
		projectBox = projects[i];
		getInfoContainer = projectBox.getChildren('.projectInfo');
		getOriginalWidth = projectBox.getChildren('.breedte');
		originalWidth = getOriginalWidth[0].id;
		projectBox.setStyle('width',originalWidth+'px');
		infoContainer = getInfoContainer[0];
		infoContainer.setStyle('visibility','hidden');
		infoContainer.set('html','');
		getMediaContainer = projectBox.getChildren('.projectMedia');
		mediaContainer = getMediaContainer[0];
		mediaContainer.setStyle('visibility','hidden');
		mediaContainer.set('html','');
		projectBox.setStyle('height','auto');
		
		container 			= projectBox.getChildren('.imgHolder');
		afbeelding 			= container[0].getChildren('.prjImg');
		underlay 			= container[0].getChildren('.imgUnderlay');
		overlay 			= container[0].getChildren('.imgOverlay');
		loading 			= container[0].getChildren('.imgLoading');
	
	
		container[0].setStyle('visibility','visible')
		afbeelding[0].setStyle('visibility','visible')
		afbeelding[0].setStyle('opacity','1')
		underlay[0].setStyle('visibility','visible')
		overlay[0].setStyle('visibility','visible')
		loading[0].setStyle('visibility','hidden')
					
	}
}
function back(){

}
function closeAll(){
	HM.set('project','');
	$('tekst').setStyle('opacity',1)
	
	projectOpen = "-";
	rollOut()
	restore()
	mason();
	
	
}
function blendOutAll(){
	var projects =  $('portfolio').getChildren('.box');
	for(var i=0; i<projects.length; i++){
		projectBox = projects[i];
		imgHolder = projectBox.getChildren('.imgHolder');
		imgOverlay = imgHolder[0].getChildren('.imgOverlay');
		afbeelding = imgHolder[0].getChildren('.prjImg');
		projectTitel = projectBox.getChildren('.projectTitel');
		projectOnderschrift = projectBox.getChildren('.onderschrift');
		
		
			if (i!=projectOpen){
			imgOverlay.setStyle('opacity',1);
			projectTitel.setStyle('opacity',0.3);
			projectOnderschrift.setStyle('opacity',0.3);
			//afbeelding.setStyle('opacity',0.4)
			
		}
	}
}
function rollOver(number){

	var projects =  $('portfolio').getChildren('.box');
	for(var i=0; i<projects.length; i++){
		projectBox = projects[i];
		imgHolder = projectBox.getChildren('.imgHolder');
		imgOverlay = imgHolder[0].getChildren('.imgOverlay');
		imgWhiteOverlay = imgHolder[0].getChildren('.imgWhiteOverlay');
		afbeelding = imgHolder[0].getChildren('.prjImg');
		projectTitel = projectBox.getChildren('.projectTitel');
		projectOnderschrift = projectBox.getChildren('.onderschrift');

		if (projectBox.id==number){
			imgOverlay.setStyle('opacity',0.1);
			imgWhiteOverlay.setStyle('opacity',0);
			afbeelding.setStyle('opacity',1)
			if (projectOpen=="-"){
			
				projectTitel.setStyle('opacity',1);
				projectOnderschrift.setStyle('opacity',1);
			}else{
				
				projectTitel.setStyle('opacity',1);
				projectOnderschrift.setStyle('opacity',1);
			}
		}
		else {
			
			projectTitel.setStyle('opacity',0.3);
			projectOnderschrift.setStyle('opacity',0.3);
			imgOverlay.setStyle('opacity',0.3);
			imgWhiteOverlay.setStyle('opacity',0.6);
			
			//afbeelding.setStyle('opacity',0.4)
			
		}
	}
}
function rollOut(){

		var projects =  $('portfolio').getChildren('.box');
		for(var i=0; i<projects.length; i++){
			projectBox = projects[i];
			imgHolder = projectBox.getChildren('.imgHolder');
			imgOverlay = imgHolder[0].getChildren('.imgOverlay');
			imgWhiteOverlay = imgHolder[0].getChildren('.imgWhiteOverlay');
			afbeelding = imgHolder[0].getChildren('.prjImg');
			projectTitel = projectBox.getChildren('.projectTitel');
			projectOnderschrift = projectBox.getChildren('.onderschrift');
			
			
	

			if(projectOpen!="-"){
			
				if (projectOpen==i){
					
					imgOverlay.setStyle('opacity',0.1);
					imgWhiteOverlay.setStyle('opacity',0);
					projectTitel.setStyle('opacity',0);
					projectOnderschrift.setStyle('opacity',0);
					
				}else{
					
					imgOverlay.setStyle('opacity',0.3);
					imgWhiteOverlay.setStyle('opacity',0.3);
					projectTitel.setStyle('opacity',0.3);
					projectOnderschrift.setStyle('opacity',0.3);
				}
				
			}else{
				
				imgWhiteOverlay.setStyle('opacity',0);
				imgOverlay.setStyle('opacity',0.3);
				projectTitel.setStyle('opacity',1);
				projectOnderschrift.setStyle('opacity',1);
			}
		}
	
}
function displayImages(){
	
	imagesDisplayed = 1;
	var projects =  $('portfolio').getChildren('.box');
	
	for(var i=0; i<projects.length; i++){
	
		projectBox = projects[i];
		thisId = projects[i].id;
		imgHolder = projectBox.getChildren('.imgHolder');
		//imgHolder[0].setStyle('background-color','white');
		
			afbeelding = imgHolder[0].getChildren('.prjImg');
			afbeelding[0].src = afbeelding[0].id;
			chainImages.push(afbeelding[0]);
			afbeelding[0].setStyle('opacity',0);
		
		
		
		}
	chainCounter = 0;
	var myChain = new Chain();
	
	chainImages.each(function(image) { myChain.chain( function(){  
	//image.setStyle('opacity',1);
	
		showImage = true;
		
		if (curProj){

			openProject = curProj.id
			if (openProject==chainCounter)showImage=false;
		}
		if (showImage==true){
			var myFx = new Fx.Tween(image);
				myFx.start('opacity', 0, 1);
		
			
		
		}
		chainCounter++;
	});
		
		
		 
	});
	
	var runChain = function() { 
		myChain.callChain();
		if (chainCounter==projects.length){
			runChain = $clear(timer);
		}
		//if (myChain.chains.length == 0) { runChain = $clear(timer); } 
	}
	var timer = runChain.periodical(50);
	//new Event(e).stop();
	rollOut();
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}
function StartTheTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
        //alert("You have just wasted 10 seconds of your life.")
        if (imagesLoaded==1){
        	if(imagesDisplayed==0){
        	displayImages()
        	}
        }
    }
    else
    {
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}
function StopLoadingClock()
{
    if(loadingTimerRunning)
        clearTimeout(loadingTimerID)
    loadingTimerRunning = false
}

function StartLoadingTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
        //alert("You have just wasted 10 seconds of your life.")
        
        	//alert('timeout!')
        	loadingProject = 0;
    }
    else
    {
        self.status = loadingSecs
        loadingSecs = loadingSecs - 1
        loadingTimerRunning = true
        loadingTimerID = self.setTimeout("StartLoadingTimer()", loadingDelay)
    }
}


function mason(){

	document.id('portfolio').masonry({
		columnWidth: 102
	
	});
	
}
function show(){
	
	if (showLines==false){
		showLines = true;
		drawLines()
	}
	$('notepad').setStyle('visibility','visible');	
	
}
function hide(){
	$('notepad').setStyle('visibility','hidden');
}



function drawLines(){
	
	var lineArray = new Array();
	var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){

				metas = json.meta;

				date = json.date;
				offsetData = json.offset
				//json.content.length
				for(var i =0; i<json.content.length; i++){
					trace = json.content[i];
					
					curOff = 0-((offset-offsetData[i])/2);
					var startX = trace[0][1]-curOff;
					var startY = trace[0][0];
			
					var path='';
					path+="M"+startX+" "+startY;
					middle = Math.ceil(trace.length/2)
					middleCoord = new Array();
					for (var j=0; j<trace.length; j++){
						curCoord = trace[j];
						var x = curCoord[1]-curOff;
						pad="L"+x+" "+curCoord[0];
						if (j==middle)middleCoord=Array(curCoord[1],curCoord[0])
						path+=pad;
						
						startX = x
						startY = curCoord[0]
						
					}
					
					
					
					
					var c = paper.path("");
					
					c.attr("opacity",0.3);
					
				    c = paper.path(path);
				    
					c.attr("stroke", "#bceefa");
					c.attr("stroke-width",0.3);
					
					
					
					
					
					c.nummer=nummer;
					
					nummer++;

									
					c.mouseover(function (event) {	
						$('label').setStyle('visibility','visible');
						$('label').setStyle('width','100px');
   						this.attr("stroke", "#000000");
   						$('label').set('html',''+metas[this.nummer]+'<br/>'+date[this.nummer]);
   					
   						container = $(document.body);
   						//alert(container)
   						container.addEvent('mousemove',function(e) { 
   						
       					 	$('label').setStyle('left',e.page.x);
       					 	$('label').setStyle('top',e.page.y);
 						});

					});
					/*
					circle.mouseout(function (event) {
						$('label').setStyle('visibility','hidden');
   						this.attr("stroke", "#E2E2E2");
   						container.removeEvent('mousemove');
					});
					*/
					c.mouseout(function (event) {
						$('label').setStyle('visibility','hidden');
						$('label').setStyle('width','0px');
   						this.attr("stroke", "#D8D8D8");
   						container.removeEvent('mousemove');
					});
					
					
				}
				
				
	}}).get({'getMouse':'true'});
		

}

function videoString(url){
	url = 'html/video/'+url
	var videoPlayer = '<!-- Begin VideoJS -->'
	videoPlayer+=	'<div class="video-js-box">'
	videoPlayer+=	    '<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->'
	videoPlayer+=	    '<video id="example_video_1" class="video-js" width="390" controls="controls" preload="false" poster="'+url+'.jpg">'
	videoPlayer+=	      '<source src="'+url+'.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />'
	videoPlayer+=	      '<source src="'+url+'.webm" type=\'video/webm; codecs="vp8, vorbis"\' />'
	videoPlayer+=	      '<source src="'+url+'.ogv" type=\'video/ogg; codecs="theora, vorbis"\' />'
	videoPlayer+=	      '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->'
	videoPlayer+=	      '<object id="flash_fallback_1" class="vjs-flash-fallback" width="390" type="application/x-shockwave-flash"'
	videoPlayer+=	        'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">'
	videoPlayer+=	        '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />'
	videoPlayer+=	        '<param name="allowfullscreen" value="true" />'
	videoPlayer+=	        '<param name="flashvars" value=\'config={"playlist":["http://richardvijgen.nl/'+url+'.jpg", {"url": "http://richardvijgen.nl/'+url+'.mp4","autoPlay":false,"autoBuffering":true}]}\' />'
	videoPlayer+=	        '<!-- Image Fallback. Typically the same as the poster image. -->'
	videoPlayer+=	        '<img src="images/poster.jpg" width="390" alt="Poster Image"'
	videoPlayer+=	          'title="No video playback capabilities." />'
	videoPlayer+=	      '</object>http://richardvijgen.nl/html/video/'+url+'.jpg'
	videoPlayer+=	    '</video>'
	videoPlayer+=	    '<!-- Download links provided for devices that can\'t play video in the browser. -->'
	videoPlayer+=	    '<!--'
	videoPlayer+=	 	'<p class="vjs-no-video"><strong>Download Video:</strong>'
	videoPlayer+=	      '<a href="'+url+'.mp4">MP4</a>,'
	videoPlayer+=	      '<a href="'+url+'.webm">WebM</a>,'
	videoPlayer+=	      '<a href="'+url+'.ogv">Ogg</a><br>'
		      
	videoPlayer+=	    '</p>'
	videoPlayer+=		'-->'
	videoPlayer+=  '</div>'
	videoPlayer+=  '<!-- End VideoJS -->';
	return videoPlayer;
}