function getXmlHttp( )
{
	var xmlhttp;
	try 
	{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} 
	catch( e ) 
	{
		try 
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} 
		catch( E ) 
		{
			xmlhttp = false;
		}
	}
	if( !xmlhttp && typeof XMLHttpRequest != 'undefined' ) 
	{
		xmlhttp = new XMLHttpRequest( );
	}
	return xmlhttp;
}


function getMainLayoutHeight( )
{
	var mainLayout = document.getElementById( "mainLayout" );
	return mainLayout.offsetHeight;
}

function getMainLayoutWidth( )
{
	var mainLayout = document.getElementById( "mainLayout" );
	return mainLayout.offsetWidth;
}

function showFeedBackForm( )
{
	var siteUrl = "http://tangiblegames.com";
	var closeButtonBaseImage = new Image( 17, 18 );
	closeButtonBaseImage.src = siteUrl + "/images/cross_base.png";
	var closeButtonPushImage = new Image( 17, 18 );
	closeButtonPushImage.src = siteUrl + "/images/cross_pressed.png";
	var sendButtonBaseImage = new Image( 161, 44 );
	sendButtonBaseImage.src = siteUrl + "/images/sendbutton_base.png";
	var sendButtonPushImage = new Image( 161, 44 );
	sendButtonPushImage.src = siteUrl + "/images/sendbutton_push.png";
	var errorImage = new Image( 24, 24 );
	errorImage.src = siteUrl + "/images/error.png";
	var loadingImage = new Image( 120, 40 );
	loadingImage.src = siteUrl + "/images/loading.gif";
	var bigSuccess = new Image( 130, 130 );
	bigSuccess.src = siteUrl + "/images/bigsuccess.png";
	
	
	var fadeToBlack = document.createElement( "div" );
	fadeToBlack.setAttribute( "id", "fadeToBlack" );
	
	var mainLayout = document.getElementById( "mainLayout" );
	mainLayout.appendChild( fadeToBlack );
	
	redrawFeedBackForm( );
	
	var feedBackForm = document.createElement( "div" );
	feedBackForm.setAttribute( "id", "feedBackForm" );
	feedBackForm.setAttribute( "style", "position: static; width: 476px; height: 316px; margin: auto; margin-top: 15%; background-image: url( '/images/contactform.png' ); background-repeat: no-repeat" );
	fadeToBlack.appendChild( feedBackForm );
	
	var closeButton = document.createElement( "div" );
	closeButton.setAttribute( "id", "closeButton" );
	closeButton.setAttribute( "style", "position: relative; top: 12px; width: 17px; height: 18px; margin-left: 14px; background-image: url( '/images/cross_base.png' ); cursor: pointer" );
	closeButton.setAttribute( "onMouseOver", "this.style.backgroundImage = 'url( /images/cross_pressed.png )'" );
	closeButton.setAttribute( "onMouseOut", "this.style.backgroundImage = 'url( /images/cross_base.png )'" );
	closeButton.setAttribute( "onClick", "closeFeedBackForm( )" );
	feedBackForm.appendChild( closeButton );
	
	var subjectTextLine = document.createElement( "input" );
	subjectTextLine.setAttribute( "id", "subject" );
	subjectTextLine.setAttribute( "style", "margin-top: 30px; margin-left: 20px; width: 430px; height: 26px; font-family: Calibri; font-style: italic; font-size: 14px;" );
	subjectTextLine.setAttribute( "value", "Type subject here" );
	subjectTextLine.setAttribute( "onFocus", "if( this.value == 'Type subject here' ) { this.value=''; this.style.fontStyle = 'normal' }" );
	subjectTextLine.setAttribute( "onBlur", "if( this.value == '' ) { this.value='Type subject here'; this.style.fontStyle = 'italic' }" );
	feedBackForm.appendChild( subjectTextLine );
	
	var subjectError = document.createElement( "div" );
	subjectError.setAttribute( "id", "subjectError" );
	subjectError.setAttribute( "style", "visibility:hidden; position: relative; left: 438px; top: -40px; width: 24px; height: 24px; background-image: url( '/images/error.png' );" );
	feedBackForm.appendChild( subjectError );
	
	var messageTextArea = document.createElement( "textArea" );
	messageTextArea.setAttribute( "id", "message" );
	messageTextArea.setAttribute( "style", "margin-left: 20px; margin-top: -14px; width: 428px; height: 150px; font-family: Calibri; font-style: italic; font-size: 14px; resize: none;" );
	messageTextArea.innerHTML = "Type your message here";
	messageTextArea.setAttribute( "onFocus", "if( this.value == 'Type your message here' ) { this.innerHTML=''; this.style.fontStyle = 'normal' }" );
	messageTextArea.setAttribute( "onBlur", "if( this.value == '' ) { this.innerHTML='Type your message here'; this.style.fontStyle = 'italic' }" );
	feedBackForm.appendChild( messageTextArea );
	
	var messageError = document.createElement( "div" );
	messageError.setAttribute( "id", "messageError" );
	messageError.setAttribute( "style", "visibility:hidden; position: relative; left: 438px; top: -164px; width: 24px; height: 24px; background-image: url( '/images/error.png' );" );
	feedBackForm.appendChild( messageError );
	
	var emailTextLine = document.createElement( "input" );
	emailTextLine.setAttribute( "id", "from" );
	emailTextLine.setAttribute( "style", "margin-left: 20px; margin-top: -14px; width: 250px; height: 26px; font-family: Calibri; font-style: italic; font-size: 14px;" );
	emailTextLine.setAttribute( "value", "Type your e-mail adress here" );
	emailTextLine.setAttribute( "onFocus", "if( this.value == 'Type your e-mail adress here' ) { this.value=''; this.style.fontStyle = 'normal' }" );
	emailTextLine.setAttribute( "onBlur", "if( this.value == '' ) { this.value='Type your e-mail adress here'; this.style.fontStyle = 'italic' }" );
	feedBackForm.appendChild( emailTextLine );
	
	var sendButton = document.createElement( "div" );
	sendButton.setAttribute( "id", "sendButton" );
	sendButton.setAttribute( "style", "margin-top: -20px; margin-right: 20px; width: 161px; height: 44px; background-image: url( '/images/sendbutton_base.png' ); cursor: pointer; float: right" );
	sendButton.setAttribute( "onMouseOver", "this.style.backgroundImage = 'url( /images/sendbutton_push.png )'" );
	sendButton.setAttribute( "onMouseOut", "this.style.backgroundImage = 'url( /images/sendbutton_base.png )'" );
	sendButton.setAttribute( "onClick", "sendMail( )" );
	feedBackForm.appendChild( sendButton );
	
	var emailError = document.createElement( "div" );
	emailError.setAttribute( "id", "emailError" );
	emailError.setAttribute( "style", "visibility:hidden; position: relative; left: 258px; top: -40px; width: 24px; height: 24px; background-image: url( '/images/error.png' );" );
	feedBackForm.appendChild( emailError );
	
	document.getElementById( "body" ).setAttribute( "onResize", "redrawFeedBackForm( )" );
}

