/// <summary>
/// Starts slideshow based upon the images in the slideshowList container. and also keeps the 
//  navigation list in sync.
/// </summary>
/// <param name="slideshowList">The HTML ID of the Slide Show Image container. + '#' to allow jquery to find it</param>
/// <param name="navigationList">The HTML ID of the navigation list. + '#' to allow jquery to find it</param>
function slideSwitch(slideshowList, navigationList) {
    var $active = $(slideshowList + ' img.active');
    
    $(slideshowList + ' img.loading').removeClass('loading');

    if ( $active.length == 0 ) $active = $(slideshowList + ' img:last');

    var $next =  $active.next('img').length ? $active.next() : $(slideshowList + ' img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {$active.removeClass('active last-active');});
        
    var trimmedItemNumber = trim($next.attr('class').replace('active', ''));
    
    
    setActiveListItem(trimmedItemNumber, navigationList);
    
}

/// <summary>
/// Sets the navigation list to the selected item.
/// </summary>
/// <param name="itemNumberString">The item Number defined by the HTML Attribute Class</param>
/// <param name="listname">The HTML ID of the navigation list. + '#' to allow jquery to find it</param>
function setActiveListItem(itemNumberString, listname){
    
    var currentActiveItem = $(listname + ' li.active');
    var itemToActivate = $(listname + ' li.' + itemNumberString);
    
    currentActiveItem.removeClass('active');
    itemToActivate.addClass('active');
}


/// <summary>
///Adds a click event to the navigation items that sets the image to the one that
///was clicked and also sets the navigation item  to the onw that was clicked
/// </summary>
/// <param name="searchString">The DOM path for the item that should have this onClick event</param>
/// <param name="slideshowList">The HTML ID of the Slide Show Image container. + '#' to allow jquery to find it</param>
/// <param name="navigationList">The HTML ID of the navigation list. + '#' to allow jquery to find it</param>
/// <param name="timeoutID">The browser ID of the slideshow from setInterval()</param>
function installNavigationClick(searchString, slideshowList, navigationList, timeoutID)
{
    $(searchString).click(function(){
        
        //Stops the Slideshow.
        clearInterval(timeoutID);
        
        var $this = $(this).parent();
        var ItemNumber = trim($this.attr('class').replace('active', ''));
        
        //Clear the Navigation list and sets the new one.
        setActiveListItem(ItemNumber, navigationList);
        
        //Clear the Image and set the one clicked.
        $(slideshowList + ' .active').removeClass('active');
        $(slideshowList + ' .last-active').removeClass('last-active');
        $(slideshowList + ' .' + ItemNumber).addClass('active');
    });
}

/// <summary>
/// Trims white space from the beging and end of a string
/// </summary>
/// <param name="s">The string to trim</param>
/// <returns>
/// A string trimmed of its white space.
/// </returns>
function trim(s)
{
	var l=0; var r=s.length -1;
	while(l < s.length && s[l] == ' ')
	{	l++; }
	while(r > l && s[r] == ' ')
	{	r-=1;	}
	return s.substring(l, r+1);
}