$.blockUI.defaults.css = { color:'#fff', backgroundColor:'#000', opacity:'0.8', fontWeight:'bold', borderTop:'2px solid #fff', borderBottom:'2px solid #fff', width:'auto', paddingLeft:'2em', paddingRight:'2em', paddingTop:'0.5em', paddingBottom:'0.5em' };
$.blockUI.defaults.message = "";
$.blockUI.defaults.overlayCSS = { padding:0, backgroundColor:'#000', opacity:'0.5' };


function clearErrorFields( idDialog, idForm )
{
	$( idDialog + " #dialog_error" ).html( "" );
	$( idDialog + " #dialog_error" ).css( "display", "none" );

	$( idDialog + " " + idForm + " INPUT" ).css( "border", "" );
	$( idDialog + " " + idForm + " INPUT" ).css( "backgroundColor", "" );
}

function setErrorField( idDialog, idField, msg )
{
	$( idDialog + " #dialog_error" ).html( msg );
	$( idDialog + " #dialog_error" ).css( "display", "block" );
	
	if( idField.length )
	{
		$( idDialog + " " + idField ).css( "border", "1px solid red" );
		$( idDialog + " " + idField ).css( "padding", "1px" );
		$( idDialog + " " + idField ).css( "backgroundColor", "#ffebec" );
		$( idDialog + " " + idField ).focus();
	}
}

function setField( idDialog, idField, msg )
{
	$( idDialog + " #dialog_error" ).html( msg );
	$( idDialog + " #dialog_error" ).css( "display", "block" );
	$( idDialog + " #dialog_error" ).css( "color", "green" );
	
	if( idField.length )
	{
		$( idDialog + " " + idField ).focus();
	}
}



function displaySettingsMenu( link )
{
	// Display the menu, hiding the login
	$("#login_popup,#login_popup_shadow").hide();

	// Ensure that if anywhere other than the menu clicked, we close the menu...
	$("html").bind( "click", function(e) {
			//alert( e.text() );
			$("#settings_menu,#settings_menu_shadow").hide();
			$("html").unbind( "click" );
		} );


//	var objShadow = document.getElementById("settings_menu_shadow");
 	var objContent = document.getElementById("settings_menu");
	if( !objContent /*&& !objShadow*/ )
	{
		objContent = document.createElement("div");
		objContent.id = "settings_menu";
		objContent.className = "popup_menu";
		objContent.style.display = "none";
		document.getElementsByTagName("body")[ 0 ].appendChild( objContent );

//		objShadow = document.createElement("div");
//		objShadow.id = "settings_menu_shadow";
//		objShadow.className = "popup_shadow";
//		objShadow.style.display = "none";
//		objShadow.appendChild( objContent );
//
//		document.getElementsByTagName("body")[ 0 ].appendChild( objShadow );
	}

	
	this.menu = "";
	this.addSeparator = function()
	{
		menu += "<div class='sep'><div class='line'></div></div>";
	}
	this.startGroup = function( heading )
	{
		if( this.menu.length ) addSeparator();
		menu += "<ul class='settings'>";

		if( startGroup.arguments.length && heading.length ) menu += "<li><span class='heading'>" + heading + "</span></li>";
	}
	this.endGroup = function()
	{
		menu += "</ul>";
	}
	this.addCommand = function( str )
	{
		menu += "<li>" + str + "</li>";
	}

	startGroup( "Personal Details" );
	addCommand( "<a onclick='updateEmail()' id='setting-email'>Update your e-mail/password...</a>" );
	endGroup();

	startGroup( "Channels" );
	if( profileIsValid )
	{
		addCommand( "<a href='/choose-country.asp?redir=" + escape( window.location.href ) + "' id='setting-change-provider'>Change your country...</a>" );
		addCommand( "<a href='/choose-provider.asp?redir=" + escape( window.location.href ) + "' id='setting-change-provider'>Change your provider...</a>" );
		addCommand( "<a href='/choose-region.asp?redir=" + escape( window.location.href ) + "' id='setting-change-provider'>Change your region...</a>" );
	}
	else
	{
		addCommand( "<a href='/choose-country.asp?redir=" + escape( window.location.href ) + "' id='setting-change-provider'>Change your channels...</a>" );
	}
	endGroup();

//	startGroup();
//	addCommand( "<a onclick='logOut()'>Log Out</a>" );
//	endGroup();

	objContent.innerHTML = menu;


	var pos = $("#settings-link").offset();
	var width = 225;
	var left = pos.left - (width-70);
	var top = pos.top + 20;

	objContent.style.width = gm_px( width );
	objContent.style.height = "auto";
	objContent.style.left = gm_px( left );
	objContent.style.top = gm_px( top );
//	objShadow.style.left = gm_px( left );
//	objShadow.style.top = gm_px( top );

//	objShadow.style.width = gm_px( width );
//	objShadow.style.height = gm_px( height );
//	objShadow.style.left = gm_px( left + 5 );
//	objShadow.style.top = gm_px( top + 5 );


	$("#settings_menu,#settings_menu_shadow").slideToggle( 100 );
}


