<?php include('includes/header.php'); ?>
<?php include('includes/menu.php'); ?>
<?php include('includes/functions.php'); ?>
<?php
// Initialization information
$dir = 'images/portfolio';
$DS = '/';
$head = $content = '';

//print_r(index($dir));
$categories = index($dir);

foreach ($categories as $category=>$projects) {

	// generate categories
	$name = str_replace('_',' ',$category);

	if ($head != '')
		$head .= ' | ';

	$head .= "<a href='#$category'>$name</a>\n";

	$content .= "<li class='category' id='$category'>
		<ul class='projects'>\n";

	$projectSwitch = '';

	foreach ($projects as $project=>$images) {

		$name = str_replace('_',' ',$project);

		// generate projects
		$content .= "<li class='project' id='$category$project'>
			<div class='display'>\n";

		$projectSwitch .= "<li><a href='#$category$project'><img src='images/portfolio/$category/$project/thumb.jpg' alt='$name' /></a></li>\n";

		$i = 0;
		$jumper = '';

		foreach ($images as $image=>$name) {
			$i++;
			// generate images
			$content .= "<img id='$category$project$i' src='images/portfolio/$category/$project/$image' alt='$name' />\n";
			$jumper .= "<li><a href='#$category$project$i' title='$name'>$i</a></li>\n";


		}

		$content .= "</div>
		<div class='pictures'>
			<span id='pictureName'></span>
			<ul class='pictureJump'>
				$jumper
			</ul>
		</div>
		</li>\n";

	}

	$content .= "</ul>
	<ul class='projectSwitch'>
		$projectSwitch
	</ul>
	</li>\n";

}

?>
<script type="text/javascript">
$(document).ready(function () {
	$('.category:first').siblings().hide();
	$('.category').each(function() {
		$(' .project:first',this).siblings().hide();
		$(' .project', this).each(function() {
			$(' .display img:first', this).siblings().hide();
		});
	});
	//$('.project:first, .display img:first').siblings().hide();
	$('#content a, h2 a').click(function () {
		$($(this).attr('href')).fadeIn(300).siblings().hide();
		return false;
	});
	$('.pictureJump a').click(function () {
		jthis = $(this);
		$(this).parent('.pictures').find('.pictureName').html(jthis.attr('title'));
	});
});
</script>
<style type="text/css">
	* {margin:0;padding:0;}
	#content {
		overflow: hidden;
		height: 600px;
		width:580px;
		margin-top:10px;
	}
	.category {
	}
	.projects {
		overflow: hidden;
		height:550px;
	}
	.projectSwitch {
		height:150px;
	}
	.projectSwitch li {
		display: inline;
	}
	.projectSwitch a img {
		height:50px;
		width:50px;
	}
	.project {
		width:100%;
	}
	.display {
		height:500px;
		overflow:auto;
		text-align:center;
	}
	.display img {
	}
	.pictures {
		height:30px;
	}
	.pictureName {
		background: red;
	}
	.pictureJump {
		overflow:auto;
		height:34px;
		padding:0;margin:0;
	}
	.pictureJump li {
		list-style:none;
		padding:0;margin:0;
		float:right;
	}
	.pictureJump a {
		font-size:110%;
		padding:5px;
		display:block;
		float:right;
	}

</style>
<h1>PORTFOLIO</h1>
<h2><?php echo $head ?></h2>
<ul id="content">
	<?php echo $content; ?>
	<!--<li class="category" id="cat1">
		<ul class="projects">
		<li id="cat1proj1" class="project">
			<div class="display">
				<img id="cat1proj1pic1" src="" alt="" />
			</div>
			<div class="pictures">
				<span class="pictureName">Test</span>
				<ul class="pictureJump">
					<li><a href="#cat1proj1pic1">picture 1</a></li>
				</ul>
			</div>
		</li></ul>
		<ul class="projectswitch">
			<li><a href="#cat1proj1"><img src="" alt="project" /></a></li>
		</ul>
	</li>-->
</ul>
<?php include('includes/footer.php'); ?>