var MATCH_FOCUS_TO_BACKGROUND = true;
var TICKRATE = 10;

var bgFadeIntervalID;
var focusFadeIntervalID;
var bgOpacity = 0;
var focusOpacity = 0;
var bgCommonPath;
var lastBgCommonPath;
var focusCommonPath;
var lastFocusCommonPath;
var bgBody1;
var bgBody2;
var bgTiling1;
var bgTiling2;
var bgImage1;
var bgImage2;
var focus1;
var focus2;
var container;
var skipFade;
var resetSkipFade;
var focusSwitchCount = 0;

// Cookie functions
function getCookie( key ) {
	var c = document.cookie;
	var n = c.indexOf( key + '=' );
	if( n >= 0 ) {
		n += key.length + 1;
		var n2 = c.indexOf( ';', n );
		if( n2 >= 0 )
			return c.substr( n, n2 - n );
		else
			return c.substr( n );
	}
	return null;
}
function setCookie( key, value ) {
	document.cookie = key + '=' + value;
}

// Opacity functions
function setOpacity( element, value ) {
	if( !element || !element.style )
		return;
	element.style.opacity = value;
	element.style.MozOpacity = value;
	element.style.KhtmlOpacity = value;
	element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + ( value * 100 ) + ')';
}

// Fade controller functions
function startBgFade() {
	var delay = 1000 / TICKRATE;
	bgFadeIntervalID = setInterval( tickBgFade, delay );
	bgBody2.style.display = 'block';
	bgTiling2.style.display = 'block';
	bgImage2.style.display = 'block';
}
function tickBgFade() {
	if( skipFade )
		return;
	bgOpacity = Math.min( bgOpacity + 0.025, 1 );
	setOpacity( bgBody2, bgOpacity );
	setOpacity( bgTiling2, bgOpacity );
	setOpacity( bgImage2, bgOpacity );
	if( bgOpacity == 1 )
		stopBgFade();
}
function stopBgFade() {
	clearInterval( bgFadeIntervalID );
	bgBody1.style.backgroundImage = bgBody2.style.backgroundImage;
	bgTiling1.style.backgroundImage = bgTiling2.style.backgroundImage;
	bgImage1.style.backgroundImage = bgImage2.style.backgroundImage;
	bgBody2.style.display = 'none';
	bgTiling2.style.display = 'none';
	bgImage2.style.display = 'none';
	
	startFocusFade();
}
function startFocusFade() {
	var delay = 1000 / TICKRATE;
	focus2.style.display = 'block';
	setCookie( 'focusCommonPath', focusCommonPath );
	focusFadeIntervalID = setInterval( tickFocusFade, delay );
}
function tickFocusFade() {
	if( skipFade )
		return;
	focusOpacity = Math.min( focusOpacity + 0.05, 1 );
	setOpacity( focus1, ( 1 - focusOpacity ) );
	setOpacity( focus2, focusOpacity );
	if( focusOpacity == 1 )
		stopFocusFade();
}
function stopFocusFade() {
	clearInterval( focusFadeIntervalID );
	focus1.style.backgroundImage = 'url(' + focusCommonPath + ')';
	setOpacity( focus1, 1 );
	focus2.style.display = 'none';
	setOpacity( focus2, 0 );
	focusOpacity = 0;
	randomizeFocusImages();
	setCookie( 'focusCommonPath', lastFocusCommonPath );
	focus2.style.backgroundImage = 'url(' + focusCommonPath + ')';
	if( ++focusSwitchCount < 15 )
		var fadeFocusTimeoutID = setTimeout( startFocusFade, 12000 );
}

if( !document.chooseBgTheme ) {
	document.chooseBgTheme = function() {
		var r = Math.random();
		if( r < 0.0 )
			return 'fear';
		else if( r < 0.0 )
			return 'ons';
		else if( r < 0.3 )
			return 'cod4';
		else
			return 'ut3';
	}
}

if( !document.chooseFocusTheme ) {
	document.chooseFocusTheme = function() {
		var r = Math.random();
		if( r < 0.0 )
			return 'fear';
		else if( r < 0.0 )
			return 'ons';
		else if( r < 0.3 )
			return 'cod4';
		else
			return 'ut3';
	}
}

//choose background theme
var bgThemeName = document.chooseBgTheme();

//choose focus theme
var focusThemeName;
if( MATCH_FOCUS_TO_BACKGROUND ) {
	// HACK: use bgThemeName, but if 'ons' then change to 'ut3'.
	focusThemeName = bgThemeName;
	if( focusThemeName == 'ons' )
		focusThemeName = 'ut3';
}
else
	focusThemeName = document.chooseFocusTheme();

var bgImageCount;
var focusImageCount;