function redrawFeedBackForm( )
{
	var fadeToBlack = document.getElementById( "fadeToBlack" );
	
	var fadeToBlackWidth;
	var fadeToBlackHeight;
	
	if( getMainLayoutWidth( ) > document.body.clientWidth )
		fadeToBlackWidth = getMainLayoutWidth( );
	else
		fadeToBlackWidth = document.body.clientWidth;
	
	if( getMainLayoutHeight( ) > document.height )
		fadeToBlackWidth = getMainLayoutHeight( );
	else
		fadeToBlackHeight = document.height;
	
	fadeToBlack.setAttribute( "style", "position: absolute; top: 0px; left: 0px; width: " + fadeToBlackWidth + "px; height: " + fadeToBlackHeight + "px; background-image: url( '/images/fadetoblack.png' );" );
}

function closeFeedBackForm( )
{
	var mainLayout = document.getElementById( "mainLayout" );
	var fadeToBlack = document.getElementById( "fadeToBlack" );
	mainLayout.removeChild( fadeToBlack );
}

function validEmail( )
{
	var okMail = new RegExp( "^[A-Za-z0-9_.-]+@{1}[A-Za-z0-9_.-]+$" );
	var str = document.getElementById( "from" ).value;
	return okMail.test( str );
}

function sendMail( )
{
	var okSubject = false;
	var okMessage = false;
	var okFrom = false;
	
	if( document.getElementById( "subject" ).value == "Type subject here" )
	{
		okSubject = false;
		document.getElementById( "subjectError" ).style.visibility = "visible";
	}
	else
	{
		okSubject = true;
		document.getElementById( "subjectError" ).style.visibility = "hidden";
	}
	
	if( document.getElementById( "message" ).value == "Type your message here" )
	{
		okMessage = false;
		document.getElementById( "messageError" ).style.visibility = "visible";
	}
	else
	{
		okMessage = true;
		document.getElementById( "messageError" ).style.visibility = "hidden";
	}
	
	if( !validEmail() )
	{
		okFrom = false;
		document.getElementById( "emailError" ).style.visibility = "visible";
	}
	else
	{
		okFrom = true;
		document.getElementById( "emailError" ).style.visibility = "hidden";
	}
	
	if( okFrom && okMessage && okSubject )
	{
		var xmlhttp = getXmlHttp( );
		xmlhttp.open( "POST", "../modules/SendMail.php", true );
	
		xmlhttp.onreadystatechange = function( )
		{
		  if ( xmlhttp.readyState != 4 ) return;
	
		  clearTimeout( timeout ) // очистить таймаут при наступлении readyState 4
	
		  if ( xmlhttp.status == 200 ) 
		  {
			  hideLoading( );
			  showResponse( xmlhttp.responseText );
		  } 
		  else 
		  {
			  handleError( xmlhttp.statusText ); // вызвать обработчик ошибки с текстом ответа
		  }
		}
		
		xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
		var fromAdress = document.getElementById( "from" );
		var emailSubject = document.getElementById( "subject" );
		var emailText = document.getElementById( "message" );
		
		showLoading( );
		
		xmlhttp.send( "from=" + fromAdress.value + "&subject=" + emailSubject.value + "&message=" + emailText.value );
		// Таймаут 8 секунд
		var timeout = setTimeout( function( ){ xmlhttp.abort( ); handleError( "Time over" ) }, 8000 );
	}
}

