var vimeoUserName = 'hvdegazellen';

var userInfoCallback = 'userInfo';
var clipsCallback = 'showThumbs';

var userInfoUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
var clipsUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/clips.json?callback=' + clipsCallback;


function showThumbs(clips) {
    var thumbs = document.getElementById('thumbs');
    thumbs.innerHTML = '';
    
    for (var i = 0; i < clips.length && i < 6; i++) {
        var thumb = document.createElement('img');
        thumb.setAttribute('src', clips[i].thumbnail_small);
        thumb.setAttribute('border', '0');
        thumb.setAttribute('title', "Wedstrijd video: <br />"+clips[i].title);
        var a = document.createElement('a');
        //a.setAttribute('href', clips[i].url);
        a.setAttribute('rel', "#overlay");
        a.setAttribute('href', "overlay/vimeo.php?id="+clips[i].clip_id);
        thumb.setAttribute('class', "thumb");
        //a.setAttribute('target', '_self');
        //a.setAttribute('onclick', "loadContent('vimeo', "+clips[i].clip_id+");");
        
        
        a.appendChild(thumb);
        
        thumbs.appendChild(a);
       

    }
    $("#thumbs img[title]").tooltip({ effect: 'slide'}).overlay();

    
    $("#thumbs a[rel]").overlay({
    	mask: {
			color: '#000',
			loadSpeed: 300,
			opacity: 0.8
    	},
    	top: '1%',

		onBeforeLoad: function() {
			var wrap = this.getOverlay().find(".contentWrap");
			wrap.load(this.getTrigger().attr("href"));
		}
	});
}

function init_vimeo() {
    var head = document.getElementsByTagName('head').item(0);
    
    var userJs = document.createElement('script');
    userJs.setAttribute('type', 'text/javascript');
    head.appendChild(userJs);
    
    var clipsJs = document.createElement('script');
    clipsJs.setAttribute('type', 'text/javascript');
    clipsJs.setAttribute('src', clipsUrl);
    head.appendChild(clipsJs);
}