/* Constants for the slideshow */
imagesForSlideshow = {};
numberOfImages = 15; // how many images in the /images/emailsamples/ folder
    // this is set now via a hidden field, 
emailSamplesPath = "images/emailSamples/";
slideshowArea1 = null;
slideshowArea2 = null;
imageNumber = 0;
extension = ".jpg";
whichImage = 1;
isMS = false;

/*	Sets up variables and begins the slideshow
	id1: Id of the first image
	id2: Id of the second image
	The function below sets up the event handlers for the hovering in Internet Explorer,
	then sets up the two image elements and starts the slideshow.
*/
function init()
{
    var id1 = '_ctl0_ContentMain_imgEmailSample1';
    var id2 = '_ctl0_ContentMain_imgEmailSample2';

	isMS = setBrowser();	
	if ( isMS )
	{
		var handlers = document.getElementsByAttribute( 'type', 'button' );
	
		for ( var jj = 0, len = handlers.length; jj < len; jj++ )
			hoverInIE( handlers[jj].id, 'ePXTButtonHOVER', 'secondClass', true );
		
		handlers = document.getElementsByAttribute( 'type', 'submit' );
	
		for ( var jj = 0, len = handlers.length; jj < len; jj++ )
			hoverInIE( handlers[jj].id, 'ePXTButtonHOVER', 'secondClass', true );
	}

    setElementFocus( "txtEmailAddress" );

	slideshowArea1 = getElement( id1 );
	slideshowArea2 = getElement( id2 );

    imageNumber = getElementValue( "_ctl0_ContentMain_hidEmailSampleStart" );
    numberOfImages = getElementValue( "_ctl0_ContentMain_hidEmailSampleLast" );
    
	setTimeout( "slideshow(true)", 5000 );
}

/*
	Because Internet Explorer just has to be different.
*/
function setBrowser()
{
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1)
	{
		return true;
	}
	return false;
}

/*
	Gets the element with the specified id
*/
function getElement( id )
{
	if ( document.getElementById )
		return document.getElementById( id );
	else if ( document.all )
		return document.all[ id ];
	else
		return null;
}

/*
	Receives an image and returns whether or not it is fully loaded
*/
function imageLoaded( image )
{
	if ( image.complete == null || 
	     image.complete == false || 
	     ( typeof image.naturalWidth != "undefined" && 
	       image.naturalWidth == 0 ) )
		return false;
	else
		return true;
}

function CheckSlideShowImage( imgNum )
{
	if ( imagesForSlideshow[ imgNum ] == null )
	{
		var image = new Image();
		image.src = emailSamplesPath + ( imgNum + 1 ) + extension;
		imagesForSlideshow[ imgNum ] = image;
	}
}

/*
	Slideshow functionality.
	Uses 2 images layered over each other for fading purposes.
	Needs the accompanying css file to position the elements properly.
	Each image loads into a cache as they are downloaded and the slideshow will only advance to the next image
	if it has loaded fully.
*/
function slideshow(isFirstTime)
{
	if ( imageNumber < numberOfImages )
	{
        CheckSlideShowImage( imageNumber );

	    var nextNumber = imageNumber;
	    nextNumber++;

		if ( imagesForSlideshow[ nextNumber ] == null )
		{
			var image = new Image();
			image.src = emailSamplesPath + nextNumber + extension;
			imagesForSlideshow[ nextNumber ] = image;
		}

		if ( imageLoaded( imagesForSlideshow[ nextNumber ] ) )
		{
			if ( whichImage == 0 )
			{
				slideshowArea1.src = imagesForSlideshow[ nextNumber ].src;
				
				if ( isMS )
					fadeOutMS( 100 );
				else
					fadeOut( 100 );
					
				imageNumber = nextNumber;
			}
			else
			{
				slideshowArea2.src = imagesForSlideshow[ nextNumber ].src;
				
				if ( isMS )
					fadeOutMS( 100 );
				else
					fadeOut( 100 );

				imageNumber = nextNumber;
			}
			
			setTimeout( 'slideshow(false)', 5000 );
		}
		else
		{
		    // image not loaded
            CheckSlideShowImage( nextNumber );

            if ( isFirstTime )
            {
                setTimeout( 'slideshow(false)', 5000 );
            }
            else
            {
                setTimeout( 'slideshow(false)', 500 );
            }
	    }
	}
	else
	{
		imageNumber = 0;
        CheckSlideShowImage( imageNumber );
		slideshowArea1.src = imagesForSlideshow[ imageNumber ].src;			

        if ( isFirstTime )
        {
            setTimeout( 'slideshow(false)', 5000 );
        }
        else
        {
            setTimeout( 'slideshow(false)', 500 );
        }
	}
}

