var curThumb = getQueryVar('id') ? getQueryVar('id') : 1;
var dimPercent = .4;
var shiftAmt = 3;
var numThumbsAcrossInGrid = 5;
var thumbWidth = 122;
var thumbHeight = 70;
var gridMarginX = 20;
var gridMarginY = 38;
var hScroll = true;
var hScrollAsGrid = false;
var scrollIntervalSeconds = 15;
var autoScrolling = false;

var numThumbs;
var scroll;
var scrollInterval;

function shiftRight()
{	
	curThumb = Math.max(Math.min(Number(curThumb) + Number(shiftAmt), numThumbs - (shiftAmt - 1)),1);
	scroll.toElement('thumb_' + curThumb);

	updatePager(); 
	updateArrows();
}
	
function shiftLeft()
{
	curThumb = Math.max(Math.min(curThumb - shiftAmt, numThumbs),1);
	scroll.toElement('thumb_' + curThumb);

	updatePager();
	updateArrows();
}

function autoShift()
{
	// Shift right unless we've hit the last page of thumbnails
	if((curThumb + (shiftAmt - 1)) < numThumbs)
	{
		shiftRight();
	}
	else
	{
		curThumb = 1;
		scroll.toElement('thumb_1');
		updatePager();
		updateArrows();
	}
}

function resetInterval()
{
	clearInterval(scrollInterval);
	
	// Shift the thumbnails at regular intervals
	scrollInterval = setInterval("autoShift()", scrollIntervalSeconds * 1000);
}
// Highlight the current page indicator
function updatePager()
{
	var numPages = Math.ceil(numThumbs / shiftAmt);
	var pagesLeft = Math.ceil((curThumb - 1) / shiftAmt);
	var curPage = Math.min(pagesLeft, numPages - 1);

	$$(".pager").each (
		function(obj) {
			obj.setStyle('color','#666666');
		});
	$('pager_' + curPage).setStyle('color','#f37921');
}

function dimArrow(_which_arrow)
{
	if(Browser.Engine.trident)
	{
		_which_arrow.style.filter = "alpha(opacity=" + Math.floor(dimPercent * 100) + ")";
	}
	else
	{
		_which_arrow.style.opacity = dimPercent;
	}
}

function brightenArrow(_which_arrow)
{
	if(Browser.Engine.trident)
	{
		_which_arrow.style.filter = "alpha(opacity=100)";
	}
	else
	{
		_which_arrow.style.opacity = 1;
	}
}

function hideArrow(_which_arrow)
{
	_which_arrow.setStyle('display','none');
}

function showArrow(_which_arrow)
{
	_which_arrow.setStyle('display','inline');
}


function createPager()
{
	// Draw the page indicators below the thumbnails
	var pager_str = "";
	var num_pages = Math.ceil(numThumbs / shiftAmt);
	for(i = 0; i < num_pages; ++i)
	{
		pager_str += "<span id='pager_" + i + "' class='pager'>o</span>";
	}

	// Display the page indicators
	if(num_pages > 1)
	{
		$('page_indicators').innerHTML = pager_str;

		// Make the page indicators hot
		$$(".pager").each (
			function(obj) {
				obj.addEvent('click', function(event) {
					event = new Event(event).stop();
					var goToPageNum = Number(obj.id.substr(obj.id.indexOf("_") + 1));
					curThumb = (goToPageNum * shiftAmt) + 1;
					scroll.toElement('thumb_' + curThumb);
					updatePager();
					updateArrows();
				});
			}
		);
		
		updatePager();
	}
}

// Hide or show Arrows depending on their need.
function updateArrows()
{
	// Fade the left arrow if we can't go any further left
	if(curThumb == 1)
	{
		hideArrow($('left_arrow'));
	}
	else
	{
		showArrow($('left_arrow'));
	}
	
	// Fade the right arrow if we can't go any further right
	if(curThumb >= (numThumbs - (shiftAmt - 1)))
	{
		hideArrow($('right_arrow'));
	}
	else
	{
		showArrow($('right_arrow'));
	}
}

function h_scroll_init()
{
	numThumbs = $$(".scrolling_image").length;
		
	scroll = new Fx.Scroll('h_scroll_wrapper', {
		wait: false,
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
		 
	// Position thumbnails
	if(hScrollAsGrid)
	{
		for(i = 1; i <= numThumbs; ++i)
		{
			$('thumb_' + i).setStyle('left', ((i - 1) % numThumbsAcrossInGrid) * (thumbWidth + gridMarginX));
			$('thumb_' + i).setStyle('top', Math.floor((i - 1) / numThumbsAcrossInGrid) * (thumbHeight + gridMarginY));
			$('thumb_' + i).setStyle('visibility', "visible");
		}
	}
	else
	{
		for(i = 1; i <= numThumbs; ++i)
		{
			$('thumb_' + i).setStyle('left', (i - 1) * thumbWidth);
			$('thumb_' + i).setStyle('visibility', "visible");
		}
	}
	
	$$(".scrolling_image").each(
		function(obj) {        
			obj.addEvent('mouseover', function(){ turn_image_on(obj); });
			obj.addEvent('mouseout', function(){ turn_image_off(obj); });
	})
	
	$('left_arrow').addEvent('click', function(event) {
		event = new Event(event).stop();
		if(autoScrolling) { resetInterval(); }
		shiftLeft();
	});
	
	$('left_arrow').addEvent('mouseover', function() { turn_image_on($('left_arrow')); });
	$('left_arrow').addEvent('mouseout', function() { turn_image_off($('left_arrow')); });
	
	$('right_arrow').addEvent('click', function(event) {
		event = new Event(event).stop();
		if(autoScrolling) { resetInterval(); }
		shiftRight();
	});
	
	$('right_arrow').addEvent('mouseover', function() { turn_image_on($('right_arrow'));	});
	$('right_arrow').addEvent('mouseout', function() { turn_image_off($('right_arrow')); });
	
	scroll.set((curThumb - 1) * thumbWidth);

	updateArrows();

	if(!hScrollAsGrid)
	{
		createPager();
	}
	
	if(autoScrolling) { resetInterval(); }
}