var D3 = new Class({
	
	Implements: [ Options , Events ],
	
	options: {
		
		active_class: 'active',
		
		spacing: 15,
		
		colors: {
			white : '#ffffff',
			red   : '#e51837',
			black : '#202020'
		},
		
		animation: {
			nav_rollovers: { duration: 200, easing: 'linear' },
			on_open_section: {
				props: {
					logo      : { duration: 700 , easing: 'easeInOutCubic' , delay: 200 },
					nav       : { duration: 700 , easing: 'easeInOutCubic' , delay: 200 },
					container : { duration: 800 , easing: 'easeOutBack' }
				},
				sections: {
					about: {
						container : { width: 440 , height: 420 }
					},
					works: {
						container : { width: 750 , height: 550 }
					},
					contact: {
						container : { width: 350 , height: 150 }
					}
				}
			},
			
			on_close_section: {
				props: {
					logo      : { duration: 700 , easing: 'easeInOutCubic' , delay: 200 },
					nav       : { duration: 700 , easing: 'easeInOutCubic' , delay: 200 },
					container : { duration: 800 , easing: 'easeInOutCubic' }
				},
				home: {
					container : { width: 34 , height: 34 }
				}
			}
		}
	},
	
	initialize: function() {},
	
	mount: function() {
		this._registerElements();
		this._registerEvents();
	},
	
	_registerElements: function() {
		var self               = this;
		this.doc_body          = $( 'body' );
		this.container         = $( '>article' , this.doc_body );
		this.sections          = $( '>section' , this.container ).hide();
		this.header            = $( '>header' , this.doc_body );
		this.logo              = $( 'h1' , this.header );
		this.nav               = $( 'nav' , this.header );
		this.nav_links         = $( 'a' , this.nav );
		this.close_button      = $('<span class="close">&times;</span>').hide().prependTo( this.container );
		
		// works elements
		this.works             = $( '#works' );
		this.works_aside       = $( 'aside' , this.works );
		this.works_nav         = $( 'nav' , this.works_aside );
		this.works_links       = $( 'a' , this.works_nav );
		
		this.works_jobs_holder = $( '#jobs' , this.works );
		this.works_jobs        = $( '>section' , this.works_jobs_holder );

	},
	
	_registerEvents: function() {
		var self = this,
			data = { self : self },
			o    = this.options;

		this.nav_links
			.bind( 'click' , data , self.openSection )
			.bind( 'mouseenter' , data , self.navMouseEnter )
			.bind( 'mouseleave' , data , self.navMouseLeave );
		
		this.close_button
			.bind( 'click' , $.proxy( self.closeSection , self ) );
			
		this.doc_body
			.bind( 'click' , function(e){
				if( e.currentTarget == e.target ) {
					self.closeSection();
				}
			});
		
		// works
		this.works_aside
			.bind( 'mousemove' , data ,  self.worksNavMouseMove );
		
		this.works_jobs_holder
			.bind( 'mousemove' , data ,  self.worksJobsMouseMove )
			.bind( 'mouseleave' , function(){
				self.works_jobs_holder.stop().scrollTo( 0 , 400 , {axis:'y'} );
			});
			
		this.works_links
			.bind( 'click' , data , self.openJob )
			.bind({
				mouseenter: function(e) {
					$(this).not('.selected').stop().animate({ backgroundColor: o.colors.black, color: o.colors.white, paddingRight: 250 } , o.animation.nav_rollovers.duration , o.animation.nav_rollovers.easing);
				},
				mouseleave: function(e) {
					$(this).not('.selected').stop().animate({ backgroundColor: o.colors.white, color: o.colors.black, paddingRight: 5 } , o.animation.nav_rollovers.duration , o.animation.nav_rollovers.easing);
				}
			});
		
		
		// $('a[href="#works"]').trigger('click');
	},
	
	openSection: function( e ) {
		e.preventDefault();
		var el           = $( e.currentTarget ),
			self         = e.data.self,
			section      = el.attr('href'),
			sanit_section= section.split('#')[1],
			o            = self.options,
			a            = o.active_class,
			c            = o.colors,
			anim         = o.animation,
			op           = anim.on_open_section,
			nav          = anim.nav_rollovers,
			ui_container = op.sections[ sanit_section ].container,
			spacing      = -(ui_container.width/2 + o.spacing );
		
		// fix container center
		ui_container.marginLeft = -(ui_container.width/2);
		ui_container.marginTop = -(ui_container.height/2);

		// main navigation links
		self.nav_links.stop().not( el ).removeClass( a ).animate({ color: c.white }, nav.duration );
		
		// target link
		el.stop().addClass( a ).animate({ color: c.red }, nav.duration );
		
		// logo
		self.logo.stop().delay( op.props.logo.delay ).animate({ left: spacing } , op.props.logo.duration , op.props.logo.easing );
		
		// nav holder
		self.nav.stop().delay( op.props.nav.delay ).animate({ right: spacing } , op.props.nav.duration , op.props.nav.easing );
		
		// section
		self.sections.fadeOut(0);
		self.close_button.fadeOut(0);
		
		// container
		self.container.stop().animate( ui_container , op.props.container.duration , op.props.container.easing , function() {
			$( section ).fadeIn(100);
			self.close_button.fadeIn(100);
			// works
			if( sanit_section == 'works' ) {
				$('a[href="#maxhaus"]')
					.css({ backgroundColor: o.colors.black, color: o.colors.white, paddingRight: 250 })
					.trigger('click');
				self.works_aside.stop().scrollTo( 0 , 600 , { axis : 'y' } );
			}
		});
	},
	
	closeSection: function() {
		var self         = this,
			o            = self.options,
			a            = o.active_class,
			c            = o.colors,
			anim         = o.animation,
			op           = anim.on_close_section,
			nav          = anim.nav_rollovers,
			ui_container = op.home.container,
			spacing      = -(ui_container.width/2 + o.spacing );
		
		// fix container center
		ui_container.marginLeft = -(ui_container.width/2);
		ui_container.marginTop = -(ui_container.height/2);
		
		// main navigation links
		self.nav_links.stop().removeClass( a ).animate({ color: c.white }, nav.duration );
		
		// logo
		self.logo.stop().delay( op.props.logo.delay ).animate({ left: spacing } , op.props.logo.duration , op.props.logo.easing );

		// nav holder
		self.nav.stop().delay( op.props.nav.delay ).animate({ right: spacing } , op.props.nav.duration , op.props.nav.easing );
		
		// section
		self.sections.fadeOut(0);
		self.close_button.fadeOut(0);
		
		// container
		self.container.stop().animate( ui_container , op.props.container.duration , op.props.container.easing );
		
		// works
		self.works_jobs.stop().hide();
		self.works_links
		.css({ backgroundColor: o.colors.white, color: o.colors.black, paddingRight: 5 })
		.removeClass('selected');
		
	},
	
	navMouseEnter: function( e ) {
		var el           = $( e.currentTarget ),
			self         = e.data.self,
			o            = self.options,
			act          = '.' + o.active_class,
			color        = o.colors.red,
			dur          = o.animation.nav_rollovers.duration,
			e            = o.animation.nav_rollovers.easing;
	
		el.not( act ).stop().animate({ color: color } , dur , e );
	},
	
	navMouseLeave: function( e ) {
		var el           = $( e.currentTarget ),
			self         = e.data.self,
			o            = self.options,
			act          = '.' + o.active_class,
			color        = o.colors.white,
			dur          = o.animation.nav_rollovers.duration,
			e            = o.animation.nav_rollovers.easing;
	
		el.not( act ).stop().animate({ color: color } , dur , e );
	},
	
	worksNavMouseMove: function( e ) {
		var el            = $( e.currentTarget ),
			self          = e.data.self,
			holder_top    = self.works_aside.offset().top,
			elem_top      = self.works_nav.offset().top,
			holder_height = self.works_aside.height(),
			elem_height   = self.works_nav.height(),
			diff          = elem_height - holder_height,
			top           = Math.abs( ( e.pageY - self.works_aside.offset().top ) * diff / holder_height );
			
		self.works_aside.stop().scrollTo( top , 100 , {axis:'y'} );
	},
	
	worksJobsMouseMove: function( e ) {
		var el            = $( e.currentTarget ),
			self          = e.data.self,
			holder_top    = self.works_jobs_holder.offset().top,
			elem_top      = self.works_jobs.offset().top,
			holder_height = self.works_jobs_holder.height(),
			elem_height   = self.works_jobs.height(),
			diff          = elem_height - holder_height,
			top           = Math.abs( ( e.pageY - self.works_jobs_holder.offset().top ) * diff / holder_height );
		
		self.works_jobs_holder.stop().scrollTo( top , 100 , {axis:'y'} );
	},
	
	openJob: function( e ) {
		e.preventDefault();
		var el           = $( e.currentTarget ),
			self         = e.data.self,
			section      = el.attr('href'),
			sanit_section= section.split('#')[1],
			o            = self.options,
			a            = o.active_class;
			
		self.works_links
			.not( el )
			.stop()
			.removeClass('selected')
			.animate({ backgroundColor: o.colors.white, color: o.colors.black, paddingRight: 5 } , o.animation.nav_rollovers.duration , o.animation.nav_rollovers.easing);
			
		el.addClass('selected');
		
		self.works_jobs_holder.stop().scrollTo( 0 , 200 , {axis:'y'} );
		self.works_jobs.not( el ).stop().hide( 500 );
		$( section ).stop().show( 500 );
	}
});


// store d3 at memory
var d3 = new D3();
// on document is ready, mount! =)
$(function(){ d3.mount(); });