///////////////////////////////////////////////////////////////////////////////
// ImgScrollBar.js	(c) ARC Graphics 2.2008, 1.2010, 5.2010	v.6
// setup a scrolling row, or bar, of images that display within a window of a 
// determined width.
// 
// The image bar must be a single row, one image per cell table in a DIV lying 
// inside another DIV. The 1st DIV is the container of the moving bar and is 
// delimited in its width. It is fixed (can be relative positioned) and has the 
// ID «ImgScrollBarHolder». The 2nd DIV with the ID «ImgScrollBarMobile» is 
// inside the 1st one and can be moved. This inner DIV has a table holding the 
// images. If the total width of all images exceed the width of the first DIV,  
// then the overlapping images are masked with its «overflow: hidden;» style 
// attribute, creating a windowing effect. By regex-ing the innerHTML of the 
// DIV, the table attributes and the total width of all the images inside the 
// table cells can be determined, returning the total width that can be used to 
// trigger the visibility of scroll buttons. Functions used: MoveBar(Amount), 
// MoveBarLeft(), MoveBarRight() and ImgScrollBarWidth(ImgScrollBarID).
// 
// The IDs and the behavior of the scrolling bar are set here:
var ImgScrollBarHolder	= "BarHolder";	// ID of the fixed scroll bar container
var ImgScrollBarMobile	= "BarMobile";	// ID of the scrolling bar with images
var ScrollBy	= 1;	// amount of pixels to scroll at each step
if (document.all) ScrollBy = ScrollBy * 4;	// if IE, move faster
var ScrollSpeed	= 10;	// time intervall for scroll step in milliseconds
// 
// example:
//<DIV ID="BarHolder" STYLE="position: relative; width: 790px; height: 66px; overflow: hidden; border: 0px solid Black;"><!-- 1st fixed scroll bar holder DIV, hiding off boundary elements -->
//<DIV ID="BarMobile" STYLE="position: relative; top: 0px; left: 0px; height: 66px; border: 0px solid Blue;"><!-- 2nd mobile scrolling DIV, moving inside the above -->
//<TABLE BORDER="0" CELLSPACING="3" CELLPADDING="0" BGCOLOR="#FFFFFF"><TR>
//	<!-- place your scrolling content here in this table ... -->
//	<TD><IMG HEIGHT="60" SRC= ...></TD><TD><IMG ...></TD>...<TD><IMG ...></TD>
//</TR></TABLE>
//</DIV></DIV>
//
// example with two lateral triggers (needs a transparent image pix-transp.gif):
//<DIV STYLE="position: relative;"><!-- ImgScrollBar start - see ImgScrollBar.js for instructions -->
//<DIV ID="BarHolder" STYLE="position: relative; width: 790px; height: 66px; overflow: hidden; border: 0px solid Black;"><!-- 1st fixed scroll bar holder DIV, hiding off boundary elements -->
//<DIV ID="BarMobile" STYLE="position: relative; top: 0px; left: 0px; height: 66px; border: 0px solid Blue;"><!-- 2nd mobile scrolling DIV, moving inside the above -->
//<TABLE BORDER="0" CELLSPACING="3" CELLPADDING="0" BGCOLOR="#FFFFFF"><TR>
//	<!-- place your scrolling content here in this table ... -->
//	<TD><IMG HEIGHT="60" SRC= ...></TD><TD><IMG ...></TD>...<TD><IMG ...></TD>
//</TR></TABLE>
//</DIV></DIV><!-- two transparent lateral MoveBar() triggers -->
//<DIV STYLE="position: absolute; left: -40px; top: 0px; width: 50px; height: 66px; border: 0px dotted Silver;"><A HREF="javascript:void(0);" onMouseOver="MoveBar();MoveBarRight();this.parentNode.style.borderWidth='1px';parent.window.status=StatusDefault;return true;" onMouseDown="MoveBar();MoveBarRight(10);" onMouseOut="MoveBar();this.parentNode.style.borderWidth='0px';" onMouseUp="MoveBar();"><IMG SRC="../Pics/pix-transp.gif" ALT="" WIDTH="50" HEIGHT="60" BORDER="0"></A></DIV>
//<DIV STYLE="position: absolute; right:-40px; top: 0px; width: 50px; height: 66px; border: 0px dotted Silver;"><A HREF="javascript:void(0);" onMouseOver="MoveBar();MoveBarLeft();this.parentNode.style.borderWidth='1px';parent.window.status=StatusDefault;return true;" onMouseDown="MoveBar();MoveBarLeft(10);" onMouseOut="MoveBar();this.parentNode.style.borderWidth='0px';" onMouseUp="MoveBar();"><IMG SRC="../Pics/pix-transp.gif" ALT="" WIDTH="50" HEIGHT="60" BORDER="0"></A></DIV>
//</DIV><!-- ImgScrollBar end - see ImgScrollBar.js for instructions -->
//
// functions:
// ImgScrollBarWidth(): for calculating the width of all thumnail images, first 
// surround all image widths figures in the table containing the thumbimages 
// with two «@» for latter parsing. The function must be placed at the end of 
// the HTML page because reading «innerHTML» in the header leads to an error.
// Additionally, IE interprets innerHTML its own way and doesn't quote all 
// attributes, hence regex «["']?» for quotes.
function ImgScrollBarWidth(ImgScrollBarID) {	// determine the total width of all images including the cellspacing and -padding
	var CellSpacing	= document.getElementById(ImgScrollBarID).innerHTML.match(/CELLSPACING=["']?[0-9]+["']?/i) + "";	// pick out cellspacing=value and convert to string
	CellSpacing 	= CellSpacing.replace(/[^0-9]/g, "")*1;	// strip non figures and convert to number
	var CellPadding	= document.getElementById(ImgScrollBarID).innerHTML.match(/CELLPADDING=["']?[0-9]+["']?/i) + "";	// pick out cellspacing=value and convert to string
	CellPadding 	= CellPadding.replace(/[^0-9]/g, "")*1;	// strip non figures and convert to number
	var BarWidth = document.getElementById(ImgScrollBarID).innerHTML.replace(/WIDTH=["']?([0-9]+)["']?/gi, "@$1@");	//alert(BarWidth);
	//alert("CellSpacing:'"+CellSpacing+"'\n" + "CellPadding:'"+CellPadding+"'\n");
	var BarSize = new Array();	var BarImgWidths =  new Array();	var BarElement;
	BarSize = BarWidth.split("@");	// second, split the string to an array	//alert("BarSize:'"+BarSize+"'\n ");
	BarWidth = 0;
	for (var i = 0; i < BarSize.length; i++) {	// third, cycle thru all elements and add the widths together
		BarElement = BarSize[i].replace(/[0-9]/g, "");	//alert("BarElement "+i+" :'"+BarElement+"'\n\n typeof(BarElement):'"+typeof(BarElement)+"'\n\n BarSize[i]:'"+BarSize[i]+"'\n");
		if (BarElement == "") {	// after stripping all numbers, nothing is left, hence it's a number (= an image width)
			var NewElement = BarImgWidths.push(BarSize[i]);	// add the width to the array BarImgWidths
			BarWidth += BarSize[i]*1;	// add as number
		}
	}	//	alert(BarImgWidths+"\n\n BarImgWidths.length='"+BarImgWidths.length+"'\n\n BarWidth='"+BarWidth+"'\n");
	var BarMobileWidth	= BarWidth + (BarImgWidths.length)*CellSpacing+CellSpacing + (BarImgWidths.length)*CellPadding*2;	//	alert("BarWidth='"+BarWidth+"' ("+typeof(BarWidth)+")\nBarMobileWidth='"+BarMobileWidth+"' ("+typeof(BarMobileWidth)+")\n");
	return BarMobileWidth;
}
// MoveBar(); MoveBarLeft(); MoveBarRight(); functions for scrolling and 
// stopping the picture bar. Can be invoked with e.g. onMouseOver, but first 
// with «MoveBar()» to stop an eventual previous scroll, the with MoveBarLeft() 
// or with MoveBarRight(). The default amount and behaviour is set above, but 
// can be changed with an argument in MoveBarLeft/Right(SpeedFactor)
var Scrolling	= 0;	// setTimeout handle
function MoveBar(Amount) {
	if (typeof(Amount)=="undefined") {
		window.clearTimeout(Scrolling);
	} else {
		var BarPosH	= document.getElementById(ImgScrollBarMobile).style.left;
		BarPosH	= BarPosH.replace(/[^0-9+-]/g, "")*1;	// strip 'px' and convert to number
		var BarContainerWidth	= document.getElementById(ImgScrollBarHolder).style.width.replace(/[^0-9+-]/g, "")*1;
		var BarOverlap	= ((BarMobileWidth-BarContainerWidth)<0)?0:(BarMobileWidth-BarContainerWidth);
		if  ((BarPosH>-BarOverlap&&Amount<0)||(BarPosH<BarStartPos&&Amount>0)) BarPosH += Amount;	// don't scroll too far
		//alert("Amount='"+Amount+"' ("+typeof(Amount)+")\n" + "BarPosH='"+BarPosH+"' ("+typeof(Amount)+")\n" + "BarContainerWidth='"+BarContainerWidth+"' ("+typeof(BarContainerWidth)+")\n" + "BarMobileWidth='"+BarMobileWidth+"' ("+typeof(BarMobileWidth)+")\n"+ "BarOverlap='"+BarOverlap+"' ("+typeof(BarOverlap)+")\n");
		//window.status="Amount='"+Amount+"' " + "BarPosH='"+BarPosH+"' " + "BarContainerWidth='"+BarContainerWidth+"' " + "BarMobileWidth='"+BarMobileWidth+"' "+ "BarOverlap='"+BarOverlap+"' ";
		document.getElementById(ImgScrollBarMobile).style.left	= BarPosH + "px";
	}
}
function MoveBarLeft(SpeedFactor) {
	if (typeof(SpeedFactor)=="undefined") SpeedFactor=1;
	MoveBar(-ScrollBy*SpeedFactor);
	Scrolling = window.setTimeout("MoveBarLeft("+SpeedFactor+")", ScrollSpeed );
}
function MoveBarRight(SpeedFactor) {
	if (typeof(SpeedFactor)=="undefined") SpeedFactor=1;
	MoveBar(ScrollBy*SpeedFactor);
	Scrolling = window.setTimeout("MoveBarRight("+SpeedFactor+")", ScrollSpeed );
}
function MoveBarTo(Position) {
	document.getElementById(ImgScrollBarMobile).style.left	= Position + "px";
}
///////////////////////////////////////////////////////////////////////////////

// getElementsByClass() - (c) ARC Graphics 2.2008 /////////////////////////////
// completitive «getElementBy...» function for missing CSS-Class handling (as
// DOM variant like for ID, Name or TagName), finds all tags with a CSS-class 
// and lets an action to be acomplished on those objects as a method.
// usage: getElementsByClass ( "class_name_string" , "method_as_string" )
// quoted elements in 'method_as_string' must have escaped quotes, like in 
// «.style.visibility=\'hidden\'» (or use a var instead)
// (inspired from BlobFisk http://www.webmasterworld.com/forum91/1729.htm)
function getElementsByClass(theClass,actionMethod) {	
	var allPageTags=document.getElementsByTagName("*");	// populate the array with all the page tags
	for (var i=0; i<allPageTags.length; i++) {	// thru all tags
		if (allPageTags[i].className.indexOf(theClass)>=0) {	// pick out the tags with the class name (one name only)
			//alert(allPageTags[i].className+"\n"+"allPageTags[i]."+actionMethod+";");
			eval("allPageTags[i]."+actionMethod+";"); // apply the method to this tag
		}
	}
} /////////////////////////////////////////////////////////////////////////////