var mySite = {
    grads: new Array(),
	curr: null,
	wrap: null,
	toggles: null,
	toggled: null,
	wrappers: null,
	load: function() {
		this.wrap		= $('diseasewrap')
		this.toggles 	= $$('.diseasearea')
		this.toggled 	= $$('.diseasecontent')
		this.wrappers	= $$('.diseaseItem')
		
		this.toggles.each(function(el) {
		    this.grads.push(el.get('id'))
		}.bind(this))
		
		
		this.toggled.each(function(el) {
			el.slide('hide')
		})
		
		this.wrappers.each(function(el, i) {
			el.addEvent('click', function() {
				this.toggle(i)
			}.bind(this))			
		}.bind(this))
	},
	toggle: function(id) {
		if (this.curr == id) return
		
		this.wrappers.removeEvents('click')
		
		if (this.curr != null) {
			var offset = this.toggled[this.curr].getSize().y - this.toggled[id].getSize().y
			if (offset > 0) {
				this.wrap.tween('height', this.wrap.getSize().y - offset)
			}
			else if (offset < 0) {
				this.wrap.tween('height', this.wrap.getSize().y + (offset*(-1)))
			}
				
			this.toggled[this.curr].slide('hide')
			this.toggles[this.curr].getElement('a').removeClass('on')				
		}
		this.toggles[id].getElement('a').addClass('on')		
		this.wrappers[id].inject(this.wrap, 'bottom')
				
		this.updateGrads()
						
		myFx = new Fx.Slide(this.toggled[id]).toggle().chain(function() {
			this.wrap.setStyle('height', this.wrap.getSize().y)
			
		    this.wrappers.each(function(el, i) {
			    el.addEvent('click', function() {
				    this.toggle(i)
			    }.bind(this))			
		    }.bind(this))			
						
		}.bind(this))
		this.curr = id
	},
	updateGrads: function() {
		var togs = $$('.diseasearea')
		
		togs.each(function(el, i) {
			el.set('id', this.grads[i])
			
		}.bind(this))
	}
}

window.addEvent('domready', function() {
	mySite.load();
})