if(runjs) {
	//the plan data pieces
	var boxes = [
			["Level 1", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 2", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 3", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 4", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 5", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 6", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 7", "750 GB", "Unlimited", "Free", "27.95"],
			["Level 8", "750 GB", "Unlimited", "Free", "27.95"],
	];
	
	//plan links & names
	var pages = [
		["Order level 1 configuration", "plans.php?planid=1"],
		["Order level 2 configuration", "plans.php?planid=2"],
		["Order level 3 configuration", "plans.php?planid=3"],
		["Order level 4 configuration", "plans.php?planid=4"],
		["Order level 5 configuration", "plans.php?planid=5"],
		["Order level 6 configuration", "plans.php?planid=6"],
		["Order level 7 configuration", "plans.php?planid=7"],
		["Order level 8 configuration", "plans.php?planid=8"],
	];
	
	//the button needs to change from "Best Value" to "Smart Choice"
	var but_class = [  1,   1,   1,   1,   2,   1,   1,   1];
	
	//the percents the arrow will be out within the plans
	var dragg_pos = [  0,  13,  25,  37,  50,  63,  75,  88];
	
	//the position of the background for each instance
	var backg_pos = [ 91, 180, 270, 360, 451, 540, 630, 720];
	
	//the position of the arrow for each instance
	var arrow_pos = [ 48, 129, 218, 308, 398, 488, 578, 667];
	
	//the content background positions for each instance
	var conbg_pos = [102, 191, 281, 371, 461, 551, 641, 740];
	$(function() {
		//for non-js users this won't happen
		$('#hideme').css('display', 'block');
		$('#nojs').css('display', 'none');
		//start te slider
		$('#slider').slider();
		//get the arrow in the right spot
		$('#slide_arrow').animate({left: '38px'}, 500, function() {});
		//$('#sliderfocus').css('width', '400px;');
		$('#slide_arrow').mouseup(function() {
			var percent = $(this).css('left'); //get the percent
			percent = parseInt(percent.substring(0, percent.indexOf('%'))); //make it an int
			var i = dragg_pos.length; //loop through it backwards
			var con = true; //we don't want to "return" or it will cause an error, so just stop looping.
			while(i>0) {
				if((con) && (percent >= dragg_pos[i-1])) {					
					//changes the link text
					$('#button span').html(pages[i-1][0]);
					
					//changes the link href
					$('#button').attr('href', pages[i-1][1]);
					
					//changes the button icon
					$('#buttons').removeClass('sliderbutton1').removeClass('sliderbutton2').addClass('sliderbutton'+but_class[i-1]);
					
					//make the arrow "slide"; comment out this line to not make the arrow "cling"
					$('#slide_arrow').animate({left: arrow_pos[i-1]+'px'}, 500, function() {});
					
					//width of the backgrounds to change
					$('#sliderfocus').animate({width: backg_pos[i-1]+'px'}, 0, function() {});
					$('#slider_content2').animate({width: conbg_pos[i-1]+'px'}, 0, function() {});
					
					//fills out plan information
					$('#slider_content .plan h2').html(boxes[i-1][0]);
					$('#slider_content .bandwith h2').html(boxes[i-1][1]);
					$('#slider_content .domain h2').html(boxes[i-1][2]);
					$('#slider_content .setup h2').html(boxes[i-1][3]);
					$('#slider_content .price h2').html(boxes[i-1][4]);
					con = false;
				}
				i--;
			}
		});
	});
}