var emailDialogPos = [ 0, 0 ];
function updateEmail()
{
	$("#settings_menu,#settings_menu_shadow").hide();
	$("html").unbind( "click" );

 	var obj = document.getElementById("update_email_dialog");
	if( !obj )
	{
		obj = document.createElement("div");
		obj.id = "update_email_dialog";
		document.getElementsByTagName("body")[ 0 ].appendChild( obj );
	}

	var updatingProfile = profileIsValid && profileEmail.length;
	if( updatingProfile )
	{
		$("#update_email_dialog").html( "<p>So that you can still access your account if a mistake is made we will not change your e-mail immediately, instead we will send you an e-mail with a link that will make the change when clicked.</p><form name='frmSetDetails' id='frmSetDetails' onsubmit='updateAccountSave();return false;'><table><tr style='vertical-align:bottom'><td><p><label for='email'>E-mail:</label></p></td><td><input id='email' name='email' value='" + profileEmail + "' maxlength='255' size=30></td></tr><tr style='vertical-align:bottom'><td></td><td><p><a href='' onclick='return resetPassword()'>Click here to reset your password</a></p></td></tr></table><input type='submit' style='display:none'></form><div id='dialog_error'></div>" );
	}
	else
	{
		$("#update_email_dialog").html( "<p>Although not necessary, entering an e-mail and password allows you to use your account on other machines and web browsers by logging in.</p><p>A valid e-mail is also needed if you wish to use other features of the tv guide that require one, like receiving e-mail alerts (planned for the future).</p><form name='frmSetDetails' id='frmSetDetails' onsubmit='createAccountSave();return false;'><table><tr style='vertical-align:bottom'><td><p><label for='email'>E-mail:</label></p></td><td><input id='email' name='email' value='' maxlength='255' size=30></td></tr><tr style='vertical-align:bottom'><td><p><label for='password'>Password:</label></p></td><td><input id='password' type='password' name='password' value='' maxlength='50' size=12></td></tr></table><input type='submit' style='display:none'></form><div id='dialog_error'></div>" );
	}

	var width = 350;
	var height = updatingProfile ? 250 : 300;
	emailDialogPos[ 0 ] = ($(window).width() - width) / 2;
	emailDialogPos[ 1 ] = ($(window).height() - height) / 2;
	$("#update_email_dialog").dialog({ 
		title: "Update Personal Details",
		width: width,
		height: height,
		resizable: false,
		bgiframe: true,
		zIndex: 1200,
		modal: true,
		position: emailDialogPos,
		drag: function(ev, ui) {
			emailDialogPos[0] = ui.position.left;
			emailDialogPos[1] = ui.position.top;
		},
		overlay: { backgroundColor:"#000", opacity:0.3 },
		buttons: {
								"Save": updatingProfile ? updateAccountSave : createAccountSave, 
								"Cancel": function() { $(this).dialog("close"); } 
						 },
		close: function() {
//				$.unblockUI();
//				$("#setting-email").removeClass("current");
//				$("#settings_menu,#settings_menu_shadow").slideToggle( 100 );
			}
	});
}


