var application = {
	initFakeFileFields: function(options){
		var fileFields = $$('.fileField');
		
		fileFields.each(function(field){
			var input = field.down('input'),
				fakeField = Builder.node('input', { className: 'fakeField', type: 'text' }),
				fakeButton = Builder.node('div', { className: 'fakeButton' });
				
			field.insert({ bottom: fakeField });
			field.insert({ bottom: fakeButton });
						
			input.observe('change', function(event){
				fakeField.value = this.value;
			});
		});
	},
	
	initFakeSelectLists: function(options){
		var selectFields = $$('.select');

		selectFields.each(function(field){
			var oldList = field.down('select'),
				oldOptions = oldList.select('option');
				
			var newList = Builder.node('ul');
			
			$(newList).observe('click', function(){
				this.toggleClassName('open');				
			});
						
			oldOptions.each(function(option){
				var newOption = Builder.node('li', {
					'value': option.readAttribute('value')
				}, option.innerHTML);
				
				$(newOption).addClassName(option.defaultSelected == true ? 'selected' : null);
				
				$(newOption).observe('click', function(){
					oldList.selectedIndex = oldOptions.indexOf(option);
					
					$(newList).up().select('li').each(function(li){
						li.removeClassName('selected');
					});
					
					this.addClassName('selected');
				});
				
				$(newList).insert({ bottom: newOption });
			});
			
			oldList.setStyle({ display: 'none' });
			field.insert({ bottom: newList });
		});
	},
	
	initPortfolioSlider: function(options){
		var scrollers = $$('.scroller');
		
		var scrollItems = function(items, steps){
			items.each(function(item){
				item.setStyle({ left: -steps + 'px' });
			});
		};
		
		scrollers.each(function(scroller){
			var items = scroller.select('.contents .item'),
				itemWidth = items[0].getStyle('width'),
				scrollerWidth = (items.length * parseInt(itemWidth));
				
			var steps = scrollerWidth - document.body.clientWidth;
			
			var slider = new Control.Slider(scroller.down('.knob'), scroller.down('.slider'), {
				onSlide: 	function(value){ scrollItems(items, (value * steps)); },
				onChange: 	function(value){ scrollItems(items, (value * steps)); }
			});
		});
	},
	
	initEasterEgg: function(options){
		var easterContainer = $$('.sidebar'),
			eggContainer = $$('.container');
			
		var easterElement = Builder.node('div', { id: 'whoopsieTrigger' }),
			eggElement = Builder.node('div', { id: 'whoopsieEvent' });
			
		easterContainer[0].insert({ bottom: easterElement });
		eggContainer[0].insert({ bottom: eggElement });
		
		var overEffect, outEffect;
		
		$(easterElement).observe('mouseover', function(){
			overEffect = new Effect.Morph(eggElement, { style: { left: '0px' }, transition: Effect.Transitions.Bounce, beforeStart: function(){ if(outEffect) outEffect.cancel(); } });
		});
		
		$(easterElement).observe('mouseout', function(){
			outEffect = new Effect.Morph(eggElement, { style: { left: '-652px' }, duration: 0.5, beforeStart: function(){ if(overEffect) overEffect.cancel(); } });
		});
	},
	
	initHeaderAnimations: function(options){
		var headerTitle = $('headerTitle'),
			overEffect, outEffect;
		
		headerTitle.observe('mouseover', function(){
			overEffect = new Effect.Morph(this, { 
				style: { left: '-15px', top: '-50px' }, 
				transition: Effect.Transitions.Bounce, 
				duration: 0.8,
				beforeStart: function(){ if(outEffect) outEffect.cancel(); } 
			});
		});
		
		headerTitle.observe('mouseout', function(){
			outEffect = new Effect.Morph(this, { 
				style: { left: '-25px', top: '-58px' }, 
				transition: Effect.Transitions.Bounce, 
				duration: 0.8,
				beforeStart: function(){ if(overEffect) overEffect.cancel(); } 
			});
		});
	}
}

document.observe('dom:loaded', function() {
	application.initFakeFileFields();
	application.initFakeSelectLists();
	application.initEasterEgg();
	application.initPortfolioSlider();
	application.initHeaderAnimations();
});