The option for zoom is there but doesn't work. Can someone help me with this?

This is what i'm trying to resolve here:
PHP Code:
<script type="text/javascript">

function 
enlargeI()
{
    var 
image1 document.getElementById('mainimage').width;
    var 
image2 document.getElementById('mainimage').height;

    
document.getElementById('wp1').className='';
    
document.getElementById('wp2').className='';
    
document.getElementById('wp3').className='';

    
document.getElementById('table2').style.display='none';
    
document.getElementById('table1').style.width='100%';
    
document.getElementById('table2').style.width='0%';
    
document.getElementById('mainimage').width='$newwidth';
    
document.getElementById('mainimage').height='$newheight';
    
document.getElementById('zoom').innerHTML='<a href="javascript:void(0);" onclick="enlargeB(\''+image1+'\',\''+image2+'\');">Zoom Out</a>';
}


function 
enlargeB(width,height)
{

    
document.getElementById('wp1').className='wrap1';
    
document.getElementById('wp2').className='wrap2';
    
document.getElementById('wp3').className='wrap3';

    
document.getElementById('table2').style.display='';
    
document.getElementById('table1').style.width='70%';
    
document.getElementById('table2').style.width='25%';
    
document.getElementById('mainimage').width=width;
    
document.getElementById('mainimage').height=height;
    
document.getElementById('zoom').innerHTML='<a href="javascript:void(0);" onclick="enlargeI();">Zoom In</a>';
}


</script> 
This is the full code:
PHP Code:
// TOTAL OF COMMENTS PER PAGE
$TOTALCOMMENTS 20;

// TOTAL COMMENTS TO SHOW
$SHOWTOTAL "";

// ADDS
$ADDS html_adds("");


switch(
$TYPETOVIEW):

################################
case '1'// GALLERY
################################


    // IMAGE CATAGORY
    
$NUM3 "";

    
$R mysql_query("SELECT * FROM `main` WHERE `id` = '$_GET[ID]' AND `allow` != '1'");
    
$S mysql_fetch_array($R);
    
$S['view']++;

    
mysql_query("UPDATE `main` SET `view` = '$S[view]' WHERE `id` = '$S[id]'");

    
$XINPUT '<div><input type="hidden" name="main" value="'.$S['id'].'" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="gbuser" value="'.$S['user'].'" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="cid" value="" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="location" value="'.$VAR[3].'" /></div>';



    if (
$S['gcatagory'] == 'female')
    {
        
$NUM3 2;
    }



    
$MAINTITLE $S['text'];


    
$IMAGE image("350","350","$VAR[0]/gallery/$S[img]/$S[id].jpg","");


if (isset(
$_COOKIE['FOX_GPAGE']))
{
    
$BACKPAGE '<div style="padding-left:30px;text-align;"><a href="'.$VAR[0].''.$_COOKIE['FOX_GPAGE'].'"><img src="'.$VAR[0].'/'.$VAR[10].'/button_back.gif" alt="" style="vertical-align:middle;" /></a></div>';
}

