/** 
* @projectDescription	Comparison-specific javascript
*
* @id	compare.js
*/

var ComparisonControl = Class.create({
	initialize: function (container) {
		this.container = $(container);
		this.rows = this.container.select('.row');
		this.categories = this.container.select('.category');
		this.features = this.container.select('.feature');
		this.toggleBtn = this.container.down('.toggle_master');
		this.heads = this.container.select('.head');
		this.extras = this.container.select('.extra');
		this.isProduct = false;

		if (this.container.hasClassName('product')) {
			this.isProduct = true;
			this.toggleInners = this.container.select('.toggle_content_inner');
		}
		
		this.heights = [];
		//this.closeBtn = this.container.select('.close');
		this.headCount = this.heads.length - 1;
		this.setup();
	},
	setup: function () {
		if(this.isProduct) {
			this.toggleInners.invoke('show');
		}
		var rowHeight = 0;
		this.rows.each(function (el, i) {
			if (!this.container.hasClassName('product')) {
				this.heights.push({
					collapsedHeight: el.down('.toggle_inner').getHeight() + 'px',
					expandedHeight: Math.max(rowHeight, el.getHeight()) + 'px'
				});
				this.timeout = setTimeout(function () {
					new Effect.Morph(el, {
						style: 'height:' + this.heights[i].collapsedHeight,
						duration: 0.2,
						afterFinish: function () {
							clearTimeout(this.timeout);
						}.bind(this)
					});
					el.select('.extra').each(function (extra) {
						new Effect.Fade(extra, { 
							duration: 0.2
						});
					}.bind(this));
					
				}.bind(this), 1000);
			}
			else {
				if (el.down('.fee')) {
					this.heights.push({
						collapsedHeight: el.getHeight() - el.down('.toggle_content_inner').getHeight() + 16 + 'px',
						expandedHeight: el.down('.toggle_inner').getHeight() + el.down('.toggle_content_inner').getHeight() + 'px'
					});
				}
				else {
					this.heights.push({
						collapsedHeight: el.down('.toggle_inner').getHeight() + 'px',
						expandedHeight: el.down('.toggle_inner').getHeight() + el.down('.toggle_content_inner').getHeight() + 'px'
					});
				}
			}
		}.bind(this));
		
		if (this.isProduct) {
			this.toggleInners.invoke('hide');
		}
		
		this.rows.each(function (el, i) {
			this.resetHeight('.row_' + i + ' .cell');
		}.bind(this));
		
		this.categories.each(function (el) {
			if (el.down('.toggle')) {
				el.down('.toggle').observe('click', function () {
					this.toggleClass(el.down('.toggle'));
					this.toggler(el.down('.toggle_content'));
				}.bind(this));
			}
		}.bind(this));
				
		this.features.each(function (el, i) {	
			el.down('.toggle_inner').observe('click', function () {
				this.container.select('.row_' + i + ' .cell').each(function (ele) {
					
					if (el.down('.toggle_inner').hasClassName('active')) {
						new Effect.Morph(ele.up('.row'), {
							style: 'height:' + this.heights[i].collapsedHeight,
							duration: 0.1,
							afterFinish: function () {
								ele.setStyle({
									height: this.heights[i].collapsedHeight
								});
							}.bind(this)
						});

						if(!this.isProduct) {
							ele.select('.extra').invoke('hide');
						}
						else {
							ele.select('.toggle_content_inner').invoke('hide');
						}
					}
					else {
						new Effect.Morph(ele.up('.row'), {
							style: 'height:' + this.heights[i].expandedHeight,
							duration: 0.1
						});
						ele.setStyle({
							height: this.heights[i].expandedHeight
						});
						
						if(!this.isProduct) {
							ele.select('.extra').invoke('show');
						}
						else {
							ele.select('.toggle_content_inner').invoke('show');
						}
					}
				}.bind(this));
				this.toggleClass(el.down('.toggle_inner'));
			}.bind(this, i));
			
		}.bind(this));
		
		/*
		this.closeBtn.each(function (el, i) {
			el.observe('click', this.remove.bind(this, i));
		}.bind(this));
		*/

		this.toggleBtn.stopObserving('click').observe('click', this.dispatch.bind(this));
	
		//this.hideAll();
		if (!this.container.hasClassName('product')) {
			this.categories.each(function (el) {
				el.down('.toggle').addClassName('active');
			});
		}
	},
	toggleClass: function (ele) {
		if (ele.hasClassName('active')) {
			ele.removeClassName('active');
		}
		else {
			ele.addClassName('active');
		}
	},
	toggler: function (content) {
		var toggle = Effect.toggle(content, 'slide', { duration: 0.1 });
	},
	dispatch: function (ev) {
		
		if (this.toggleBtn.innerHTML === 'Expand All') {
			this.showAll();
		}	
		else {
			this.hideAll();
		}
		if (ev) {
			ev.stop();
		}
	},
	showAll: function () {
		this.container.select('.toggle_content', '.extra').invoke('show');			
		this.rows.each(function (el, i) {
			el.setStyle({
				height: this.heights[i].expandedHeight
			});
			this.container.select('.row_' + i + ' .cell').each(function (ele) {
				ele.setStyle({
					height: this.heights[i].expandedHeight
				});
			}.bind(this));
		}.bind(this));		
		this.toggleBtn.addClassName('active');
		this.toggleBtn.innerHTML = 'Hide All';
		this.container.select('.toggle', '.toggle_inner').invoke('addClassName', 'active');
		
		if (this.isProduct) {
			this.toggleInners.invoke('show');
		}
	},
	hideAll: function () {
		//this.container.select('.toggle_content', '.toggle_content_inner').invoke('hide');
		this.container.select('.extra').invoke('hide');
		this.rows.each(function (el, i) {
			el.setStyle({
				height: this.heights[i].collapsedHeight
			});
			this.container.select('.row_' + i + ' .cell').each(function (ele) {
				ele.setStyle({
					height: this.heights[i].collapsedHeight
				});
			}.bind(this));
		}.bind(this));
		this.toggleBtn.removeClassName('active');
		this.toggleBtn.innerHTML = 'Expand All';
		//this.container.select('.toggle', '.toggle_inner').invoke('removeClassName', 'active');
		this.container.select('.toggle_inner').invoke('removeClassName', 'active');
		
		if (this.isProduct) {
			this.toggleInners.invoke('hide');
		}
	},
	remove: function (idx) {
		var prod = this.heads[idx].id;
		this.container.select('.' + prod).each(function (el, i) {
			var removeMe = new Effect.Opacity(el, { 
				from: 1.0,
				to: 0.0,
				duration: 0.8,
				afterFinish: function () {
					el.setStyle({ 
						visibility: 'hidden'
					});
				}.bind(this)
			}); 
		}.bind(this));
		
		this.timeout = setTimeout(function () {
			this.updateZebra(this.heads, idx);
		}.bind(this), 800);
		
		if (this.headCount > 1) {
			this.headCount--;
		}
		else {
			this.closeBtn.invoke('hide');
		}
	},
	updateZebra: function (cell, idx) {
		var i, moveMe;
		i = idx;
		while (i < cell.length) {
			moveMe = new Effect.Move(this.heads[i], {
				mode: 'relative',
				x: -155,
				duration: 0.3
			});		
		
			if (cell[i].hasClassName('alt')) {
				cell[i].removeClassName('alt');
				this.container.select('.prod_' + i + '.cell:not(.feature)').each(function (el) {
					moveMe = new Effect.Move(el, {
						mode: 'relative',
						x: -(el.getWidth()),
						duration: 0.3
					});	
					el.addClassName('alt');
				});
			}
			else {
				cell[i].addClassName('alt');
				this.container.select('.prod_' + i + '.cell:not(.feature)').each(function (el) {
					moveMe = new Effect.Move(el, {
						mode: 'relative',
						x: -(el.getWidth()),
						duration: 0.3
					});	
					el.removeClassName('alt');
				});
			}
			i++;
		}
	},
	resetHeight: function (selector) {
		var max = 0;
		
		this.container.select(selector).each(function (el) {
			max = Math.max(max, el.getHeight());
		}).invoke('setStyle', { height: max + 'px' });
	}
});