/*
	For those browsers that support it, uses the css opacity property to fade between images.
*/
function fadeOut( imageOpacity )
{
	if ( imageOpacity > 5 )
	{
    	if ( whichImage == 0 )
    		slideshowArea2.style.opacity = ( imageOpacity / 100 );
	    else if ( whichImage == 1 )
    		slideshowArea1.style.opacity = ( imageOpacity / 100 );	
		
		setTimeout( 'fadeOut(' + ( imageOpacity - 10 ) +  ')', 100 );
	}
	else
	{
    	if ( whichImage == 0 )
		{
			slideshowArea2.style.zIndex = 1;
			slideshowArea1.style.zIndex = 2;
    		slideshowArea2.style.opacity = 1;
			whichImage = 1;
		}
    	else if ( whichImage == 1 )
		{
			slideshowArea1.style.zIndex = 1;
			slideshowArea2.style.zIndex = 2;
    		slideshowArea1.style.opacity = 1;
			whichImage = 0;
		}
	}	
}

/*
	Fades between images in IE using the filter style.
*/
function fadeOutMS( imageOpacity )
{
	if ( imageOpacity > 5 )
	{
    	if ( whichImage == 0 )
    		slideshowArea2.style.filter = "alpha(opacity=" + imageOpacity + ")";
	    else if ( whichImage == 1 )
    		slideshowArea1.style.filter = "alpha(opacity=" + imageOpacity + ")";	
		
		setTimeout( 'fadeOutMS(' + ( imageOpacity - 10 ) +  ')', 100 );
	}
	else
	{
    	if ( whichImage == 0 )
		{
			slideshowArea2.style.zIndex = 1;
			slideshowArea1.style.zIndex = 2;
    		slideshowArea2.style.filter = "alpha(opacity=100)";
			whichImage = 1;
		}
    	else if ( whichImage == 1 )
		{
			slideshowArea1.style.zIndex = 1;
			slideshowArea2.style.zIndex = 2;
    		slideshowArea1.style.filter = "alpha(opacity=100)";
			whichImage = 0;
		}
	}	
}

/*
	Internet Explorer doesn't correctly free up memory used by event handlers when it unloads a page, so there 
	must be an unload function to stop them piling up.
*/
function cleanUp()
{
	if ( isMS )
	{
    	var handlers = document.getElementsByAttribute( 'type', 'button' );
    	
    	for ( var jj = 0, len = handlers.length; jj < len; jj++ )
    		hoverInIE( handlers[jj].id, 'ePXTButtonHOVER', 'secondClass', false );
    
    	handlers = document.getElementsByAttribute( 'type', 'submit' );
    	
    	for ( var jj = 0, len = handlers.length; jj < len; jj++ )
    		hoverInIE( handlers[jj].id, 'ePXTButtonHOVER', 'secondClass', false );
	}
}

/*
	Imitates the hover property in css for Internet Explorer.
	id: Id of the element.
	hoverClass: Css class to use as hover.
	unHoverClass: Css class to go back to on unhover. Currently a dummy class.
	attach: Function is used to attach and detach the event handlers so there is a switch to tell which one to do.
*/
function hoverInIE( id, hoverClass, unHoverClass, attach )
{
	var element = (document.getElementById) ? document.getElementById(id) : document.all[id];
	var original = element.className;
	var classes = original.split(' ');
	
	for( var i =0, len = classes.length; i < len; i++ )
		if ( classes[i] == unHoverClass )
			classes[i] = hoverClass;	
	
	var hover = classes.join(' ');
	
	if ( element.attachEvent && attach )
	{
		element.attachEvent('onmouseover', function () { changeClass( element, hover ) } );
		element.attachEvent('onmouseout', function () { changeClass( element, original ) } );
	}
	else if ( element.detachEvent && !attach )
	{
		element.detachEvent('onmouseover', function () { changeClass( element, hover ) } );
		element.detachEvent('onmouseout', function () { changeClass( element, original ) } );
	}	
}

function changeClass( element, cssClass )
{
	element.className = cssClass;
}

/*
	Method added to the document object to get all elements with a specified attribute-value pair.
*/
document.getElementsByAttribute = function( attributeName, attributeValue )
{
	var elements = document.getElementsByTagName( "*" );
	var withAttribute = new Array();
	
	for ( var ii = 0, len = elements.length; ii < len; ii++ )
		if ( elements[ii].getAttribute( attributeName ) && ( elements[ii].getAttribute( attributeName ) == attributeValue ) )		
			withAttribute[ withAttribute.length ] = elements[ii];				

	return withAttribute;	
}