function handleError( message ) 
{
  	showResponse( "Error: " + message );
}

function showLoading( )
{
	var FeedBackForm = document.getElementById( "feedBackForm" );
	FeedBackForm.removeChild( document.getElementById( "subject" ) );
	FeedBackForm.removeChild( document.getElementById( "subjectError" ) );
	FeedBackForm.removeChild( document.getElementById( "message" ) );	
	FeedBackForm.removeChild( document.getElementById( "messageError" ) );
	FeedBackForm.removeChild( document.getElementById( "from" ) );
	FeedBackForm.removeChild( document.getElementById( "sendButton" ) );
	FeedBackForm.removeChild( document.getElementById( "emailError" ) );
	var closeButton = document.getElementById( "closeButton" );
	closeButton.removeAttribute( "onClick" );
	
	var loadingImage = document.createElement( "div" );
	loadingImage.setAttribute( "id", "loading" );
	loadingImage.setAttribute( "style", "width: 120px; height: 40px; margin: auto; margin-top: 138px; background-image: url( '/images/loading.gif' )" ); 
	FeedBackForm.appendChild( loadingImage );			
}

function hideLoading( )
{
	var loadingImage = document.getElementById( "loading" );
	var FeedBackForm = document.getElementById( "feedBackForm" );
	FeedBackForm.removeChild( loadingImage );
}

function showResponse( text )
{
	var FeedBackForm = document.getElementById( "feedBackForm" );
	var successIcon = document.createElement( "div" );
	successIcon.setAttribute( "id", "response" );
	successIcon.setAttribute( "align", "centre" );
	successIcon.setAttribute( "style", "margin: auto; color: #999999; width: 250px; font-family: Calibri; text-align: center; font-weight: bold;" );
	successIcon.innerHTML = "<p>" + text + "</p>";
	FeedBackForm.appendChild( successIcon );
	
	var closeButton = document.getElementById( "closeButton" );
	closeButton.setAttribute( "onClick" , "closeFeedBackForm( )" ); 
}