/*--------------------------------------------------------------------------*/

var CompareFilter = Class.create({
	initialize: function (container) {
		this.container = $(container);
		this.heads = this.container.select('.head');
		this.trigger = this.container.down('div.filter');
		this.pop = this.container.down('#comparedrop');
		this.options = this.pop.select('input');
		this.submitBtn = this.pop.down('.update');
		this.cancelBtn = this.pop.down('.cancel');
		this.filters = [];
		
		this.setup();
	},
	setup: function () {
		if(this.trigger && this.pop) {
			var popup = new PopUp(this.trigger, this.pop, {cancel: this.cancelBtn});
		}
		
		this.options.each(function (el) {
			this.filters.push({
				checkbox: el,
				type: el.className
			});
		}.bind(this));
		
		this.submitBtn.observe('click', this.commit.bind(this));
	},
	commit: function (ev) {
		if (this.pop.select('input:checked').length < 2) {
			alert("You must choose at least 2 business types to compare");
			return;
		}
		if (this.pop.select('input:checked').length > 4) {
			alert("You cannot compare more than 4 business types");
			return;
		}
	
		this.filters.each(function (filter) {
			if (filter.checkbox.checked) {
				this.add(filter.type);
			}
			else {
				this.remove(filter.type);
			}
		}.bind(this));
		
		this.updateZebra();
		
		if (ev) {
			ev.stop();
		}
	},
	add: function (type) {
		this.container.select('.' + type + ':not(input)').each(function (el, i) {
			var addMe = new Effect.Appear(el, { 
				duration: 0.5,
				afterFinish: function () {
					this.pop.hide();
				}.bind(this)
			}); 
			el.addClassName('on');
		}.bind(this));
	},
	remove: function (type) {
		this.container.select('.' + type + ':not(input)').each(function (el, i) {
			var removeMe = new Effect.Fade(el, { 
				from: 1.0,
				to: 0.0,
				duration: 0.5,
				afterFinish: function () {
					this.pop.hide();
				}.bind(this)
			}); 
			el.removeClassName('on');
		}.bind(this));
	},
	updateZebra: function () {
		var visibleHead = this.container.select('.head.on').invoke('removeClassName', 'alt');
		
		visibleHead.each(function (el, i) {
			var id = el.id;
			
			if ((i + 1) % 2 === 0) {
				el.addClassName('alt');
				this.container.select('.cell.on.' + id).each(function (ele) {
					ele.removeClassName('alt');
				});
			}	
			else {
				el.removeClassName('alt');
				this.container.select('.cell.on.' + id).each(function (ele) {
					ele.addClassName('alt');
				});
			}
		}.bind(this));
	}
});

/*--------------------------------------------------------------------------*/

document.observe('dom:loaded', function () {
	var compare = $('comparison');
	
	/* comparison */
	if (compare) {
		if (!compare.hasClassName('product')) {
			new ComparisonControl(compare);
			new CompareFilter(compare);
		}
	}
});