function createAccountSave()
{
	$(".ui-dialog").unblock(); 
	clearErrorFields( "#update_email_dialog", "#frmSetDetails" );

	var emailValid = gm_isEmailValid( $("#update_email_dialog #email").val() );
	var passLen = $("#update_email_dialog #password").val().length;
	if( emailValid && passLen )
	{
		$(".ui-dialog").block( {  
				message: "<p style='font-size:0.9em;'><img src='/i/loading.gif' width='16' height='16' align='absmiddle' style='padding-right:5px;' />Updating, please wait...</p>"
		} ); 

		if( g_AJAXPool != undefined ) g_AJAXPool.Request( "/do-create-account.asp", { postdata: getFormPostData('frmSetDetails', true), callback: onSaveDetailsCallback, type: 'POST', bText: true } );
	}
	else
	{
		var field = (emailValid == 0) ? "#email" : "#password";
		var msg;
		if( !emailValid && !passLen )
			msg = "You need to enter a valid e-mail address and password, or click Cancel";
		else if( !emailValid )
			msg = "You need to enter a valid e-mail address, or click Cancel";
		else
			msg = "You need to enter a password, or click Cancel";

		setErrorField( "#update_email_dialog", field, msg );
	}
}
function updateAccountSave()
{
	clearErrorFields( "#update_email_dialog", "#frmSetDetails" );

	if( gm_isEmailValid( $("#update_email_dialog #email").val() ) )
	{
		$(".ui-dialog").block( {  
				message: "<p style='font-size:0.9em;'><img src='/i/loading.gif' width='16' height='16' align='absmiddle' style='padding-right:5px;' />Updating, please wait...</p>"
		} ); 

		if( g_AJAXPool != undefined ) g_AJAXPool.Request( "/do-update-email-request.asp", { postdata: getFormPostData('frmSetDetails', true), callback: onChangeEmailCallback, type: 'POST', bText: true } );
	}
	else
	{
		setErrorField( "#update_email_dialog", "#email", "You must enter a valid e-mail address, or click Cancel" );
	}
}

function onSaveDetailsCallback( strAjaxResponse, args )
{
//	alert( strAjaxResponse );
	$(".ui-dialog").unblock(); 

	if( strAjaxResponse.length )
	{
		eval( strAjaxResponse );
		if( login.succeeded )
		{
			window.location.reload( true );
		}
		else
		{
			setErrorField( "#update_email_dialog", login.errorField, login.msg );
		}
	}
}

function onChangeEmailCallback( strAjaxResponse, args )
{
//	alert( strAjaxResponse );
	$(".ui-dialog").unblock(); 

	if( strAjaxResponse.length )
	{
		eval( strAjaxResponse );
		if( login.succeeded )
		{
			setField( "#update_email_dialog", login.focusField, login.msg );
		}
		else
		{
			setErrorField( "#update_email_dialog", login.errorField, login.msg );
		}
	}
}





function resetPassword()
{
 	var obj = document.getElementById("reset_password_dialog");
	if( !obj )
	{
		obj = document.createElement("div");
		obj.id = "reset_password_dialog";
		document.getElementsByTagName("body")[ 0 ].appendChild( obj );
	}

//	$.blockUI( {message:null} );
//	$("#setting-email").addClass("current");

	$("#reset_password_dialog").html( "<p>Type your password twice into the boxes below to change it.</p><form name='frmResetPass' id='frmResetPass' onsubmit='resetPasswordSave();return false;'><table><tr style='vertical-align:bottom'><td><p><label for='password'>New Password:</label></p></td><td><input id='password' type='password' name='password' value='' maxlength='50' size=20></td></tr><tr style='vertical-align:bottom'><td><p><label for='password'>Retype New Password:</label></p></td><td><input id='password2' type='password' name='password2' value='' maxlength='50' size=20></td></tr></table><input type='submit' style='display:none'></form><div id='dialog_error'></div>" );

	
	var dialogPos = emailDialogPos;
	$("#reset_password_dialog").dialog({ 
		title: "Reset Password",
		width: 375,
		height: 200,
		resizable: false,
		bgiframe: true,
		zIndex: 1200,
		modal: true,
		stack: true,
		position: [ dialogPos[0] + 200, dialogPos[1] + 40 ],
		overlay: { backgroundColor:"#000", opacity:0.3 },
		buttons: {
								"Change": resetPasswordSave, 
								"Cancel": function() { $(this).dialog("close"); } 
						 },
		close: function() {
//				$.unblockUI();
//				$("#setting-email").removeClass("current");
//				$("#settings_menu,#settings_menu_shadow").slideToggle( 100 );
			}
	});
	
	return false;
}

