Element.alias('addEvent','on');

var RS = new Class({
	initialize: function(){
		this.current = false;

		this.blind = $('blind').pin().setPosition(0, 0);
		this.header = $('header').pin().setPosition(0, 0);
		this.scroll = new Fx.Scroll(document.body, { link: 'cancel', wheelStops: false });
		this.sliders();
		this.projectLinks();
		this.projectShadeVisible = false;
		this.blindIn();
		this.blindOut.delay(2500, this);

		$(window).addEvents({
			'hashchange': this.scrollTo.bind(this),
			'resize': this.reScroll.bind(this)
		});
		$(document.body).on('click', this.projectCloseClick.bindWithEvent(this));

		this.scrollTo(location.hash);
	},

	blindIn: function(){
		this.blind.getChildren().fade('hide').fade('in');
	},

	blindOut: function(){
		this.blind.fade('out');
		this.blind.destroy.delay(1000, this.blind);
	},

	sliders: function(){
		$('home-slider').vroom({ auto: true, thumbs: false });
		$$('#gallery .slider').vroom({ caption: 'gallery-caption' });
	},

	projectLinks: function(){
		$$('.project').on('click', (function(e){
			var target = (e.target.get('tag') == 'div') ? e.target : e.target.getParent('div');
			this.projectOpen(target.get('id').replace('project-link-', ''));
			e.stop();
		}).bindWithEvent(this));
	},

	projectOpen: function(id){
		if(! this.projectShade) {
			this.projectShade = new Element('div', { 'id': 'project-shade' })
				.fade('hide')
				.inject($$('#projects .inside')[0])
		}

		var position = $('project-link-' + id).getPosition('projects');
		var size = $('projects').getSize();

		var reverse = (size.x - position.x) < position.x ? true : false;
		position.x -= reverse ? 450 : 13;
		position.y -= 13;

		if(this.projectShadeVisible)
			this.projectShade.tween('left', position.x);
		else
			this.projectShade.setStyle('left', position.x);

		this.projectShade
			.empty()
			.adopt(
				$('project-link-' + id).clone()
					.setStyle('float', reverse ? 'right' : 'left')
					.fade(1)
					.on('click', function(){ location.href = '#!/gallery/' + id })
			)
			.adopt(
				$('project-info-' + id).clone()
					.setStyle('display', 'block')
					.setStyle('margin-left', reverse ? '13px' : '0px')
					.adopt(
						new Element('a', {
							'text': 'View project',
							'href': '#!/gallery/' + id
						}),
						new Element('a', {
							'text': 'Close',
							'class': 'quiet',
							'href': '#!/projects'
						})
							.on('click', this.projectClose.bind(this))
					)
			)
			.morph({
				'opacity': 1,
				'top': position.y
			});
			$$('#projects .inside > .project').fade(0.1);
			this.projectShadeVisible = true;
	},

	projectClose: function(move){
		if(! this.projectShadeVisible)
			return;

		if(move)
			this.projectShade.morph({
				'opacity': 0,
				'top': '-210px'
			});
		else
			this.projectShade.fade('out');

		this.projectShade.dispose.delay(1000, this.projectShade);
		this.projectShade = false;

		$$('#projects .inside > .project').fade(1);
		this.projectShadeVisible = false;
	},

	projectCloseClick: function(e){
		if(this.projectShadeVisible)
			if((this.projectShade != e.target) && (! this.projectShade.hasChild(e.target))) {
				this.projectClose(true);
				e.stop();
			}
	},

	scrollTo: function(hash){
		if(['#', ''].contains(hash)) hash = '#!/home';
		target = hash.replace('#!/', '').split('/');

		if(! ['home', 'projects', 'gallery', 'about'].contains(target[0]))
			return false;

		this.current = target;
		this.checkHomeSlider(target);
		this.checkGallerySlider(target);
		target = this.checkAbout(target);
		this.checkNav(target);
		this.projectClose(false);

		this.scroll.toElement(target[0]);
	},

	checkHomeSlider: function(target){
		$('home-slider').retrieve('vroom')[target[0] == 'home' ? 'activate' : 'deactivate']();
	},

	checkGallerySlider: function(target){
		$$('#gallery .slider').each(function(el){
			el.retrieve('vroom')[el.get('id') == 'gallery-' + target[1] ? 'activate' : 'deactivate']();
		});
	},

	checkAbout: function(target){
		if(target[0] == 'about' && ! target[1])
			target[1] = $$('.about-sub')[0].get('id').split('-')[1];

		$$('.about-sub').each(function(el){
			el.slide((el.get('id') == 'about-' + target[1]) ? 'in' : 'out');
		});

		return target;
	},

	checkNav: function(target){
		$$('.nav li').each(function(el){
			var id = 'nav-' + target[0] + (el.get('id').split('-').length > 2 ? '-' + target[1] : '');
			el[el.get('id') == id ? 'addClass' : 'removeClass']('active');
		});
	},

	reScroll: function(){
		if(this.current) {
			var scroll = $(this.current[0]).getPosition();
			this.scroll.set(scroll.x, scroll.y);
		}
	}
});