window.addEvent('domready',function(){
	document.getElements('div.one div.item:first-child div.thumb img').addEvents({
		'click':veryFirstOpen
	});
	document.getElements('div.thumb img').addEvents({'mouseenter':thumbIn,
	'mouseleave':thumbOut});
	document.getElements('#contact div.content').setStyles({
		'display':'inline',
		'opacity':0
	});
	document.getElements('#contact h2,#ygg').addEvent('click',openContact);
});

var openContact = function(){
	var one = this.getParent('div.one');
	one.addClass('contact-open');
	var content = one.getElement('div.content');
	var contentWidth = content.getSize().x;
	if (Browser.Engine.version == 5 && Browser.Engine.trident){
		contentWidth += 60;
	}
	var oneWidth = one.getSize().x;
	content.set('tween',{duration:200}).tween('opacity',1);
	one.set('tween',{duration:400,
		'onComplete':function(){
			new Fx.Scroll(window).start(one.getPosition().x,window.getScroll().y);
		}
	}).tween('width',$('ygg').getSize().x + 30 + contentWidth);
	resizeContainer($('ygg').getSize().x + 30 + contentWidth,one,200);
	document.getElements('#contact h2,#ygg').removeEvent('click',openContact).addEvent('click',closeContact);
}

var closeContact = function(){
	document.getElements('#contact h2,#ygg').addEvent('click',openContact).removeEvent('click',closeContact);
	var contact = document.getElement('div.contact-open');
	if (contact){
		var closed = 190;
		// damn IE7 wrecking it for everyone!
		if (Browser.Engine.version == 5 && Browser.Engine.trident){
			closed = 180;
		}
		$('contact').set('tween',{duration:400}).tween('width',closed);
		contact.getElement('div.content').set('tween',{duration:200}).tween('opacity',0);
	}
}

var thumbIn = function(){
	if (null == this.get('rel')){
		this.set('rel',this.getStyle('border-bottom-color'));
	}
	this.set('morph',{duration:100}).morph('#'+this.getParent('div.one').get('id')+' .hover');
}
var thumbOut = function(){
	this.set('tween',{duration:400}).tween('border-color',this.get('rel'));
}

var veryFirstOpen = function(){
	// close all the other open "one"s, add veryFirstOpen to their first thumb and run firstOpen()
	var open = document.getElements('div.one-open');
	var o = this.getParent('div.one');
	o.addClass('one-open');
	closeContact.run();
	if (open.length > 0 && !(Browser.Engine.trident && Browser.Engine.version == 4)){
		completelyClose.run([this],open);
	} else {
		firstOpen.run([],this);
	}
}

var completelyClose = function(parent){
	if (this){
		var second = this.getElement('div.preserve:nth-child(2)');
		second.getElement('div.open-close img').dispose();
		second.getElement('div.open-close').grab(new Element('img',{src:'/lib/img/more.png','alt':'open'}).addEvent('click',firstOpen));
		second.getElements('div.main div.aspect').each(function(e){e.dispose()}); // remove any loaded images from the second item aspect
		// remove all non-preserve images
		this.getElements('div.item:not(.preserve)').each(function(e){
			e.dispose();
		});
		this.getElements('div.item').each(function(e){
			e.removeClass('open');
		});
		this.getElement('div.open-close img').dispose();
		this.getElement('div.open-close').grab(new Element('img',{src:'/lib/img/back.png','alt':'close'}).addEvent('click',hide));
		this.getElement('div.content').removeProperty('style');
		this.getElement('div.open-close').setStyle('display','none');
		var closed = 190;
		// damn IE7 wrecking it for everyone!
		if (Browser.Engine.version == 5 && Browser.Engine.trident){
			closed = 180;
		}
		this.removeProperty('rel').removeClass('one-open').removeClass('last').set('tween',{duration:400}).tween('width',closed).getElement('div.thumb img').removeEvent('click',reopen).addEvent('click',veryFirstOpen);
		var ele = this;
		this.getElement('div.item').set('tween',{duration:400,
			'onComplete':function(){
				firstOpen.run([],parent);
			}
		}).tween('width',closed).getElement('div.thumb img');
	}
}

