officers.html

---
layout: default
title: "Officers"
js: [/js/imagesloaded.js, /js/animonscroll.js]
---
<h2>Who's That Officer?</h2>
<div class="card-holder">
	<div class="card">
		<img src="/images/officers/walter.jpg" />
		<header>Walter Oji</header>
		<p>chair@ieeeut.org</p>
	</div>
</div>		
<div class="card-holder middle">
	<div class="card">
		<img src="/images/officers/unknownvice.png" />
		<header>Chris Fernald</header>
		<p>vice@ieeeut.org</p>
	</div>
</div>				
<div class="card-holder">
	<div class="card">
		<img src="/images/officers/unknowncorporate.png" />
		<header>Haley Alexander</header>
		<p>corporate@ieeeut.org</p>
	</div>
</div>	
<div class="card-holder">
	<div class="card">
		<img src="/images/officers/ross.jpg" />
		<header>Ross McNulty</header>
		<p>exec@ieeeut.org</p>
	</div>
</div>

<div id="mp-cards" class="card-holder middle">
	<div class="card back">
		<img src="/images/officers/unknownmp.png" />
		<header></header>
		<p>ao.publicity@ieeeut.org</p>
	</div>
	<div class="card mid">
		<img src="/images/officers/unknownmp.png" />
		<header></header>
		<p>ao.multimedia@ieeeut.org</p>
	</div>
	<div class="card front">
		<img src="/images/officers/karthik.jpg" />
		<header>Karthik Konath</header>
		<p>comms@ieeeut.org</p>
	</div>	
</div>

<div id="ae-cards" class="card-holder">
	<div class="card hid2">
		<img src="/images/officers/unknownae.png" />
		<header></header>
		<p>ao.social@ieeeut.org</p>
	</div>
	<div class="card hid1">
		<img src="/images/officers/unknownae.png" />
		<header></header>
		<p>ao.service@ieeeut.org</p>
	</div>
	<div class="card back">
		<img src="/images/officers/unknownae.png" />
		<header></header>
		<p>ao.partners@ieeeut.org</p>
	</div>
	<div class="card mid">
		<img src="/images/officers/unknownae.png" />
		<header></header>
		<p>ao.activities@ieeeut.org</p>
	</div>
	<div class="card front">
		<img src="/images/officers/ali.jpg" />
		<header>Ali de Jong</header>
		<p>ae@ieeeut.org</p>
	</div>
</div>		

<div id="mr-cards" class="card-holder">
	<div class="card mid">
		<img src="/images/officers/unknownmr.png" />
		<header></header>
		<p>ao.mr@ieeeut.org</p>
	</div>
	<div class="card front">
		<img src="/images/officers/rob.jpg" />
		<header>Rob Misasi</header>
		<p>mr@ieeeut.org</p>
	</div>
</div>	

<div id="sec-cards" class="card-holder middle">
	<div class="card back">
		<img src="/images/officers/unknownsec.png" />
		<header></header>
		<p>ao.beta.sec@ieeeut.org</p>
	</div>
	<div class="card mid">
		<img src="/images/officers/unknownsec.png" />
		<header></header>
		<p>ao.alpha.sec@ieeeut.org</p>
	</div>
	<div class="card front">
		<img src="/images/officers/hannah.jpg" />
		<header>Hannah Peeler</header>
		<p>sec@ieeeut.org</p>
	</div>
</div>		

<div class="card-holder">
	<div class="card">
		<img src="/images/officers/leela.jpg" />
		<header>Leela Karunakaran</header>
		<p>treasurer@ieeeut.org</p>
	</div>
</div>
<script>
	new AnimOnScroll( document.getElementById( 'content' ), {
		minDuration : 0.4,
		maxDuration : 0.7,
		viewportFactor : 0.2
	} );
</script>

<script>
	var isAnimating = false;

	function cardSwap (num, evt) {

		if(isAnimating) { return false; }
		isAnimating = true;

		switch(num) {
			case 2:
				var $front = $(this).children("div.front"),
					$mid = $(this).children("div.mid");

				$front.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
					$mid.removeClass("mid").addClass("front");
					$front.unbind();
					$front.removeClass("front").removeClass("card-rotateFall").addClass("mid").addClass("card-moveFromRight");
					isAnimating = false;
				});

				$front.addClass("card-rotateFall");

				break;
			case 5:
				var $front = $(this).children("div.front"),
					$mid = $(this).children("div.mid"),
					$back = $(this).children("div.back"),
					$hid1 = $(this).children("div.hid1"),
					$hid2 = $(this).children("div.hid2");

				$front.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
					$mid.removeClass("mid").addClass("front");
					$back.removeClass("back").addClass("mid");
					$hid1.removeClass("hid1").addClass("back").addClass("card-moveFromRight");
					$hid2.removeClass("hid2").addClass("hid1");
					$front.unbind();
					$front.removeClass("front").removeClass("card-rotateFall").addClass("hid2");
					isAnimating = false;
				});

				$front.addClass("card-rotateFall");

				break;
			case 3:
				var $front = $(this).children("div.front"),
					$mid = $(this).children("div.mid"),
					$back = $(this).children("div.back");

				$front.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
					$mid.removeClass("mid").addClass("front");
					$back.removeClass("back").addClass("mid");
					$front.unbind();
					$front.removeClass("front").removeClass("card-rotateFall").addClass("back").addClass("card-moveFromRight");
					isAnimating = false;
				});

				$front.addClass("card-rotateFall");
				break;
		}
	}

	$(document).ready(function(){
		$("#mp-cards").on('click', function() { cardSwap.call(this, 3); });
		$("#ae-cards").on('click', function() { cardSwap.call(this, 5); });
		$("#mr-cards").on('click', function() { cardSwap.call(this, 2); });
		$("#sec-cards").on('click', function() { cardSwap.call(this, 3); });
	});
</script>