tinymce and fancybox integration

Question

I am trying to integrate tinymce with Fancybox inline popup, currently I have a tpl, template file and is able to use tinymce fine which pulls data from mysql and allows me to make edits. i've added fancybox to the page, when clicked on the fancybox popup it opens but and replaces textarea with tinymce but I cannot type anything nor does it displays data from MySQL. However if I remove tinymce it popup and display info from mysql using textarea, I can also make edits. so clearly my problem is with tinmyce. I've tried many suggestions online but nothing seems to work.

tinymce code:

<script src="include/tinymce_4.0/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea",
menubar:false,
statusbar: false,
theme: "modern",
width: 920,
height: 150,

plugins: [
"scayt advlist autolink link image lists charmap print preview hr anchor pagebreak textcolor",
"searchreplace visualblocks insertdatetime",
"contextmenu directionality template paste textcolor"
],
content_css: "css/content.css",
toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist 
numlist | print preview media fullpage | forecolor scayt", 

scayt_auto_startup: true,
scayt_context_moresuggestions: "on",
scayt_max_suggestion: 5,

}); 

</script>

fancybox code:

<script type="text/javascript" src="include/fancybox/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="include/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="include/fancybox/source/jquery.fancybox.css?
v=2.1.5" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox({
         'closeBtn' : false,
         scrolling : 'no',
         helpers: {
         title : {
         type : 'outside'
         },
         overlay : {
         closeClick: false,
         beforeShow: function () { tinymce.execCommand('mceToggleEditor', 
false, 'edit_description_textarea'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', 
true, 'edit_description_textarea'); 
}

                }
            }
        });
    });
</script>

html code:

<a class="fancybox " href="#edit_description">

<div id="edit_description" style="width:950px;display: block;">

<textarea id="edit_description_textarea" class="input-box" rows="10" cols="154" 
mce_editable="true" name="info">{$description}{$test_array
[i].info}</textarea>

</div>

Thanks for your help in advance.