// init & start
function meetourteam(holder){
	
	var fadespeed = 100;
	var alpha = 0.4;
	
	// layout en UI
	if( $('div.employee',holder).length ){
		
		// department vars
		var keys = [];
		var values = [];
		
		// employee holders init
		$('div.employee',holder)
		.css({'cursor':'pointer'})
		.removeAttr('class')
		.addClass('employeeThumbHolder')
		.addClass(function(){
			return $('span:first',$(this)).attr('class');
		})
		.each(function(){
			
			var dep = $('span:first',$(this)).attr('class');
			
			// unbind al gesette binds (shadowbox)
			$('a',$(this))
			.unbind();
			
			$('img',$(this))
			.removeAttr('title')
			.addClass('active');
			
			// set department vars
			if(jQuery.inArray(dep,keys)==-1 && dep != ''){
				keys.push(dep);
				values.push($(this).attr('title'));
			}
		})
		.removeAttr('title');
		
		// bouw DOM list met departments
		if(keys.length > 1){
			$('div.employeeThumbHolder:first',holder)
			.before( 
				$('<ul/>')
				.attr('id','teamdepartments')
				.append(function(){
				
					var list = $('<span/>');
					
					for ( var i in keys )
					{
						var key = keys[i];
						var value = values[i];
						
						// weirde IE bug.... crap
						if(i >= 0){
							
							$(list)
							.append( 
								$('<li/>')
								.addClass(key)
								.append(
									$('<a/>')
									.attr('href',window.location.pathname+'#'+key)
									.html(value)
								)
							);
						}
					}
					return list;
				})
			)
			
			// bind click aan departmentlist
			$('li',$('ul#teamdepartments',holder))
			.click(function(){
				activateDep( $(this).attr('class'),holder );
			})
		}
		
		// bind click aan anchors (fancybox)
		$('a:first',$('div.employeeThumbHolder',holder))
		.removeAttr('title')
		.click(function(){
			
			if( $('img',$(this)).attr('class') != "" ){
				activateDep( $('img',$(this)).attr('class').replace(' active',''),holder );
			}
			
			var href= $(this).attr('href');
			var title= '';
			if( $(this).next('span').length ){
				title =$(this).next('span').html();
			}
			
			var newFancy = fancySettings;
			newFancy['title'] = title;
			newFancy['type'] = 'image';
			
			$.fancybox(href,newFancy);
						
			return false;
			
		})
		.each(function()
		{
			// bind hovertip aan anchors
			$(this).qtip({
			
				show: {
					delay:1,
					solo:false,
					//when: {
					//	event:mouseenter
					//},
					effect:{
						type:'fade',
						length:1
					}
				},//'mouseenter',
				hide: 'mouseleave',
				
				style:{
					width: {
						min:250,
						max:416
					}
				},
				
				
				
				//width: 416,
				
				content: {
					text:$(this).next('span').html()//,
				},
				
				api: {
					beforeShow:function(){ 
					
						$('img',this.elements.target)
						.fadeTo(fadespeed, 1.0);
						
					},
					onHide:function(){ 
					
						$('img:not(".active")',this.elements.target)
						.fadeTo(fadespeed, alpha);
						
					}
				},
				position: {
				  corner: {
					 target: 'bottomLeft',
					 tooltip: 'topLeft'
				  }
			   }
			})
		})
				 
	
	}
	
	function activateDep(dep,holder){
		
		//alert(dep);
		
		dep = dep.replace('active','');
		
		if(dep != ''){
			$('li:not(.'+dep+') a',$('ul#teamdepartments',holder))
			.removeClass('active');
			
			$('li.'+dep+' a',$('ul#teamdepartments',holder))
			.addClass('active');
			
			$('div.employeeThumbHolder:not(.'+dep+') img',holder)
			.fadeTo(fadespeed, alpha)
			.removeClass('active');
			
			$('div.employeeThumbHolder .'+dep+' img',holder)
			.fadeTo(fadespeed, 1.0)
			.addClass('active');
		}
		
		
	}
}