audreyfeldroy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="jsbin.ovesux.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="jsbin.ovesux.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="rotatingnav">
  <div class="panel"><a>0</a></div>
  <div class="panel"><a>1</a></div>
  <div class="panel"><a>2</a></div>
  <div class="panel"><a>3</a></div>
  <div class="panel"><a>4</a></div>
  <div class="panel"><a>5</a></div>
  <div class="panel"><a>6</a></div>
  <div class="panel"><a>7</a></div>
</div>
</body>
</html>

## jsbin.ovesux.css
.rotatingnav {
  margin-top: 100px;
  *zoom: 1; /* clearfix hack - IE */
}

.rotatingnav:before,
.rotatingnav:after {
    content: " "; /* clearfix hack - Opera */
    display: table; /* clearfix hack if using before*/
}

.rotatingnav:after {
    clear: both; /* clearfix hack */
}

.pull-left {
  float: left;
  padding-right: 4px; /* float hack */
}

.panel {
  position: relative;
  display: inline-block;
  width: 40px;
  margin: 0;
}

.panel > a {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 20px;
  background-color: rgb(166,233,209);
}

## jsbin.ovesux.js
var panels = [0,1,2,3,4,5,6,7];
var activePanels = [0,1,2,3,4,5];
var activeHead = 0;
var activeTail = 5;
var panelHead = 0;
var panelTail = 7;

function shiftForward() {
    // Press right arrow
    console.log("Shifting forward");
    activeHead++;
    activeTail++;
  if (activeTail > panelTail) {
    activeTail = panelHead;
  }
  if (activeHead > panelTail) {
    activeHead = panelHead;
  }
}

function shiftBackward() {
    // Press left arrow
    console.log("Shifting backward");
    activeHead--;
    activeTail--;
  if (activeHead < panelHead) {
    activeHead = panelTail;
  }

  if (activeTail < panelHead) {
    activeTail = panelTail;
  }
}

function isActive(index) {
  // Case 1
  if (activeHead < activeTail &&
      activeHead <= index &&
      index <= activeTail) {
    return true;
  } else if (activeHead > activeTail &&
             !(activeTail < index &&
               index < activeHead)) {
    return true;
  } else {
    return false;
  }
}

function updateActive() {
  console.log("activeHead " + activeHead + ", activeTail " + activeTail);
  $('.panel').removeClass('pull-left');
  $('.panel').each(function(index){
    if (isActive(index)) {
      $(this).show();
      if (index > activeTail) {
        $(this).addClass('pull-left');
      }
    } else {
      $(this).hide();
    }
  });
}

$(function() {
  updateActive();
  $('body').keypress(function (event) {
    if (event.which == 102) { // f - forward
      shiftForward();
    } else if (event.which == 98) { // b - backward
      shiftBackward();
    }
    updateActive();
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<link href="jsbin.ovesux.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="jsbin.ovesux.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="rotatingnav">
	<div class="panel"><a>0</a></div>
	<div class="panel"><a>1</a></div>
	<div class="panel"><a>2</a></div>
	<div class="panel"><a>3</a></div>
	<div class="panel"><a>4</a></div>
	<div class="panel"><a>5</a></div>
	<div class="panel"><a>6</a></div>
	<div class="panel"><a>7</a></div>
	</div>
	</body>
	</html>
	.rotatingnav {
	margin-top: 100px;
	zoom: 1; / clearfix hack - IE */
	}

	.rotatingnav:before,
	.rotatingnav:after {
	content: " "; /* clearfix hack - Opera */
	display: table; /* clearfix hack if using before*/
	}

	.rotatingnav:after {
	clear: both; /* clearfix hack */
	}

	.pull-left {
	float: left;
	padding-right: 4px; /* float hack */
	}

	.panel {
	position: relative;
	display: inline-block;
	width: 40px;
	margin: 0;
	}

	.panel > a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding: 20px;
	background-color: rgb(166,233,209);
	}
	var panels = [0,1,2,3,4,5,6,7];
	var activePanels = [0,1,2,3,4,5];
	var activeHead = 0;
	var activeTail = 5;
	var panelHead = 0;
	var panelTail = 7;

	function shiftForward() {
	// Press right arrow
	console.log("Shifting forward");
	activeHead++;
	activeTail++;
	if (activeTail > panelTail) {
	activeTail = panelHead;
	}
	if (activeHead > panelTail) {
	activeHead = panelHead;
	}
	}

	function shiftBackward() {
	// Press left arrow
	console.log("Shifting backward");
	activeHead--;
	activeTail--;
	if (activeHead < panelHead) {
	activeHead = panelTail;
	}

	if (activeTail < panelHead) {
	activeTail = panelTail;
	}
	}

	function isActive(index) {
	// Case 1
	if (activeHead < activeTail &&
	activeHead <= index &&
	index <= activeTail) {
	return true;
	} else if (activeHead > activeTail &&
	!(activeTail < index &&
	index < activeHead)) {
	return true;
	} else {
	return false;
	}
	}

	function updateActive() {
	console.log("activeHead " + activeHead + ", activeTail " + activeTail);
	$('.panel').removeClass('pull-left');
	$('.panel').each(function(index){
	if (isActive(index)) {
	$(this).show();
	if (index > activeTail) {
	$(this).addClass('pull-left');
	}
	} else {
	$(this).hide();
	}
	});
	}

	$(function() {
	updateActive();
	$('body').keypress(function (event) {
	if (event.which == 102) { // f - forward
	shiftForward();
	} else if (event.which == 98) { // b - backward
	shiftBackward();
	}
	updateActive();
	});
	});