var firstOpen = function(){
	var one = this.getParent('div.one');
	var content = one.getElement('div.content');
	var item = this.getParent('div.item');
	item.addClass('open');
	if (one.get('rel') != null){
		var close = item.getElement('div.open-close');
		close.getElement('img').dispose();
		close.grab(new Element('img',{src:'/lib/img/back.png','alt':'close'}).addEvent('click',hide));
	}
	var nextItem = item.getNext('div.item');
	var allPreviousItems = item.getAllPrevious('div.item');
	var apw = 0; // all previous width
	allPreviousItems.each(function(e){
		apw += e.getSize().x;
	});
	if (nextItem != null){
		nextItem.getElement('div.open-close').setStyle('display','inline');
		nextItem.getElement('div.thumb img').addEvent('click',firstOpen);
	}

	// calculate the width of the internal elements of content
	// all images that are in main, 263 (width of text div) and 142 (width of thumb)
	var getWidth = item.getElements('div.main img,div.text');
	var itemWidth = 0;
	getWidth.each(function(e){
		var wid = e.getSize().x;
		if (wid <= 10){
			alert('Please wait - not all content is loaded');
			return false;
		}
		itemWidth += e.getSize().x + 15; // + margin
	});
	itemWidth += item.getElement('div.thumb img').getSize().x + 15; // thumbnail width + margin
	itemWidth += 20 + 15; // open/close image + margin
	var oneWidth = itemWidth + apw.toInt() + 10;
	if (!one.hasClass('last')){
		oneWidth += nextItem.getElement('div.thumb img').getSize().x + 15; // next thumbnail + margin
		oneWidth += 20 + 15 + 0 + 5; // next open-close + margin
	}
	// firefox 2 hacking :/
	if (Browser.Engine.version == 18 && Browser.Engine.gecko){
		var mainWidth = itemWidth - 202;
		item.getElement('div.main').setStyle('width',mainWidth);
	}
	item.getElement('div.open-close').setStyle('display','inline');
	content.setStyle('width',oneWidth);
	item.setStyle('width',itemWidth);
	resizeContainer(oneWidth+10,one,50);
	one.set('tween',{duration:400,
		onComplete:function(){
			var st = one;
			new Fx.Scroll(window).start(st.getPosition().x,window.getScroll().y);
		}
	}).tween('width',oneWidth);
	item.getElement('div.thumb img').removeEvent('click',firstOpen).removeEvent('click',veryFirstOpen).addEvent('click',hide);
	one.getElements('img[alt="close"]').addEvent('click',hide);
	if (one.hasClass('last')){
		return false;
	}
	var json = new Request.JSON({url:'/lib/data/'+one.get('id')+'.json',
		'onSuccess':function(j){
			var next = one.get('rel') ? one.get('rel').toInt()+1 : 1;
			one.set('rel',next);
			nextItem.setStyle('width',210);
			var nextMain = nextItem.getElement('div.main');
			j.projects[next].images.each(function(i){
				nextMain.grab(new Element('div',{'class':'aspect right'}).grab(
					new Element('img',{src:j.imageDir+i,alt:i})
				));
			});
			var txt = new Element('div',{'class':'text'});
			if (j.projects[next].companyName.trim() != ''){
				txt.grab(
					new Element('h4').set('text','project:')
				).grab(
					new Element('p').set('text',j.projects[next].companyName.trim())
				);
			}
			if (j.projects[next].industry.trim() != ''){
				txt.grab(
					new Element('h4').set('text','industry:')
				).grab(
					new Element('p').set('text',j.projects[next].industry.trim())
				);
			}
			if (j.projects[next].location.trim() != ''){
				txt.grab(
					new Element('h4').set('text','location:')
				).grab(
					new Element('p').set('text',j.projects[next].location.trim())
				);
			}
			if (j.projects[next].whatIDid.trim() != ''){
				txt.grab(
					new Element('h4').set('text','what I did:')
				).grab(
					new Element('p').set('text',j.projects[next].whatIDid.trim())
				);
			}
			if (j.projects[next].blurb.trim() != ''){
				txt.grab(
					new Element('p').set('html',j.projects[next].blurb.trim())
				);
			}
			nextMain.grab(new Element('div',{'class':'aspect right'}).grab(txt));
			nextItem.getElement('div.open-close img').addEvent('click',firstOpen);
			// set up an item below nextItem. man, this is hurting my head!
			if (j.projects[next+1] == undefined){
				one.addClass('last');
			} else {
				var nni = new Element('div',{'class':'item'}); //nextNextItem is a pain to type
				nni.grab(new Element('h3').set('text',j.projects[next+1].title))
					.grab(new Element('div',{'class':'clear'}))
						.grab(new Element('div',{'class':'open-close right'})
							.grab(new Element('img',{'src':'/lib/img/more.png','alt':'open'})))
								.grab(new Element('div',{'class':'thumb right'})
									.grab(new Element('img',{'src':j.imageDir+j.projects[next+1].thumbnail,'alt':j.projects[next+1].companyName}).addEvent('click',firstOpen).addEvents({'mouseenter':thumbIn,
									'mouseleave':thumbOut})))
										.grab(new Element('div',{'class':'main right'}));

				content.grab(nni);
			}
		}
	}).get();
}

