var OPEN_POPUP_SPEED	= 400;

var ContactPopup = new Class({
	Implements: [Events],
	Binds: ['close', 'submitClicked', 'onScroll'],
	initialize: function(__emailId, __name, __modc, __enq) {
		this.emailId	= __emailId;
		this.name		= __name;
		this.modc		= __modc;
		this.enq		= __enq;
		this.setup();
	},
	
	containerDiv	: 0,
	formDiv			: 0,
	isOpen			: false,
	
	setup: function() {
		this.containerDiv	= new Element('div');
		this.containerDiv.addClass('lightbox');
		
		this.createHtml();
		
		if (!SUPPORT_OPACITY) {
			this.containerDiv.setStyle('opacity', 0);
			this.formDiv.setStyle('opacity', 0);
			this.formDiv.setAnimationProperties(['opacity'], [OPEN_POPUP_SPEED], [''], [0]);
		}
		
		this.containerDiv.setAnimationProperties(['opacity'], [OPEN_POPUP_SPEED], [''], [0]);
		
		if (!SUPPORT_POSITION_FIXED) {
			window.addEvent('scroll', this.onScroll);
		}
		
		this.open();
		this.resize(window.getSize().x, window.getSize().y);
		
		//$('submitContactForm').addEvent('click', this.submitClicked);
	},
	
	onScroll: function(e) {
		var scrolled		= window.getScroll().y,
			windowHeight	= window.getSize().y,
			formHeight		= this.formDiv.getSize().y,
			diff			= windowHeight - formHeight,
			toTop			= Math.round( scrolled + +(diff * .5) );
			
			this.formDiv.setStyle('margin-top', toTop + 'px');			
	},
	
	createHtml: function() {
		var bgDiv		= new Element('div');
		bgDiv.addClass('bg');
		bgDiv.inject(this.containerDiv);
		
		bgDiv.addEvent('click', this.close);
		
		this.formDiv	= new Element('div');
		this.formDiv.addClass('contact-form-holder');
		this.formDiv.inject(this.containerDiv);
		this.formDiv.set('html', this.getFormHtml());
		
		this.formDiv.getElements('.close-popup-btn').addEvent('click', this.close);
	},
	

	getFormHtml: function() {
		//in the office pages we can have multiple. So let's get the right modc
//		alert(eval('typeOf(modc_'+this.emailId+')'));

		var html	= '<div id="lb-form-holder"><h3 class="green mediumFont">Your message for ' + this.name + '</h3>' + 
			'<form enctype="multipart/form-data" class="contact-form" action="'+shareurl+'" method="post">' +
			'<input type="hidden" value="' + languageid + '" name="languageid" />' +
			'<input type="hidden" value="' + shareurl + '" name="fromurl" />' +
			'<input type="hidden" value="' + this.modc + '" name="modc" />' +
			'<input type="hidden" value="' + this.enq + '" name="enq" />' +
			'<input style="display:none;" type="text" value="' + this.emailId + '" name="emailId" id="emailId" />' +
			'<label for="name">Name  *<p class="pcompulsory">Compulsory</p></label><input type="text" name="name" id="name" />' +
			'<label for="surname">Surname *</label><input type="text" name="surname" id="surname" />' +
			'<label for="company">Company *</label><input type="text" name="company" id="company" />' +
			'<label for="jobtitle">Job title *</label><input type="text" name="jobtitle" id="jobtitle" />' +
			'<label for="email">Email *</label><input type="text" name="email" id="email" />' +
			'<label for="telephone">Telephone</label><input type="text" name="telephone" id="telephone" />' +
			'<label for="msg">Message *</label><textarea name="msg" id="msg"></textarea>' +
			'<label for="fileup">Attach Document</label><br /><input type="file" name="fileup" />' +
			'<label for="submailing"><input type="checkbox" name="submailing" id="submailing" class="checkboxmailing" value="7" />Please send me emails with insights and information from Kantar Worldpanel</label>' +
			'<input type="submit" name="submit" class="big-btn" id="submitContactForm" onClick="javascript:_gaq.push([\'_trackEvent\',\'form_contacto-global\',\'enviar\',\'ok\']);" value="Submit"></form><div class="big-btn close-popup-btn">Cancel</div></div>' +
			'<div id="lb-thanks-holder" style="display:none;"><h3 class="green mediumFont">Thank you</h3><p>Your form has been sent</p><div class="big-btn close-popup-btn">Close </div></div>' +
			'<div id="lb-fail-holder" style="display:none;"><h3 class="green mediumFont">Submit failed</h3><p>Please try again</p></h3><div class="big-btn close-popup-btn">Close </div></div>';
		
		return html;
	},
	
	submitClicked: function() {
		//this.close();
		//return true;
		//if (this.validateForm()) return true;
		//else return false;
	},
	
	showThankyouMsg: function() {
		this.open();
		$('lb-form-holder').setStyle('display', 'none');
		$('lb-fail-holder').setStyle('display', 'none');
		$('lb-thanks-holder').setStyle('display', 'block');
	},
	
	showFailedMsg: function() {
		this.open();
		$('lb-form-holder').setStyle('display', 'none');
		$('lb-thanks-holder').setStyle('display', 'none');
		$('lb-fail-holder').setStyle('display', 'block');
	},
	
	open: function() {
		if (!this.isOpen) {
			this.isOpen	= true;
			this.containerDiv.inject($$('body')[0]);
			var t	= this;
			setTimeout(function() {
				//if (!SUPPORT_POSITION_FIXED) t.onScroll(); //will be called in resize() instead
				t.containerDiv.animateStyle('opacity', 1);
				if (!SUPPORT_OPACITY) t.formDiv.animateStyle('opacity', 1);
				
				var iFrame = new iFrameFormRequest(document.getElement('form'),{
					requiredFieldIds: ['name', 'surname', 'company', 'email', 'jobtitle', 'msg'],
					onFailure: function(){ 
						log('iframe onFailure()');
						t.showFailedMsg();
					}, 
					onComplete: function(response){ 
						log('iframe onComplete()');
						t.showThankyouMsg();
					} 
				});
				
			}, 5);
		}
	},
	
		close: function() {
		if (this.isOpen) {
			this.isOpen	= false;
			this.containerDiv.animateStyle('opacity', 0);
			if (!SUPPORT_OPACITY) this.formDiv.animateStyle('opacity', 0);
			
			var t	= this;
			setTimeout(function() {
				t.containerDiv.dispose();
				t.fireEvent('popupClosed');
			}, OPEN_POPUP_SPEED);
		}
	},
	
	resize: function(w, h) {
		if (!SUPPORT_POSITION_FIXED) {
			var fullPageHeight	= $$('.main')[0].getSize().y + $$('.main')[0].getPosition().y;
			this.containerDiv.setStyle('height', fullPageHeight + 'px');
			this.onScroll();
		} else {
		
			var toTop	= Math.round( (h * .5) - (this.formDiv.getSize().y * .5) );
			this.formDiv.setStyle('margin-top', toTop + 'px');
					
				var el = document.getElementById('navburger');
				var styleObj;
				
				if (typeof window.getComputedStyle != "undefined") {
				    styleObj = window.getComputedStyle(el, null);
				} else if (el.currentStyle != "undefined") {
				    styleObj = el.currentStyle;
				}
				
				var isMobile = false; //initiate as false		
				if (styleObj) {
					if(styleObj.display=='block'){
				   	isMobile = true;
				   }
				}						
				if (isMobile == true) {
	        var fullPageHeight	= $$('.main')[0].getSize().y + $$('.main')[0].getPosition().y;
					this.containerDiv.setStyle('height', fullPageHeight + 'px');
					this.onScroll();
	    	}
		}
	}
	
});