<?php get_header(); ?>


<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script type="text/javascript">
	$(document).ready(function () {

		var config = {
     		over: hideGrid, // function = onMouseOver callback (REQUIRED)
     		timeout: 0, // number = milliseconds delay before onMouseOut
     		out: showGrid, // function = onMouseOut callback (REQUIRED)
     		interval: 100
		};

		$(".left-side").hover( hideGrid, showGrid );
		$(".right-side").hover( hideGrid, showGrid );

		function hideGrid() {
			$(this).find('div.overlay-grid').animate({opacity: '0'}, 300, 'easeOutExpo', function() { /* Animation complete. */});
			$(this).find('div.category-copy h2').css('color', '#508ba9');
			$(this).find('div.amount').css('background', 'rgba(255, 255, 255, 1)');
		}
		function showGrid() {
			$(this).find('div.overlay-grid').animate({opacity: '1'}, 300, 'easeOutExpo', function() { /* Animation complete. */});
			$(this).find('div.category-copy h2').css('color', '#666');
			$(this).find('div.amount').css('background', 'rgba(255, 255, 255, 0.6)');
		}

	});
</script>
<div class="centeredContent">

	<section id="main">
		<?php include (TEMPLATEPATH . '/inc/breadcrumb.php' ); ?>

	<header id="categoryHeader">
		<hgroup>
			<h2>Pattern <span class="outlineHeader">Categories</span></h2>
			<h3>Categories</h3>
		</hgroup>
	</header>
<?php
$counter = 0;
$args=array(
  'orderby' => 'name',
  'order' => 'ASC',
  'taxonomy' => 'pattern-categories'
  );
$categories=get_categories($args);
	echo '<div id="categories-container"><ul>';
  foreach($categories as $category) {
  	 $args = array(
    'posts_per_page' => 1,
    'tax_query' => array(
      array(
        'taxonomy' => 'pattern-categories',
        'field' => 'id',
        'terms' => array($category->term_id)
      )
    )
  );
        $first_cat_post = get_posts($args);
	$first_cat_post = get_posts($args);

  	if($counter%2 == 0){
  		echo '<a href="'.get_permalink( $first_cat_post[0]->ID ) .'" title="View first post from category: '.esc_attr( $category->name ).'" style="text-decoration:none;">
  		  		<li class="left-side">
  		  			<div class="category-thumb">
  		  				<div class="thumb"><img src="'.site_url().'/wp-content/images/category-thumbs/'.$category->slug.'.jpg" alt="'.$category->name.'"></div>
  		  				<div class="overlay-grid">&nbsp;</div>
  		  				<div class="amount">'.$category->count.'</div>
  		  			</div>
  		  			<div class="category-copy">
  		  				<h2>'.$category->name.'</h2>
  		  				<p>'.$category->description.'</p>
  		  			</div>
  		  		</li>
  		  	  </a>';
  	}else{
  		echo '<a href="'.get_permalink( $first_cat_post[0]->ID ) .'" title="View first post from category: '.esc_attr( $category->name ).'" style="text-decoration:none;">
  		  		<li class="right-side">
  		  			<div class="category-thumb">
  		  				<div class="thumb"><img src="'.site_url().'/wp-content/images/category-thumbs/'.$category->slug.'.jpg" alt="'.$category->name.'"></div>
  		  				<div class="overlay-grid">&nbsp;</div>
  		  				<div class="amount">'.$category->count.'</div>
  		  			</div>
  		  			<div class="category-copy">
  		  				<h2>'.$category->name.'</h2>
  		  				<p>'.$category->description.'</p>
  		  			</div>
  		  		</li>
  		  	  </a>';
  	}
  	$counter +=1;
   }
?>
		</ul>
	</div>
	</section>
	</section>
</div> <!-- "main" section centered content ENDS -->
</div> <!-- END CENTERED CONTENT-->

<?php get_footer(); ?>
<?php/**/?>