/*
Sliderbox - a Javascript / jQuery slideshow
Provided under the GPL license and free to distribute, use and modify
Written by Jonathan William
Relevant Speech
info@relevantspeech.com

Usage
-----
Sliderbox consists of a containing element with a series of scrolling panels and a control window. It requires that jQuery v1.3+ is linked and loaded. It will run in IE6+, Firefox 3+, Safari 3+ and maybe some other browsers that haven't been tested. Basic HTML structure should look like:
<div id="slider-box"> <!-- The containing element. You can give your sliderbox any name you wish. Just make sure you identify the correct element when initializing SliderBox() -->
	<div class="slider">
		<div class="panel one">
			<p>Content for panel 1 goes in here. You can cascade styles on the panel classes!</p>
		</div>
		<div class="panel panel2">
			<img src="image.jpg" alt="You can insert images too" />
		</div>
		<div class="panel a-3rd-panel" style="background: #9cd;">
			<h3>Or for that matter....</h3>
			<h4>Any other HTML content you wish!</h4>
		</div>
	</div>
	<div class="controls">  <!-- This must be present to display the sliderbox controls -->
		<a class="left button">&lt;</a>
		<a class="playpause button"></a>
		<a class="right button">&gt;</a>
	</div>
</div>

Notes:
- You will need to store the sliderbox image files in /_js/sliderbox-images/ for now. Custom control image locations is on the to-do list!
- The container element sets itself to be centered in its parent element. You can override this by putting SliderBox's container element in an element which you can style as you wish

Paramaters:
scrollWindowElem: The name of the element to act as sliderbox container
panelSizeW: Width (in pixels) of the sliderbox
panelSizeH: Height (in pixels) of the sliderbox
speed: Speed, in milliseconds, the sliding animation takes
autoScroll: Whether or not the sliderbox should begin automatically moving on page load
autoScrollInterval: How long sliderbox should wait before scrolling to the next panel
*/
function SliderBox(scrollWindowElem, panelSizeW, panelSizeH, speed, autoScroll, autoScrollInterval)
{
	scrollWindow = scrollWindowElem;
	scrollWindowSliderPosition = 0;
	multiplier = panelSizeW;
	scrollSpeed = speed;
	subPanels = $(scrollWindowElem + " div.slider").children("div.panel").length;
	autoScrolling = autoScroll;
	var autoScrollTimer;
	
	if (autoScrolling)
	{
		autoScrollTimer = setInterval("SliderBox_ScrollRight();", autoScrollInterval);
		$(scrollWindowElem + " a.playpause.button").css("background-image", "url('/_js/sliderbox-images/pause.png')");
	}
	else
	{
		$(scrollWindowElem + " a.playpause.button").css("background-image", "url('/_js/sliderbox-images/right.png')");
	}
	
	$(scrollWindowElem).css(
	{
		"position": "relative",
		"overflow": "hidden",
		"width": panelSizeW + "px",
		"height": panelSizeH + "px",
		"margin": "0 auto"
	});
	$(scrollWindowElem + " div.slider").css(
	{
		"position": "absolute",
		"width": (panelSizeW * subPanels) + "px",
		"height": panelSizeH + "px"
	});
	$(scrollWindowElem + " div.slider div.panel").css(
	{
		"float": "left",
		"width": panelSizeW + "px",
		"height": panelSizeH + "px"
	});
	$(scrollWindowElem + " div.controls").css(
	{
		"position": "absolute",
		"bottom": "0",
		"right": "0",
		"z-index": "9999"
	});
	$(scrollWindowElem + " div.controls a.button").css(
	{
		"display": "block",
		"width": "24px",
		"height": "20px",
		"text-indent": "-9999px",
		"cursor": "pointer",
		"float": "left",
		"padding": "1px",
		"background-color": "#333",
		"background-repeat": "no-repeat",
		"background-position": "center",
		"color": "#ccc",
		"opacity": "0.5",
		"text-align": "center"
	});
	$(scrollWindowElem + " a.left.button").css(
	{
		"background-image": "url('/_js/sliderbox-images/left-double.png')"
	});
	$(scrollWindowElem + " a.right.button").css(
	{
		"background-image": "url('/_js/sliderbox-images/right-double.png')"
	});
	
	$(scrollWindowElem + " div.controls a.button").fadeTo(0, 0.5);
	$(scrollWindowElem + " div.controls a.button").hover(function()
	{
		$(this).fadeTo("fast", 1.00);
	}, function()
	{
		$(this).fadeTo("fast", 0.5);
	});
	
	$(scrollWindowElem + " a.left.button").click(function()
	{
		clearInterval(autoScrollTimer);
		SliderBox_ScrollLeft();
	});
	$(scrollWindowElem + " a.right.button").click(function()
	{
		clearInterval(autoScrollTimer);
		SliderBox_ScrollRight();
	});
	$(scrollWindowElem + " a.playpause.button").click(function()
	{
		if (autoScrolling)
		{
			autoScrolling = false;
			$(scrollWindowElem + " a.playpause.button").css("background-image", "url('/_js/sliderbox-images/right.png')");
			clearInterval(autoScrollTimer);
		}
		else
		{
			autoScrolling = true;
			$(scrollWindowElem + " a.playpause.button").css("background-image", "url('/_js/sliderbox-images/pause.png')");
			SliderBox_ScrollRight();
			autoScrollTimer = setInterval("SliderBox_ScrollRight();", autoScrollInterval);
		}
	});
}

function SliderBox_ScrollLeft()
{
	scrollWindowSliderPosition--;
	if (scrollWindowSliderPosition < 0)
	{
		scrollWindowSliderPosition = subPanels - 1;
	}
	SliderBox_DoScroll();
}

function SliderBox_ScrollRight()
{
	scrollWindowSliderPosition++;
	if (scrollWindowSliderPosition >= subPanels)
	{
		scrollWindowSliderPosition = 0;
	}
	SliderBox_DoScroll();
}

function SliderBox_DoScroll()
{
	$(scrollWindow + " div.slider").animate(
	{
		left: "-" + (scrollWindowSliderPosition * multiplier) + "px"
	}, scrollSpeed, function(){
		//Functions to perform on animation complete
	});
}