(function($){
	
	$(document).ready(function(){

		$window = $(window);	
	
		/**
		 * Navigation
		 */
		$('#nav').each(function(){

			var $this = $(this);
			$links = $('#logo, #nav a');

			$links.bind('click', function(evt){	
				var url = $(this).attr('href');
				window.location.hash = '#!'+url;
				return false;
			});

		});
		
		/**
		 * Custom Message
		 */
		function message(str){
			$div = $('<div id="message">')
			        .text(str)		
			        .css({
						display: 'block',
						opacity: 0
					});
					
			$div.appendTo($('body'));
			
			$div.animate({
				opacity: 1,
				top: 15
			},{
				duration: 900,
				queue: false,
				easing: 'easeInOutExpo',
				complete: function(){
					$(this).delay(3000).animate({
						opacity: 0,
						top: -10
					},{
						duration: 600,
						easing: 'easeInOutExpo',
						complete: function(){
							$(this).remove();
						}
					});
				}
			});
		};
		
		/**
		 * Contact Form
		 */
		var contact_intv,
			$contact_form = $('#contact form');
		$('#contact').bind('mouseenter', function(){
			
			clearTimeout(contact_intv);
			if ( ! $contact_form.is(':visible') ) {
				$contact_form.css({
					height: 0,
					paddingTop: 10,
					display: 'block'
				})
				.animate({
					height: 180
				}, {
					duration: 300,
					queue: false,
					easing: 'easeInOutExpo'
				});
			}
		});
		$('#contact').bind('mouseleave', function(){			
			contact_intv = setTimeout(function(){
				$contact_form.animate({
					height: 0,
					paddingTop: 0
				}, {
					duration: 300,
					queue: false,
					easing: 'easeInOutExpo',
					complete: function(){
						$(this).hide();
					}
				});
			}, 1000);			
		});
		
		$contact_form.bind('submit', function(){
			
			$.post($contact_form.attr('action'), $contact_form.serialize(), function(data){
				if (data.success == true) $contact_form[0].reset();
				message(data.response);
			});
			
			return false;
		});
		
		/**
		 * Misc Init
		 */ 
		(function(){
			
			var $body = $('body');		
			var $content = $('#content');			
			var id = $body.attr('id');	
			
			$content.wrapInner('<div class="wrapper" id="'+id+'"/>');
			$content.css({overflow: 'hidden'});
			
			var $wrapper = $content.find('.wrapper');
			$wrapper.css({
				width: $window.width(),
				height: $window.height() - 220
			});			
			
			$('body').removeAttr('id').removeClass('nojs');
			
			// apply resizer to adjust "page"
			$window.resize(function(){
				$('.wrapper').css({
					width: $window.width(),
					height: $window.height() - 220
				});		
			});		
			
			$window.hashchange(function(){
				
				var url = window.location.hash.substr(2);
				if (url == '') return;
				
				var $link = $('a[href="'+url+'"]');
				
				var page_class = $link.parents('li[class]').eq(0).attr('class') 
					           ? $link.parents('li[class]').eq(0).attr('class') 
					           : 'home';
				
				new Page({
					loader : {
						url   : url,
						index : $links.index($link),
						id    : page_class
					},
					callbacks : {
						loaded : function(id, $page){
							
							switch (id) {
								
								case 'news':
									// group divs by pairs
									var $divs = $page.find('.page>div');
									for(var i=0; i < $divs.length; i+=2) {
										$divs.slice(i, i+2).wrapAll("<div/>");
									}

									new Scroller({page : $page}).init();
									
									break;
									
								case 'work':
									
									$page.find('.page').css({
										width : $window.width()-100, 
										height: $window.height()
									});
									
									$window.resize(function(){
										$page.find('.page').css({
											width: $window.width()-100,
											height: $window.height()
										});		
									});
									
									// add an inner wrapper to hide excess thumbnails during slide motion
									$page.find('.page')
									.wrapInner('<div class="inner"/>')
									.css({overflow: 'hidden !important'});
									
									new Dock({
										callbacks  : {
											
											close : function(_this, $ele){
												
												$ele.unbind('mouseenter');
												$ele.animate({top: 0}, {queue: false});
												
												var $active = $ele.parent().find('>.active');
												
												$active.each(function(){
													var $this = $(this);
													
													$this.unbind('mouseenter').bind('mouseenter', function(){
														$(this).animate({
															top: -15
														},{
															duration: 300,
															queue: false,
															easing: 'easeInOutQuad'
														});
													});
													
													$ele.find('>div:first').animate({
														opacity: 0
													}, {
														duration: 300,
														queue: false,
														complete: function(){													
															$this.removeClass('active');															
														}
													})
													
													$this.animate({
														width : 100
													},{
														duration :700,
														queue : false,														
														easing   : 'easeInExpo',
													});
													
													$this.find('>img').css({
														display : 'block',
														opacity : 0
													}).animate({
														opacity : 1
													},{
														duration :900,
														easing: 'easeInQuad',
														queue : false
													});
													
												});												
												
												_this.active = true;
											},
											click : function(_this, $ele){												
												
												$ele.unbind('mouseenter');
												$ele.animate({top: 0}, {queue: false});
												
												var $active = $ele.parent().find('>.active');
																								
												if ($active.attr('class') == $ele.attr('class')) return;
												
												$active.each(function(){
													var $this = $(this);
													
													$this.unbind('mouseenter').bind('mouseenter', function(){
														$(this).animate({
															top: -15
														},{
															duration: 300,
															queue: false,
															easing: 'easeInOutQuad'
														});
													});
													
													$this.animate({
														width : 100
													},{
														duration :700,
														queue : false,														
														easing   : 'easeInOutExpo',
													});
													
													$this.removeClass('active');
													
													$this.find('>img').css({
														display : 'block',
														opacity : 0
													}).animate({
														opacity : 1
													},{
														duration :600,
														queue : false
													});
													
												});												
												
												_this.active = false;	
												
												var scroller_init = function(){
													// expand content
													var scroller;
													if (scroller = $ele.data('scroller')) {

														$ele.find('>div:first').css({opacity: 0});
														
														$ele.addClass('active')
														.animate({
															width  : 600
														},{
															duration : 1700,
															easing   : 'easeInOutExpo',
															queue    : false,
															complete : function(){
																$ele.find('>div:first').animate({
																	opacity: 1
																}, {
																	duration: 300,
																	queue: false
																})
															}
														});
														$ele.find('>img').animate({
															opacity : 0
														},{
															duration : 1200,
															queue    : false,
															easing   : 'easeOutExpo',
															complete : function(){
																$(this).hide();
															}
														});

													} else {

														// replace ul of images with divs for scroller
														var $list = $ele.find('ul.images');
														$list.find('li').each(function(){
															var $this = $(this);
															var $parent = $this.parent();

															var $div = $('<div/>').append($this.children());
															$div.insertBefore($parent);		
														});
														$list.remove();

														// wrap element in a containing div
														$ele.wrapInner('<div/>');
														var $div = $ele.find('>div');
														$div.find('>img').insertBefore($div);
														
														// move first div below first image
														$div.find('>div:first').insertAfter($div.find('>div:eq(1)'));
														
														$ele.find('>div:first').css({opacity: 0});
														
														$ele.addClass('active')
														.animate({
															width  : 600
														},{
															duration : 1700,
															easing   : 'easeInOutExpo',
															queue    : false,
															complete : function(){
																$ele.find('>div:first').animate({
																	opacity: 1
																}, {
																	duration: 300,
																	queue: false
																})
															}
														});
														$ele.find('>img').animate({
															opacity : 0
														},{
															duration : 1200,
															queue    : false,
															easing   : 'easeOutExpo',
															complete : function(){
																$(this).hide();
															}
														});											

														if ($list.find('li').length == 0) {
															$ele.data('scroller', true);
															return;
														}

														scroller = new Scroller({
															page     : $ele,
															selector : '>div',
															callbacks: {
																init : function(){																	
																	// move title outside scroller
																	var $div = $ele.find('>div:first');
																	$ele.find('.left, .right, .close').prependTo($div);
																	$ele.find('h2').prependTo($div);
																}
															}
														});
														scroller.init();

														$ele.data('scroller', scroller);
													}
												};
												
												if ($active.length > 0) {
													setTimeout(function(){
														if ( ! _this.short) _this.center($ele);
														scroller_init();
													}, 800);
												} else {
													if ( ! _this.short) _this.center($ele);
													scroller_init();
												}												
												
											}
										},
										list       : $page.find('.page .inner>ul'),
										item_width : 100
									}).init();
								
							}
							
						}
					}
				}).load();
				
			});		
			
			$window.hashchange();
						
		})();				

	});
	
})(jQuery);