var status = null;
var moth = null;
var motionMillisPause = 20;
var animMillisPause = 60;
var radianStep = .02;
var count_y = 0;

var up = true;
var count_frame = 0;

function loadMoth() {

	moth = document.getElementById("moth");
    moth.style.display = "block";
	moth.style.position = "absolute";

    animate();
	move();

}

function animate() {
    if ( up )
        count_frame++;
    else
        count_frame--;
        
    if (count_frame == 6) 
        up = false; // count down next time
        
    if (count_frame == 0) 
        up = true; // count up next time
        
    switch( count_frame ) {
        case 0:
            var pos = "0 0px";
            break;
        case 1:
            var pos = "-64 0px";
            break;
        case 2:
            var pos = "-128 0px";
            break;
        case 3:
            var pos = "-192 0px";
            break;
        case 4:
            var pos = "0 -64px";
            break;
        case 5:
            var pos = "-64 -64px";
            break;
        case 6:
            var pos = "-128 -64px";
            break;

        default: 
            alert( "not 0-6" );
            break;
            
            
    }
    moth.style.backgroundPosition = pos;
    setTimeout( animate, animMillisPause );
}

function move() { 
	count_y = count_y + radianStep;
	count_y = count_y > 6.28 ? 0 : count_y;

	// circle
	//var x = smiley.style.left = 200 + 50* Math.cos(count) + "px";
	
	// up and down with "dampening"
    // If you specify an X value, then you need to change the position
    // value to relative, in order to prevent the moth from moving around
    // based on browser window size - however this creates a big 64px space
    // in your page.
	//var x = moth.style.left = 200 + "px";


	var y = moth.style.top = 380 + 50 * Math.sin(count_y) + "px";
	
	setTimeout(move, motionMillisPause);

}