var images = function(img,dir){
	var ret = [];
	img.each(function(i){
		ret.include();
	});
	return ret;
}

var resizeContainer = function(oneWidth,one,speed){
	var cont = 0;
	$('container').getElements('div.one').each(function(e){
		if (e.get('id') != one.get('id')){
			cont += e.getSize().x;
		}
	});
	cont += oneWidth;
	$('container').set('tween',{duration:speed}).tween('width',cont);
}

var hide = function(){
	// calculat ethe width of everything in "main" and take it from the width of content,item and one
	var one = this.getParent('div.one');
	var item = this.getParent('div.item');
	var close = item.getElement('div.open-close');
	if (one.hasClass('one-open')){
		item.getElement('div.thumb img').removeEvent('click',hide).addEvent('click',reopen);
		close.getElement('img').dispose();
		close.grab(new Element('img',{src:'/lib/img/more.png','alt':'open'}).addEvent('click',reopen));
	} else {
		close.setStyle('display','inline');
	}
	var main = item.getElement('div.main');
	var mainSize = main.getSize().x;
	var content = one.getElement('div.content');
	var contentSize = content.getSize().x;
	var oneSize = one.getSize().x;
	var itemSize = item.getSize().x;
	var nextItem = item.getNext('div.item');
	var nni = null;
	if (nextItem){
		var nni = nextItem.getNext('div.item');
	}
	if (nni && !nni.hasClass('open')){ // hide it until the animation is over
		nni.setStyle('display','none');
	}
	item.set('tween',{duration:200,
		'onComplete':$empty
	}).tween('width',itemSize-mainSize);
	one.set('tween',{duration:400,
		'onComplete':function(){
			resizeContainer(oneSize-mainSize+10,one,500);
			var st = one;
			if (nextItem){
				st = nextItem;
			}
			new Fx.Scroll(window).start(st.getPosition().x,window.getScroll().y);
			if (nni){
				nni.setStyle('display','inline')
			}
			content.setStyle('width',contentSize-mainSize);
			main.set('rel',mainSize);
		}
	}).tween('width',oneSize-mainSize-10);
}

var reopen = function(){
	var one = this.getParent('div.one');
	var item = this.getParent('div.item');
	var close = item.getElement('div.open-close');
	item.getElement('div.thumb img').removeEvent('click',reopen).addEvent('click',hide);
	close.getElement('img').dispose();
	close.grab(new Element('img',{src:'/lib/img/back.png','alt':'close'}).addEvent('click',hide));
	var main = item.getElement('div.main');
	var mainSize = main.get('rel').toInt();
	var content = one.getElement('div.content');
	var contentSize = content.getSize().x;
	var oneSize = one.getSize().x;
	var itemSize = item.getSize().x;
	content.setStyle('width',contentSize+mainSize);
	item.setStyle('width',itemSize+mainSize);
	resizeContainer(oneSize+mainSize+10,one,50);
	one.set('tween',{duration:400,
		'onComplete':function(){
			var st = item;
			new Fx.Scroll(window).start(st.getPosition().x,window.getScroll().y);
		}
	}).tween('width',oneSize+mainSize-10);
}