function resetPasswordSave()
{
	clearErrorFields( "#reset_password_dialog", "#frmResetPass" );

	if( $("#reset_password_dialog #password").val().length && $("#reset_password_dialog #password").val() == $("#reset_password_dialog #password2").val() )
//	if( $("#reset_password_dialog #password").val().length )
	{
		$("#reset_password_dialog").block( {  
				message: "<p style='font-size:0.9em;'><img src='/i/loading.gif' width='16' height='16' align='absmiddle' style='padding-right:5px;' />Updating, please wait...</p>"
		} ); 

		if( g_AJAXPool != undefined ) g_AJAXPool.Request( "/do-update-password.asp", { postdata: getFormPostData('frmResetPass', true), callback: onResetPasswordCallback, type: 'POST', bText: true } );
	}
	else
	{
		setErrorField( "#reset_password_dialog", $("#reset_password_dialog #password").val().length ? "#password2" : "#password", "You must type the same password into both boxes" );
	}
}

function onResetPasswordCallback( strAjaxResponse, args )
{
//	alert( strAjaxResponse );
//	$("#update_email_dialog #frmSetDetails input").attr( "disabled", false );
	$("#reset_password_dialog").unblock(); 

	if( strAjaxResponse.length )
	{
		eval( strAjaxResponse );
		if( login.succeeded )
		{
			$("#reset_password_dialog").dialog("close");
			//window.location.reload( true );
		}
		else
		{
			setErrorField( "#reset_password_dialog", login.errorField, login.msg );
		}
	}
}



function displayLogin()
{
	$("#settings_menu,#settings_menu_shadow").hide();
//	$("#login_popup,#login_popup_shadow").hide();

 	var obj = document.getElementById("login_popup");
	if( !obj )
	{
		obj = document.createElement("div");
		obj.id = "login_popup";
		document.getElementsByTagName("body")[ 0 ].appendChild( obj );
	}


	var pos = $("#login-link").offset();

	var width = 250;
	var height = 50;
	var left = pos.left - (width-40);
	var top = pos.top + 20;

	obj.style.width = gm_px( width );
	obj.style.height = gm_px( height );
	obj.style.left = gm_px( left );
	obj.style.top = gm_px( top );

	var objShadow = document.getElementById("login_popup_shadow");
	if( !objShadow )
	{
		objShadow = document.createElement("div");
		objShadow.id = "login_popup_shadow";
		objShadow.className = "popup_shadow";
		objShadow.style.padding = "10px";

		document.getElementsByTagName("body")[ 0 ].appendChild( objShadow );
	}
	objShadow.style.width = gm_px( width );
	objShadow.style.height = gm_px( height );
	objShadow.style.left = gm_px( left + 5 );
	objShadow.style.top = gm_px( top + 5 );
	
	obj.innerHTML = "<form name='frmLogin' id='frmLogin' onsubmit='doLogin(); return false;'><table><tr style='vertical-align:bottom'><td><p><label for='email'>E-mail:</label></p></td><td><input id='email' name='email' value='' maxlength='255' size=30></td></tr><tr style='vertical-align:bottom'><td><p><label for='password'>Password:</label></p></td><td><input id='password' type='password' name='password' value='' maxlength='50' size=12><input id='login' class='button' type='submit' value='Login'><input id='cancel' class='button' type='button' value='Cancel' onclick=\"$('#login_popup,#login_popup_shadow').slideToggle( 100 )\"></td></tr></table></form><div id='dialog_error'></div>";


	$("#login_popup,#login_popup_shadow").slideToggle( 100 );
}

function doLogin()
{
//	$("#frmLogin input").attr( "disabled", true );
	$("#login_popup").block( {  
			message: "<p style='font-size:0.9em;'><img src='/i/loading.gif' width='16' height='16' align='absmiddle' style='padding-right:5px;' />Logging in, please wait...</p>"
	} ); 

	if( g_AJAXPool != undefined ) g_AJAXPool.Request( "/do-login.asp", { postdata: getFormPostData('frmLogin', true), callback: onLoginCallback, type: 'POST', bText: true } );
}

function onLoginCallback( strAjaxResponse, args )
{
//	$("#frmLogin input").attr( "disabled", false );
	$("#login_popup").unblock();

//	alert( strAjaxResponse );
	if( strAjaxResponse.length )
	{
		eval( strAjaxResponse );
		if( login.succeeded )
		{
			$("#login_popup,#login_popup_shadow").slideToggle( 100 );
			window.location.reload( true );
		}
		else
		{

			var obj = document.getElementById("login_popup");
			var objShadow = document.getElementById("login_popup_shadow");
			if( obj && objShadow )
			{
				obj.style.height = "80px";
				objShadow.style.height = obj.style.height;
			}

			setErrorField( "#login_popup", login.errorField, login.msg );
		}
	}
}