JavaScript - Mouseover Causes Text To Appear And Allows Layers

<p>
<script type="text/javascript">
    var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
            this.OS = this.searchString(this.dataOS) || "an unknown OS";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                        return data[i].identity;
                }
                else if (dataProp)
                    return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        },
        dataBrowser: [
		{
		    string: navigator.userAgent,
		    subString: "Chrome",
		    identity: "Chrome"
		},
		{ string: navigator.userAgent,
		    subString: "OmniWeb",
		    versionSearch: "OmniWeb/",
		    identity: "OmniWeb"
		},
		{
		    string: navigator.vendor,
		    subString: "Apple",
		    identity: "Safari",
		    versionSearch: "Version"
		},
		{
		    prop: window.opera,
		    identity: "Opera"
		},
		{
		    string: navigator.vendor,
		    subString: "iCab",
		    identity: "iCab"
		},
		{
		    string: navigator.vendor,
		    subString: "KDE",
		    identity: "Konqueror"
		},
		{
		    string: navigator.userAgent,
		    subString: "Firefox",
		    identity: "Firefox"
		},
		{
		    string: navigator.vendor,
		    subString: "Camino",
		    identity: "Camino"
		},
		{		// for newer Netscapes (6+)
		    string: navigator.userAgent,
		    subString: "Netscape",
		    identity: "Netscape"
		},
		{
		    string: navigator.userAgent,
		    subString: "MSIE",
		    identity: "Explorer",
		    versionSearch: "MSIE"
		},
		{
		    string: navigator.userAgent,
		    subString: "Gecko",
		    identity: "Mozilla",
		    versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
		    string: navigator.userAgent,
		    subString: "Mozilla",
		    identity: "Netscape",
		    versionSearch: "Mozilla"
		}
	],
        dataOS: [
		{
		    string: navigator.platform,
		    subString: "Win",
		    identity: "Windows"
		},
		{
		    string: navigator.platform,
		    subString: "Mac",
		    identity: "Mac"
		},
		{
		    string: navigator.userAgent,
		    subString: "iPhone",
		    identity: "iPhone/iPod"
		},
		{
		    string: navigator.platform,
		    subString: "Linux",
		    identity: "Linux"
		}
	]

    };
    BrowserDetect.init();
    //Declaring Variables to be used later
    var staff_members = -1;
    var max_staff_members = 9;
    var staff_name_array = new Array(); //Array of strings
    var staff_title_array = new Array(); //Array of strings
    var staff_length_array = new Array(); //Array of strings
    var staff_info_array = new Array(); //Array of strings
    var staff_array = new Array(); //Array of strings
    var staff_id_array = new Array(); //Array of answer IDs
    var image_source_array = new Array(); //Array of full html code, for images
    var staff_start = new Array(); //Array of starting pos for staff bios
    var staff_end = new Array(); //Array of ending pos for staff bios
    var start_span = '<span style="font-size: 12px;">';
    var end_span = '</span>';
    var img_start_str = "<img alt=";
    var img_end_str = '">'; //"border-style: solid;";//Followed by " />
    var img_end_str_len = 3; //24;

    function init() {
        remove_staff_tag();
  
        for (i = 0; i < staff_members; i++) {
            staff_name_array[i] = ""
         
        }
   
        for (i = 0; i < staff_members; i++) {
            staff_title_array[i] = ""
         
        }
    
        for (i = 0; i < staff_members; i++) {
            staff_length_array[i] = ""
        
        }

        for (i = 0; i < staff_members; i++) {
            staff_info_array[i] = pull_bio(i) 
           
        }

        for (i = 0; i < staff_members; i++) {
            staff_array[i] = start_span + staff_name_array[i] + //"<br/> " +
				staff_title_array[i] + //"<br/> " +
				staff_length_array[i] + //"<br/> " +
				staff_info_array[i] + end_span; //"<br/> " +
        }

        for (i = 0; i < staff_array.length; i++) {
            staff_id_array[i] = "emp_bio_long_" + (i);
        }
        remove_unused_staff();
    }

    function remove_staff_tag() {
        var ret = document.getElementById("div_tag").innerHTML;

        var ind = ret.indexOf("(max 9):[");
        var text_after_num = ret.substring(ind + 8);

        staff_members = liferay_workaround("," + ret.substring(ind + 9, ind + 10));
        document.getElementById("div_tag").innerHTML = text_after_num.substring(8);
    }

    function remove_unused_staff() {
        var div_html = document.getElementById("div_tag").innerHTML;


       
        for (i = 0; i < max_staff_members; i++) {
            staff_start[i] = div_html.indexOf("emp_bio_short_" + i) - 29;
            staff_end[i] = div_html.indexOf("Bio " + (i + 1) + " End") - 26;
        }
      
        end_pos = staff_end[staff_members - 1];

     
        document.getElementById("div_tag").innerHTML = div_html.substring(0, end_pos);
    }
 
    function pull_bio(emp_num) {
        var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
        var len = ret.length;
        var img_start_pos = ret.indexOf(img_start_str);
        var img_end_pos = ret.indexOf(img_end_str);
        return ret;
    }
   
    function set_all_bios() {
       
        for (i = 0; i < staff_memebrs; i++) {

            staff_info_array[i] = "changed";
        }
    }

    function pull_pic_test(emp_num) {
        var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
        var img_start_pos = ret.indexOf(img_start_str);
        var img_end_pos = ret.indexOf(img_end_str);
        var ret2 = ret.substring(img_start_pos, img_end_pos + img_end_str_len);
        return ret2;
    }

    function get_bio(emp_num) {
        return staff_array[emp_num];
    }
  
    function clear_all_bios() {
        for (i = 0; i < staff_id_array.length; i++) {
            document.getElementById(staff_id_array[i]).innerHTML = '';
        }
    }
    function change_text(id_to_change, value_to_change_to) {
        clear_all_bios();
        document.getElementById(id_to_change).innerHTML = value_to_change_to;
       
    }

    function liferay_workaround(almost_number) {
        var adj = false;
        if (almost_number == ",0") {
            almost_number = 0;
            adj = true;
        }
        if (almost_number == ",1") {
            almost_number = 1;
            adj = true;
        }
        if (almost_number == ",2") {
            almost_number = 2;
            adj = true;
        }
        if (almost_number == ",3") {
            almost_number = 3;
            adj = true;
        }
        if (almost_number == ",4") {
            almost_number = 4;
            adj = true;
        }
        if (almost_number == ",5") {
            almost_number = 5;
            adj = true;
        }
        if (almost_number == ",6") {
            almost_number = 6;
            adj = true;
        }
        if (almost_number == ",7") {
            almost_number = 7;
            adj = true;
        }
        if (almost_number == ",8") {
            almost_number = 8;
            adj = true;
        }
        if (almost_number == ",9") {
            almost_number = 9;
            adj = true;
        }
        if (!adj) {
            almost_number = 1;
        }
        return almost_number;
    }
  