switch( bgThemeName ) {
	case 'fear':
		bgImageCount = 4;
		break;
	case 'ons':
		bgImageCount = 3;
		break;
	case 'cod4':
		bgImageCount = 5;
		break;
	case 'ut3':
		bgImageCount = 6;
		break;
}
switch( focusThemeName ) {
	case 'fear':
		focusImageCount = 4;
		break;
	case 'ons':
		focusImageCount = 1;
		break;
	case 'cod4':
		focusImageCount = 4;
		break;
	case 'ut3':
		focusImageCount = 11;
		break;
}

function randomizeBgImages() {
	lastBgCommonPath = getCookie( 'bgCommonPath' );
	while( true ) {
		var bgIndex = Math.floor( bgImageCount * Math.random() ) + 1;
		bgCommonPath = 'styles/clan/images/bg_header_' + bgThemeName + '_' + bgIndex.toString() + '_';
		if( !lastBgCommonPath ) {
			lastBgCommonPath = bgCommonPath;
			break;
		}
		if( bgCommonPath != lastBgCommonPath || bgImageCount < 2 )
			break;
	}
	setCookie( 'bgCommonPath', bgCommonPath );
}
randomizeBgImages();

function randomizeFocusImages() {
	lastFocusCommonPath = getCookie( 'focusCommonPath' );
	while( true ) {
		var focusIndex = Math.floor( focusImageCount * Math.random() ) + 1;
		focusCommonPath = 'styles/clan/images/focus_header_' + focusThemeName + '_' + focusIndex.toString() + '.png';
		if( !lastFocusCommonPath ) {
			lastFocusCommonPath = focusCommonPath;
			break;
		}
		if( focusCommonPath != lastFocusCommonPath || focusImageCount < 2 )
			break;
	}
	setCookie( 'focusCommonPath', focusCommonPath );
}
randomizeFocusImages();

// write style as HTML headinclude so that transition is seamless
document.writeln('<style type="text/css">');
document.writeln('body { background-image: url(' + lastBgCommonPath + 'btile.gif) }');
document.writeln('#body_bg2 { display: none; background-image: url(' + bgCommonPath + 'btile.gif) }');
document.writeln('#header_tiling { background-image: url(' + lastBgCommonPath + 'rtile.gif) }');
document.writeln('#header_tiling2 { display: none; background-image: url(' + bgCommonPath + 'rtile.gif) }');
document.writeln('#header_image { background-image: url(' + lastBgCommonPath + 'image.jpg) }');
document.writeln('#header_image2 { display: none; background-image: url(' + bgCommonPath + 'image.jpg) }');
document.writeln('#container #focus1 { background-image: url(' + lastFocusCommonPath + ') }');
document.writeln('#container #focus2 { background-image: url(' + focusCommonPath + ') }');
document.writeln('</style>');

window.onload = load;

function load() {
	var fadeBgTimeoutID;
	if( !USERNAME && !VISUAL_EFFECTS )
		VISUAL_EFFECTS = 'Full';
	if( VISUAL_EFFECTS == 'Full' )
		fadeBgTimeoutID = setTimeout( startBgFade, 2000 );
//	var fadeFocusTimeoutID = setTimeout( startFocusFade, 6000 );
	
	bgBody1 = document.getElementsByTagName('body')[0];
	bgBody2 = document.getElementById('body_bg2');
	bgTiling1 = document.getElementById('header_tiling');
	bgTiling2 = document.getElementById('header_tiling2');
	bgImage1 = document.getElementById('header_image');
	bgImage2 = document.getElementById('header_image2');
	focus1 = document.getElementById('focus1');
	focus2 = document.getElementById('focus2');
	container = document.getElementById('container');
	
	if( VISUAL_EFFECTS == 'Full' ) {
		container.onscroll = function( e ) {
			skipFade = true;
			if( resetSkipFade )
				clearTimeout( resetSkipFade );
			resetSkipFade = setTimeout( function() { skipFade = false; }, 1000 );
		}
	}
	container.focus();
	
	// set initial backgroundImage style properties programmatically so that they're
	// accessible during fade routines
	bgBody1.style.backgroundImage = 'url(\'' + lastBgCommonPath + 'btile.gif\')';
	bgBody2.style.display = 'none';
	bgBody2.style.backgroundImage = 'url(\'' + bgCommonPath + 'btile.gif\')';
	bgTiling1.style.backgroundImage = 'url(\'' + lastBgCommonPath + 'rtile.gif\')';
	bgTiling2.style.display = 'none';
	bgTiling2.style.backgroundImage = 'url(\'' + bgCommonPath + 'rtile.gif\')';
	bgImage1.style.backgroundImage = 'url(\'' + lastBgCommonPath + 'image.jpg\')';
	bgImage2.style.display = 'none';
	bgImage2.style.backgroundImage = 'url(\'' + bgCommonPath + 'image.jpg\')';
	focus1.style.backgroundImage = 'url(\'' + lastFocusCommonPath + '\')';
	focus2.style.backgroundImage = 'url(\'' + focusCommonPath + '\')';
}