if (
$S['text'] == ''$MAINTITLE "Untitled";

$link ulink("".$S['id']."");


// MEMBER IMAGE
$UIMAGE uimage($S['user'],75,6,"");


// MEMBER NAME
$S['user'] = ulink($S['user']);


        
$img2 "gallery/".$S['img']."/".$S['id'].".jpg";
        
$ilocation ''.$VAR[0].'/gallery/'.$S['img'].'/'.$S['id'].'.jpg';

        
        
$CTOTAL1 mysql_query("SELECT * FROM `comment` WHERE `main` = '$S[id]' || `cid` = '$S[id]' AND `main` != 'journal'");
        
$CTOTAL2 mysql_num_rows($CTOTAL1);


            
$INFO '<div style="padding-top:4px;"><b>Date</b>: '.date("M d, Y",$S['time']).' </div>'."\n";
            
$INFO .= '<div style="padding-top:4px;"><b>'.$LANG['173'].'</b>: '.$S['view'].' </div>'."\n";
            
$INFO .= '<div style="padding-top:4px;"><b>'.$LANG['175'].'</b>: '.$CTOTAL2.' </div>'."\n";
            
$INFO .= '<div style="padding-top:4px;"><b>Rating</b>: '.$S['rating'].' </div>'."\n";

        
        if (
file_exists("".$VAR[5]."/".$img2."")) {

            list(
$newwidth$newheight) = @getimagesize("".$VAR[5]."/".$img2."");

            
$INFO .= '<div style="padding-top:4px;"><b>'.$LANG['182'].'</b>: '.$newwidth.'x'.$newheight.' </div>'."\n";
            
$INFO .= '<div style="padding-top:4px;"><b>'.$LANG['184'].'</b>: '.newsize(filesize("".$VAR[5]."/".$img2."")).' </div>'."\n";

        }

        
$INFO .= '<div style="padding-top:4px;"><b>'.$LANG['185'].'</b>:</div>'."\n";

        
$INFO2 '<div style="padding-top:4px;padding-left:10px;"><input type="text" size="70" name="url" value="'.$ilocation.'" /></div>';



$COMMENT "";
$aGB mysql_query("SELECT * FROM `comment` WHERE `main` = '$S[id]' || `cid` = '$S[id]' AND `main` != 'journal' ORDER BY `time` DESC LIMIT 0,$TOTALCOMMENTS");
$CTOTAL3 mysql_num_rows($aGB);


if (
$CTOTAL2 != 0$SHOWTOTAL "VIEWING 1 - $CTOTAL3 OUT OF $CTOTAL2 COMMENTS";

while (
$bGB mysql_fetch_array($aGB))
{
    
$COMMENT .= ''.comment($bGB['id'],"","49").'';
}


$MAINITEM =<<<HTML

<script type="text/javascript">

function enlargeI()
{
    var image1 = document.getElementById('mainimage').width;
    var image2 = document.getElementById('mainimage').height;

    document.getElementById('wp1').className='';
    document.getElementById('wp2').className='';
    document.getElementById('wp3').className='';

    document.getElementById('table2').style.display='none';
    document.getElementById('table1').style.width='100%';
    document.getElementById('table2').style.width='0%';
    document.getElementById('mainimage').width='$newwidth';
    document.getElementById('mainimage').height='$newheight';
    document.getElementById('zoom').innerHTML='<a href="javascript:void(0);" onclick="enlargeB(\''+image1+'\',\''+image2+'\');">Zoom Out</a>';
}


function enlargeB(width,height)
{

    document.getElementById('wp1').className='wrap1';
    document.getElementById('wp2').className='wrap2';
    document.getElementById('wp3').className='wrap3';

    document.getElementById('table2').style.display='';
    document.getElementById('table1').style.width='70%';
    document.getElementById('table2').style.width='25%';
    document.getElementById('mainimage').width=width;
    document.getElementById('mainimage').height=height;
    document.getElementById('zoom').innerHTML='<a href="javascript:void(0);" onclick="enlargeI();">Zoom In</a>';
}


</script>


<div style="text-align:center;">
<table style="margin-left:auto;margin-right:auto;"><tr><td>
<div class="wrap1" id="wp1">
<div class="wrap2" id="wp2">
<div class="wrap3" id="wp3">
$IMAGE
</div>
</div>
</div>
</td></tr></table>

<span id="zoom">
<a href="javascript:void(0);" onclick="enlargeI();">Zoom In</a> 
</span>

<span style="padding-left:10px;">
<a href="#comment">Leave A Comment</a>
</span> 

</div>

<br />

<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;font-size:8pt;width:5%;" class="color"></td>
<td style="vertical-align:top;font-size:8pt;width:90%;" class="color">



<table style="width:100%;" cellpadding="8" cellspacing="0" class="border13">
<tr>
<td style="font-size:8pt;" class="color">

<div style="font-size:10pt;">
<img src="$VAR
[0]/images/spacer.gif" class="sqr" style="vertical-align:middle;" alt="" width="7" height="7" />
<b><u>$MAINTITLE</u></b></div>

<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:middle;font-size:8pt;width:60%;" class="color">

<div style="padding-left:8px;">
$INFO
</div>

</td><td style="width:40%;text-align:center;vertical-align:middle;">
<div style="padding-bottom:5px;">$S
[user]</div>
$UIMAGE
</td>
</tr>
</table>

$INFO2


</td>
</tr>
</table>

</td><td style="vertical-align:top;font-size:8pt;width:5%;" class="color">
</td>
</tr>
</table>



<br />


HTML;


break;


################################
case '2'// BLOGS
################################

    
$R mysql_query("SELECT * FROM `journal` WHERE `id` = '$_GET[ID]'");
    
$S mysql_fetch_array($R);
    
$S['view']++;

    
mysql_query("UPDATE `journal` SET `view` = '$S[view]' WHERE `id` = '$S[id]'");    


    
// TITLE
    
if ($S['title'] == ''$S['title'] = $LANG[188];
    
$S['title'] = ShortenText($S['title'],"50","","80","",1);


    
$XINPUT '<div><input type="hidden" name="main" value="journal" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="gbuser" value="'.$S['user'].'" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="cid" value="'.$S['id'].'" /></div>';
    
$XINPUT .= '<div><input type="hidden" name="location" value="'.$VAR[3].'" /></div>';

    
// MEMBER IMAGE
    
$UIMAGE uimage($S['user'],75,6,"");

    
// MEMBER NAME
    
$S['user'] = ulink($S['user']);

    
// TEXT CODE
    
$S['text'] = code($S['text'],"","60");    

    
// DATE
    
$S['time'] = date("M d, Y",$S['time']);

    
// MOOD
    
$S['jmood'] = ucfirst($S['jmood']);

    
$COMMENT "";
    
$aGB mysql_query("SELECT * FROM `comment` WHERE `cid` = '$S[id]' AND `main` = 'journal' ORDER BY `time` DESC LIMIT 0,$TOTALCOMMENTS");

    
$CTOTAL3 mysql_num_rows($aGB);
    
$CTOTAL1 mysql_query("SELECT * FROM `comment` WHERE `cid` = '$S[id]' AND `main` = 'journal'");
    
$CTOTAL2 mysql_num_rows($CTOTAL1);
    
    if (
$CTOTAL2 != 0$SHOWTOTAL "VIEWING 1 - $CTOTAL3 OUT OF $CTOTAL2 COMMENTS";

    while (
$bGB mysql_fetch_array($aGB))
    {
        
$COMMENT .= ''.comment($bGB['id'],"","49").'';
    }

    if (
$S['gcatagory'] == ''$S['gcatagory'] = "None";

    
$MAINITEM =<<<HTML

<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;font-size:8pt;width:5%;" class="color"></td>
<td style="vertical-align:top;font-size:8pt;width:90%;" class="color">

<div class="border13" style="padding:8px;font-size:8pt;">
<img src="$VAR
[0]/images/spacer.gif" class="sqr" style="vertical-align:middle;" alt="" width="7" height="7" />
<b>$S
[title]</b>

</div>

<br />


<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;font-size:8pt;width:5%;" class="color"></td>
<td style="vertical-align:top;font-size:8pt;width:95%;" class="color">

<table style="width:100%;"><tr><td style="width:20%;">
$UIMAGE
</td><td style="font-size:9pt;vertical-align:top;width:80%;" class="color">

<table style="width:100%;">
<tr>
<td style="width:25%;font-size:9pt;text-align:right;" class="color">
<b>By</b>:
</td><td style="width:75%;font-size:9pt;" class="color"> 
$S
[user]
</td>
</tr>
<tr>
<td style="width:25%;font-size:9pt;text-align:right;" class="color">
<b>Mood</b>:
</td><td style="width:75%;font-size:9pt;" class="color"> 
$S
[jmood]
</td>
</tr>
<tr>
<td style="width:25%;font-size:9pt;text-align:right;" class="color">
<b>Date</b>:
</td><td style="width:75%;font-size:9pt;" class="color"> 
$S
[time]
</td>
</tr>
<tr>
<td style="width:25%;font-size:9pt;text-align:right;" class="color">
<b>Music</b>:
</td><td style="width:75%;font-size:9pt;" class="color"> 
$S
[gcatagory]
</td>
</tr>
</table>



</td>
</tr>
</table>


</td>
</tr>
</table>

<br /><br />

$S
[text]


</td><td style="vertical-align:top;font-size:8pt;width:5%;" class="color">
</td>
</tr>
</table>



<br />


HTML;




break;

default:


endswitch;




if (
$VAR[4]):
$COMMENT_BOX = <<<HTML
<form method="post" action="$VAR[0]/member/submit/?item=comment" style="margin:0px;">$XINPUT
<div style="padding-bottom:4px;"><b><label for="textarea"><u>Y</u>OUR COMMENT:</label></b></div>
<div><textarea cols="60" rows="8" name="text" id="textarea" onfocus="this.className='textarea';" onblur="this.className='';"></textarea></div>
<div style="padding-top:4px;"><input type="submit" value="Submit Comment" /></div>
</form>
HTML;
else:
$COMMENT_BOX = <<<HTML
<div style="font-size:10pt;">
[ <a href="$VAR
[0]/member">Login to post a comment</a> ]
</div>
HTML;
endif;



$MAINDATA =<<<HTML
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:75%;vertical-align:top;font-size:8pt;" class="color" id="table1">

<br />

$MAINITEM

<br />

<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;font-size:8pt;width:5%;" class="color"></td>
<td style="vertical-align:top;font-size:8pt;width:90%;" class="color">


<br />


<a name="comment"></a>
<table style="width:100%;" cellspacing="0" cellpadding="0">
<tr>
<td style="width:2%;">
<img src="$VAR
[0]/$VAR[10]/line3.gif" alt="" style="vertical-align:bottom;" />
</td>
<td style="width:98%;font-size:8pt;vertical-align:middle;cursor:pointer;" class="mainmenu4" onclick="document.getElementById('textarea').focus();">

<div style="padding-left:5px;">

<b>MEMBER COMMENTS</b>

</div>


</td>
</tr>
<tr>
<td style="width:2%;"></td>
<td style="width:98%;font-size:8pt;vertical-align:middle;font-size:8pt;" class="color">

<br />
$COMMENT_BOX
<br /><br />

$SHOWTOTAL

<br /><br />


$COMMENT



</td>
</tr>
</table>








</td><td style="vertical-align:top;font-size:8pt;width:5%;" class="color">
</td>
</tr>
</table>






</td><td style="width:25%;vertical-align:top;text-align:center;" id="table2">


$ADDS


</td>
</tr>
</table>




<br /><br /><br />


HTML;

$DATA = array();


if (
$TYPETOVIEW == 1) {

#####################################
include("".$VAR[5]."/gallery/html/index.php");
#####################################

} elseif ($TYPETOVIEW == 2) {

#####################################
include("".$VAR[5]."/blog/html/index.php");
#####################################

}


#####################################
html_main($DATA,2,"");
#####################################
?>