<?
include '/home/mmaaaco/public_html/wdm3304materials/wdm3304week1/dbconnect.php';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
position:relative;
height:600px;
width:800px;
}

.pic {
position:relative;
height:250px;
width:125px;
float:left;	
}

.title {
font-weight:bold;
font-size:14px;	
}

.desc {
font-size:10px;	
}

</style>
<script type = "text/javascript">
function showBig(picname){
	document.bigpic.src = 'images/' + picname;
}
</script>


</head>
<body>
<div id = "wrapper">
<?
//show categories in dropdown
$sql = $dbh->prepare("select * from 3304gallcats");
$sql->execute();
while ($carolyn  = $sql->fetch()){
	 echo '<a href = "index.php?catid='.$carolyn['catid'].'">'.$carolyn['catname'].'</a><br/>'."\n";
}

$catid = $_GET['catid'];
$picsql = $dbh->prepare("select * from 3304gallpix where catid = '$catid'");
$picsql->execute();
while ($maruja  = $picsql->fetch()){
	 $pic = $maruja['id'].'.jpg' ;
	 if (file_exists('images/'.$pic)){
	echo '<span class = "pic">';
		 echo '<img src = "thumbnail.php?pic=images/'.$pic.'&ht=50&wd=50" onClick="showBig(\''.$pic.'\');"/><br/>
		 <span class = "title">'.$maruja['pictitle'].'</span><br/><span class= "desc">'.$maruja['picdesc'].'</span>'."\n";
	 echo '</span>';
	 }
}


?>

<p><img name = "bigpic" src = ""/></p>

</div>
</body>
</html>
