I'm trying to have different sets of text fade in/out in the same div by clicking various links.

Diagram:
http://i.imgur.com/wsBLs.jpg

This is my code so far:

JS:
Code:
<script type="text/javascript">

$(document).ready(function() {
			
	$('.m1').click(function() {
	        displayNone();
	        setTimeout(showWindow("text1"), 2000);
        } );	
	$('.m2').click(function() {
		displayNone();
		setTimeout(showWindow("text2"), 2000);
	} );
        ...
        ...
        $('.m10').click(function() {
		displayNone();
		setTimeout(showWindow("text3"), 2000);
	} );

        function displayNone() {
		$('#text1').fadeOut();
		$('#text2').fadeOut();
		...
                ...
		$('#text10').fadeOut();
	}
        function showWindow(name) {
		$('#' + name).fadeIn();
	}
});
</script>
HTML:
Code:
...
...
<div class="pagecontainer">

        <!--links-->
        <div id="links">
                <div class="m1">text1</div>
                <div class="m2">text2</div>
                ...
                ...
                <div class="m10">text10</div>
        </div>

        <!--text area-->
	<div id="textarea">			
		<div id="text1">text1</div>	
		<div id="text2">text2</div>		
		...
                ...
		<div id="text10">text10</div>		
	</div>

</div>
CSS:
Code:
.pagecontainer {
	overflow-y:auto;
	overflow-x:hidden;
	margin-top:30px;
	margin-bottom:300px;
	width:800px;
	height:400px;
	margin: 0 auto;
	display: block;
	font-size:12px;
}

#text1,#text2,#text3,#text4,#text5,#text6,#text7,#text8,#text9,#text10 {
	display:none;
	position:relative;
}

/*SCROLLABLE*/
#links {
	display:none;
	margin-top:50px;
	padding-left:50px;
	width: 350px;
	position:relative;
}

/*FIXED TO pagecontainer div*/
#textarea {
	display:none;
	position:absolute;
	margin-top:100px;
	padding-left:400px;
	width: 400px;
	height: 200px;
	font-size:25px;
	text-align:center;
}
The catch is the links are actually songs on a playlist in JPlayer (music player using JQuery), where each item in the playlist is assigned a class (.m1, .m2, etc), so it functions exactly like the ordinary <div class="m1">text1</div>.

Using this code many things mess up:
- About half of the links become unclickable, the remaining half functions normally, I have no idea what determines which ones become unclickable or why
- The moment I hover mouse over any of the unclickable links, the page freezes, this is fixed when I hover mouse over a clickable link (weird??)
- The text (text1, text2 etc) does not show up at all

Any help is appreciated, thanks.