/*
Script: testimonial.js
	Contains <Testimonial>

Author:
	Alan Roemen
	March 12, 2008

Class: Testimonial

Options:
	scriptName: Name of javascript file. Default: 'slidingtabs'
	showEffect: FX Styles effect when showing error form. Default: {duration: 600}
*/

var Testimonial = new Class({
	options: {
		fields: ['name','state','testimonial'],
		preview: 'bottom',	//can set to 'bottom' or 'top'
		showEffect: {
			duration: 500
		},
		hideEffect: {
			duration: 600
		}
	},

	initialize: function(options) {
		this.setOptions(options);
		this.link = $('testimonial_link');
		this.form = $('testimonial_form');
		this.readLink = $('testimonial_read');
		if(this.readLink) {this.readMore(); }
		if(!this.link) return;
		if(!this.form) { this.login(); return; }		
		this.cancel = $('testimonial_cancel');
		this.active = false;

		this.form.setStyles({'overflow':'hidden','opacity':0, 'height':0});
		this.cancel.addEvent('click', function(){ this.hide(); }.bind(this));
		this.link.getParent().setStyle('overflow', 'hidden');

		this.form.addEvent('submit', function(e){
			e = new Event(e);
			if(!this.validate()) e.stop();
		}.bind(this));

		this.link.addEvent('click', function(e){
			e = new Event(e).stop();
			if(this.active) this.hide();
			else this.show();
		}.bind(this));

		// Form Preview
		this.data = new Object();
		this.previewTitle = new Element('div').setHTML('<strong>PREVIEW:</strong>');
		this.preview = new Element('p');
		this.showfx = new Fx.Styles(this.form, this.options.showEffect);
		this.hidefx = new Fx.Styles(this.form, this.options.hideEffect);
		this.form.getFormElements().each(function(field){
			if(this.options.fields.indexOf(field.name) == -1) return;
			field.addEvent('keyup', function(e){ this.showPreview(field); }.bind(this));
			field.addEvent('change', function(e){ this.showPreview(field); }.bind(this));
			this.data[field.name] = field;
		}.bind(this));

		// Error
		this.showError = false;
		this.errorBox = new Element('div', {
			styles: {
				'border': '1px solid #f7aea5',
				'background-color': '#fff2f0',
				'padding': '10px',
				'margin': '0 0 10px 0'
			}
		}).setHTML('<strong>ERROR:</strong> The required fields in red below are missing or invalid<br />');
		this.error = {'border': '1px solid #f7aea5', 'background-color': '#fff2f0'};
	},

	login: function(){
		this.box = $('testimonial_login');
		this.box.setStyles({'overflow': 'hidden', 'opacity': 0, 'height': 0});
		this.active = false;
		this.link.addEvent('click', function(e){
			e = new Event(e).stop();
			if(this.active){
				this.active = false;
				this.box.effects().start({
					'height': 0,
					'opacity': 0
				});
			} else {
				this.active = true;
				this.box.effects().start({
					'height': this.box.getSize().scrollSize.y,
					'opacity': 1
				});
			}
		}.bind(this));
	},

	readMore: function(){
		$$('.testimonial_more').setStyles({'overflow': 'hidden', 'opacity': 0, 'height': 0});
		this.boxMore = $$('.testimonial_more')[0];
		this.readLink.addEvent('click', function(e){
			e = new Event(e).stop();
			if(this.boxMore){
				this.boxMore.effects().start({
					'height': this.boxMore.getSize().scrollSize.y,
					'opacity': 1
				});
				this.boxMore = this.boxMore.getNext();
				if(!this.boxMore.hasClass('testimonial_more')) {
					$('testimonial_read').remove();
				}
			}
		}.bind(this));
	},

	show: function(){
		this.link.getParent().effects().start({'height':0, 'opacity':0});
		this.showfx.start({
			'opacity': 1,
			'height': this.form.getSize().scrollSize.y.toInt()
		}).chain(
			function(){
				if (this.options.preview != 'top'){
					this.preview.injectAfter(this.form);
					this.previewTitle.injectAfter(this.form);
				} else {
					this.previewTitle.injectBefore(this.form);
					this.preview.injectBefore(this.form);
				}
				this.data.testimonial.focus();
			}.bind(this)
		);
	},

	hide: function(){
		this.preview.remove();
		this.previewTitle.remove();

		this.hidefx.start({
			'opacity': .5
		}).chain(
			function(){
				this.link.getParent().effects().start({'opacity':1,'height':this.link.getParent().getSize().scrollSize.y});
				this.hidefx.start({'height': 0, 'opacity': 0});
			}.bind(this)
		);
	},

	showPreview: function(field){
		field.removeProperty('style');
		this.showError = false;
		this.preview.setHTML('"'+this.data.testimonial.value+'"<br /><br /><span>-'+this.data.name.value+', '+this.data.state.value);
	},

	validate: function(){
		this.form.getFormElements().each(function(field){
			if(this.options.fields.indexOf(field.name) == -1) return;
			if(field.value == ''){
				field.setStyles(this.error);
				this.showError = true;
			}
		}.bind(this));
		if(this.showError){
			if(!this.i) { this.form.setStyle('height', this.form.getSize().scrollSize.y.toInt()+50); this.i=true; }
			this.errorBox.injectTop(this.form);
		}
		return !this.showError;
	},

	thankyou: function(){
		var pos = window.getSize().size;
		this.background = new Element('div', {
			'styles': {
				'background-color': '#000000',
				'opacity': '0.7',
				'position': 'fixed',
				'top': '0',
				'left': '0',
				'width': '100%',
				'height': '100%',
				'z-index': '60'
			}
		}).inject(document.body);
		this.loginBox = new Element('div', {
			'styles': {
				'position': 'fixed',
				'top': '200px',
				'left': pos.x/2-225,
				'width': '450px',
				'z-index': '61',
				'font': '11px Arial',
				'background': 'transparent url('+this.options.baseURL+'/box_bck.gif) repeat-x scroll center bottom',
				'border': '1px solid #ECECEC'
			}
		}).inject(document.body);
		var heading = new Element('div', {
			'styles': {
				'background': '#F9F9F9 none repeat scroll 0%',
				'border': '1px solid #FFFFFF',
				'height': '20px',
				'padding': '5px 10px 0 10px',
				'color': '#444444',
				'font-weight': 'bold'
			}
		}).injectInside(this.loginBox);
		new Element('div', {
			'styles': {
				'float': 'left'
			}
		}).setHTML('Testimonial Submission').injectInside(heading);
		new Element('div', {
			'styles': {
				'color': '#f9f9f9',
				'background-color': '#444444',
				'padding': '0 3px',
				'float': 'right',
				'cursor': 'pointer'
			},
			'events': {
				'click': (function(e){
					e = new Event(e).stop();
					this.loginBox.remove();
					this.background.remove();
				}).bindWithEvent(this)
			}
		}).setHTML('X').injectInside(heading);
		new Element('div', {
			'class': 'box_contents',
			'styles': {
				'background-color': '#ffffff',
				'line-height': '18px',
				'padding': '20px'
			}
		}).setHTML('<p style="padding: 0">Thank you. Your testimonial has been received.</p>').injectInside(this.loginBox);

		this.active = false;
	}
});

var testimonial;
Testimonial.implement(new Options, new Events);
window.addEvent('domready', function(){ testimonial = new Testimonial(); });