/*
	sinusoidal equation
	
	y = A*sin((2pi/B)*(x-C))+D
	
	D = (max value + min value) / 2
	
	C = (x-coordinate of a maximum) - (B/4)
	
	B = distance between two successive peaks or valleys
	
	A = (max value - min value) / 2
	
	y = distance in pixels
	
	x = time in frames
	
	we need to find out how far to move per increment so we need to solve for y
	
	dist = A sin((2pi/B)*(x-C))+D
	
	2*A is the distance from trough to peak, so A = (end_pos - start_pos)
	***note you need to define start_pos so it really is where the div started and not where it is in the middle of moving
	maybe a for loop?
	
	dist = (end_pos - start_pos) sin((2pi/B)*(x-C))+D
	
	B is the period of the curve, which we will measure in "frames", i.e. how fine do we chop it. 
	let's say we want 25 "frames" per second (1000ms) of animation
	and the animation to be about 500ms long
	that means we want 12.5 frames, so let's round to 12.
	whew. B = 12
	
	dist = (end_pos - start_pos)/2 sin((2pi/12)*(x-C))+D
	
	C is the starting distance from 0.  we want to start on the peak so C will be 1.5 times B
	
	dist = (end_pos - start_pos)/2 sin((2pi/12)*(x-18))+D
	
	x is the clock.  we want it to advance one frame each iteration. we'll call it 'i'.
	
	dist = (end_pos - start_pos)/2 sin((2pi/12)*(i-18))+D
	
	D is how far from O our start will be. since we'll be starting in the trough D is half the total distance we're going to travel 
	or (end_pos - start_pos)/2 (coincidentally, the same as A)
	
	dist = (end_pos - start_pos)/2 sin((2pi/12)*(i-18))+(end_pos - start_pos)/2
	
	*/
	
	function smoov(id, start_x, end_x, dur, fps, i)
		{
		var theDiv = document.getElementById(id);
		var frames = (dur/fps);
		var from = parseInt(theDiv.style.left);
		
		var framelength = 1000/fps;
		
		
		var pi = Math.PI;
		
		if (start_x > end_x)
			{
			var A = (start_x - end_x)/2;
			
			}
		else if (start_x < end_x)
			{
			var A = 0-(end_x - start_x)/2;
			
			}
		var B = (dur/fps)*2;
		var C = 0 - B/4;
		var D = (start_x + end_x)/2;
		
		
		
		//y = A*sin((2pi/B)*(x-C))+D
		var x_pos =  A * Math.sin( ((2*pi)/B) * (i-C) ) + D;
		
		if (i < frames )
			{
			
			document.getElementById('wrapper').style.visibility = 'hidden';
			
			theDiv.style.left = Math.round(x_pos) + "px";
			//var where = theDiv.style.left
			i++;
			//alert( ('start='+start_x+' '+(from-Math.round(x_pos))+' end='+end_x) );
			
			the_timeout = setTimeout('smoov("'+id+'",'+start_x+','+end_x+','+dur+','+fps+','+i+');',framelength);
			}
	
		else
			{ 
			document.getElementById('wrapper').style.visibility = 'visible'; 
			}
		}
		
		
	//vars: container div id = id, typical image x dimension = image_x, selector offset = offset, go to image position = x_pos
	function new_image_slider(id, image_x, offset, x_pos) 
		{
		//get the id of the container div
		var theDiv = document.getElementById(id);
		
		//find out where we are
		var start_x = parseInt(theDiv.style.left);
		
		//where we want to go
		var	end_x = offset + ((x_pos-1) * image_x) ;
	
		var dur = (end_x - start_x) * 8;
		
		if (dur < 0) { dur = -dur };
	
		smoov(id, start_x, end_x, dur, 50, 0);
		
		}
		
	
		
	function imageBox()
		{
		//create the box if it doesn't exist
		imageBox.box = document.getElementById('image');
		
		//clear out the box
		var kids = imageBox.box.childNodes;
		var numkids = kids.length
		for(var i=numkids-1; i>=0; i--)
			{
			var c = imageBox.box.removeChild(kids[i]);
			}
		}
	
	
	function show_image(image_src)
		{
		
		imageBox();
		
		var imageDiv = document.getElementById('image');
		
		img = document.createElement('img');
		
		img.src = image_src;
	
		imageDiv.appendChild(img);
		
		}