$(document).ready(function(){
	
	var options = {};
	
	var html = '<br /><br /><ul class="pages">';
	
	var currentOpen = parseInt(0);
	
	var first = true;
	
	var highlightPortfolio = function(intNr) {
		
		$('#header ul li a[open]').css({
			'font-weight'	: '',
			'color'			: '#c7c7c9'
		});
		
		$('#header ul li a[open='+intNr+']').css({
			'font-weight'	: 'bold',
			'color'			: '#FFF'
		});
	};
	
	var highlight = false;
	
	$('.image').each(function () {

		var typeHtml = '';
		
		
		
		if(first) {
			li_class = ' class="selected"';
			typeHtml = 'portfolio';
			first = false;
			
			highlight = $(this).attr('rel');
		}
		else
		{
			typeHtml = '&nbsp';
		}

	
		html += '<li><em class="type">'+typeHtml+'</em><a href="" open="' + $(this).attr('rel') + '"' + li_class + '>' + $(this).find('h3 a').html() + '</a></li>';
		
		
		
		li_class = '';
	
	});
	
	html += '</ul>';
	
	$('div.info').append(html);
				
	highlightPortfolio(highlight);

	var totalProjects = $('.image').length;
	
	var s = 0;
	
	var pageLoading = function () {

		setTimeout(function(){ 
			
			if($('.disabler').length>0)
			{			
				//alert('go' + (40 * s) );
				
				$('.disabler').css("background-position","0px " + (40 * s) +"px");
				
				s++;
			
			
				pageLoading();
			}
			else
			{
				s = 0;
			}

  		}, 30); 
		
	};
	
	var bindPages = function () {
		
		$('.disabler').remove();
		
		$('ul.pages li a').click(function () {

			$('ul.pages li a').removeAttr('class');
		
			var currentOpenElement = $('.image[rel='+ currentOpen +']');
			var openElement = $('.image[rel='+ $(this).attr('open') +']');
			
			$(this).attr("class","selected");
				
			hideOpen(currentOpenElement,openElement);
		
			var height = parseInt(currentOpenElement.height());
			var width = parseInt(currentOpenElement.width());
			
			pageLoading();
				
			$('#content').append('<div class="disabler" style="margin-top:-'+((height / 2) +40)+'px;position:absolute;background: url(/static/img/progress.png);margin-left:'+((width / 2) -20)+'px;width:40px;height:40px;"></div>');
		
			return false;
		
		});
	};
	
	bindPages();
	
	$('#prev').click(function () {
		
		var prev = (parseInt(currentOpen) - 1);
		
		if(prev < 0)
		{	
			// Ga naar de laatste
			prev = (totalProjects - 1);
		}
		
		var currentOpenElement = $('.image[rel='+ currentOpen +']');
		var openElement = $('.image[rel='+ prev +']');
					
		hideOpen(currentOpenElement,openElement);
			
		currentOpen = (currentOpen - 1);

		
		return false;
	});
	
	$('#next').click(function () {		
		
		var next = (parseInt(currentOpen) + 1);
		
		if(next >= totalProjects)
		{
			// Geen volgende ,ga naar de eerste
			next = 0;
		}

		var currentOpenElement = $('.image[rel='+ currentOpen +']');
		var openElement = $('.image[rel='+ next +']');
					
		hideOpen(currentOpenElement,openElement);
			
		currentOpen = (currentOpen + 1);
		
		
		return false;
	});

	/*$('.image').click(function () {
		
		var nr = parseInt($(this).attr('rel'));
		
		var nextElm = $('.image[rel='+ (nr + 1) +']');
		
		if(nextElm.length==0) {
			nextElm = $('.image[rel=0]');
		}

		hideOpen($(this),nextElm);
		
	});*/	
	
	$('.image').hover(function () {
		
		$(this).find('div.url').fadeIn('slow');
		
	},function () {
		$(this).find('div.url').fadeOut('slow');
		
	});
	
	var hideOpen = function(hideElement,openElement) {

		$('ul.pages li a').unbind('click').click(function () {
			
			return false;
		});
		
		highlightPortfolio(openElement.attr('rel'));		

		if(currentOpen==openElement.attr('rel'))
		{
			openElement.effect("bounce", { times:3 }, 300,function () {
			
				bindPages();	
				
			});
			
			
		}
		else
		{
			hideElement.effect("drop",{ direction: "up" },500, function () {
	
				openElement.toggle("drop",{ direction: "down",easing: 'easeOutElastic'} ,1000);
				
				currentOpen = openElement.attr('rel');
				
				
				
				bindPages();
					
			});
		}
	};
	
});