/*
This file controls the Oil & Gas slideshow on the bottom-left corner of the homepage.
At least for now, the selection of photos in the slideshow is hard-coded in this file;
it's not read dynamically from a directory.
*/

// Oil & Gas Slideshow
//--------------------
var og_photos_ary = new Array();
var og_disappearingIndex;   // index in the array of the picture that is about to 
                            // disappear (or disappearing, fading out) at any given moment.

var og_appearingIndex;  // index in the array of the picture that is about to 
                        // appear (or appearing, fading in) at any given moment.
                        
var og_fadeOutTimer;    // rate at which the disappearing photo's opacity is changed when it's fading out.
var og_fadeInTimer;     // rate at which the appearing photo's opacity is changed when it's fading in.

var og_fadeOutID;   // the HTML ID representing the container of the disappearing photo
var og_fadeInID;    // the HTML ID representing the container of the appearing photo

var og_smoothOrder = 0;	//may be 0 or 1... changing this value reverses the order of the fading

var theBrowser = "";    //used below to detect which brower is being used by the visitor


initializeAllPhotosArrays();

/*
function startAllSlideshows()
{
    og_startSmoothSlideshow();
}
*/

function initializeAllPhotosArrays()//This shouldn't be here. og_initializePhotosArray should be called directly above
{
    //alert('Initializing all photo arrays');
    og_initializePhotosArray();
}

/*
Fill the array with the file names of the pictures in the slideshow and assign fading order
*/
function og_initializePhotosArray()
{
	og_photos_ary[0] = new Image();
	og_photos_ary[1] = new Image();
	og_photos_ary[2] = new Image();
	og_photos_ary[3] = new Image();
	
	og_photos_ary[0].src="/webMod/images/slideshows/oil-gas/ss_og1.JPG";
	og_photos_ary[1].src="/webMod/images/slideshows/oil-gas/ss_og2.JPG";
	og_photos_ary[2].src="/webMod/images/slideshows/oil-gas/ss_og3.JPG";
	og_photos_ary[3].src="/webMod/images/slideshows/oil-gas/ss_og4.JPG";

	//The above should be in a loop which reads the files in a specific folder.
	//Therefore, we'll need to check whether there's anything in the array after that
	//with something like: if(photos_ary.length > 1)
	//(the folder could be empty)
    //This would require using VB (or C#) instead of JS

	og_disappearingIndex = 0;
	og_appearingIndex = 1;
}


//prepare the next picture in the slideshow
function og_updateSlideshowIndex()
{
    //update the indices of the appearing and disappearing photos
	og_disappearingIndex++;
	og_appearingIndex++;

	if(og_appearingIndex == og_photos_ary.length)
	{
		og_appearingIndex = 0; //wrap around for the appearing photo
	}
	
	if(og_disappearingIndex == og_photos_ary.length)
	{
		og_disappearingIndex = 0; //wrap around for the disappearing photo
	}
}


//store the HTML ID representing the container of the picture that will fade out
function og_setFadeOutID(theID)
{
	og_fadeOutID = theID;
}

//store the HTML ID representing the container of the picture that will fade in
function og_setFadeInID(theID)
{
	og_fadeInID = theID;
}

/*
Fades one pair of pictures, prepares the next pair, sets a time delay and then calls itself
*/
function og_startSmoothSlideshow()
{
    detectBrowser();
    
    document.getElementById("og_topLayerPhoto").src = og_photos_ary[og_disappearingIndex].src;
	document.getElementById("og_projShowCol").style.backgroundImage = "url("+og_photos_ary[og_appearingIndex].src+")";

    if(theBrowser == "Not IE")
    {
        document.getElementById("og_topLayerPhoto").style.opacity = 1;
    }
    else
    {
        document.getElementById("og_topLayerPhoto").filters.alpha.opacity = 100;
    }
	
    //Fade one pair of pictures
	if(og_smoothOrder == 0)
	{
		og_setFadeOutID('og_topLayerPhoto'); 
		og_fadeOut();
	}
	else
	{
    //
	}
	//prepare the next pair of pictures to fade
	og_updateSlideshowIndex();
	
	//set time delay and make recursive call
	setTimeout("og_startSmoothSlideshow()",4000);
}

