window.addEvent('domready', function() {
	$('navi').getElements('a').setStyle('background-image', 'none');
	
	$(document.body).getElements('a[rel=ext]').addEvent('click', function(e) {
		e.stop();
		window.open(this.href);
	});
	
	if ($('s')) {
		$('s').addEvents({
			'focus': function(){
				if (this.value == 'Search') {
					this.value = '';
				}
			},
			'blur': function(){
				if (this.value == '') {
					this.value = 'Search';
				}
			}
		});
	}
	
	if ($('port')) {
		$('port-thumbs').getElements('li').setStyle('opacity', 0.2);
		$('port-thumbs').getElements('a.current').getParent('li').setStyle('opacity', 1);
		
		$('port-thumbs').getElements('a').each(function(el, index) {
			el.addEvents({
				'mouseenter': function() {
					this.getParent('li').get('tween', {property: 'opacity', duration: 200}).start(1);
					
					var cover = new Element('div', {'class': 'cover'}).inject(this);
					this.tip = new Element('div', {'class': 'tip'}).inject(cover);
					this.tip.setStyle('opacity', 0);
					this.container = new Element('div', {'class': 'tip-content'}).inject(this.tip);
					this.container.set('html', this.getElement('img').get('title'));
					this.getElement('img').erase('title');
					this.tip.get('tween', {property: 'opacity', duration: 250}).start('0.95');
				},
				'mouseleave': function() {
					if (! this.hasClass('current')) {
						this.getParent('li').get('tween', {property: 'opacity', duration: 200}).start(0.2);
					}
					
					if (this.getElement('div.cover')) {
						var title = this.getElement('div.tip-content').get('html');
						this.getElement('img').set('title', title);
						this.getElement('div.cover').destroy();
					}
				},
				'click': function(e) {
					e.stop();
					$('port-thumbs').getElement('a.current').removeClass('current');
					$('port-thumbs').getElements('a').fireEvent('mouseleave');
					
					var viewPosition = index * -700;
					$('port-items').get('tween', {property: 'margin-left', duration: 500, transition: Fx.Transitions.Quart.easeOut }).start(viewPosition);
					
					this.addClass('current');
					this.fireEvent('mouseenter');
					this.fireEvent('mouseleave');
				}
			});
		});
	}
	
	function bindFadeEffect(parent, myClass) {
		$(parent).getElement('li.' + myClass).addEvents({
			'mouseenter': function() {
				if (!this.getElement('div')) {
					var el = new Element('div', {'class': myClass + '-hover'});
					el.inject(this.getElement('a'), 'after');
					el.setStyle('opacity', 0.1);
				}
				else {
					el = this.getElement('div');
				}
				el.get('tween', {property: 'opacity', duration: 200}).start(1);
			},
			'mouseleave': function() {
				this.getElement('div').get('tween', {property: 'opacity', duration: 2500, complete: this.destroy}).start(0);
			}
		});
	}
	
	bindFadeEffect('navi', 'nav-home');
	bindFadeEffect('navi', 'nav-work');
	bindFadeEffect('navi', 'nav-blog');
	bindFadeEffect('navi', 'nav-info');
});