I'm experiencing an issue with a website I'm working on, where I originally believed I could simply replace $("main").html('THIS') which was originally code for a flash object, with a new and improved HTML5/Javascript version.

The original code:

$("#main").html('<div style="height: 100%; width: 100%; overflow: hidden;"><object width="100%" height="100%" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">\
                    <param value="images/uploads/'+image_id+'.swf" name="movie">\
                    <param value="true" name="allowFullScreen">\
                    <param value="#737373" name="bgcolor">\
                    <param value="" name="FlashVars">\
                    <embed width="100%" height="100%" flashvars="" bgcolor="#737373" allowfullscreen="true" src="images/uploads/'+image_id+'.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">\
                    </object></div>\
                ');
            });

And my (failed) attempt at inserting my new code:

$("#main").html('<script type="text/javascript">pano=new pano2vrPlayer("container");skin=new pano2vrSkin(pano);pano.readConfigUrl("xml/tablet_'+image_id+'.xml");hideUrlBar();</script>');

It doesn't even work when I just put , so I know it's gotta be the javascript itself.

I've looked at the solutions out there, but I can't make sense in how to properly implement them here in the most efficient way.

Your help is much appreciated, thanks!