</script></p>
<div class="faq-content" id="div_tag">
	<p id="staff_num">
		Enter number of staff members within the brackets (max 9):[4]</p>
	<p class="emp_bio_short" id="emp_bio_short_0" onmouseout="" onmouseover="change_text('emp_bio_long_0', get_bio(0))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>18 years</span></p>
	<p class="answer" id="emp_bio_long_0" style="text-align: left;">
		[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 1 End --------------------------><!---------------------- Bio 2 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_1" onmouseout="" onmouseover="change_text('emp_bio_long_1', get_bio(1))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>5 years</span></p>
	<p class="answer" id="emp_bio_long_1" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 2 End --------------------------><!----------------------- Bio 3 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_2" onmouseout="" onmouseover="change_text('emp_bio_long_2', get_bio(2))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title: </strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>6 years</span></p>
	<p class="answer" id="emp_bio_long_2" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!---------------------- Bio 3 End --------------------------><!----------------------- Bio 4 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_3" onmouseout="" onmouseover="change_text('emp_bio_long_3', get_bio(3))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title: </strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:</strong> 5 years</span></p>
	<p class="answer" id="emp_bio_long_3" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!----------------------- Bio 4 End --------------------------><!----------------------- Bio 5 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_4" onmouseout="" onmouseover="change_text('emp_bio_long_4', get_bio(4))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_4" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 5 End --------------------------><!----------------------- Bio 6 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_5" onmouseout="" onmouseover="change_text('emp_bio_long_5', get_bio(5))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_5" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 6 End --------------------------><!----------------------- Bio 7 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_6" onmouseout="" onmouseover="change_text('emp_bio_long_6', get_bio(6))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_6" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!---------------------- Bio 7 End --------------------------><!----------------------- Bio 8 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_7" onmouseout="" onmouseover="change_text('emp_bio_long_7', get_bio(7))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_7" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 8 End --------------------------><!----------------------- Bio 9 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_8" onmouseout="" onmouseover="change_text('emp_bio_long_8', get_bio(8))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_8" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 9 End --------------------------><!---------------------- Bio 10 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_9" onmouseout="" onmouseover="change_text('emp_bio_long_9', get_bio(9))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_9" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 10 End --------------------------></div>
<p>
<script type="text/javascript">
    init(); 
    change_text('emp_bio_long_0', get_bio(0))
</script></p>