$(document).ready(function() {

	var content = $("#contentWrap");
	var portList = $("#portfolio-list");
	var work = $(".work");
	var next = $(".next");
	var prev = $(".prev");
	var showContent = $(".showContentPortfolio");

	// next / perv buttons
	var nextButton = '<span class="next"><img src="http://www.brainworks.nl/images/arrow_right.png" alt="left"></span> ';
	var prevButton = '<span class="prev"><img src="http://www.brainworks.nl/images/arrow_left.png" alt="right"></span>';

	// ajax error
	var error = "Couldn't load content.";

	// houdt het portfolio op deze hoogte
	//var portHeight		= $("#portfolio").height();
	//$("#portfolio").height(portHeight);

	// open content
	work.live("click", function() {

		// get rel
		var portLink = $(this).attr('rel');

		// check last
		var checkLast = portList.find('.work').eq(-1).attr('rel');

		// check first
		var checkFirst = portList.find('.work:first').attr('rel');

		// last visible div
		var lastVis = portList.find('.work:visible:last').attr('rel');

		// first visible div
		var firstVis = portList.find('.work:visible:first').attr('rel');

		// send data
		$.ajax({
			type : 'GET',
			dataType : 'html',
			url : '/index.php?action=ajaxParagraph&title=' + portLink,
			success : function(r) {

				// if its the last div
				if(portLink == checkLast)
					showContent.html(r + prevButton).attr('rel', portLink);

				// if its the first div
				else if(portLink == checkFirst)
					showContent.html(r + nextButton).attr('rel', portLink);

				// when ordered and there's no next/prev div
				else if(lastVis == portLink && firstVis == portLink)
					showContent.html(r).attr('rel', portLink);

				// when ordered and there's no prev div
				else if(firstVis == portLink)
					showContent.html(r + nextButton).attr('rel', portLink);

				// when ordered and there's no next div
				else if(lastVis == portLink)
					showContent.html(r + prevButton).attr('rel', portLink);
				else
					showContent.html(r + prevButton + nextButton).attr('rel', portLink);

				// show pop up
				content.fadeIn();

			},
			error : function() {
				showContent.html(error);
			}
		});

	});
	// next
	next.live("click", function() {

		// get rel attr from current div
		var id = showContent.attr('rel').trim();
		console.log('[rel=' + id + ']');
		console.log(portList.find('[rel=' + id + ']'));
		
		
		// find the next rel
		var nextContent = portList.find('[rel=' + id + ']').next('div:visible').attr('rel');

		// check last
		var checkLast = portList.find('.work:visible:last').attr('rel');

		// send data
		$.ajax({
			type : 'GET',
			dataType : 'html',
			url : '/index.php?action=ajaxParagraph&title=' + nextContent,
			success : function(r) {

				// if the nextcontent is empty ..
				if(nextContent == checkLast)
					showContent.html(r + prevButton).attr('rel', nextContent);
				else
					showContent.html(r + prevButton + nextButton).attr('rel', nextContent);

			},
			error : function() {
				showContent.html(error);
			}
		});

	});
	// prev
	prev.live("click", function() {

		// get rel attr from current div
		var id = showContent.attr('rel');

		// find the next rel
		var nextContent = portList.find('[rel=' + id + ']').prev('div').attr('rel');

		// check first
		var checkFirst = portList.find('.work:visible:first').attr('rel');

		// send data
		$.ajax({
			type : 'GET',
			dataType : 'html',
			url : '/index.php?action=ajaxParagraph&title=' + nextContent,
			success : function(r) {

				// if the nextcontent is empty ..
				if(nextContent == checkFirst)
					showContent.html(r + nextButton).attr('rel', nextContent);
				else
					showContent.html(r + prevButton + nextButton).attr('rel', nextContent);

			},
			error : function() {
				showContent.html(error);
			}
		});

	});
	// hide wrap on click
	$(".backgroundLayer").live("click", function() {
		hideWrap();
	});
	// hide wrap when pressed escape
	$(document).keyup(function(e) {
		if(e.keyCode == 27) {
			hideWrap();
		}
	});
	// hide wrap when pressed on the close button
	$(".closeWrap").live("click", function() {
		hideWrap();
	});

	$(".closePort").live("click", function() {
		hideWrap();
	});
	function hideWrap() {
		// hide wrap
		$("#contentWrap").fadeOut();
	}

});