var scrollerWidth = new Array(0,0);		// holder for width, dynamically generated, (top10, howTo)

var advanceWidth = new Array(178,237); 	// width of one block, (top10, howTo)
var maxShowing = new Array(4,3);		// amt of visible blocks, (top10, howTo)
var movePerLoop = new Array(18,24);		// framerate  
var originatingLeft = new Array(0,0);	// since it's not 0, original left position
var maxLeft = new Array(0,0);			// furthest left it can go... that's width based on max num minus the max showing, (top10, howTo)
var scrollerTimeout;					// var holder for the timeout
var moveToPos;
var advanceOneAtATime = false;

function sectionNameToNum(sectionName){
	if(sectionName == 'how_to'){
		n = 1;
	} else {
		n = 0;
	}
	
	return n;
}

function setupScroller(num,sectionName){
	parentDiv = document.getElementById("scrollerMask_" + sectionName);
	scrollerDiv = document.getElementById("scrollerContents_" + sectionName);
	scrollerPrev = document.getElementById("scrollerPrev_" + sectionName);
	scrollerNext = document.getElementById("scrollerNext_" + sectionName);
	
	scrollerPrevImg = document.getElementById("scrollerPrev_" + sectionName + "_image");
	scrollerNextImg = document.getElementById("scrollerNext_" + sectionName + "_image");
	
	n = sectionNameToNum(sectionName);
	
	//scrollerPrev.style.opacity = 0.4;
	//scrollerPrev.style.filter = "alpha(opacity=40)";
	scrollerPrevImg.src = "images/buttons/home_slider_arrow_previous_inactive.png";
	
	if(num > maxShowing[n]){
		if(scrollerNext.onclick){
			scrollerNext.onclick=function(){advanceScroller("next",1,sectionName);};
		} else if(scrollerNext.attributes["onclick"]){
			scrollerNext.attributes["onclick"].value = "advanceScroller('next',1,'" + sectionName + "');";
		} else {
			scrollerNext.setAttribute("onclick","advanceScroller('next',1,'" + sectionName + "');");
		}
		
	} else {
		//scrollerNext.style.opacity = 0.4;
		//scrollerNext.style.filter = "alpha(opacity=40)";
		scrollerNextImg.src = "images/buttons/home_slider_arrow_next_inactive.png";
	}
	
	originatingLeft[n] = scrollerDiv.offsetLeft;
	scrollerWidth[n] = advanceWidth[n] * num;
	maxLeft[n] = ((advanceWidth[n]*maxShowing[n]) - scrollerWidth[n]);
}

function advanceScroller(direction,times,sectionName){
	parentDiv = document.getElementById("scrollerMask_" + sectionName);
	scrollerDiv = document.getElementById("scrollerContents_" + sectionName);
	scrollerPrev = document.getElementById("scrollerPrev_" + sectionName);
	scrollerNext = document.getElementById("scrollerNext_" + sectionName);
	n = sectionNameToNum(sectionName);
	
	//alert((scrollerDiv.offsetLeft-originatingLeft[n])+" < "+maxLeft[n]);
	//alert("advanceScroller(" + direction + "," + times + "," + sectionName + ")");

	if(advanceOneAtATime){	
		// advance scroller one thumbnail size at a time.
		if(direction == "next"){
			moveToPos = (scrollerDiv.offsetLeft-originatingLeft[n]) - (advanceWidth[n] * times);
			scrollerTimeout = setInterval("scrollLeft('" + sectionName + "')", 1);
		} else if(direction == "prev"){
			moveToPos = (scrollerDiv.offsetLeft-originatingLeft[n]) + (advanceWidth[n] * times);
			scrollerTimeout = setInterval("scrollRight('" + sectionName + "')", 1);
		}
	
	} else {	
		// advance scroller the full shown set as defined at the top of this page
		if(direction == "next"){
			moveToPos = (scrollerDiv.offsetLeft-originatingLeft[n]) - ((maxShowing[n] * times) * advanceWidth[n]);
			scrollerTimeout = setInterval("scrollLeft('" + sectionName + "')", 1);
		} else if(direction == "prev"){
			moveToPos = (scrollerDiv.offsetLeft-originatingLeft[n]) + ((maxShowing[n] * times) * advanceWidth[n]);
			scrollerTimeout = setInterval("scrollRight('" + sectionName + "')", 1);
		}
	}
}

function scrollLeft(sectionName){
	parentDiv = document.getElementById("scrollerMask_" + sectionName);
	scrollerDiv = document.getElementById("scrollerContents_" + sectionName);
	scrollerPrev = document.getElementById("scrollerPrev_" + sectionName);
	scrollerNext = document.getElementById("scrollerNext_" + sectionName);
	n = sectionNameToNum(sectionName);
	
	clearOnClick("scrollerNext", sectionName);
	
	if((scrollerDiv.offsetLeft-originatingLeft[n]) > moveToPos
		 && (scrollerDiv.offsetLeft-originatingLeft[n]) > maxLeft[n]){
		scrollerDiv.style.left = parseInt((scrollerDiv.offsetLeft-originatingLeft[n]) - movePerLoop[n]) + "px";
	} else {
		stopScroller(sectionName);
	}
}

