// here I can define global variables like
// var xxx = 0;

// 20110621 put the mobileinit here before the document.ready **
$(document).bind("mobileinit", function(){
	//apply overrides here, if any ... see doc at: http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html
	//alert("1) xxx");
	//$.mobile.loadingMessage = "Please Wait";

	// 20110523 In this app I am not using Ajax .. becasu it looks the JQuery Mobile is not stable, yet. At lesat for me ...
	$.mobile.ajaxEnabled = false;	// Used to disable ajax navigation for all links at once .. but be carefull if we have a multi-page page ..
	// Animation only on iPod by using if(transition & ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))))
	$.mobile.defaultTransition = 'none';	// $.mobile.defaultTransition = 'slideup';

});	// End of mobileinit ***

$(document).ready(function() {
	//alert("Document is Ready!");
	loadPage();
	// Here I am adding jQuery Mobile that should be included on each page (because it is a specific code per page) ***
	// Using try-catch I am preventing and error in case the pages'code does not work properly ....
	try {
		additionalLoadPerPage();
	}
	catch(e) {
		// Show this only when testing ... alert('additionalLoadPerPage() is missing ...');	
	}	// End of this try-catch ***
});

function loadPage() {
	pageSettings();
	headerExtras();
	showGoogleAds();
	
}	// End of function loadPage() ***
function pageSettings() {
	var documentWidth = $(document).width();
	var documentHeight = $(document).height();
	//var contentHeight = "400px";
	$('.ui-mobile [data-role="content"], .ui-content').css('padding', '2px');	// 20110728 to reduce the default padding that is to big in the mobile devices
	//alert('Document width: ' + $(document).width());
	//alert('Document height: ' + $(document).height());
	//$.mobile.changePage("../app/index.aspx", "slideup");
	//$('.ui-mobile [data-role="content"]').css('min-height', contentHeight);
	
	//if (documentHeight > 600)
	//{
		//contentHeight = (documentHeight - 340) + "px";	// Este es un valor arbitrario y solo tiene efecto en height over 600pc if the content is too small ...
		//$('.ui-mobile [data-role="content"]').css('min-height', contentHeight);
	//}	// End of this if ***
// Desktop setting .. for screens wider than 900px
	if (documentWidth > 1024)
	{
		// The iPad is 1024px width ... And I want it to be 100% width for this reason I am asking for 1024 but setting with to 900px
		// 20110816 this is not working ... $('.ui-mobile body').addClass('ui-body-c');	// $('.ui-mobile body').css('background-color', 'red');
		$('.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page').css('margin', '10px auto 0 auto');
		$('.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page').css('max-width', '900px');
		$('.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page').css('position', 'relative');
		
		//
		//$('.ui-mobile [data-role="content"]').css('border-left', 'thin ridge #999999');	// to hide at level page use "hidden" ...
		//$('.ui-mobile [data-role="content"]').css('border-right', 'thin ridge #999999');

	}	// End of this if ***
	if (documentWidth < 981)	// 601
	{
		// hide some sections of the site in mobile devices
		$('#divHeaderGoogleSearchAndTranslator').hide();
	}	// End of this if ***
}	// End of pageSettings() ***

function headerExtras() {
	//alert("I am here in \"headerExtras\"");
	$('#header').attr('data-theme', 'c');	// Sets data-theme for all my pages ...
	//$.mobile.path();
	//alert("ActivePage:" + $.mobile.activePage.attr('id'));
	$('#navBar li a').removeClass('ui-btn-active');		// removes class to all the navbar links. This class is added to the right item on each page
}	// End of headerExtras() ***
function showGoogleAds()
{
	var documentWidth = $(document).width();
	// alert('Document width: ' + $(document).width());
	//$('.navBarGoogleAds, .footerGoogleAds').addClass('ui-body-c');	// Changes the bg of the NavBar Google panel
	$('.divLogGoogleAds').addClass('ui-body-c');
	//$('.footerGoogleAds').addClass('ui-body-c');	// Changes the bg of the NavBar Google panel
	
	if (documentWidth < 400)
		$('.googleAdsForDevicesWider400').hide();
	else
		$('.googleAdsForMobileDevices').hide();
	//	End of this if
	
	//$('.navBarGoogleAds').css('background-color', 'lightgray');	//addClass('ui-bar-b');
	//$(document).width();
	
}	// End of showGoogleAds() ***