// Place this html in page to use slider...
<!--********** 2 PANEL IMAGE SLIDER **********-->
/*
<script type="text/javascript">			
	var image_slider_delayLength = 7000;
	var height_to_move_right_slide = -270;
</script>
<div id="slider">
	<div id="mover">

		<div id="slide-1" class="slide">
			<div class="slide_padding">
		
				<h2>Control Your Own Site!</h2>
				
				<div class="left_slide_container">
					Don't get locked out of <span class="emphasis">your</span> website! Take control with our 'Simple CMS'<!--span class="copyright">&copy;</span--> Content Management System!
					<a href="simple_cms_576872032.asp?id=158"><img class="learn_more" src="images/learn_more.png" alt="learn more" /></a>                       
				</div>
				
				<div class="right_slide_container">
					<div class="right_slide_container_padding">
						<img src="<%=config_base_url%>images/home_images_1.png">                          
					</div>
				</div>
				
			</div>
		</div>
		
		<div class="slide">
			<div class="slide_padding">
			
				<h2>It's Simple!</h2>
				
				<div class="left_slide_container">
					'Simple CMS'<!--span class="copyright">&copy;</span--> gives <span class="emphasis">you</span> control of the pages <span class="emphasis">and</span> content on your site!                        <a href="simple_cms_576872032.asp?id=158"><img class="learn_more" src="images/learn_more.png" alt="learn more" /></a>                       
					<a href="simple_cms_576872032.asp?id=158"><img class="learn_more" src="images/learn_more.png" alt="learn more" /></a>     
				</div>
				
				<div class="right_slide_container">
					<div class="right_slide_container_padding">
						<img src="<%=config_base_url%>images/home_images_1.png">                          
					</div>
				</div>
				
			</div>
		</div>		
		
	</div>  
</div>
<br>
<!--**********************************-->
*/
	
function doMove(panelWidth, tooFar) {
	var leftValue = $("#mover").css("left");
	
	// Fix for IE
	if (leftValue == "auto") { leftValue = 0; };
	
	var movement = parseFloat(leftValue, 10) - panelWidth;
	
	if (movement == tooFar) {
		//$(".slide img").animate({
	   $(".right_slide_container").animate({
			"top": height_to_move_right_slide   //adjust if right slide doesn't move up high enough
		}, function() {
			$("#mover").animate({
				"left": 0
			}, function() {
				$(".right_slide_container").animate({
					"top": 0
				});
			});
		});
	}
	else {
		//$(".slide img").animate({
		$(".right_slide_container").animate({
			"top": height_to_move_right_slide   //adjust if right slide doesn't move up high enough
		}, function() {
			$("#mover").animate({
				"left": movement
			}, function() {
				$(".right_slide_container").animate({
					"top": 0
				});
			});
		});
	}
}

$(function(){
	
    var $slide1 = $("#slide-1");

	var panelWidth = $slide1.css("width");
	var panelPaddingLeft = $slide1.css("paddingLeft");
	var panelPaddingRight = $slide1.css("paddingRight");

	panelWidth = parseFloat(panelWidth, 10);
	panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
	panelPaddingRight = parseFloat(panelPaddingRight, 10);

	panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
	
	var numPanels = $(".slide").length;
	var tooFar = -(panelWidth * numPanels);
	var totalMoverwidth = numPanels * panelWidth;
	$("#mover").css("width", totalMoverwidth);

	//$("#slider").append('<a href="#" id="slider-stopper">Stop</a>');

	sliderIntervalID = setInterval(function(){
		doMove(panelWidth, tooFar);
	}, image_slider_delayLength);
	
	$("#slider-stopper").click(function(){
		if ($(this).text() == "Stop") {
			clearInterval(sliderIntervalID);
		 	$(this).text("Start");
		}
		else {
			sliderIntervalID = setInterval(function(){
				doMove(panelWidth, tooFar);
			}, image_slider_delayLength);
		 	$(this).text("Stop");
		}
		 
	});

});