function scrollRight(sectionName){
	parentDiv = document.getElementById("scrollerMask_" + sectionName);
	scrollerDiv = document.getElementById("scrollerContents_" + sectionName);
	scrollerPrev = document.getElementById("scrollerPrev_" + sectionName);
	scrollerNext = document.getElementById("scrollerNext_" + sectionName);
	n = sectionNameToNum(sectionName);
	
	clearOnClick("scrollerPrev", sectionName);
	
	if((scrollerDiv.offsetLeft-originatingLeft[n]) < moveToPos
		 && (scrollerDiv.offsetLeft-originatingLeft[n]) < 0){
		scrollerDiv.style.left = parseInt((scrollerDiv.offsetLeft-originatingLeft[n]) + movePerLoop[n]) + "px";
	} else {
		stopScroller(sectionName);
	}
}

function stopScroller(sectionName){
	parentDiv = document.getElementById("scrollerMask_" + sectionName);
	scrollerDiv = document.getElementById("scrollerContents_" + sectionName);
	scrollerPrev = document.getElementById("scrollerPrev_" + sectionName);
	scrollerNext = document.getElementById("scrollerNext_" + sectionName);
	
	scrollerPrevImg = document.getElementById("scrollerPrev_" + sectionName + "_image");
	scrollerNextImg = document.getElementById("scrollerNext_" + sectionName + "_image");
	
	n = sectionNameToNum(sectionName);
	
	clearInterval(scrollerTimeout);
	if((scrollerDiv.offsetLeft-originatingLeft[n]) > maxLeft[n]){
		//alert(1);
		if(scrollerNext.onclick) scrollerNext.onclick=function(){advanceScroller("next",1,sectionName);};
		else if(scrollerNext.attributes["onclick"]) scrollerNext.attributes["onclick"].value = "advanceScroller('next',1,'" + sectionName + "');";
		else scrollerNext.setAttribute("onclick","advanceScroller('next',1,'" + sectionName + "');");
		//scrollerNext.style.opacity = 1;
		//scrollerNext.style.filter = "alpha(opacity=100)";
		scrollerNextImg.src = "images/buttons/home_slider_arrow_next_ini.png";
		
	} else if((scrollerDiv.offsetLeft-originatingLeft[n]) < originatingLeft[n]){
		//alert(2);
		if(scrollerNext.onclick) scrollerNext.onclick = function(){return false;};
		else if(scrollerNext.attributes["onclick"]) scrollerNext.attributes["onclick"].value = "";
		else scrollerNext.setAttribute("onclick","");
		//scrollerNext.style.opacity = 0.4;
		//scrollerNext.style.filter = "alpha(opacity=40)";
		scrollerNextImg.src = "images/buttons/home_slider_arrow_next_inactive.png";
	}
	
	if((scrollerDiv.offsetLeft-originatingLeft[n]) == 0){
		//alert(3);
		if(scrollerPrev.onclick) scrollerPrev.onclick = function(){return false;};
		else if(scrollerPrev.attributes["onclick"]) scrollerPrev.attributes["onclick"].value = "";
		else scrollerPrev.setAttribute("onclick","");
		//scrollerPrev.style.opacity = 0.4;
		//scrollerPrev.style.filter = "alpha(opacity=40)";
		scrollerPrevImg.src = "images/buttons/home_slider_arrow_previous_inactive.png";
		
	} else if((scrollerDiv.offsetLeft-originatingLeft[n]) < originatingLeft[n]){
		//alert(4);
		if(scrollerPrev.onclick) scrollerPrev.onclick=function(){advanceScroller("prev",1,sectionName);};
		else if(scrollerPrev.attributes["onclick"]) scrollerPrev.attributes["onclick"].value = "advanceScroller('prev',1,'" + sectionName + "');";
		else scrollerPrev.setAttribute("onclick","advanceScroller('prev',1,'" + sectionName + "');");
		//scrollerPrev.style.opacity = 1;
		//scrollerPrev.style.filter = "alpha(opacity=100)";
		scrollerPrevImg.src = "images/buttons/home_slider_arrow_previous_ini.png";
	}
}

function clearOnClick(elementName, sectionName){
	element = document.getElementById(elementName + "_" + sectionName);
	
	if(element.onclick){
		element.onclick = " ";
	} else if(element.attributes["onclick"]){
		element.attributes["onclick"].value = " ";
	} else {
		element.setAttribute("onclick"," ");
	}
}