// xsl document holders
var catalogXsl, modelXsl;

// ui state variable
var modelViewOpen = false;

// browser detection
if ( isGeckoBrowser() ) loadScript( "gecko.js" );
else if ( isMsieBrowser() ) loadScript( "msie.js" );

// call this code as soon as the page is fully loaded
onload = function() {
	// set the default language
	setLang( 'en' );
	// display the cover page
	showCoverPage();
	
	catalogXsl = loadXml( "catalog/catalog.xsl" );
	modelXsl = loadXml( "catalog/model.xsl" );

	transformAndInsert( document.getElementById("ThumbnailView"), loadXml( "catalog/index.php" ), catalogXsl );
	
	//resizeTo( 800,600 );
}

// ************
// browser util
// ************
function isGeckoBrowser() {
	return ( navigator.userAgent.indexOf("Gecko") >= 0 );
}
function isMsieBrowser() {
	return ( navigator.userAgent.indexOf("MSIE") >= 0 );
}
// *********
// HTML util
// *********
function loadScript( url ) {
	var e = document.createElement("script");
	e.src = url;
	e.type="text/javascript";
	document.getElementsByTagName("head")[0].appendChild(e);
}
// removes all child nodes from element
function deleteChildren( elem ) {
	if ( elem.hasChildNodes ) {
		var ch = elem.childNodes;
		for ( var i = 0; i < ch.length; i++ ) {
			elem.removeChild( ch.item( i ) );
		}
	}
}

// **************
// Menu functions
// **************
function showCoverPage() {
	hideCurrentPage();
	document.getElementById("Intro").style.display = "block";
	hideCurrentPage = hideCoverPage;
}
function hideCoverPage() {
	document.getElementById("Intro").style.display = "";
};

function showCatalogPage() {
	hideCurrentPage();
	document.getElementById("ThumbnailView").style.display = "block";
	hideCurrentPage = hideCatalogPage;
}
function hideCatalogPage() { 
	document.getElementById("ThumbnailView").style.display = "";
	closeModelView();
};

// ************
// UI functions
// ************
var hideCurrentPage = function() {};

// sets the language to display in the page
// by modifying the appropriate CSS rules.
function setLang( lang ) {
	var langs = ["fr","en","es"];
	var langSS = getStyleSheet( 'langCSS' );

//	if ( ! setLang.count ) setLang.count = getRules( langSS ).length
	var count = getRules( langSS ).length;
	while ( count>0 ) { deleteRule( langSS, --count ); }
	while ( count<3 ) {
		if ( lang != langs[count] ) {
			insertRule( langSS, '.' + langs[count], 'display:none' );
		}
		count++;
	}

/*	if ( getRules( langSS ).length > setLang.count ) {
		deleteRule( langSS, setLang.count );
	}
	insertRule( langSS, '.' + lang, 'display:block;', setLang.count );*/
}

function showModel( modelName ) {
	if ( modelViewOpen == false ) openModelView();
	var modelViewContent =  document.getElementById("ModelViewContent");
	
	deleteChildren( modelViewContent );
	var params = { "url":"catalog/"+modelName };
	//modelViewContent.navigate(params.url);
	transformAndInsert( modelViewContent, loadXml( "catalog/" + modelName + "/index.xml" ), modelXsl, params );
}
function openModelView() {
	with ( document.getElementById("ThumbnailView").style ) {
		cssFloat = "right";		//standard css float property
		styleFloat = "right";	//ms css float property
		width = "116px";
	}
	document.getElementById("ModelView").style.display = "block";
}
function closeModelView() {
	with ( document.getElementById("ThumbnailView").style ) {
		cssFloat = "";		//standard css float property
		styleFloat = "";	//ms css float property
		width = "";
	}
	document.getElementById("ModelView").style.display = "";
}

