/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
var handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "/images/left-enabled_20x176.png";//"images/left-enabled.gif";	
	} else {
		leftImage.src = "/images/left-disabled_20x176.png";//"images/left-disabled.gif";	
	}

};

function swapPrevButton(over, leftImage)
{
	var leftImage = document.getElementById(leftImage);
	var disabledVal = leftImage.src.indexOf("-disabled_");
	var xGif = leftImage.src.indexOf("x.gif"); //this is used by ie6pngfix

	if (disabledVal!=-1 || xGif!=-1)
	{
		return false;
	}

	if (over) {
		leftImage.src = "/images/left-over_20x176.png";
	}
	else {
		leftImage.src = "/images/left-enabled_20x176.png";
	}
}

function swapNextButton(over, rightImage)
{
	var rightImage = document.getElementById(rightImage);
	var disabledVal = rightImage.src.indexOf("-disabled_");
	var xGif = rightImage.src.indexOf("x.gif"); //this is used by ie6pngfix

	if (disabledVal!=-1 || xGif!=-1)
	{
		return false;
	}

	if (over) {
		rightImage.src = "/images/right-over_20x176.png";
	}
	else {
		rightImage.src = "/images/right-enabled_20x176.png";
	}
}

/*
 * fades out the separator bar while the scroll animation is going on.
 * But it should only trigger if the button is in an enabled state.
 *
 **/
function handleBar(b)
{
	var button = document.getElementById(b);
	var disabledVal = button.src.indexOf("-disabled_");

	if (disabledVal!=-1)
	{
		return false;
	}
	
	
	document.getElementById('sep-bar1').style.display='none';
	document.getElementById('sep-bar2').style.display='none';
	setTimeout('document.getElementById(\'sep-bar1\').style.display=\'\'',500);
	setTimeout('document.getElementById(\'sep-bar2\').style.display=\'\'',520);
}

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) {

	var enabling = args[0];
	var rightImage = args[1];

	if(enabling) {
		rightImage.src = "/images/right-enabled_20x176.png"; //"images/right-enabled.gif";
	} else {
		rightImage.src = "/images/right-disabled_20x176.png"; //"images/right-disabled.gif";
	}

};




/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'mycarousel'.) See the
 * HTML code below.
 **/
var pageLoad = function() 
{
	//generate a random number between 1 and 8 inc. This will be used in the 
	//firstVisible array below, meaning a different set of pictures is seen in 
	//the carousel on each page load.
	var randomnumber=Math.floor((Math.random()*8)+1);
	
	var carousel = new YAHOO.extension.Carousel("mycarousel", 
		{
			numVisible:        3,
			firstVisible:      randomnumber, 
			animationSpeed:    0.35,
			animationMethod:  YAHOO.util.Easing.easeBoth, 
			scrollInc:         1,
			navMargin:         20,
			prevElement:     "prev-arrow",
			nextElement:     "next-arrow",
			size:              10,
			prevButtonStateHandler:   handlePrevButtonState,
			nextButtonStateHandler:   handleNextButtonState
		}
	);

};

YAHOO.util.Event.addListener(window, 'load', pageLoad);