// ***********************************************
// JavaScript Document
// 
// Copyright 2008 - RelaTV Media Corp
//
// Contact - josh@relatv.com
// ***********************************************

// **************************
// Definitions, Variables
// **************************

var INTERVAL_DELAY = 30000;				// How often we want to change the background (in milliseconds)
var FADE_SPEED = 75;					// How fast to we want the bg to fade (smaller is faster)
var imageArray = new Array();
var numImages = 2;
var currentImage = 0;
var intervalId;
var hideImageIntervalId;
var showImageIntervalId;
var opacity1 = 0;
var headerBugIntId;
var currentCaption = 1;


// **************************
// Functions
// **************************

//	initPage()
//	This function is called when the HTML page is loaded. 
// 	It creates a timer and calls our bg update function
//  according to the variable INTERVAL_DELAY
function initPage() {
	// Load our images into an array
	loadImages();
	
	// Start the slide show
	intervalId = setInterval("changeBackground()", INTERVAL_DELAY);
		
	// Header Bug Rotation (in milliseconds)
	headerBugIntId = setInterval("rotateHeaderBug()", 15000);
}

//	loadImages()
//	This function sets the "numImages" variable, 
//  and loads the arrays which will contain our 
//  image data.
function loadImages() {
	imageArray[0] = "images/bg1.jpg";
	imageArray[1] = "images/bg2.jpg";
}

//	changeBackground()
//	This function updates the background image
//	It is called every INTERVAL_DELAY milleseconds from the "initPage()"
//	function.
//	It gets a handle to the DOM objects, and then sets the content
//	from the arrays that we filled in "loadImages()".
function changeBackground() {
	currentImage++;
	if(currentImage >= numImages) {
		currentImage = 0;
	}
	// In case we run the images in reverse order
	if(currentImage < 0) {
		currentImage = numImages - 1;
	}
	
	hideImageIntervalId = setInterval("hideImage()", FADE_SPEED);
}

//	hideImage()
//	This function is part of the process of switching backgrounds
//  It fades out the current background image (actually it hides it)
//  in preparation for the replacement with the new image.
//  It is called every 100 milliseconds from changeBackground()
function hideImage() {
	// Increment our opacity (make the foreground image more opaque)
	opacity1 += 5;
	
	// Set the opacity for all browser types
    var objStyle = document.getElementById("containerFg").style; 
    objStyle.opacity = (opacity1 / 100); 
    objStyle.MozOpacity = (opacity1 / 100); 
    objStyle.KhtmlOpacity = (opacity1 / 100); 
    objStyle.filter = "alpha(opacity=" + opacity1 + ")";
	
	// Check if the bg image is fully obscured
	if(opacity1 >= 100) {
		// Stop calling this function (hideImage)
		clearInterval(hideImageIntervalId);
		
		// Switch the background element
		document.getElementById("containerBg").style.backgroundImage = "url(" + imageArray[currentImage] + ")";
		showImageIntervalId = setInterval("showImage()", FADE_SPEED);
	}
}

//	showImage()
//	This function is part of the process of switching backgrounds
//  It does the reverse of hide image by slowly revealing the new
//  background image.
function showImage() {
	// Decrement our opacity (make the foreground image more transparent)
	opacity1 -= 5;
	
	// Set the opacity for all browser types
    var objStyle = document.getElementById("containerFg").style; 
    objStyle.opacity = (opacity1 / 100); 
    objStyle.MozOpacity = (opacity1 / 100); 
    objStyle.KhtmlOpacity = (opacity1 / 100); 
    objStyle.filter = "alpha(opacity=" + opacity1 + ")";
	
	// Check if the bg image is fully revealed
	if(opacity1 <= 0) {
		// Stop calling this function (showImage)
		clearInterval(showImageIntervalId);
	}
}
		
// Code to rotate logo text
function rotateHeaderBug() {		
	var str1 = "<img src='images/logoCaption1.png' width='275' height='13' alt='a fresh look at visual communications' />";
	var str2 = "<img src='images/logoCaption2.png' width='275' height='13' alt='visual communications production' />";
	if(currentCaption == 1) {
		$('#logoCaption').fadeOut("slow", function () { 
			$('#logoCaption').html(str2);
			setTimeout("fadeInCode()", 50);
			});
		currentCaption = 2;
	} else {
		$('#logoCaption').fadeOut("slow", function () { 
			$('#logoCaption').html(str1);
			setTimeout("fadeInCode()", 50);
			});
		currentCaption = 1;
	}
}
function fadeInCode() {
	$('#logoCaption').fadeIn("slow");
}