var Nouincolor = new Class({
	initialize: function(options){
		this.nav = $$('#this-is-soooocial a');
		this.wrapper = $('content');
		this.captionCont = $('caption');
		this.imageAssets = ['static/img/me.png', 'static/img/full-sprites.png'];
		this.folio = $('portfolio-trigger');
		this.pf = $('portfolio');
		this.pfc = $('portfolio-cont');
		this.logo = $$('h1');
		this.social;
		
		this.prepareTurkey();
		this.getAssets();
	},
	
	prepareTurkey: function(){
		// hide the wrapper
		this.wrapper.fade('hide');
		
		this.pfc.set('opacity', 0);
		this.folio.getParent().setStyles({
			opacity: 0,
			position: 'relative'
		});
		
		// create the tooltip
		this.tip = this.createTip();
		
		// animation options
		this.tip.set('morph', {duration: 330});
		this.tip.getElement('span').set('tween', {link: 'cancel', transition: 'quad:out'});
		
		// default tooltip styles
		this.tip.setStyles({
			opacity: 0,
			left: -175,
			top: 90
		});
		
		// hide 'em all
		this.nav.fade('hide');
		
		// the nav parent
		this.social = this.nav.getParent();

		// add events
		this.social.addEvents({
			mouseover: this.toggleTip.bind(this),
			mouseout: this.toggleTip.bind(this)
		});
		
		this.portfolio();
		
		this.logo.set('tween', {duration: 600, transition: 'back:out'});
		this.folio.addEvent('click', this.moveSplash.bind(this));
		
		if (window.location.hash && window.location.hash.indexOf('portfolio')){
			this.folio.fireEvent('click');
		}
	},
	
	showAll: function(){
		// show wrapper
		this.wrapper.fade(1);

		// show social links
		this.toggleSocial.delay(500, this);
		
		(function(){
			this.fade(1);
		}).delay(400, this.folio.getParent());
		
	},
	
	moveSplash: function(e){
		// e.stop();
		
		this.logo.tween('margin-top', 0);
		this.showPortfolio.delay(700, this);
	},
	
	showPortfolio: function(){
		this.pfc.morph({
			'opacity': 1,
			'top': [30, 0]
		});
	},
	
	portfolio: function(){
		var i = 0;
		var items = $$('#portfolio li');
		var els = $$('#portfolio-pagination a');
		var self = this;
		var back = els[0];
		var next = els[1];
		
		this.pf.set('tween', {duration: 550, transition: 'quad:out'});
		
		back.fade(0);
		
		this.updateCaption(this.pf.getElements('li')[0].getElement('a'))
		
		els.each(function(el){
			
			el.addEvents({
				click: function(e) {
					e.stop();
					
					if (this.get('rel').contains('next')){
						i -= 1;
						
					} else {
						i += 1;
					}
					
					if ((items.length + i) - 1 <= 0){
						next.fade(0);
					} else {
						next.fade(1);
					}
					
					if ((items.length + i) <= 0){
						i = i + 1;
					}
					
					if (i >= 0){
						back.fade(0);
						i = 0;
					} else {
						back.fade(1);
					}
					
					self.pf.tween('left', 580 * i);
					
					self.updateCaption(self.pf.getElements('li')[(-i)].getElement('a'));
				}
			});
		});
	},
	
	updateCaption: function(currentEl){
		this.captionCont.setOpacity(0);
		this.captionCont.set('html', '<h2><a href="{link}">{title}</a></h2><p>{capt}</p>'.substitute({
			title: currentEl.get('title'),
			capt: currentEl.get('data-desc'),
			link: currentEl.get('href')
		}));
		
		(function(){
			this.fade(1);
		}).delay(100, this.captionCont);
	},
	
	getAssets: function(){
		new Asset.images(this.imageAssets, {onComplete: this.showAll.bind(this)});
	},
	
	toggleSocial: function(){
		this.nav.each(function(el, i){
			// show single
			this.toggleDrop.delay(100 * i, el);
		}, this);
	},
	
	toggleDrop: function(){	
		// set animation options
		this.set('morph', {transition: 'bounce:out', duration: 1300});
		
		// fade in
		this.fade('in');
		
		// drop down
		this.morph({top: 0});
	},
	
	createTip: function(){
		// create elements
		var wrapper = new Element('span', {'id': 'oskar-says', 'class': 'sprite'});
		var inner = new Element('span', {'class': 'sprite'}).inject(wrapper);
		var bottom = new Element('em', {'class': 'osBottom sprite'}).inject(inner);
		
		// inject the tooltip
		wrapper.inject(this.nav.getParent('ul')[0], 'after');
		
		return wrapper;
	},
	
	toggleTip: function(e){
		var target = $(e.target);
		
		// get the type
		var type = target.getParent().get('class');
		
		// are we over or out
		var mode = e.type.contains('over');

		// set the text
		if (mode && target.get('tag').contains('a')){
			this.tip.getElement('span').tween('background-position', '-524px ' + target.get('data-pos').toString() + 'px');
		}
		
		// appear the tip
		this.tip.morph({
			opacity: (mode ? 1 : 0),
			left: (mode ? -160 : -175),
			top: (mode ? 75 : 90)
		});
	}
});

window.addEvent('domready', function(){
	new Nouincolor();
});