if(!$chk(HKM)) {
 HKM = {};	
}

HKM.TellAFriend = new Class({

	options: {
		// Overlay Styles
		backgroundClass: null,
		backgroundColor: '#f5f5f5',
		backgroundOpacity: 0.9,

		// Form Styles
		formContainerClass: null,
		formContainerBackgroundColor: '#FFFFFF',
		formContainerBorderStyle: '1px solid #cccccc',
		formContainerWidth: 460,
		formContainerHeight: 274,
		formLabelColor: '#48575e',
		formLabelErrorColor: '#F00',
		
		//Events
		onDidSend: Class.empty,
		onDidCancel: Class.empty,
		onWillShow: Class.empty,
		onDidShow: Class.empty,
		onWillHide: Class.empty,
		onDidHide: Class.empty,
		
		// Errors
		fillOutFieldErrorMessage: 'Errors in form'
	},

	overlayTarget: null,

	formTarget: null,

	overlay: null,

	formContainer: null,

	currentProductID: null,
	
	visible: false,

	initialize: function(overlayTarget, formTarget, options) {

		this.setOptions(options);

		this.formTarget = formTarget;
		this.overlayTarget = overlayTarget;

		window.addEvent('resize', this.windowResizeHandler.bindAsEventListener(this));

		this.setUp();
	},

	setUp: function() {
		if(window.gecko) {
			var lists = $ES('ul', this.formTarget);
			//for(var i=0;i<lists.length;i++) {
				
			//}
			lists[0].setStyle('width', '48%');
			lists[1].setStyle('width', '50%');
		}
	},
	
	windowResizeHandler: function() {
	
		if((this.overlay !== null || this.formContainer !== null) && this.visible === true) {
			// Set dimensions
			var coordinates = this.overlayTarget.getCoordinates();

			this.overlay.setStyles({
											'width': coordinates.width,
											'height': coordinates.height,
											'left': coordinates.left,
											'top': coordinates.top
																});

			var left = this.getOverlay().getStyle('left').toInt() + ((this.getOverlay().getStyle('width').toInt() / 2) - (this.options.formContainerWidth / 2));
			var top = this.getOverlay().getStyle('top').toInt() + ((this.getOverlay().getStyle('height').toInt() / 2) - (this.options.formContainerHeight / 2));

			this.formContainer.setStyles({
											'top': top,
											'left': left
										});

			return this.formContainer;
			
		}
		
	},

	getOverlay: function() {
		
		if(this.overlay === null) {
			this.overlay = new Element('div');
			if($chk(this.options.backgroundClass)) {
				this.overlay.addClass(this.options.backgroundClass);
			}
			this.overlay.setStyles({
									'backgroundColor': this.options.backgroundColor,
									'opacity': 0,
									'display': 'block',
									'position': 'absolute',
									'z-index': 998
									});
		}

		// Set dimensions
		var coordinates = this.overlayTarget.getCoordinates();

		this.overlay.setStyles({
										'width': coordinates.width,
										'height': coordinates.height,
										'left': coordinates.left,
										'top': coordinates.top
															});

		return this.overlay;
	},

	getFormContainer: function() {

		if(this.formContainer == null) {
			this.formContainer = new Element('div');
			if($chk(this.options.formContainerClass)) {
				this.overlay.addClass(this.options.formContainerClass);
			}
			
			this.formContainer.adopt(this.formTarget);
			this.formTarget.setStyles({'display':'block', 'visibility':'visible'});
			
			// Get send and cancel button
			var sendButton = $ES('.sendFriendButton', this.formContainer).pop();
			var cancelButton = $ES('.cancelFriendButton', this.formContainer).pop();
			
			if(sendButton) {
				sendButton.removeEvents('click');
				sendButton.addEvent('click', this.sendButtonCliked.bindAsEventListener(this));
				sendButton.setAttribute('onclick', 'return false;');
			}
			
			if(cancelButton) {
				cancelButton.removeEvents('click');
				cancelButton.addEvent('click', this.cancelButtonCliked.bindAsEventListener(this));				
				cancelButton.setAttribute('onclick', 'return false;');
			}
			
			this.formContainer.setStyles({
											'display': 'block',
											'position': 'absolute',
											'width': this.options.formContainerWidth,
											'height': this.options.formContainerHeight,
											'z-index': 999,
											'backgroundColor':this.options.formContainerBackgroundColor,
											'border': this.options.formContainerBorderStyle
										});
										
		}

		var left = this.getOverlay().getStyle('left').toInt() + ((this.getOverlay().getStyle('width').toInt() / 2) - (this.options.formContainerWidth / 2));
		var top = this.getOverlay().getStyle('top').toInt() + ((this.getOverlay().getStyle('height').toInt() / 2) - (this.options.formContainerHeight / 2));

		this.formContainer.setStyles({
										'top': top,
										'left': left
									});

		return this.formContainer;
	},
	
	sendButtonCliked: function(e) {
		
		if(this.validateForm()) {		
			this.disableForm();
			$ES('.reposeSuccessIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
			$ES('.reposeFailureIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
			$ES('.indicator', this.formContainer).pop().setStyles({'display':'block', 'visibility':'visible'});
			this.fireEvent('onDidSend', [this.getFormData()]);
		}
	},
	
	requestSucceeded: function(e) {
		this.enableForm();
		$ES('.indicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		$ES('.reposeSuccessIndicator', this.formContainer).pop().setStyles({'display':'block', 'visibility':'visible'});
		$ES('.reposeFailureIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		
		this.hideSuccessIndicator.delay(1000, this);
	},
	
	hideSuccessIndicator: function() {
		var disappearFX = new Fx.Styles($ES('.reposeSuccessIndicator', this.formContainer).pop(), {onComplete: this.hide.bind(this)});
		disappearFX.start({'opacity':[1, 0]});
	},
	
	cancelButtonCliked: function(e) {
		this.fireEvent('onDidCancel');
	},

	requestFailed: function(errorMessage) {
		this.enableForm();
		$ES('.indicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		$ES('.reposeSuccessIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		$ES('.reposeFailureIndicator', this.formContainer).pop().setStyles({'display':'block', 'visibility':'visible'});
	
		this.displayError(errorMessage);
		
		this.hideFailureIndicator.delay(3000, this);
	},
	
	hideFailureIndicator: function() {
		var disappearFX = new Fx.Styles($ES('.reposeFailureIndicator', this.formContainer).pop());
		disappearFX.start({'opacity':[1, 0]});	
	},
	
	
	startForProduct: function(productID) {
		this.enableForm();
		this.resetForm();
		this.currentProductID = productID;
		this.showLayer();
	},
	
	getFormData: function() {

		var inputElms = $ES('input', this.formTarget);
		inputElms.extend($ES('textarea', this.formTarget));

		var postData = {};
		for(var i=0;i<inputElms.length;i++) {
			postData[inputElms[i].name] = inputElms[i].value.trim().replace(/\n/g, "<br/>").replace(/\r/g, "");
		}
		postData['productId'] = this.currentProductID;
		return postData;
	},
	
	disableForm: function() {
		
		var inputElms = $ES('input', this.formTarget);
		inputElms.extend($ES('textarea', this.formTarget));
		
		for(var i=0;i<inputElms.length;i++) {
			inputElms[i].disabled = true;
		}
		
		// Get send and cancel button
		var sendButton = $ES('.sendFriendButton', this.formContainer).pop();
		var cancelButton = $ES('.cancelFriendButton', this.formContainer).pop();
		
		if(sendButton) {
			sendButton.removeEvents('click');
			sendButton.setStyle('opacity', '0.5');
		}
		
		if(cancelButton) {
			cancelButton.removeEvents('click');				
			cancelButton.setStyle('opacity', '0.5');
		}
	},
	
	resetForm: function() {
		
		this.hideError();
		
		var inputElms = $ES('input', this.formTarget);
		inputElms.extend($ES('textarea', this.formTarget));
		
		for(var i=0;i<inputElms.length;i++) {
			inputElms[i].value = '';
		}
	
		// Get send and cancel button
		var sendButton = $ES('.sendFriendButton', this.formContainer).pop();
		var cancelButton = $ES('.cancelFriendButton', this.formContainer).pop();
		
		// 
		$ES('.indicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		$ES('.reposeSuccessIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		$ES('.reposeFailureIndicator', this.formContainer).pop().setStyles({'display':'none', 'visibility':'hidden'});
		

		if(sendButton) {
			sendButton.removeEvents('click');
			sendButton.addEvent('click', this.sendButtonCliked.bindAsEventListener(this));
			sendButton.setStyle('opacity', '1');
		}

		if(cancelButton) {
			cancelButton.removeEvents('click');
			cancelButton.addEvent('click', this.cancelButtonCliked.bindAsEventListener(this));				
			cancelButton.setStyle('opacity', '1');
		}
		
	},

	enableForm: function() {
		var inputElms = $ES('input', this.formTarget);
		inputElms.extend($ES('textarea', this.formTarget));
		
		for(var i=0;i<inputElms.length;i++) {
			inputElms[i].disabled = false;
			 var label = $ES('label' ,inputElms[i].getParent()).pop();
			if(label) {
				label.setStyle('color', this.options.formLabelColor);
			}
			
		}
		// Get send and cancel button
		var sendButton = $ES('.sendFriendButton', this.formContainer).pop();
		var cancelButton = $ES('.cancelFriendButton', this.formContainer).pop();
		if(sendButton) {
			sendButton.removeEvents('click');
			sendButton.addEvent('click', this.sendButtonCliked.bindAsEventListener(this));
			sendButton.setStyle('opacity', '1');
		}

		if(cancelButton) {
			cancelButton.removeEvents('click');
			cancelButton.addEvent('click', this.cancelButtonCliked.bindAsEventListener(this));				
			cancelButton.setStyle('opacity', '1');
		}
	},
	
	validateForm: function() {
		var inputElms = $ES('input', this.formTarget);
		inputElms.extend($ES('textarea', this.formTarget));
		var valid = true;
		for(var i=0;i<inputElms.length;i++) {
			var label = $ES('label' ,inputElms[i].getParent()).pop();			
			if(inputElms[i].value === '') {
				// Get the label
				label.setStyle('color', this.options.formLabelErrorColor);
				valid = false;
			} else if(inputElms[i].name.test('Address')) { // Email address	
				// Test if it is a correct email
				var mailRegex = new RegExp('^[a-z0-9][-._a-z0-9]+@[a-z0-9][-a-z0-9]+[.](([a-z]{2,4})|([a-z]{2,3}[.][a-z]{2,3}))$');
				var mailMatch = inputElms[i].value.match(mailRegex);
				if(mailMatch === null || mailMatch[0] !== inputElms[i].value) {
					var label = $ES('label' ,inputElms[i].getParent()).pop();
					label.setStyle('color', this.options.formLabelErrorColor);
					valid = false;
				} else {
					label.setStyle('color', this.options.formLabelColor);
				}
			} else {
				label.setStyle('color', this.options.formLabelColor);
			}
		}
		
		if(!valid) {
			this.displayError(this.options.fillOutFieldErrorMessage);
		} else {
			this.hideError();
		}
		
		return valid;
	},
	
	displayError: function(errorMessage) {
		
		var headerString = $ES('.headerString', this.formContainer).pop();		
		var errorString = $ES('.error', this.formContainer).pop();		

		headerString.setStyles({'display':'none', 'visibility':'hidden'});
		
		errorString.setText(errorMessage);
		errorString.setStyles({'display':'block', 'visibility':'visible'});

	},
	
	hideError: function() {
		
		var headerString = $ES('.headerString', this.formContainer).pop();		
		var errorString = $ES('.error', this.formContainer).pop();		
		
		errorString.setStyles({'display':'none', 'visibility':'hidden'});
		headerString.setStyles({'display':'block', 'visibility':'visible'});

	},
	
	showLayer: function() {
		this.visible = true;
		this.fireEvent('onWillShow', [this]);

		if(this.getOverlay().getParent() === null) {
			this.getOverlay().injectInside($(document.body));
		}

		var appearFx = new Fx.Styles(this.getOverlay(), {onComplete: this.showLayerDone.bindAsEventListener(this)});
		appearFx.start({'opacity':[this.getOverlay().getStyle('opacity'), this.options.backgroundOpacity]});
	},

	showLayerDone: function() {

		this.showForm();
	},

	showForm: function() {

		if(this.getFormContainer().getParent() === null) {
			this.getFormContainer().injectInside($(document.body));
		}
		this.getFormContainer().setStyles({'display':'block', 'visibility':'visible'});
		this.showFormDone();
	},

	showFormDone: function() {
		this.fireEvent('onDidShow', [this]);	
	},

	hide: function() {
		this.fireEvent('onWillHide', [this]);

		if(this.getOverlay().getParent() === null) {
			this.fireEvent('onDidHide', [this]);
			return;
		}

		this.getFormContainer().setStyles({'display':'none', 'visibility':'hidden'});

		var disappearFx = new Fx.Styles(this.getOverlay(), {onComplete: this.hideDone.bindAsEventListener(this)});
		disappearFx.start({'opacity':[this.getOverlay().getStyle('opacity'), 0]});
	},

	hideDone: function() {
		this.fireEvent('onDidHide', [this]);
		this.getOverlay().remove();
		this.visible = false;
	}
	
});
HKM.TellAFriend.implement(new Options);
HKM.TellAFriend.implement(new Events);