//Stop the timer that fades out a picture
function og_stopFadingOut()
{
	if(og_fadeOutTimer)
	clearTimeout(og_fadeOutTimer);
}

//Stop the timer that fades in a picture
function og_stopFadingIn()
{
	if(og_fadeInTimer)
	clearTimeout(og_fadeInTimer);
}


//fades out a picture
function og_fadeOut()
{
    if(theBrowser == "Not IE")
    {
        //reduce opacity        
		document.getElementById(og_fadeOutID).style.opacity += 0.001;
		document.getElementById(og_fadeOutID).style.opacity *= 0.9;        
		
		//if opacity is negligible
		var checkFF = document.getElementById(og_fadeOutID).style.opacity;
		if(checkFF < 0.05)
		{
		    //make the opacity equal to zero
			document.getElementById(og_fadeOutID).style.opacity = 0;
			checkFF = 0;
			
			//stop the fade-out process
			og_stopFadingOut();
			return;
		}
    }
    else
    {
        //reduce opacity
		document.getElementById(og_fadeOutID).filters.alpha.opacity += 0.001;
		document.getElementById(og_fadeOutID).filters.alpha.opacity *= 0.9;
		
		//if opacity is negligible
		var checkIE = document.getElementById(og_fadeOutID).filters.alpha.opacity;
		if(checkIE < 5)
		{
		    //make the opacity equal to zero
			document.getElementById(og_fadeOutID).filters.alpha.opacity = 0;
			checkIE = 0;
			
			//stop the fade-out process
			og_stopFadingOut();
			return;
		}
        
    }
        //time delay and recursive call
		og_fadeOutTimer = setTimeout("og_fadeOut()",50);
}

//fades in a picture
function og_fadeIn()
{
        if(theBrowser == "Not IE")
        {
            //increase opacity
		    document.getElementById(og_fadeInID).style.opacity += 0.01;
		    document.getElementById(og_fadeInID).style.opacity *= 1.1;
		    
		    //if opacity is close to 1 (100%)
		    var checkFF = document.getElementById(og_fadeInID).style.opacity;
		    if(checkFF > 0.99)
		    {
		        //make the opacity equal to 1
			    document.getElementById(og_fadeInID).style.opacity = 1;
			    checkFF = 1;
			    
			    //stop the fade-in process
			    og_stopFadingIn();			
			    return;
		    }
        }
        else
        {
            //increase opacity
            document.getElementById(og_fadeInID).filters.alpha.opacity += 1;//this one is different (not 0.001) on purpose
		    document.getElementById(og_fadeInID).filters.alpha.opacity *= 1.1;
		    
		    //if opacity is close to 100 (%)
		    var checkIE = document.getElementById(og_fadeInID).filters.alpha.opacity;
		    if(checkIE > 99)
		    {
		        //make the opacity equal to 100 (%)
    			document.getElementById(og_fadeInID).filters.alpha.opacity = 100;
			    checkIE = 100;
			    
			    //stop the fade-in process
			    og_stopFadingIn();			
			    return;
		    }
        }
		//time delay and recursive call
		og_fadeInTimer = setTimeout("og_fadeIn()",50);
}


/*
    starts a slideshow that has a hard transition, instead of a smooth one.
    
    (photos don't fade in and out... the just swap instantaneously)
*/
function og_startSwapSlideshow()
{
    
    document.getElementById("og_topLayerPhoto").src = og_photos_ary[og_disappearingIndex].src;
	document.getElementById("og_projShowCol").style.backgroundImage = "";

	og_setFadeOutID('og_topLayerPhoto'); 

	og_updateSlideshowIndex();
	setTimeout("og_startSwapSlideshow()",4000);
}


/*
    Detect whether the visitor is using Internet Explorer or a different browser.
*/
function detectBrowser()
{
    if(navigator.appVersion.indexOf("MSIE") == -1)
    {
        theBrowser = "Not IE";
    }
    else
    {
        theBrowser = "IE";
    }
}