var _profileStrip;
var _currentIndex = 0;
var _profiles;
var _leftButton;
var _rightButton;
var _maxIndex = 12;
var _totalProfiles;
var _moveAmount = 87;
var _lastXPosition = 0;

function loadFilmstrip()
{
	_profileStrip = document.getElementById('profileStrip');
	_leftButton = document.getElementById('arrow_left');
	_rightButton = document.getElementById('arrow_right');
	
	if(_profileStrip == null)
	    return;
	
	_profiles = _profileStrip.getElementsByTagName('span');
	_totalProfiles = _profiles.length;
	_maxIndex = _profiles.length - 8;
	
	for(var i = 0; i <= _profiles.length - 1; i++)
	{
	    _profiles[i].style.display = 'inline';
	}
	
	
    var iterations = 8;
    if(iterations > _totalProfiles)
        iterations = _totalProfiles;
    var animations = new Array(iterations);

    for(var i = 0; i < iterations; i++)
    {
        animations[i] = new AjaxControlToolkit.Animation.FadeAnimation(_profiles[i], .3, 30, AjaxControlToolkit.Animation.FadeEffect.FadeIn, 0, 1, true);
        _profiles[i].style.backgroundColor = '#E1DFD8';
    }
	
    var parallelAnimationSet = 
        new AjaxControlToolkit.Animation.ParallelAnimation(null, .5, 30, animations);

    addAnimation(parallelAnimationSet);
    
    if(_totalProfiles <= 8)
        _rightButton.className = 'arrow_rightDisabled';
}




function rightButtonClicked()
{
    if(_currentIndex == _maxIndex || _totalProfiles < 8)
        return;

    if(_currentIndex == 0)
        _leftButton.className = 'arrow_leftNormal';

    var animations = new Array(3);

    var nonPixelVal = 0;
    
    if(_profileStrip.style.left != '')
        nonPixelVal = parseInt(_profileStrip.style.left.replace(/px/, ""));
    var newPosition = (_lastXPosition - _moveAmount);
    _lastXPosition = newPosition;
    
    animations[0] = new AjaxControlToolkit.Animation.LengthAnimation(_profileStrip, .5, 30, 'style', 'left', newPosition + _moveAmount, newPosition, 'px');
    
    var profileToFadeOut = _profiles[_currentIndex];
    animations[1] = new AjaxControlToolkit.Animation.FadeAnimation(profileToFadeOut, .3, 30, AjaxControlToolkit.Animation.FadeEffect.FadeOut, 0, 1, true);

    var profileToFadeIn = _profiles[_currentIndex + 8];
    animations[2] = new AjaxControlToolkit.Animation.FadeAnimation(profileToFadeIn, .3, 30, AjaxControlToolkit.Animation.FadeEffect.FadeOut, 1, 0, true);
    
    var parallelAnimationSet = 
        new AjaxControlToolkit.Animation.ParallelAnimation(null, .4, 30, animations);

    addAnimation(parallelAnimationSet);
    profileToFadeIn.style.backgroundColor = '#E1DFD8';
    
    _currentIndex++;
    
    if(_currentIndex == _maxIndex)
        _rightButton.className = 'arrow_rightDisabled';

}


function leftButtonClicked()
{   
    if(_currentIndex == 0 || _totalProfiles < 8)
        return;
        
    if(_currentIndex == _maxIndex)
        _rightButton.className = 'arrow_rightNormal';

    var animations = new Array(1);

    var nonPixelVal = 0;
    
    if(_profileStrip.style.left != '')
        nonPixelVal = parseInt(_profileStrip.style.left.replace(/px/, ""));
    var newPosition = (_lastXPosition + _moveAmount);
    _lastXPosition = newPosition;

    animations[0] = new AjaxControlToolkit.Animation.LengthAnimation(_profileStrip, .5, 30, 'style', 'left', newPosition - _moveAmount, newPosition, 'px');
        
    var profileToFadeOut = _profiles[_currentIndex + 7];
    animations[1] = new AjaxControlToolkit.Animation.FadeAnimation(profileToFadeOut, .3, 30, AjaxControlToolkit.Animation.FadeEffect.FadeOut, 0, 1, true);

    var profileToFadeIn = _profiles[_currentIndex - 1];
    animations[2] = new AjaxControlToolkit.Animation.FadeAnimation(profileToFadeIn, .3, 30, AjaxControlToolkit.Animation.FadeEffect.FadeIn, 0, 1, true);

    var parallelAnimationSet = 
        new AjaxControlToolkit.Animation.ParallelAnimation(null, .4, 30, animations);

    addAnimation(parallelAnimationSet);

    _currentIndex--;
    
    if(_currentIndex == 0)
        _leftButton.className = 'arrow_leftDisabled';

}


function leftButtonMouseOver()
{
    if(_currentIndex == 0 || _totalProfiles < 8)
        return;

    _leftButton.className = 'arrow_leftHover';
}

function leftButtonMouseOut()
{
    if(_currentIndex == 0 || _totalProfiles < 8)
        return;

    _leftButton.className = 'arrow_leftNormal';
}

function rightButtonMouseOver()
{
    if(_currentIndex == _maxIndex || _totalProfiles < 8)
        return;

    _rightButton.className = 'arrow_rightHover';
}

function rightButtonMouseOut()
{
    if(_currentIndex == _maxIndex || _totalProfiles < 8)
        return;
        
    _rightButton.className = 'arrow_rightNormal';
}









//Queue code
animationPlaying = false;
animationArray = new Array(250);
animationCount = 0;

function addAnimation(animation)
{
    animationCount++;
    animation.number = animationCount;
    for(var i = 0; i <= animationArray.length - 1; i++)
    {
        if(animationArray[i] == undefined)
        {
            animationArray[i] = animation;
            break;
        }
    }
    
    if(!animationPlaying)
        playNextAnimation();
}

function playNextAnimation()
{
    if(animationPlaying == false)
    {
        animationPlaying = true;

        var animation = animationArray.shift();
        if(animation != null)
        {
            animation.play();
            animation.add_ended(endOfAnimation);
        }
        else
        {
            animationPlaying = false;
        }
    }
}

function endOfAnimation()
{
    animationPlaying = false;
    playNextAnimation();
}