﻿/* content rotator module */
var currPic=0;
var timer1, timer2;
var paused = true;
var opacity = 100;
var msDivs = new Array(5);
var msButtons = new Array(5); 
var msWrap;
var button;
var position;
var currPosition;
var bIsOpera = typeof window.opera != 'undefined';
var bIsIE = typeof document.all != 'undefined' && !bIsOpera && navigator.vendor != 'KDE';
var bIsSafari = navigator.vendor == 'Apple Computer, Inc.';

/* Initialization and Unobtrusive Javascript Calls */
OnElementLoad('divFeaturedRotatorPlayLink', initPageComponents);

/*  Used to load all components on the page */
function initPageComponents() 
{    
    msDivs[0] = document.getElementById('divFeaturedRotatorItem1');             
    msDivs[1] = document.getElementById('divFeaturedRotatorItem2');
    msDivs[2] = document.getElementById('divFeaturedRotatorItem3');
    msDivs[3] = document.getElementById('divFeaturedRotatorItem4');
    msDivs[4] = document.getElementById('divFeaturedRotatorItem5');
    msButtons[0] = document.getElementById('btnFeaturedRotator1');     
    msButtons[1] = document.getElementById('btnFeaturedRotator2');
    msButtons[2] = document.getElementById('btnFeaturedRotator3');
    msButtons[3] = document.getElementById('btnFeaturedRotator4');
    msButtons[4] = document.getElementById('btnFeaturedRotator5');
    msDivs[0].style.display = "block";
    msButtons[0].className = "on"; 
    msWrap = document.getElementById('divFeaturedRotatorWrap');
    initPausePlayEvents();
    paused = false; 
    timer1=setTimeout('TimedStory()',7000);
    ImageSwap();
}

/* add event handlers for the images */
function initPausePlayEvents() 
{ 
    if (!document.getElementById || !document.getElementsByTagName) 
    {
        return true;
    }
 
    /*  get all the image links  */
    var topFeatured = document.getElementById('divFeaturedRotatorCounter');
    var links = topFeatured.getElementsByTagName('a');

    for (i = 0; i < links.length; i++) 
    {
        //filter the links for those that have a class name beginning with 'a'
        //add the ArticleNumberClick event handler for the number links
        if (links.item(i).id.substring(0,18) == 'btnFeaturedRotator')
        {  
            links.item(i).href='javascript:{}';
            AddEventHandler(links [i], 'click', function (event) { ArticleNumberClick (event); }, false);
        }
    }
 
    var playLink = document.getElementById('divFeaturedRotatorPlayLink');
  
    //add the PlayPauseClick event handler for the play pause button 
    AddEventHandler(playLink, 'click', function (event) { PlayPauseClick (event); }, false);
}

/* helper function to deal specifically with images and the cross-browser differences in opacity handling */
function ImageFader(opac) 
{
    if (msWrap.style.MozOpacity != null) 
    {  
        /* Mozilla's pre-CSS3 proprietary rule */ 
        msWrap.style.MozOpacity = (opac/100) - .001;
    } 
    else if (msWrap.style.opac != null) 
    {
        /* CSS3 compatible */
        msWrap.style.opacity = (opac/100) - .001;
    } 
    else if (msWrap.style.filter != null) 
    {
        /* IE's proprietary filter */ 
        if (opac == 100)
        {
            msWrap.style.filter = "none;";
        } 
        else 
        {
            msWrap.style.filter = "alpha(opacity="+opac+");";
        }
    }
}

/* handles image rotation */
function ChangeImage(num, step) 
{    
    if (step == 1) 
    { /* fade out image */
        opacity -= 10;
        if (opacity > 0) 
        {
            ImageFader(opacity);
            timer2=setTimeout('ChangeImage(' + num + ', 1)',50);
        }
        else 
        { 
            ChangeImage(num, 2);
        }
    }    
    else if (step == 2) 
    { /* change image */
        currPic = num;
        msDivs[0].style.display = (num == 0 ? "block" : "none"); 
        msDivs[1].style.display = (num == 1 ? "block" : "none"); 
        msDivs[2].style.display = (num == 2 ? "block" : "none");
        msDivs[3].style.display = (num == 3 ? "block" : "none");
        msDivs[4].style.display = (num == 4 ? "block" : "none"); 
        msButtons[0].className = (num == 0 ? "on" : "off");
        msButtons[1].className = (num == 1 ? "on" : "off");
        msButtons[2].className = (num == 2 ? "on" : "off"); 
        msButtons[3].className = (num == 3 ? "on" : "off");
        msButtons[4].className = (num == 4 ? "on" : "off");
        ChangeImage(num, 3);
    }
    else if (step == 3) 
    { /* fade in image */
        opacity += 10;
        if (opacity <= 100) 
        {
            ImageFader(opacity);
            timer2=setTimeout('ChangeImage(' + num + ', 3)',50);
        }
    }
}

