// Copyright 2007 Internetrix (http://www.internetrix.net)

// -------------------------------------------------------
// Scripts for the multisection box's on certain pages
// -------------------------------------------------------

function box_toggle(tab_id, index) {
	var tabs_content = document.getElementsByClassName('tab_content');
	var tabs = document.getElementsByClassName('tab_bttn');
	var buttons = document.getElementsByClassName('box_button_container');
	
	// Hide all
	for(var i=0;i<tabs_content.length;i++){
		tabs_content[i].style.display = 'none';
		tabs[i].id = '';
		buttons[i].style.display = 'none';
	}
	
	$(tab_id).style.display = 'block';
	tabs[index].id = 'focus_bttn';
	buttons[index].style.display = 'block';
}

function show_form(bttn_id, index) {
	var popup = $('popup_form');
	populate_form(bttn_id, index);
	show_form_area();
	Element.scrollTo('fade_area');
}

function show_form_area(){
	var popup = $('popup_form');
	var fade = $('fade_area');
	
	// Hack for IE, basically setting the fade area to 100% height whilst in a XHTML doctype
	// wont work as intended unless its parent (body in this case) is also 100%. Would have
	// expected FF to behave this way as well except for the bit where the element is absolute
	// usually meaning its special and ignores parent heights etc
	var body = document.getElementsByTagName('body')[0];
	body.style.height = '100%';
	
	Effect.Appear(fade, {queue: {position: 'end', scope: 'fade_queue'}, to: 0.5});
	Effect.BlindDown(popup,{queue: {position: 'end', scope: 'fade_queue'}});
	fade.onclick=hide_form_area;
}

function hide_form_area(){
	var popup = $('popup_form');
	var fade = $('fade_area');
	
	Effect.BlindUp(popup,{queue: {position: 'end', scope: 'fade_queue'}});
	Effect.Fade(fade, {queue: {position: 'end', scope: 'fade_queue'}});
}
function populate_form(bttn_id,index){
	var popups = document.getElementsByClassName('popup_content');
	
	for(var i=0;i<popups.length;i++) {
		popups[i].style.display = 'none'
	}
	popups[index].style.display = 'block'
}

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// Ajax and related stuff for form popups
var Ajax_handlers = {
	onCreate: function() {
		document.getElementsByClassName('ajax_loader').each(function(element){element.show('Ajax_active')});
	},
	
	onComplete: function() {
		if(Ajax.activeRequestCount == 0)
		{
			document.getElementsByClassName('ajax_loader').each(function(element){element.hide('Ajax_active')})
		}
	}
};
Ajax.Responders.register(Ajax_handlers);

function validate(form){
	if (Element.hasClassName(form.firstname, 'required') && form.firstname.value == '') {
		alert('Please enter your firstname.');
		form.firstname.focus();
		return false;
	}
	if (Element.hasClassName(form.surname, 'required') && form.surname.value == '') {
		alert('Please enter your surname.');
		form.surname.focus();
		return false;
	}
	if (Element.hasClassName(form.email, 'required') && form.email.value == '') {
		alert('Please enter your email address.');
		form.email.focus();
		return false;
	}
	if (Element.hasClassName(form.company, 'required') && form.company.value == '') {
		alert('Please enter your company/organisation name.');
		form.company.focus();
		return false;
	}
	return true;
}

function ajax_submit(form){
	var action_string = Form.serialize(form);
	new Ajax.Request('/cgi-bin/ajax/engage.cgi',
		{asynchronous: true, evalScripts: true, method: 'post',
			onSuccess: function(){form_submitted(form)},
			postBody: action_string});
	
	var formAction = Form.getInputs(form,'hidden','action')[0].value;
	var formProduct = Form.getInputs(form,'hidden','product')[0].value;
	
	urchinTracker('/signup/'+formAction+'/'+formProduct);
	
}

function form_submitted(form){
	// Form id of the form 'popup_form_content_demo'
	var form_content = $(form.id);
	var tab_label = form.id.split("_")[3];
	var thankyou = $('thankyou_message_' + tab_label);
	var resize_duration = 1, appear_delay = 1.5, scale = 0;
	var form_height = Element.getHeight('form_' + tab_label);
	
	$('form_' + tab_label).style.height = form_height + 'px';
	
	scale = parseInt(19000/form_height);
	
	Effect.Fade(form_content, {queue: {position: 'end', scope: 'fade_queue'}});
	
	new Effect.Scale('form_'+ tab_label, scale ,{scaleX: false, delay: resize_duration});
	
	Effect.Appear(thankyou, {queue: {position: 'end', scope: 'fade_queue', delay: appear_delay}});
	
}