/* People Grid */


PeopleGrid = Class.create({

	person_select: function(ev) {
		var thumb, currentIndex, id, profile, currentProfile;
		thumb = Event.findElement(ev,'div');
		
		if (!thumb.hasClassName('person'))
			thumb = thumb.up('.person');
		if (!thumb) return false;
		
		id = Number(thumb.id.replace('people_person',''));
		
		profile = $('people_profile'+id);
		if (!profile) return false;
		
		if (profile.visible()) {
			new Effect.Morph(profile, {style:'width:0',afterFinish:function(o){o.element.hide();}});
			this.element.select('.person img').each(function(el){
				if (el.getStyle('opacity')!='1')
					new Effect.Appear(el,{to:1,duration:0.4});
			});
			return;
		}
		currentProfile = this.element.select('.profile').find(function(el){return el.visible();});
		
		new Effect.Appear(thumb,{to:1});
		this.element.select('.person').each(function(el){
				var img = el.down('img') ;
				if (!img) return;
				if (el!=thumb && img.getStyle('opacity')!='0.4')
					new Effect.Fade(img,{to:0.4,duration:0.4});
			});
	
		if (thumb.down('img').getStyle('opacity')!='1')
			new Effect.Appear(thumb.down('img'));
		profile.style.width = '0';
		profile.addClassName('moving');
		profile.down('.scrollUp').hide();
		profile.down('.scrollDown').hide();
		
		profile.show();	
	
		var blurb = profile.down('.blurb'),
			titleEl = profile.down('.title'),
			boxHeight = Element.getHeight(profile),
			mask = profile.down('.mask');

		blurb.style.height = 'auto';
		var maxHeight = boxHeight - (titleEl.offsetTop + Element.getHeight(titleEl)) - 6;
		
		if (Element.getHeight(blurb)>maxHeight) {
			profile.down('.scrollUp').setStyle({top: boxHeight- maxHeight + 6 + 'px'}).show();
			profile.down('.scrollDown').show();
		} else {
			mask && mask.hide()
		}
		blurb.setStyle('height: '+(maxHeight - 13) + 'px; top: '+(boxHeight - maxHeight - 2)+ 'px');
		
		
		if (currentProfile) {
			currentProfile.style.width = '310px';
			new Effect.Morph(currentProfile, {style:'width:0',afterFinish:function(o){o.element.hide();},queue:{position:'end',scope:'profile'}});
			new Effect.Morph(profile, {	style:'width:310px',
										afterSetup:function(o){o.element.show();},
										afterFinish:this.profileAppear,
										queue:{position:'end',scope:'profile'}
									});
		} else {
			profile.show();
			new Effect.Morph(profile, {style:'width:310px',afterFinish:this.profileAppear});
		}
		this.position = Math.floor(thumb.index/2);
		this.scroll_to_position();
	},
	
	profileAppear: function (o) {
		o.element.removeClassName('moving');
	},
	
	position: 0,
	
	grid_scroll: function (left,ev) {
		var delta = (left) ? -1 : 1;
		this.position = this.position+delta;
		this.scroll_to_position();
	},
	
	scroll_to_position: function () {
		if (this.position<0) 
			this.position = 0;
		else if (this.position>Math.ceil(this.peopleCount/2)-1)
			this.position = Math.ceil(this.peopleCount/2)-1;
		var delta = 155;
		if (this.scrollEvent) this.scrollEvent.cancel();
		this.scrollEvent = new Effect.Move(this.inner,{x:delta*-this.position,mode:'absolute'});
	},
	
	blurbScrollUp: function (ev) {
		var el = Event.element(ev).up('div').down('div.blurb');
		this.blurbScroll(el,true);
	},
	blurbScrollDown: function(ev) {
		var el = Event.element(ev).up('div').down('div.blurb');
		this.blurbScroll(el,false);
	},
	blurbScroll: function (blurb,up) {
		new Effect.Scroll(blurb,{y:(up)?-80:80});
	},
	
	closeProfile: function (ev) {
		var el = Event.element(ev).up('div.profile');
		new Effect.Morph(el, {style:'width:0',afterFinish:function(o){o.element.hide();},queue:{position:'end',scope:'profile'}});
		this.element.select('.person img').each(function(el){
				if (el.getStyle('opacity')!='1')
					new Effect.Appear(el,{to:1,duration:0.4});
			});
	},
	
	initialize: function (el) {
		var el = $(el), scrollLeft, scrollRight, thumbIndex, c;
		if (!el) return false;
		
		this.element = el;
		this.inner = el.down('div');
		
		thumbIndex = 0;
		
		el.select('.person').each(function(el){
			var blurb, blurbNatHeight; 
			el.observe('click',this.person_select.bind(this));
			el.index = thumbIndex++;
		}.bind(this));

		el.select('.profile').each(function(el){
			var title = el.down('.title');
			if (title && title.getHeight() > 24)
				el.addClassName('longTitle');
			
			el.hide();
			el = el.down('div');
			el.insert(new Element('div',{'class':'closeProfile'})
							.observe('click',this.closeProfile.bind(this)));
			
			if (blurb = el.down('.blurb')) {
				blurb.style.overflow = 'hidden';
				el.insert(new Element('div',{'class':'scrollUp'})
								.observe('click',this.blurbScrollUp.bind(this)));
				el.insert(new Element('div',{'class':'scrollDown'})
								.observe('click',this.blurbScrollDown.bind(this)));
			}
			
				
		},this);
		
		el.style.overflow = 'hidden';
		scrollLeft = new Element('div',{'class':'scrollButton scrollLeft'})
							.insert(new Element('div',{'class':'top'}))
							.insert(new Element('div',{'class':'bottom'}))
							.observe('mousedown',this.grid_scroll.bind(this,true));
		scrollRight = new Element('div',{'class':'scrollButton scrollRight'})
							.insert(new Element('div',{'class':'top'}))
							.insert(new Element('div',{'class':'bottom'}))
							.observe('mousedown',this.grid_scroll.bind(this,false));
		
		el.insert({top:scrollLeft,bottom:scrollRight});
		
		this.peopleCount = el.select('.person').length;
		
		this.trayWidth = Math.floor(this.peopleCount/2)*160;
		
		c = this.peopleCount;
		if (c<8) {
			if (c%2) {
				this.inner.select('.gridcol').last().insert(new Element('div',{'class':'person placeholder'}));
				c++;
			}
			for (var i=0;i<16-c;i=i+2)
				this.inner.insert(
					new Element('div',{'class':'gridcol'})
						.insert(new Element('div',{'class':'person placeholder'}))
						.insert(new Element('div',{'class':'person placeholder'})));
		}
	}
	
});

document.observe('dom:loaded',function () {
	new PeopleGrid('people_grid');
});