// animationFunctions

//var stripe = null; 

function initAnimation() {
  stripe = document.getElementById('stripe'); // get the "foo" object
 // stripe.style.height = '2px'; // initialize
 // stripe.style.width = '15px'; // initialize
  //property = "height";
 // max = 483; 
 // stripe = document.getElementById('stripe'); // get the "foo" object
 // timedAnimate(stripe, property, 2, 483, 6, 2); 
 timedAnimate(stripe, "height", 2, 483, 6, .5);
 timedAnimateByID("submenu", "width", 150, 800, 8, .5);
}

// generic animation function

function animate(obj, property, startValue, stopValue, increment) {
	obj["style"][property] = startValue + 'px';
	intervalID = setInterval(
		function() {
			p = obj["style"][property];
			pNum = parseInt(p);
			if (pNum <= stopValue) {
				obj["style"][property] = pNum  + increment + 'px';
			}
			else {
				obj["style"][property] = stopValue + increment + 'px'
				clearInterval(intervalID) ;
			}
		}, 
	.5); // how many milliseconds to call
	

	
}

// generic animation function

function timedAnimate(obj, property, startValue, stopValue, increment, time) {
	steps = Math.abs(stopValue - startValue) ;
	milliseconds = time * 1000 ; 
	millisecondInterval = parseInt(milliseconds/steps);
	obj["style"][property] = startValue + 'px';
	intervalID = setInterval(
		function() {
			p = obj["style"][property];
			pNum = parseInt(p);
			if (pNum <= stopValue) {
				obj["style"][property] = pNum  + increment + 'px';
			}
			else {
				obj["style"][property] = stopValue + increment + 'px' ;
				clearInterval(intervalID) ;
			}
		}, 
	millisecondInterval); 
}

// generic animation function

function timedAnimateByID(objID, property, startValue, stopValue, increment, time) {

    obj = document.getElementById(objID); // get the  object
    
    // initialize the object property to the start value
	obj["style"][property] = startValue + 'px';
	
	//calculate the milliseconds needed for the number of steps between start and stop values, given the desired increment
	steps = Math.abs( (stopValue - startValue)/increment) ;
	milliseconds = time * 1000 ; 
	millisecondInterval = parseInt(milliseconds/steps);
	
	// set up the timer and animate
	// NOTE: must return a separate variable from the function above; else the two functions will conflect
	intervalID2 = setInterval(
		function() {
			p = obj["style"][property];
			pNum = parseInt(p);
			if (pNum <= stopValue) {
				obj["style"][property] = pNum  + increment + 'px';
			}
			else {
				obj["style"][property] = stopValue + increment + 'px'; 
				clearInterval(intervalID2) ;
			}
		}, 
	millisecondInterval); 
}