function ResizeHeader() {
var rszcanvas = document.getElementById('bg');
var clientWidth = document.documentElement.clientWidth;
rszcanvas.width = clientWidth;
rszcanvas.height = '156';
}

var img = new Image();
var img_ = new Image();
var rot_dir = -1;

function ChangeImg() {
var i;
img=img_;
var imgNum = Math.floor(Math.random() * (100)) + 1;
img_.src = 'images/bg/panbg'+imgNum+'.jpg';
rot_dir = -rot_dir;
setTimeout('ChangeImg ()',60000);
}

(function() {

ResizeHeader();

        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || function(callback) { window.setTimeout(callback, 1000 / 60); };

        var canvas = document.getElementById('bg');

        var context = canvas.getContext('2d');
        var looping = false;
        var totalSeconds = 0;

        img.onload = imageLoaded;

var imgNum = Math.floor(Math.random() * (178)) + 1;
img_.src = 'images/bg/panbg'+imgNum+'.jpg';
ChangeImg();

var headcanvas = document.getElementById('headcanvas');
headcanvas.addEventListener('click', function() {
changeDir();
});

        function changeDir() {
		rot_dir = -rot_dir;
        }

        function imageLoaded() {
            draw(0);
        }

        var lastFrameTime = 0;

        function startStop() {
            looping = !looping;

            if (looping) {
                lastFrameTime = Date.now();
                requestAnimationFrame(loop);
            }
        }

        function loop() {
            if (!looping) {
                return;
            }

            requestAnimationFrame(loop);

            var now = Date.now();
            var deltaSeconds = (now - lastFrameTime) / 1000;
            lastFrameTime = now;
            draw(deltaSeconds);
        }


        function draw(delta) {
            totalSeconds += delta;
            var x = -1 * (img.width - canvas.width) / 2 * (1 + Math.cos(totalSeconds / Math.PI));
            var y = -1 * (img.height - canvas.height) / 2 * (1 + rot_dir*Math.sin(totalSeconds / Math.PI));

            context.drawImage(img, x, y);
        }
        
	startStop();

    }());