/* browser, platform */
var BROWSER_TYPES = { SAFARI:'Safari', FIREFOX:'Firefox', MSIE:'MSIE',
	OPERA:'Opera', NETSCAPE:'Navigator',
	MOZILLA:'Mozilla', GECKO:'Gecko' };

/* page name */
var PAGE_NAME_START = "start.html";

var PAGE_NAME_SOFTWARE = "software.html";
var PAGE_NAME_XCARAMBA = "xcaramba.html";
var PAGE_NAME_MENUECLIPSE = "menueclipse.html";
var PAGE_NAME_XSELECTSIMILAR = "xselectsimilar.html";
var PAGE_NAME_BREAKOUTGAMETUTORIAL = "breakoutgametutorial.html";

var PAGE_NAME_ME = "me.html";
var PAGE_NAME_MUSIC = "music.html";
var PAGE_NAME_DONATE = "donate.html";


//----------------------------------------------------------------------------------------------------
var gCurrentFXObj = null;


function ClickImgOver( elementName )
{
	// img element fade in
	gCurrentFXObj = new Effect.Opacity( $( elementName ),
										{ duration:0.2,
										  transition:Effect.Transitions.linear,
										  to:1.0
										});
}


function ClickImgOut( elementName )
{
	gCurrentFXObj.cancel();

	// img element fade out
	gCurrentFXObj = new Effect.Opacity( $( elementName ),
										{ duration:0.2,
										  transition:Effect.Transitions.linear,
										  to:0.0
										});
}


//----------------------------------------------------------------------------------------------------


function SetClickButtonState( buttonId, state )
{
	var buttonPrefix = "button";
	var buttonLeftElementObj = document.getElementById( buttonPrefix + buttonId + "Left" );
	var buttonCenterElementObj = document.getElementById( buttonPrefix+ buttonId + "Center" );
	var buttonRightElementObj = document.getElementById( buttonPrefix + buttonId + "Right" );
	var imageUrl = "url(images/button/";

	state += ".jpg)";

	buttonLeftElementObj.style.backgroundImage = imageUrl + "left_" + state;
	buttonCenterElementObj.style.backgroundImage = imageUrl + "center_" + state;
	buttonRightElementObj.style.backgroundImage = imageUrl + "right_" + state;
}


//----------------------------------------------------------------------------------------------------


// content iframe fade out, set new page content
function LoadPage( newPageName )
{
	new Effect.Opacity( "iFrameLoader",
	{
		duration:0.1, delay:0.0,
		transition:Effect.Transitions.linear,
		from:1.0, to:0.0,
		afterFinish: function()
		{
			$( "iFrameLoader" ).src = newPageName;
		}
	});
}


// content iframe resize, fade in
function ShowPage( newPageHeight )
{
	new Effect.Morph( "iFrameLoader",
	{
		duration:0.2, delay:0.0,
		transition:Effect.Transitions.sinoidal,
		style:'height:' + newPageHeight + 'px;',
		afterFinish: function()
		{
			new Effect.Opacity( "iFrameLoader",
			{
				duration:0.1, delay:0.0,
				transition:Effect.Transitions.linear,
				from:0.0, to:1.0
			});
		}
	});
}


//----------------------------------------------------------------------------------------------------


function GetBestHeightForPreviewMask()
{
	var previewFrameHeight = $( "imageViewerContainer" ).offsetTop + $( "imageViewerContainer" ).offsetHeight;
	var documentBodyHeight = $( "bodyFrame" ).offsetHeight;
	var windowViewtHeight = document.documentElement.clientHeight;

	/*var largestHeight =*/
	return Math.max( previewFrameHeight, Math.max( documentBodyHeight, windowViewtHeight ) );

	// test
	/*alert( "Height\n" +
			"previewFrameHeight: " + previewFrameHeight + "\n\n" +
			"documentBodyHeight: " + documentBodyHeight + "\n\n" +
			"windowViewtHeight: " + windowViewtHeight + "\n\n\n" +
			"largestHeight: " + largestHeight );*/

	//return largestHeight;
}


function GetBestWidthForPreviewMask()
{
	var previewFrameWidth = $( "previewBox" ).offsetWidth;
	var documentBodyWidth = $( "bodyFrame" ).offsetWidth;
	var windowViewtWidth = document.documentElement.clientWidth;

	//var largestWidth =
	return Math.max( previewFrameWidth, Math.max( documentBodyWidth, windowViewtWidth ) );

	// test
	/*alert( "Width\n" +
			"previewFrameWidth: " + previewFrameWidth + "\n\n" +
			"documentBodyWidth: " + documentBodyWidth + "\n\n" +
			"windowViewtWidth: " + windowViewtWidth + "\n\n\n" +
			"largestWidth: " + largestWidth );*/

	//return largestWidth;
}


function ResizePreviewMaskForBestFit() {
	$( "imageViewerMask" ).style.width = GetBestWidthForPreviewMask() + "px";
	$( "imageViewerMask" ).style.height = GetBestHeightForPreviewMask() + "px";
}


//----------------------------------------------------------------------------------------------------
var gImageViewerMaskOnlyOnceOnUpdate = false;


function ShowPreview()
{
	// prepare preview
	$( "imageViewerMask" ).style.display = "block";
	$( "imageViewerContainer" ).style.display = "block";
	$( "imageViewerContainer" ).style.top = (20 + GetScrollXY()[1]) + "px";

	// preview mask fade in
	new Effect.Opacity( "imageViewerMask",
	{
		duration:0.1, delay:0.0,
		transition:Effect.Transitions.linear,
		from:0.0, to:0.7,
		afterUpdate: function()
		{
			// preview mask resize for best fit
			if( gImageViewerMaskOnlyOnceOnUpdate == false ) {
				gImageViewerMaskOnlyOnceOnUpdate = true;
				ResizePreviewMaskForBestFit();
			}
		},
		afterFinish: function()
		{
			// preview mask resize for best fit
			ResizePreviewMaskForBestFit();

			// preview frame fade in
			new Effect.Opacity( "imageViewerContainer",
			{
				duration:0.1, delay:0.0,
				transition:Effect.Transitions.linear,
				from:0.0, to:1.0
			});
		}
	});
}


