// JavaScript Document

window.onload = function( )
{
	inputHelp( ); 
	showHideForm( ); 
	positionSignupForm( );
}

window.onresize = function( )
{
	positionSignupForm( );
}

window.onscroll = function( )
{
	positionSignupForm( );
}

function sfPreloadImages( )
{
	var siteUrl = "http://tangiblegames.com";
	var alreadysignedup = new Image( );
	alreadysignedup.src = siteUrl + "/images/modules/signupForm/alreadysignedup.png";
	var signup_bg = new Image( );
	signup_bg.src = siteUrl + "/images/modules/signupForm/signup_bg.png";
	var signup_base = new Image( );
	signup_base.src = siteUrl + "/images/modules/signupForm/signup_base.png";
	var signup_highlight = new Image( );
	signup_highlight.src = siteUrl + "/images/modules/signupForm/signup_highlight.png";
	var triangle_down = new Image( );
	triangle_down.src = siteUrl + "/images/modules/signupForm/triangle_down.png";
	var triangle_up = new Image( );
	triangle_up.src = siteUrl + "/images/modules/signupForm/triangle_up.png";

}

var inputInterface = '';
if( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPod/i ) ) 
		inputInterface = '<input type="text" id="signupFormInputForIphone"></input>';
else
	inputInterface = '<input type="text" id="signupFormInput"></input>';

function readCookie( name ) 
{
	var nameEQ = name + "=";
	var ca = document.cookie.split( ';' );
	for( var i=0; i < ca.length; i++ ) 
	{
		var c = ca[ i ];
		while( c.charAt(0)==' ' ) 
			c = c.substring( 1, c.length ); 
		if( c.indexOf( nameEQ ) == 0 )
			return c.substring( nameEQ.length, c.length );
	}
	return null;
}

var subscribed = false;

var inputText = '';
var signupShown;
if( readCookie( 'tgSubscribed' ) == 'true' )
	signupShown = true;
else
	signupShown = false;
var signupFormHiddenHtml = '<div class="horizontalInputLayout" id="bottomText"><div id="hideShowButton" onclick="showHideForm( )"></div><div id="signupText"></div></div>';

var signupFormShownHtml = '';

function showHideForm( )
{
	var signupForm = document.getElementById( 'signUpForm' );
	if( signupShown )
	{
		if( document.getElementById( 'signupFormInputForIphone' ) )
			inputText = document.getElementById( 'signupFormInputForIphone' ).value;
		if( document.getElementById( 'signupFormInput' ) )
			inputText = document.getElementById( 'signupFormInput' ).value;
		signupForm.style.height = "32px";
		signupForm.style.backgroundImage = "url( '/images/modules/signupForm/signup_hidden_bg.png' )";
		signupForm.innerHTML = signupFormHiddenHtml;
		document.getElementById( 'bottomText' ).style.paddingTop = "10px";
		document.getElementById( 'hideShowButton' ).style.backgroundImage = "url( '/images/modules/signupForm/triangle_up.png' )";
		positionSignupForm( );
		signupShown = false;
	}
	else
	{
		signupForm.style.top = ( signupForm.offsetTop - 37 ).toString( ) + 'px';
		signupForm.style.height = "69px";
		signupForm.style.backgroundImage = "url( '/images/modules/signupForm/signup_bg.png' )";
		signupForm.innerHTML = signupFormShownHtml;
		document.getElementById( 'bottomText' ).style.paddingTop = "18px";
		document.getElementById( 'hideShowButton' ).style.backgroundImage = "url( '/images/modules/signupForm/triangle_down.png' )";
		if( document.getElementById( 'signupFormInputForIphone' ) )
			document.getElementById( 'signupFormInputForIphone' ).setAttribute( 'value', inputText );
		if( document.getElementById( 'signupFormInput' ) )
			document.getElementById( 'signupFormInput' ).setAttribute( 'value', inputText );
		inputHelp( );
		if( errorShown )
			document.getElementById( 'errorBubble' ).style.display = 'block';
		signupShown = true;
		positionSignupForm( );
		
		if( readCookie( 'tgSubscribed' ) == 'true' )
		{
			var bottomText = document.getElementById( 'bottomText' );
			bottomText.style.marginTop = '-3px';
		}
		if( subscribed == true )
		{
			var bottomText = document.getElementById( 'bottomText' );
			bottomText.style.marginTop = '-8px';
		}
	}
}
	
if( readCookie( 'tgSubscribed' ) == 'true' )
{
	signupFormShownHtml = '<div class="horizontalInputLayout"><div id="alreadySignedup"></div></div><div class="horizontalInputLayout" id="bottomText"><div id="hideShowButton" onclick="showHideForm( )"></div><div id="signupText"></div></div>';
	signupShown = true;
	showHideForm( );
}
else
	signupFormShownHtml = '<div class="horizontalInputLayout" id="inputAndSubmit"><div id="input">' + inputInterface + '</div><div id="errorBubble"></div><div id="signupButton" onclick="subscribeMail( )"></div></div><div class="horizontalInputLayout" id="bottomText"><div id="hideShowButton" onclick="showHideForm( )"></div><div id="signupText"></div></div>';
	
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 inputHelp( )
{
	var mailInputIphone = document.getElementById( 'signupFormInputForIphone' );
	var mailInput = document.getElementById( 'signupFormInput' );
	if( mailInputIphone )
	{
		if( mailInputIphone.value == '' || mailInputIphone.value == 'Type your e-mail adress here' )
		{
			mailInputIphone.setAttribute( 'value', 'Type your e-mail adress here' );
			mailInputIphone.setAttribute( 'style', 'font-family: Calibri; font-style: italic; font-size: 14px;' );
		}
		mailInputIphone.setAttribute( 'onFocus', 'if( this.value == "Type your e-mail adress here" ) { this.value=""; this.style.fontStyle = "normal" }' );
		mailInputIphone.setAttribute( 'onBlur', 'if( this.value == "" ) { this.value="Type your e-mail adress here"; this.style.fontStyle = "italic" }' );
	}
	if( mailInput )
	{
		if( mailInput.value == '' || mailInput.value == 'Type your e-mail adress here' )
		{
			mailInput.setAttribute( 'value', 'Type your e-mail adress here' );
			mailInput.setAttribute( 'style', 'font-family: Calibri; font-style: italic; font-size: 14px;' );
		}
		mailInput.setAttribute( 'onFocus', 'if( this.value == "Type your e-mail adress here" ) { this.value=""; this.style.fontStyle = "normal" }' );
		mailInput.setAttribute( 'onBlur', 'if( this.value == "" ) { this.value="Type your e-mail adress here"; this.style.fontStyle = "italic" }' ); 	}
}

