jQuery.Event('animateIn');
jQuery.Event('animateOut');

var Animations = {
	
	// default delay between sequential animations
	delay: 500,
	
	// animation sequence delays on page rendering 
	delays: [100, 500, 1000, 1500],
	
	// default animation durations
	speed: {
		slow: 1250,
		normal: 1000,
		fast: 750
	},
	
	// default animation easings
	easings: ["easeInQuint", "easeOutQuad"],
	
	// fadeIn the logo
	logo: function() {
		
		//$("#logo").fadeIn(3000);
		
		$("#logo")
			.delay(this.delays[0])
			.animate({
				"opacity": "show"
			}, this.speed.fast, this.easings[0]);

		return this;
	},
	
	// slideIn the wings top and bottom
	wings: function() {
		
		var $top = $("#wing_top");
		var $bottom = $("#wing_bottom");
		
		$top.css("top", -parseInt($top.outerWidth()))
			.delay(this.delays[1])
			.css("display", "block")
			.animate({"top": -47}, this.speed.normal, this.easings[1]);
		
		$bottom.css("bottom", -parseInt($bottom.outerHeight()))
			.delay(this.delays[1])
			.css("display", "block")
			.animate({"bottom": 0}, this.speed.normal, this.easings[1]);
		
		return this;
	},
	
	// animate the actual content
	content: function($pageName) {

		var $page = $pageName ? $('#'+$pageName) : $('.subpage:first');
		
		$page.trigger('animateIn', {delay: this.delays[2]});		
		return this;
	},
	
	// narrow the bottom wing
	narrowwing: function() {
		
		var $wing = $("#wing_bottom");
		
		if($wing.width() > 820) {
			$wing
				.animate({
					"width": 820,
					"height": 132
				}, this.speed.normal, this.easings[1]);
		}
		
		return this;
	}, 
	
	widewing: function() {
		
		var $wing = $("#wing_bottom");
		
		if($wing.width() < 996) {
			$wing
				.animate({
					"width": 996,
					"height": 248
				}, this.speed.normal, this.easings[1]);
		}
		
		return this;
	},

	// slideDown the menu
	menu: function() {
		
		var $menu = $("#left .menu"); 
		
		$menu.css("top", -parseInt($menu.outerWidth()))
			.delay(this.delays[3])
			.animate({
				"top": 0
			}, this.speed.normal, this.easings[1]);
		
		return this;
	}
};

var PageEvents = {
	
	// register events for the menu item clicks
	links: function() {		
	
		$("#left ul li a, #hd a[href=#nyito]")
			.click(function(e) {
				
				e.preventDefault();
				
				// find the target sub page
				var $nextPage = $($(this).attr('href'));
				
				// and the current
				var $currentPage = $("#right .active.subpage"); 
				
				if($currentPage.attr('id') == $nextPage.attr('id')) return;
				
				if(jQuery(this).attr('href') == '#nyito') {
					Animations.widewing();
				} else {
					Animations.narrowwing();
				}
				
				$currentPage
					.trigger('animateOut')
					.removeClass('active');
				
				$nextPage
					.trigger('animateIn', {delay: Animations.speed.normal})
					.addClass('active');
				
				
				$(this).addClass('active');
				$('a[href="#'+$currentPage.attr('id')+'"]').removeClass('active');
			});
		
		return this;
	},
	
	// register the animations for the page contents
	content: function() {
		
		$('#right .subpage')
			.bind('animateIn', function(e, data) {
				
				var $delay = data.delay ? data.delay : 0;
				
				$(this)
					.addClass('active');
				
				$(this)
					.find('.content ul li p.image img.image')
					.delay($delay + Animations.delay)
					.animate({
						"opacity": "show"
					}, Animations.speed.slow, Animations.easings[0]);
				
				// slideIn the new content
				$(this)
					.css("top", -parseInt($(this).outerHeight()))
					.delay($delay)
					.css('display', 'block')
					.animate({
						"top": 0
					}, Animations.speed.slow, Animations.easings[1]);
				
			}).bind('animateOut', function(e) {
				
				// fadeOut the old content
				$(this).fadeOut(Animations.speed.fast);
					//.animate({"opacity": "hide"}, Animations.speed.normal);
			});
		
		return this;
	}
};

$(function() {
	
	PageEvents
		.links()
		.content();
	
	Animations
		.logo()
		.wings()
		.content()
		.menu();
	
	$('.subpage .scrollable').scrollable({size: 1});
});