function HidePreview()
{
	// preview frame fade out
	new Effect.Opacity( "imageViewerContainer",
	{
		duration:0.1, delay:0.0,
		transition:Effect.Transitions.linear,
		from:1.0, to:0.0,
		afterFinish: function()
		{
			// preview mask fade out
			new Effect.Opacity( "imageViewerMask",
			{
				duration:0.1, delay:0.0,
				transition:Effect.Transitions.linear,
				from:0.7, to:0.0,
				afterFinish: function()
				{
					// reset preview
					$( "imageViewerContainer" ).style.display = "none";
					$( "imageViewerMask" ).style.display = "none";
					$( "imageViewerContent" ).innerHTML = "";

					gImageViewerMaskOnlyOnceOnUpdate = false;
				}
			});
		}
	});
}


//----------------------------------------------------------------------------------------------------


function GetScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	// Netscape compliant
	if( typeof( window.pageYOffset ) == 'number' ) {
		scrOfX = window.pageXOffset;
		scrOfY = window.pageYOffset;
	}

	// DOM compliant
	else if( document.body && (document.body.scrollLeft || document.body.scrollTop) ) {
		scrOfX = document.body.scrollLeft;
		scrOfY = document.body.scrollTop;
	}

	// IE6 standards compliant mode
	else if( document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop) ) {
		scrOfX = document.documentElement.scrollLeft;
		scrOfY = document.documentElement.scrollTop;
	}

	return [scrOfX, scrOfY];
}

//var mAnimating = false;
//var mOldScrollY = 0;
/*
function CenterPreviewFrame() {
	var newScrollY = GetScrollXY()[1];
*/
	// test
	/*document.getElementById( "imageViewerContainer" ).innerHTML = "Animating: " + mAnimating;
	document.getElementById( "imageViewerContainer" ).innerHTML += "<br/>Old: " + mOldScrollY;
	document.getElementById( "imageViewerContainer" ).innerHTML += "<br/>New: " + newScrollY;

	var n = $("#imageViewerContainer").queue("fx");
	document.getElementById( "imageViewerContainer" ).innerHTML += "<br/>Queue: " + n.length;*/

	// update only if document v-scroll changed
	/*if( !mAnimating && (newScrollY != mOldScrollY) ) {
		mAnimating = true;
		mOldScrollY = newScrollY;

		JQ$("#imageViewerContainer").stop().animate(
			{top: (20 + newScrollY) + "px"},
			500
		).queue( function () {
			JQ$(this).dequeue();
			mAnimating = false;
		});
	}
}
*/

//----------------------------------------------------------------------------------------------------


function DetectBrowserType( browserType )
{
	if( (browserType == null) || (browserType.length == 0) )
		return false;

	return navigator.userAgent.indexOf( browserType ) != -1;
}


//----------------------------------------------------------------------------------------------------


function DetectBrowserVersion()
{
	var showWarning = false;

	// older than "MSIE 7.0"
	if( DetectBrowserType( BROWSER_TYPES.MSIE ) ) {
		var indexOfBrowserType = navigator.userAgent.indexOf( BROWSER_TYPES.MSIE );
		var majorVersion = navigator.userAgent.substr( indexOfBrowserType +5, 1 );

		if( majorVersion < 7 ) {
			showWarning = true;
		}
	}

	// older than "Firefox/2.0"
	else if( DetectBrowserType( BROWSER_TYPES.FIREFOX ) ) {
		indexOfBrowserType = navigator.userAgent.indexOf( BROWSER_TYPES.FIREFOX );
		majorVersion = navigator.userAgent.substr( indexOfBrowserType +8, 1 );

		if( majorVersion < 2 ) {
			showWarning = true;
		}
	}

	// older than "Version/3.x.x Safari/xxx.xx.x"
	else if( DetectBrowserType( BROWSER_TYPES.SAFARI ) ) {
		indexOfBrowserType = navigator.userAgent.indexOf( "Version/" );
		majorVersion = navigator.userAgent.substr( indexOfBrowserType +8, 1 );

		if( majorVersion < 2 ) {
			showWarning = true;
		}
	}

	if( showWarning == true ) {
		$( "oldBrowserWarning" ).style.background = "url(images/background/warning-stripe.png) 0 0 repeat-x";
		$( "oldBrowserWarning" ).style.display = "block";
	}
}


//----------------------------------------------------------------------------------------------------


/*
	First and always include the base style sheet 'safari.css'.
	Then add a browser specific style sheet for 'firefox.css' or 'ie.css'.
*/
function IncludeBrowserStylesheet()
{
	document.write( '<link rel="stylesheet" type="text/css" href="css/safari.css" />\n' );

	if( DetectBrowserType( BROWSER_TYPES.FIREFOX ) ) {
		document.write( '<link rel="stylesheet" type="text/css" href="css/firefox.css" />\n' );
	}
	else if( DetectBrowserType( BROWSER_TYPES.MSIE ) ) {
		document.write( '<link rel="stylesheet" type="text/css" href="css/ie.css" />\n' );
	}
}


//----------------------------------------------------------------------------------------------------
// init //

IncludeBrowserStylesheet();

// attach window resize event-handler, when window is loaded
window.onload = function() {
	window.onresize = function() {
		ResizePreviewMaskForBestFit();
	};
};