/* People Grid  for ECD */

PeopleGrid = Class.create({

	profileOpen: false,
	
	person_select: function(ev) {
		var thumb, currentIndex, id, profile, currentProfile;
		
		if (this.busy) return;
		
		thumb = Event.findElement(ev,'div');
		
		if (!thumb.hasClassName('person'))
			thumb = thumb.up('.person');
		if (!thumb) return false;
		
		id = thumb.id.replace('people_person','');
		
		profile = $('people_profile'+id);
		if (!profile) return false;
		
		if (profile.visible()) {
			this.closeProfile(profile);
			return;
		}
		currentProfile = this.element.select('.profile').find(function(el){return el.visible();});
		
		new Effect.Appear(thumb,{to:1});
		this.element.select('.person.active').invoke('removeClassName','active');
		thumb.addClassName('active');
		
		this.element.addClassName('openProfile');
		this.profileOpen = true;
		if (thumb.down('img').getStyle('opacity')!='1')
			new Effect.Appear(thumb.down('img'));
		profile.style.width = '0';
		profile.addClassName('moving');
		if (profile.down('.scrollUp'))
			profile.down('.scrollUp').hide();
		if (profile.down('.scrollDown'))
			profile.down('.scrollDown').hide();
		
		this.busy = true;
		if (currentProfile) {
			currentProfile.style.width = '421px';
			new Effect.Fade(currentProfile);
			new Effect.Morph(currentProfile, {style:'width:0',afterFinish:function(o){o.element.hide();},queue:{position:'end',scope:'profile'}});
			new Effect.Morph(profile, {	style:'width:421px',
										afterSetup:function(o){o.element.show();},
										afterFinish:this.profileAppear.bind(this),
										queue:{position:'end',scope:'profile'}
									});
		} else {
			profile.show();
			new Effect.Morph(profile, {style:'width:421px',afterFinish:this.profileAppear.bind(this)});
		}
		this.position = thumb.up('div.gridcol').index;
		this.scroll_to_position();
	},
	
	profileAppear: function (o) {
		o.element.removeClassName('moving');

		var blurb = o.element.down('.blurb');

		blurb.style.height = 'auto';
		if (blurb.getHeight()>300) {
			blurb.style.height = '285px';
			new Effect.Appear(o.element.down('.scrollUp'));
			new Effect.Appear(o.element.down('.scrollDown'));
		} else {
			blurb.style.height = '300px';
		}
		this.showHideScrollButtons();
		this.busy = false;
	},
	
	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 () {
		var maxPos = (this.profileOpen) ? this.gridColCount-3 : this.gridColCount-6;
		if (maxPos<0) maxPos = 0;
		if (this.position<0) 
			this.position = 0;
		else if (this.position>maxPos)
			this.position = maxPos;
		var delta = 141;
		if (this.scrollEvent) this.scrollEvent.cancel();
		this.scrollEvent = new Effect.Move(this.inner,{x:delta*-this.position,mode:'absolute'});
		
		this.showHideScrollButtons();
	},
	
	showHideScrollButtons: function (instant) {
		var maxPos = (this.profileOpen) ? this.gridColCount-3 : this.gridColCount-6;

		if (instant) {
			if (this.position==0)
				this.scrollLeft.hide();
			else
				this.scrollLeft.show();
			
			if (this.position>=maxPos)
				this.scrollRight.hide();
			else
				this.scrollRight.show();
		} else {
			if (this.position==0)
				new Effect.Fade(this.scrollLeft);
			else
				new Effect.Appear(this.scrollLeft);
			
			if (this.position>=maxPos)
				new Effect.Fade(this.scrollRight);
			else
				new Effect.Appear(this.scrollRight);	
		}
	},
	
	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});
	},
	
	closeProfileClick: function (ev) {
		this.closeProfile(Event.element(ev).up('div.profile'));
	},
	
	closeProfile: function (el) {
		new Effect.Fade(el);
		new Effect.Morph(el, {style:'width:0',afterFinish:function(o){o.element.hide();},queue:{position:'end',scope:'profile'}});
		this.element.select('.person').invoke('removeClassName','active');
		this.profileOpen = false;
		this.element.removeClassName('openProfile');
		this.showHideScrollButtons();
	},
	
	initialize: function (el) {
		var el = $(el), scrollLeft, scrollRight, thumbIndex, c, i = 0,
			colLength = 3, 
			directorCount, directorColLength, directorColCount = 0, lastWasDirector = false,
			gridCol;
		if (!el) return false;
		
		this.element = el;
		el.setStyle({overflow:'hidden'});
		this.inner = el.down('div');
		this.inner.setStyle({width:'5000px'});
		
		this.gridColCount = 0;
		thumbIndex = 0;
		
		directorCount = el.select('.person.director').length;
		directorColLength = 3;//(directorCount%3!=0 && directorCount%2==0) ? 2 : 3;
		
		el.select('.person').each(function(el){
			var blurb, blurbNatHeight, 
				isDirector = el.hasClassName('director'); 
			
			el.index = thumbIndex++;
			
			el.setStyle({marginTop:0});
			
			// if this is the first non-director, add a right margin to the previous gridcol
			if (lastWasDirector && !isDirector && gridCol) {
				i = 0;
				//for (var j=0;j<directorColLength-(gridCol.select('.person').length%directorColLength);j++)
				//	gridCol.insert(new Element('div',{'class':'person placeholder'}));
			}

			if (i == 0 || i%((isDirector)?directorColLength:colLength)==0) {
				gridCol = new Element('div',{'class':'gridcol'});
				gridCol.index = this.gridColCount++;
				if (lastWasDirector && !isDirector && gridCol)
					gridCol.addClassName('leftSpace');
				el.insert({after:gridCol});
				if (isDirector)
					directorColCount++;
			}
			
			gridCol.insert(el);
			gridCol.insert({after:$('people_profile'+el.id.replace('people_person',''))});
			
			
			id = el.id.replace('people_person','');
			if ($('people_profile'+id)) // if there's a profile panel...
				el.observe('click',this.person_select.bind(this));
			else 
				el.addClassName('noProfile');
			
			lastWasDirector = isDirector;
			i++;
		},this);
		
		if (el.select('.person.director').last().up('div').select('.person').length < directorColLength)
			el.select('.person.director').last().insert({after:new Element('div',{'class':'person placeholder'})});
		
		el.select('.profile').each(function(el){
			el.setStyle({float:'left'});
			el.hide();
			el = el.down('div');
			el.insert(new Element('div',{'class':'closeProfile'})
							.observe('click',this.closeProfileClick.bind(this)));

			blurb = el.down('.blurb');
			blurb.style.overflow = 'hidden';
			blurb.style.height = '300px';
			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)));
		}.bind(this));
		
		el.style.overflow = 'hidden';
		this.scrollLeft = new Element('div',{'class':'scrollButton scrollLeft'})
							.observe('mousedown',this.grid_scroll.bind(this,true));
		this.scrollRight = new Element('div',{'class':'scrollButton scrollRight'})
							.observe('mousedown',this.grid_scroll.bind(this,false));
		
		this.scrollLeft.clonePosition(this.element,{setWidth:false,offsetLeft:-22});
		this.scrollLeft.style.left = '0';
		this.scrollLeft.style.top = '0';
		this.scrollRight.clonePosition(this.element,{setWidth:false});
		this.scrollRight.style.left = '';
		this.scrollRight.style.right = '0';
		this.scrollRight.style.top = '0';
		
		el.insert({after:this.scrollLeft});
		el.insert({after:this.scrollRight});
		
		this.peopleCount = el.select('.person').length;
		
		this.trayWidth = Math.floor(this.peopleCount/2)*160;
		
		c = this.peopleCount;
		if (c < 33-(3-directorColLength)*directorColCount) {
			// fill up the last gridCol
			for (var i=0;i<3-gridCol.select('.person').length;i++) {
				gridCol.insert(
					new Element('div',{'class':'gridcol'})
						.insert(new Element('div',{'class':'person placeholder'}))
						.insert(new Element('div',{'class':'person placeholder'}))
						.insert(new Element('div',{'class':'person placeholder'})));
				c++;
			}
			
			for (var i=0;i<33-c;i=i+3)
				this.inner.insert(
					new Element('div',{'class':'gridcol'})
						.insert(new Element('div',{'class':'person placeholder'}))
						.insert(new Element('div',{'class':'person placeholder'}))
						.insert(new Element('div',{'class':'person placeholder'})));
		}
		this.showHideScrollButtons(true);
	}
	
	
});

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