Magento – Adding external javascript to a magento site

I'm a newbie and trying to see achieve certain things in magento.

I'm trying to make a snow effect on a magento site, I have it running well on a normal html site.

I've added the javascript files to puclic_html/js and also added an inline javascript code to configuration - design - html head - miscellenous –

I placed the snow png image in a separate image folder puclic_html/iamges

After doing all these, I can't see the snow effect. Is there a proper way of adding these files?

These are the codes for the Inline javascript code

            <script type="text/javascript" src="js/ThreeCanvas.js"></script>
            <script type="text/javascript" src="js/Snow.js"></script>
            <script>
            document.addEventListener('DOMContentLoaded',init);
            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight*3;
            var container;
            var particle;
            var camera;
            var scene;
            var renderer;
            var mouseX = 0;
            var mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var particles = [];
            var particleImage = new Image();//THREE.ImageUtils.loadTexture( "images/ParticleSmoke.png" );
            particleImage.src = 'images/ParticleSmoke.png';
            function init() {
            container = document.createElement('div');

            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
            camera.position.z = 1000;
            document.getElementById("container").style.position="absolute";
            document.getElementById("container").style.margin="auto";
            document.getElementById("container").style.width="100%";
            document.getElementById("container").style.zIndex = "1"; 
            document.getElementById("container").style.marginBottom = "20px"; 
            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
            for (var i = 0; i < 500; i++) {
            particle = new Particle3D( material);
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.scale.x = particle.scale.y = 0.5;
            scene.add( particle );
            particles.push(particle);
            }
            container.appendChild( renderer.domElement );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            setInterval( loop, 1000 / 60 );
            }
            function onDocumentMouseMove( event ) {
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
            }
            function onDocumentTouchStart( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            function onDocumentTouchMove( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            //
            function loop() {
            for(var i = 0; i<particles.length; i++)
            {
            var particle = particles[i];
            particle.updatePhysics();
            with(particle.position)
            {
            if(y<-1000) y+=2000;
            if(x>1000) x-=2000;
            else if(x<-1000) x+=2000;
            if(z>1000) z-=2000;
            else if(z<-1000) z+=2000;
            }
            }
            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
            camera.lookAt(scene.position);
            renderer.render( scene, camera );
            }
            </script>