document.addEvent('domready', function(){
	s = window.getSize();
	if(s.y > 600){
		mTop = s.y - 600;
		$('planetProterra').setStyle('margin-top', mTop/7);
	}
	greenDims = [
		418, // new w
		452, // new h
		328, // old w
		356, // old h
		-30, // new mt 
		90, // new ml
		90, // old mt
		210 // old ml
	];
	new fragment('greenGrid', $('greenFrag'), '', greenDims);
	orangeDims = [
		395, // new w
		326, // new h
		289, // old w
		238, // old h
		378, // new mt 
		120, // new ml
		358, // old mt
		210 // old ml
	];
	new fragment('orangeGrid', $('orangeFrag'), '', orangeDims);
	blueDims = [
		274, // new w
		387, // new h
		201, // old w
		285, // old h
		365, // new mt 
		535, // new ml
		325, // old mt
		495 // old ml
	];
	new fragment('blueGrid', $('blueFrag'), '', blueDims);
	purpleDims = [
		563, // new w
		531, // new h
		414, // old w
		389, // old h
		-90, // new mt 
		420, // new ml
		0, // old mt
		400 // old ml
	];
	new fragment('purpleGrid', $('purpleFrag'), '', purpleDims);
	$$('.summary').each(function(item){
		item.setStyle('opacity', 0);
	});
});

window.addEvent('resize', function(){
	s = window.getSize();
	if(s.y > 600){
		mTop = s.y - 600;
		$('planetProterra').setStyle('margin-top', mTop/2);
	}
});
fragment = new Class({
	initialize: function(gridClass, fragment, href, dims){
		this.active = false;
		this.animating = false;
		this.image = fragment.getChildren('img')[0];
		this.fragment = fragment;
		this.summary = $(fragment.id+'Summary');
		this.summaryTop = this.summary.getStyle('margin-top');
		this.gridClass = gridClass;
		this.observe();
		this.fx = new Fx.Morph(this.image, {
			duration: 750, 
			link:'ignore', 
			transition: Fx.Transitions.Back.easeOut
		});
		this.summaryFx = new Fx.Morph(this.summary, {
			duration:450,
			link:'ignore'
		});
		this.s = this.image.getStyles('margin-top', 'margin-left', 'height', 'width');
		this.d = dims;
	},
	observe : function(){
		es = $$('.'+this.gridClass);
		es.push(this.summary);
		es.each(function(item){
			item.addEvents({
				mouseenter: function(){
					if(item != this.summary){
						if(this.active == false){
							if(this.animating){
								this.fx.cancel();
								this.summaryFx.cancel();
							}
							this.entryAnimation();
						}
						this.active = true;
					}
				}.bind(this),
				mouseleave: function(event){
					$(event.relatedTarget);
					if(!event.relatedTarget.hasClass(this.gridClass) && !event.relatedTarget.hasClass('summary')){	
						if(this.active){
							if(this.animating){
								this.fx.cancel();
								this.summaryFx.cancel();
							}
							this.exitAnimation();
						}
						this.active = false;
					}
				}.bind(this)
			});
		}.bind(this));
	},
	entryAnimation : function(){
		this.animating = true;
		this.fragment.setStyle('z-index', '10');
		this.summary.setStyles({
			'display':'block',
			'margin-top':(this.summaryTop.toInt()-30)+'px'
		});
		this.fx.start({
		    'margin-top': [this.image.getStyle('margin-top'), this.d[4]],
		    'margin-left': [this.image.getStyle('margin-left'), this.d[5]],
		    'height': [this.image.getStyle('height'), this.d[1]],
		    'width': [this.image.getStyle('width'), this.d[0]]
		}).chain(function(){
			this.fragment.setStyle('z-index', '7');
			this.animating = false;
		}.bind(this));
		this.summaryFx.start({
			'opacity':[this.summary.getStyle('opacity'),1],
			'margin-top':[this.summary.getStyle('margin-top'), this.summaryTop]
		});
	},
	exitAnimation : function(){
		this.animating = true;
		this.fragment.setStyle('z-index', '7');
		this.fx.start({
		    'margin-top': [this.image.getStyle('margin-top'),this.d[6]],
		    'margin-left': [this.image.getStyle('margin-left'), this.d[7]],
		    'height': [this.image.getStyle('height'), this.d[3]],
		    'width': [this.image.getStyle('width'), this.d[2]]
		}).chain(function(){
			this.fragment.setStyle('z-index', '5');
			this.animating = false;
		}.bind(this));
		this.summaryFx.start({
			'opacity':[this.summary.getStyle('opacity'),0],
			'margin-top':[this.summary.getStyle('margin-top'), (this.summaryTop.toInt()+30)+'px']
		}).chain(function(){
			this.summary.setStyles({
				'display':'none',
				'margin-top':this.summaryTop
			});
		}.bind(this));
	}
});