<?php
	/*
	* @package WordPress
	* @subpackage Simplicity
	* Template Name: Portfolio
	*/

	// Define plugin's admin variables
	$general_option = get_option('general_option');
	$design_option = get_option('design_option');
	$home_page_option = get_option('home_page_option');
	$portfolio_option = get_option('portfolio_option');

	get_header();
?>
	<div id="wrapper">
	<div id="content-portfolio-border"></div>
	<div id="content-portfolio" role="main">
	<div id="page">
	<div id="widecolumn">

		<!-- <div id="breadcrumb"><?php the_breadcrumb(); ?></div> -->

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<div class="title"><h2><?php the_title(); ?></h2></div>
			<div class="entry">

				<!-- QS Javascript -->
				<script type="text/javascript">
				// Custom sorting plugin
				(function($) {
				  $.fn.sorted = function(customOptions) {
				    var options = {
					reversed: false,
					by: function(a) { return a.text(); }
				    };
				    $.extend(options, customOptions);
				    $data = $(this);
				    arr = $data.get();
				    arr.sort(function(a, b) {
					var valA = options.by($(a));
					var valB = options.by($(b));
					if (options.reversed) {
					  return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
					} else {
					  return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
					}
				    });
				    return $(arr);
				  };
				})(jQuery);

				// DOMContentLoaded
				$(function() {

				  // bind radiobuttons in the form
				  var $filterType = $('#filter input[name="type"]');
				  var $filterSort = $('#filter input[name="sort"]');

				  // get the first collection
				  var $applications = $('#applications');

				  // clone applications to get a second collection
				  var $data = $applications.clone();

				  // attempt to call Quicksand on every form change
				  $filterType.add($filterSort).change(function(e) {
				    if ($($filterType+':checked').val() == 'all') {
					var $filteredData = $data.find('li');
				    } else {
					var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
				    }

				    // if sorted by size
				    if ($('#filter input[name="sort"]:checked').val() == "size") {
					var $sortedData = $filteredData.sorted({
					  by: function(v) {
					    return parseFloat($(v).find('span[data-type=size]').text());
					  }
					});
				    } else {
					// if sorted by name
					var $sortedData = $filteredData.sorted({
					  by: function(v) {
					    return $(v).find('strong').text().toLowerCase();
					  }
					});
				    }

				    // finally, call quicksand
				    $applications.quicksand($sortedData, {
					duration: 800,
					easing: 'easeInOutQuad'
				    });

				  });

				});
				</script>

				<!-- QS HTML -->
				<form id="filter">
					<fieldset>
					<label><input type="radio" name="type" value="all" checked="checked">Everything</label>
					<?php
					$portfolioCategories = $portfolio_option['portfolio_categories'];
					if ($portfolioCategories == "") {
						$portfolioCategories = 0;
					} else {
						$portfolioCategories = $portfolio_option['portfolio_categories'];
					}
					$e = 1;
					while ($e <= $portfolioCategories){
					?>
						<label><input type="radio" name="type" value="<?php echo $portfolio_option['portfolio_category' . $e]; ?>"><?php echo $portfolio_option['portfolio_category' . $e]; ?></label>
					<?php
					$e=$e+1;
					}
					?>
					<!--[if IE]>
					<div id="IE-submit">submit</div>
					<![endif]-->
					<div class="Clear"></div>
					</fieldset>
				</form>

				<ul id="applications" class="image-grid">
					<?php
					$portfolioItems = $portfolio_option['portfolio_items'];
					if ($portfolioItems == "") {
						$portfolioItems = 0;
					} else {
						$portfolioItems = $portfolio_option['portfolio_items'];
					}
					$x = 1;
					while ($x <= $portfolioItems){
					?>
						<li data-id="id-<?php echo $x; ?>" data-type="<?php echo $portfolio_option['portfolio_item' . $x .'_category']; ?>">
							<div class="boximage">
								<?php if ($portfolio_option['portfolio_item' . $x .'_video'] != "") { ?>
								<a href="<?php echo $portfolio_option['portfolio_item' . $x .'_video']; ?>" class="top_up" toptions="width = 853, height = 505, type = flashvideo">
								<?php } else {?>
								<a href="<?php echo $portfolio_option['portfolio_item' . $x .'_large_image']; ?>" class="top_up">
								<?php }?>
									<img src="<?php echo $portfolio_option['portfolio_item' . $x .'_preview_image']; ?>" width="276"  />
								</a>
							</div>

							<div class="boxtitle">
								<?php echo $portfolio_option['portfolio_item' . $x .'_title']; ?>
							</div>
							<div class="boxdescription">
								<?php echo $portfolio_option['portfolio_item' . $x .'_description']; ?>
							</div>
							<div class="boxlink">
								<a href="<?php echo $portfolio_option['portfolio_item' . $x .'_link']; ?>">Learn More &raquo;</a>
							</div>

						</li>
					<?php
					$x=$x+1;
					}
					?>
				</ul>

				<div class="Clear">
				</div>

			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	<?php comments_template(); ?>

	<div class="Clear">
	</div>
	</div> <!-- narrowcolumn -->
	</div> <!-- page -->
	</div> <!-- content -->
	</div> <!-- wrapper -->

<?php get_footer(); ?>