/* change picture, wait 5 seconds, repeat */
function TimedStory() 
{
    if (currPic < 4)
    {
        currPic++;
        ChangeImage(currPic, 1);
        timer1=setTimeout('TimedStory()',7000);
    }
    else
    {
	    currPic=0;
	    clearTimeout(timer1);
	    ChangeImage(currPic,1);
	    paused = true;
	    ImageSwap();
    }
}

/* executed when the play pause button is selected */
function PlayPauseClick(event) 
{
    paused = !paused;
    ImageSwap();
    if (paused) 
    { /* stop the image loop */
        clearTimeout(timer1);
    }
    else 
    { /* restart the image loop */
        TimedStory();
    }
}  


/*executed when a number link is selected */
function ArticleNumberClick (event) 
{
    var eventSource = typeof event.target != 'undefined' ? event.target : window.event.srcElement;
    /*  get the number portion of the class name of the event source */ 
    currPic = eventSource.id.substring(18,19) - 1;
    paused = true;
    ImageSwap();
    clearTimeout(timer1);
    clearTimeout(timer2);
    ChangeImage(currPic, 1);
} 

/* swap the play pause button image */
function ImageSwap() 
{
    var button = document.getElementById('divFeaturedRotatorPlayLink'); 
	if (!bIsIE)
	{
	    var imageFile = paused ? "/images/template/play.gif" : "/images/template/pause.gif";
	    button.style.background= "url("+imageFile+") 0px 0px no-repeat"; 	
	}
	else
	{ /*  Use an image sprite to deplete the image flickering in IE */
	    button.style.backgroundImage= "url(/images/template/play_pause.gif)";
	    position = paused ? "-27 px" : "0 px";  /* change the image source */
	    try 
	    {
	        document.execCommand('BackgroundImageCache', false, true);
	    } 
	    catch(e) {}
				
		/* if paused and play is not displayed */
		if (paused == true && currPosition != "-27 px")
		{
		    button.style.backgroundPositionY=position;
		}
		/* if playing and paused is not displayed */
		if (paused != true && currPosition != "0 px")
		{
		    button.style.backgroundPositionY=position;			  
		}  
		currPosition = position;
	}
}

function OnWindowLoad(functionToCall)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', functionToCall, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', functionToCall, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent ('onload', functionToCall);
  }
  else
  {
    var oldFunctionToCall = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = functionToCall;
    }
    else
    {
      window.onload = function () { oldFunctionToCall(); functionToCall(); };
    }
  }
}

/* Calls functionToCall as soon as the targetElement is loaded, even if the document hasn't completely loaded yet. 
   Place the parameter list for functionToCall in order after OnElementLoad (targetId, functionToCall),
   e.g., OnElementLoad (targetId, functionToCall, parameter1, parameter 2, parameter 3, ...) */  
function OnElementLoad (targetId, functionToCall)
{
	var myArguments = arguments;
	OnWindowLoad (function () { window.loaded = true; });
	var targetElement = document.getElementById (targetId);
	if (targetElement == null && !window.loaded)
	{
		var pollingInterval = setInterval (function ()
			{
				if (window.loaded)
				{
					clearInterval(pollingInterval);
				}
				targetElement = document.getElementById(targetId);
				if (targetElement != null)
				{
					clearInterval(pollingInterval);
					var argumentsTemp = new Array ();
					var argumentsTempLength = myArguments.length - 2;
					for (var i = 0; i < argumentsTempLength; i++)
					{
						argumentsTemp [i] = myArguments [i + 2];
					}		
					functionToCall.apply(this, argumentsTemp);
				}
			}, 10);
	}
}

/* Attaches an event handling function to the targetElement. 
   Examples of eventType values are 'mouseover' and 'keyup', as opposed to 'onmouseover' and 'onkeyup'. 
   bubbleEventUpDOMTree is a boolean variable specifying whether the event should activate the event listeners
   of all the ancestors of the element (up to the window object) */
function AddEventHandler (targetElement, eventType, functionToCall, bubbleEventUpDOMTree)
{
  if (!targetElement)
  {
	  window.status = 'Warning: Tried to attach event to null object';
	  return false;
  }
  if (typeof targetElement.addEventListener != 'undefined')
  {
    targetElement.addEventListener (eventType, functionToCall, bubbleEventUpDOMTree);
  }
  else if (typeof targetElement.attachEvent != 'undefined')
  {
    targetElement.attachEvent ('on' + eventType, functionToCall);
  }
  else
  {
    eventType = 'on' + eventType;
    if (typeof targetElement[eventType] == 'function')
    {
      var oldListener = targetElement[eventType];
      targetElement[eventType] = function ()
      {
        oldListener ();
        return functionToCall ();
      }
    }
    else
    {
      targetElement [eventType] = functionToCall;
    }
  }
  return true;
}