function positionSignupForm( )
{
	var clientHeight = ( typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight );
	var clientWidth = ( typeof window.innerWidth != 'undefined' ? window.innerWidth : document.body.offsetWidth );
	clientHeight += window.pageYOffset;
	var signupForm = document.getElementById( 'signUpForm' );
	signupForm.style.top = ( clientHeight - signupForm.offsetHeight ).toString( ) + 'px';
	signupForm.style.left = ( ( clientWidth / 2 ) - ( 403 / 2 ) ).toString( ) + 'px';
	signupForm.style.display = 'block';
	
	var errorBubble = document.getElementById( 'errorBubble' );
//		errorBubble.style.top = ( clientHeigh - 20 ).toString( ) + 'px';
}


function validateEmail( email )
{
	var okMail = new RegExp( "^[A-Za-z0-9_.-]+@{1}[A-Za-z0-9_.-]+$" );
	return okMail.test( email );
}

var errorShown = false;

function subscribeMail( )
{
	var mailInputIphone = document.getElementById( 'signupFormInputForIphone' );
	var mailInput = document.getElementById( 'signupFormInput' );
	var email = '';
	if( mailInputIphone )
		email = mailInputIphone.value;
	if( mailInput )
		email = mailInput.value;
	
	if( !validateEmail( email ) )
	{
		document.getElementById( 'errorBubble' ).style.display = 'block';
		errorShown = true;
	}
	else
	{
		document.getElementById( 'errorBubble' ).style.display = 'none';
		errorShown = false;
		
		var xmlHttp = getXmlHttp( );
		xmlHttp.open( 'GET', '../../modules/MailSubscription.php?email=' + email, true );
		xmlHttp.onreadystatechange = function( )
		{
		 	if( xmlHttp.readyState != 4 ) return;
			clearTimeout( timeout ) // очистить таймаут при наступлении readyState 4
			if( xmlHttp.status == 200 ) 
		  	{
				hideInput( );
				showResponse( xmlHttp.responseText );
				if( xmlHttp.responseText == 'subscribed' )
				{
					document.cookie = 'tgSubscribed=true; path=/';
					signupFormShownHtml = '<div class="horizontalInputLayout"><div id="signedupSuccessful"></div></div><div class="horizontalInputLayout" id="bottomText"><div id="hideShowButton" onclick="showHideForm( )"></div><div id="signupText"></div></div>';
					subscribed = true;
					hideShowButton = document.getElementById( 'hideShowButton' );
					hideShowButton.setAttribute( 'onClick', 'showHideForm( )' );
				}
				if( xmlHttp.responseText == 'alreadySubscribed' )
				{
					document.cookie = 'tgSubscribed=true; path=/';
					signupFormShownHtml = '<div class="horizontalInputLayout"><div id="alreadySignedup"></div></div><div class="horizontalInputLayout" id="bottomText"><div id="hideShowButton" onclick="showHideForm( )"></div><div id="signupText"></div></div>';
					hideShowButton = document.getElementById( 'hideShowButton' );
					hideShowButton.setAttribute( 'onClick', 'showHideForm( )' );
				}
			} 
			else 
				handleError( xmlHttp.statusText ); // вызвать обработчик ошибки с текстом ответа
		}
		
		xmlHttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
		hideInput( );
		hideShowButton = document.getElementById( 'hideShowButton' );
		hideShowButton.setAttribute( 'onClick', '' );
		xmlHttp.send( null );
		var timeout = setTimeout( function( ){ xmlHttp.abort( ); handleError( "Time over" ) }, 8000 );
	}
}
	
function hideInput( status )
{
	var inputElement = document.getElementById( 'inputAndSubmit' );
	inputElement.innerHTML = '<div id="emptyStatus"></div>';
}

function showResponse( text )
{
	if( text == 'subscribed' )
	{
		var inputElement = document.getElementById( 'inputAndSubmit' );
		inputElement.innerHTML = '<div id="signedupSuccessful"></div>';	
		var bottomText = document.getElementById( 'bottomText' );
		bottomText.style.marginTop = '-8px';
	}
	if( text == 'alreadySubscribed' )
	{
		var inputElement = document.getElementById( 'inputAndSubmit' );
		inputElement.innerHTML = '<div id="alreadySignedup"></div>';	
		var bottomText = document.getElementById( 'bottomText' );
		bottomText.style.marginTop = '-3px';
	}
}

window.onscroll = positionSignupForm;