$(document).ready(function() {

	//
	// First the animation for moving the big picture which hides text
	//

	img_top='60px';

	// init elements
	img=$('#image');
	if (img.length<=0) {
		aanzicht=$('#aanzichten img');
		aanzicht.css("cursor","default");
	}
	else {
		aanzicht=$('#aanzichten img');
		butt=$('#image .button').add($('#textbutton'));
		allImg=$(img).add(aanzicht).add(butt);
		txt=$('#text');
		imgTop=img.position().top;

		// normal states
		img.css({position:"absolute",top:img_top });
		butt.show().removeClass('up').addClass('down');
		aanzicht.hide();

		// functions
		function moveImg(type) {
			if (type=="up") {
				butt.show().removeClass('up').addClass('down');
				if (aanzicht.length>0) {
					aanzicht.slideUp('normal', function() {
							img.animate( { top:img_top }, 'normal','swing');
						});
				}
				else {
					img.animate( { top:img_top }, 'normal','swing');
				}
			}
			else {
				butt.show().removeClass('down').addClass('up');
				img.animate( { top:imgTop }, 'normal','swing', function() {
						if (aanzicht.length>0) {
							aanzicht.slideDown('normal');
						}
					} );
			}

		}

		// add events to big image and to small images in text
		allImg.bind('click', function(event){
													if (butt.hasClass('up'))
														moveImg("up");
													else
														moveImg("down");
												}	);

		// add events to all links, so when clicked the image will first move to its default position
		links=$('a');
		links.bind('click', function(event) {
													if (butt.hasClass('up'))
														moveImg("up");
													});
	}

	//
	//	Navigation animations (image caroussel)
	//

	// constants
	navNum=4;

	animSpeed=100;
	showSpeed=500;

	/*

	// tooltip
	tip=$('#tooltip');
	$('body').mousemove(function(e){
      x=e.pageX;
      y=e.pageY-30;
      $(tip).css("top",y).css("left",x);
    });
	$('#image').add('#text').add('#nav2').find('img').hover(
		function() {
			showTip(this);
		},
		function() {
			hideTip();
		});

	function showTip(img) {
		alt=$(img).attr('alt');
		$(tip).html(alt);
    $(tip).show().fadeTo(1,0.8);
	}

	function hideTip() {
		$(tip).hide();
	}

	*/

	// init elements
	$('#nav2 .current').addClass('selected');
	all=$('#nav2 .nav').removeClass('nav').addClass('item');

		function bindButtons() {
			up.mousedown( 	function() {move("up")}			);
			down.mousedown( function() {move("down")} 	);
		}
		function unbindButtons() {
			up.unbind();
			down.unbind();
		}

		function move(direction) {
			all.unbind();
			unbindButtons();
			if (direction=="up") {
				$(all[navNum]).show(showSpeed);
				$(first).hide(showSpeed,
					function() {
						$(last).after($(first));
						initElements();
						bindButtons();
					});
			}
			else {
				$(all[navNum-1]).hide(showSpeed);
				$(first).before($(last));
				$(last).show(showSpeed,
					function() {
						initElements();
						bindButtons();
					});
			}
		}

		function initAll() {
			all=$('#nav2 .item');
			sel=$('#nav2 .selected');
			selId=$(all).index($(sel));
			first=all[0];
			last=all[all.length-1];
		}

		function initElements(init) {
			all.unbind();
			initAll();
			if (init) {
				selPlace=navNum/2-1;
				// move if needed
				while (selId<selPlace) {
					$(first).before($(last));
					initAll();
				}
				while (selId>selPlace) {
					$(last).after($(first));
					initAll();
				}
			}
			// show not all
			for (showId=navNum; showId<all.length; showId++)	{
				$(all[showId]).hide();
			}
			// hover animations

	/*		$(all).hover(
				function() {
					$(this).animate({width:"75%"}, animSpeed);
				},
				function() {
					$(this).animate({width:"60%"}, animSpeed);
				}
			);
			$(sel).unbind().hover(
				function() {
					$(this).animate({width:"100%"}, animSpeed);
				},
				function() {
					$(this).animate({width:"80%"}, animSpeed);
				}
			); */

		}


	if (all.length>0) {
		initElements(true);

		if (all.length>4) {
			// show buttons
			up=$('#navbuttons .up').show();
			down=$('#navbuttons .down').show();
			// button binds
			bindButtons();
		}
	}


 });