$(document).ready(function() {

/*==============================================================================
 * Animations and effects
 *============================================================================*/

	$('#wrapper').animate({
		width:496,
		height:496,
		left:"50%",
		top:"390px",
		marginLeft:-253,
		marginTop:-248
	}, 800 );
	
	squeeze();
		
	function squeeze_in(e) { 
		$(e).animate({
			width:300,
			height:300,
			left:'50%',
			top:'390px',
			marginLeft:-150,
			marginTop:-148
		}, 300, 'linear');
	}
	
	function squeeze_out(e) {
		$(e).animate({
			width:496,
			height:496,
			left:"50%",
			top:"390px",
			marginLeft:-253,
			marginTop:-248
		}, 300, 'linear');		
	}
	
	function squeeze() {
		$('#virtual-wrapper').mouseenter(function() {
			squeeze_in('#wrapper');
		});
		
		$('#virtual-wrapper').mouseleave(function() {
			squeeze_out('#wrapper');
		}); 
	}
	
	$('#welcome').click(function() {
		$(this).hide().animate({
			opacity:0.0
		}, 800 );
		$('#welcome_menu').hide();
		$('#portfolio-wrapper').animate({
			opacity:1
		}, 400);
		$('#menu').animate({
			opacity:1
		}).addClass('black');
		$('#menu-kontakt').animate({
			opacity:0.5
		}, 300);
		$('#menu-portfolio').animate({
			opacity:1
		}, 300).data('current', true);
	});
	
	$('#portofolio').mouseenter(function() {
		$('#kontakt').animate({
			opacity:0.5
		}, 400);
	})
	
	$('#portofolio').mouseleave(function() {
		$('#kontakt').animate({
			opacity:1
		}, 400);
	})
	
	$('#kontakt').mouseenter(function() {
		$('#portofolio').animate({
			opacity:0.5
		}, 400);
	})
	
	$('#kontakt').mouseleave(function() {
		$('#portofolio').animate({
			opacity:1
		}, 400);
	})
	
	$('#kontakt').click(function() {
		$('#wrapper').removeClass('closed').removeData('intro');
		$('#welcome_menu').hide();
		$('#wrapper').animate({
			width:496,
			height:496,
			left:"50%",
			top:"390px",
			marginLeft:-253,
			marginTop:-248
		}, 500, 'linear', function (){
				$('#wrapper').addClass('open')
		});
		$('#kontakt_1').show();
		$('#kontakt_2').show();
		$('#menu').animate({
			opacity:1
		});
		$('#menu-portfolio').addClass('not-current').animate({
			opacity:0.5
		}, 300);
		$('#menu-kontakt').animate({
			opacity:1
		}, 300).data('current', true);
	});
	
	$('#menu a').mouseenter(function() {
		$(this).animate({
			opacity:1
		}, 200);
		$(this).siblings('a').animate({
			opacity:0.5
		}, 200);
	});
	
	$('#menu a').mouseleave(function() {
		if ($(this).data('current')) {
			$(this).animate({
				opacity:1
			}, 200);		
			$(this).siblings('a').animate({
				opacity:0.5
			}, 200);
		} else {
			$(this).animate({
				opacity:0.5
			}, 200);
			$(this).siblings('a').animate({
				opacity:1
			}, 200);
		}
	});
	
	$('#menu-portfolio').click(function() {
		$(this).data('current',true)
		$("#image-wrapper").animate({opacity:0}, 1000).hide().addClass('loading').empty();
		$('#gallery').show().animate({
			opacity:1
		}, 800);
		$('#nav').animate({
			opacity:1
		}, 800);
		$('#portfolio-wrapper').show().animate({
			opacity:1
		}, 800);
		$('#menu').addClass('black').animate({
			opacity:1
		});
		$('#wrapper').animate({
			width:496,
			height:496,
			left:"50%",
			top:"390px",
			marginLeft:-253,
			marginTop:-248
		}, 200, 'linear', function (){
				$('#wrapper').addClass('open')
		});		
		$('#kontakt_1').show();
		$('#kontakt_2').show();
		$('#menu-kontakt').animate({
			opacity:1
		}, 300).removeData('current');;
		$('#menu-portfolio').addClass('not-current').animate({
			opacity:0.5
		}, 300);
	});
	
	$('#menu-kontakt').click(function() {
		$('#portfolio-wrapper').animate({
			opacity:0
		}, 800, function(){
			$(this).hide(); $('#gallery').hide();
		});
		$("#wrapper").show().addClass('open').animate({
			width:496,
			height:496,
			left:"50%",
			top:"390px",
			marginLeft:-253,
			marginTop:-248
		}, 800 );
		$('#kontakt_1').show();
		$('#kontakt_2').show();
		$('#menu').animate({
			opacity:1
		}, function(){
			$(this).removeClass('black');
		});
		$('#menu-portfolio').removeData('current');
		$(this).data('current', true);
		$('#image-wrapper').hide().addClass('loading').empty();
	});
	
	$('#portofolio').click(function() {
		$('#welcome_menu').hide();
		$('#portfolio-wrapper').animate({
			opacity:1
		}, 400);
		$('#menu').animate({
			opacity:1
		}).addClass('black');
		$('#menu-kontakt').animate({
			opacity:0.5
		}, 300);
		$('#menu-portfolio').animate({
			opacity:1
		}, 300).data('current', true);
	});

/*==============================================================================
 * Loading gallery
 *============================================================================*/
 
 	$('#welcome').click(function(){
	  	$("#portfolio").load("gallery.php?page=1", singleImage)
 	});
	
	$("#nav a").click( function() {
		$("#nav a").removeClass('active');
		$(this).addClass('active');
		var pg = $(this).attr("rel");
	  	$("#portfolio").load("gallery.php?page=" + pg, singleImage);
	});

/*==============================================================================
 * Loading image
 *============================================================================*/
	
	function singleImage() {
		$("img.a").hover(
			function() {
				$(this).stop().animate({"opacity": "0"}, "slow");
			},
			function() {
				$(this).stop().animate({"opacity": "1"}, "slow");
		});
		
		
		$(".img").click(function() {
			var img_id = $(this).attr('rel');
			var name = $(this).attr('title');
			var title = $(this).attr('name');
			var img = new Image();
			
			$("#gallery").animate({'opacity': '0'}, 'slow');
			$("#nav").animate({'opacity': '0'}, 'slow');

			$('#image-wrapper').show().css('opacity','1').unbind('click');;
			
			$(img).load(function () {
				$(this).hide();
				$('#image-wrapper').removeClass('loading').append(this).append('<p class="img_title">' + name + '</p><p class="img_function">' + title + '</p>').bind('click', function(){
					$(this).hide().addClass('loading').empty();
					$("#gallery").animate({"opacity": "1"}, "slow");
					$("#nav").animate({"opacity": "1"}, "slow");
				});
				$(this).fadeIn();
			}).attr('src', img_id);
		});
	}
	
});