$(document).ready(function(){
	$('#contact')
		.bind('click', function(e){
			if(e.pageY < 420){
				$('#contact')
					.append($('<div />')
						.addClass('contact_falling_star')
						.css({
							'top':e.pageY,
							'right':$('#contact').width() - e.pageX
						})
						.animate({
							width:'101px',
							height:'72px'
						}, {
							queue:false,
							duration:500
						})
						.animate({
							'top':'+=300px',
							'right':'+=500px',
							'opacity':0
						}, 1500, function(){
							$(this).remove();
						}));
			}
		}).hide();
		
	$('#contact_barcode a')
		.bind('click', function(){return false;})
		.hover(function(){
			$('#contact_barcode_large').stop(true, true).fadeIn();
		}, function(){
			$('#contact_barcode_large').stop(true, true).fadeOut();
		});
	
	$('#portfolio_slider').append($('<ul />'));
	
	$('#portfolio_websites > div')
		.find('> div:eq(0)')
		.each(function(){
			function show(){
				$('div.portfolio').hide();
				
				div.show();
			}
			
			var div = $(this);
			var url = $(this).find('h3').text();
			var image = $(this).find('img').attr('src');
			
			div
				.append($('<a />')
						.addClass('portfolio_prev')
						.attr('href', 'javascript:void(0);')
						.bind('click', function(){
							var prev = div.parent().prev();
							
							if(prev.length == 0)
								prev = div.parent().nextAll().last();
							
							div.hide();
							prev.find('.portfolio').show();
						}))
					.append($('<a />')
						.addClass('portfolio_next')
						.attr('href', 'javascript:void(0);')
						.bind('click', function(){
							var next = div.parent().next();
							
							if(next.length == 0)
								next = div.parent().parent().find('> div').eq(0);
							
							div.hide();
							next.find('.portfolio').show();
						}));
			
			$('#portfolio_slider ul')
				.append($('<li />')
					.append($('<a />')
						.attr({
							'title':url,
							'href':'javascript:void(0);'
						})
						.bind('click', show)
						.append($('<img />')
							.attr({
								'src':image.replace('/kl_', '/ekl_'),
								'alt':''
							})
							.bind('click', function(e){
								$(this)
									.parent('a')
									.append($('<span />')
										.addClass('fingerprint')
										.css({
											top:e.pageY - $(this).offset().top - 6,
											left:e.pageX - $(this).offset().left - 6
										}));
							}))));
		});
	
	$('div.portfolio')
		.each(function(){
			var text = $(this).find('h3').text();
			$(this)
				.append($('<a />')
					.addClass('external_link')
					.attr({
						'href':'http://'+ text +'/',
						'target':'_blank'
					})
					.text(text));
			
			$(this).find('h3').remove();
		})
		.hide();
	
	$('#portfolio_slider ul').css('width', $('#portfolio_slider ul li').length * 151);
	
	$('#portfolio_slider').jScrollPane();
	
	$('#services_text')
		.append('<b>Klik op &eacute;&eacute;n van de onderstaande diensten voor meer informatie.</b><br /><br />')
		.append(function(){
			var ul = $('<ul />');
			
			$('#services_description > div.services_description').each(function(){
				function show(){
					$('#services_description > div.services_description').hide();
					
					parent.show();
				}
				
				var parent = $(this).hide();
				
				ul.append($('<li />')
					.append($('<a />')
						.attr('href', 'javascript:void(0);')
						.bind('click', show)
						.text(parent.find('h3').text())));
			});
			
			return ul;
		});
	
	$('#services_hole_text').show();
	$('.services_bones')
		.show()
		.bind('mousedown', function(e){
			var offset = $(this).offset();
			var offsetParent = $('#services').offset();
			
			$(this).appendTo('#services').css({
				top:offset.top - offsetParent.top,
				left:offset.left - offsetParent.left,
				'zIndex':1000
			});
			
			$(this).unbind(e);
		})
		.draggable({
			containment:'#services',
			appendTo:'#services'
		});
	
	$('#services_hole').droppable({
		drop:function(event, ui){
			var top, left, index;
			
			switch($(ui.draggable).attr('id').substr(14)){
				case '1':
					top = 11;
					left = 8;
					index = 3;
					break;
				case '2':
					top = 17;
					left = 63;
					index = 2;
					break;
				case '3':
					top = 24;
					left = 114;
					index = 1;
					break;
				case '4':
					top = 36;
					left = 189;
					index = 1;
					break;
				case '5':
					top = 40;
					left = 106;
					index = 3;
					break;
				case '6':
					top = 29;
					left = 131;
					index = 3;
					break;
			}
			$(ui.draggable)
				.appendTo(this)
				.css({
					'top':top +'px',
					'left':left +'px',
					'zIndex':index,
					cursor:'default'
				})
				.draggable( "option", "disabled", true);
			
			var length = $(this).find('*').length;
			
			if(length == 6)
				$('#services_hole_text').html('Thank you!');
			else
				$('#services_hole_text').html(length +'/6 Found!');
		}
	});
	
	$('a[href*=#]').click(function(){
		var page = $(this).attr('href').substr(1);
		
		if(page == 'contact'){
			if($('#contact').is(':hidden')){
				$('html, body').scrollTop($(window).scrollTop() + $('#home').height());
				$('#contact').show();
			}
		}
		
		$('html,body').animate({scrollTop: $('a[name='+ page +']').offset().top}, 1000, function(){
			location.href = '#'+ page;
		});
		
		return false;
	});
	
	$('.colorbox').colorbox();
});