origami: origami is now SHAPE. Working on new button styles to match new GE page. Added doc page. Working on default doc styling for 'semantic'

component.json

@@ -1,9 +1,9 @@
 {
-  "name"        : "Origami",
+  "name"        : "Shape",
   "version"     : "0.1",
-  "description" : "3D animation made easy, using the Semantic module spec.",
+  "description" : "3D animation made easy. A jQuery plugin built with the Semantic module spec.",
 
-  "homepage"    : "https://github.com/quirkyinc/",
+  "homepage"    : "https://github.com/quirkyinc/shapeful",
   "author": {
     "name" : "Jack Lukic",
     "web"  : "http://www.github.com/quirkyjack/"

examples/example.css

@@ -0,0 +1,185 @@
+/*******************************
+          CSS Reset
+*******************************/
+
+html, body, div, form, fieldset, legend, label, ul, li, menu, button {
+  margin: 0px;
+  padding: 0px;
+  background: none;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+}
+th, td {
+  text-align: left;
+  vertical-align: top;
+}
+th, td, caption { 
+  font-weight:normal; 
+  margin: 0px;
+  padding: 0px;
+}
+img,
+iframe { 
+  border: 0px; 
+}
+:focus, input:focus, button:focus, button:active, button:hover {
+  outline: 0px;
+}
+button {
+  display: block;
+  outline: 0px;
+  border: 0px;  
+}
+ul, li {
+  list-style-type: none;  
+}
+p {
+  margin: 0px;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+/*******************************
+            Example
+*******************************/
+@font-face {
+  font-family: 'Neutraface';
+  src:
+    url("fonts/neutraface-book.otf") format('opentype')
+  ;
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Neutraface Bold';
+  src:
+    url("fonts/neutraface-bold.otf") format('opentype')
+  ;
+  font-weight: normal;
+  font-style: normal;
+}
+
+#example {
+  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
+  background-color: #FCFCFC;
+}
+#example h1,
+#example h2,
+#example h3,
+#example h4,
+#example h5,
+#example .ui {
+  font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif;
+}
+
+#example h2 {
+  margin: 60px 0px 20px;
+}
+#example h3 {
+  margin: 40px 0px 15px;
+}
+#example pre {
+  background-color: #F0F0F0;
+}
+
+#example .shortcuts {
+  float: right;
+  clear: both;
+}
+
+#example .container {
+  width: 1000px;
+  margin: 0px auto;
+}
+
+#example .demo.shape {
+
+}
+
+#example .demo.shape .side {
+  
+  width: 300px;
+  height: 300px;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background-color: #22C1FC;
+
+  color: #FFFFFF;
+
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+}
+#example .demo.shape .side b {
+  display: block;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  font-size: 80px;
+  margin-top: -48px;
+  text-align: center;
+}
+
+#example .demo.shape .up.side,
+#example .demo.shape .down.side {
+  background-color: #E6E6E6;
+  color: #737373;
+}
+
+/* Shapes */
+#example .demo.rectangle.shape .side {
+  width: 500px;
+  height: 300px;
+}
+#example .demo.rectangle.shape .up.side,
+#example .demo.rectangle.shape .down.side {
+  height: 100px;
+}
+#example .demo.rectangle.shape .left.side,
+#example .demo.rectangle.shape .right.side {
+  width: 300px;
+}
+
+
+#example .demo.irregular.shape .side {
+  padding: 0px;
+}
+#example .demo.irregular.shape .side:nth-child(1n) {
+  width: 514px;
+  height: 210px;
+}
+#example .demo.irregular.shape .side:nth-child(2n) {
+  width: 126px;
+  height: 115px;
+}
+#example .demo.irregular.shape .side:nth-child(3n) {
+  width: 864px;
+  height: 510px;
+}
+#example .demo.irregular.shape .side:nth-child(4n) {
+  width: 322px;
+  height: 210px;
+}

examples/example.js

@@ -0,0 +1,87 @@
+// namespace
+var shape = {
+  handler: {}
+};
+
+// ready event
+shape.ready = function() {
+
+  // selector cache
+  var 
+    $demo            = $('.demo'),
+    $ui              = $('.ui'),
+    $directionButton = $('.direction .button'),
+    $shapeButton     = $('.shape .button'),
+    // alias
+    handler
+  ;
+
+  // event handlers
+  handler = {
+    rotate: function() {
+      var
+        direction = $(this).data('direction') || false,
+        animation = $(this).data('animation') || false
+      ;
+      if(direction && animation) {
+        $('.active.side')
+          .next()
+          .attr('class', direction + ' side')
+        ;
+        $demo
+          .shape(animation + '.' + direction)
+        ;
+      }
+    },
+
+    removeShape: function(){
+      var
+        shape = $(this).data('shape') || false
+      ;
+      if(shape) {
+        $demo
+          .removeClass(shape)
+        ;
+      }
+    },
+
+    changeShape: function() {
+      var
+        $shape       = $(this),
+        $otherShapes = $shape.siblings(),
+        shape        = $shape.data('shape')
+      ;
+      $shape
+        .addClass('active')
+      ;
+      $otherShapes
+        .removeClass('active')
+        .each(handler.removeShape)
+      ;
+      $demo
+        .addClass(shape)
+      ;
+    }
+  };
+
+  // attach events
+  $ui
+    .state()
+  ;
+  $demo
+    .shape()
+  ;
+  $directionButton
+    .on('click', handler.rotate)
+  ;
+  $shapeButton
+    .on('click', handler.changeShape)
+  ;
+
+};
+
+
+// attach ready event
+$(document)
+  .ready(shape.ready)
+;

examples/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Shape Examples</title>
+  
+  <link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" />
+  <link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" />
+  
+  <link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" />
+  
+  <link rel="stylesheet" href="example.css" type="text/css" media="screen" />
+  
+  <script src="../dependencies/jquery.js" type="text/javascript"></script>
+  <script src="ui/state.js" type="text/javascript"></script>
+
+  <script src="../dependencies/transform2d.js" type="text/javascript"></script>
+  <script src="../dependencies/transform3d.js" type="text/javascript"></script>
+  <script src="../src/shape.js" type="text/javascript"></script>
+  
+  <script src="example.js" type="text/javascript"></script>
+
+  </head>
+
+<body id="example">
+<div class="container">
+    
+  <h1>Shape</h1>
+  <p>Shape is a plugin for 3D transitioning elements. </p>
+  
+  <h2>Examples</h2>
+  
+  <h3>Regular Shape</h3>
+  <div class="demo square shape module">
+    <div class="shape">
+      <div class="active side">
+        <b>1</b>
+      </div>
+      <div class="side">
+        <b>2</b>
+      </div>
+      <div class="side">
+        <b>3</b>
+      </div>
+      <div class="side">
+        <b>4</b>
+      </div>
+    </div>
+  </div>
+  
+  <h3>Shape</h3>
+  <div class="ui shape buttons">
+    <div class="active ui button" data-shape="square">Square</div>
+    <div class="ui button" data-shape="rectangle">Rectangle</div>
+    <div class="ui button" data-shape="irregular">Irregular</div>
+  </div>
+  
+  <h3>Flip</h3>
+  <div class="ui direction buttons">
+    <div class="ui button" data-animation="flip" data-direction="left">Left</div>
+    <div class="ui button" data-animation="flip" data-direction="right">Right</div>
+    <div class="ui button" data-animation="flip" data-direction="up">Up</div>
+    <div class="ui button" data-animation="flip" data-direction="down">Down</div>
+  </div>
+  
+  <h2>Usage</h2>
+    
+  Usage:
+  // the plugin must be initialized once before methods can be accessed
+  <pre>
+  <code>
+  $('.shape')
+    .shape()
+  ;
+  <code>
+  </pre>
+  
+  // transion automatically assumed next side is the next sibling (or first if last element)
+  <pre>
+  <code>
+  $('.shape')
+    .shape('flip.up')
+  ;
+  <code>
+  </pre>
+
+  // to manually set the next side to appear use a selector or jQuery object
+  <pre>
+  <code>
+  $('.shape')
+    .shape('set.nextSide', '.second')
+    .shape('flip.up')
+  ;
+  <code>
+  </pre>
+
+  // any internal method can be invoked programmatically
+  <pre>
+  <code>
+  $('.shape')
+    .shape('repaint')
+  ;
+  <code>
+  </pre>
+</div>
+</body>
+
+</html>

examples/ui/panel.css

@@ -0,0 +1,530 @@
+/*******************************
+           UI Panel
+*******************************/
+
+.ui.panel {
+  margin: 0px 0px 25px;
+  height: 41px;
+
+  border: 1px solid #DADADA;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+
+  background-color: #FAFAFA;
+  background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+
+}
+
+.ui.panel li {
+  position: relative;
+  cursor: pointer;
+  float: left;
+
+  line-height: 1;
+  padding: 14px 35px;
+  vertical-align: middle;
+
+  font-size: 13px;
+  font-weight: bold;
+
+  color: #555555;
+
+  -webkit-box-shadow:
+    1px 0px 0px rgba(255, 255, 255, 0.5) inset,
+    -1px 0px 0px rgba(0, 0, 0, 0.06)
+  ;
+  -moz-box-shadow:
+    1px 0px 0px rgba(255, 255, 255, 0.5) inset,
+    -1px 0px 0px rgba(0, 0, 0, 0.06)
+  ;
+  box-shadow:
+    1px 0px 0px rgba(255, 255, 255, 0.5) inset,
+    -1px 0px 0px rgba(0, 0, 0, 0.06)
+  ;
+
+  background-color: #FAFAFA;
+  background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+  background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%);
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  -webkit-transition: color 0.3s linear;
+  -moz-transition: color 0.3s linear;
+  -o-transition: color 0.3s linear;
+  -ms-transition: color 0.3s linear;
+  transition: color 0.3s linear;
+}
+.ui.panel li a {
+  color: #555555;
+}
+
+.ui.panel li:first-child {
+  -webkit-border-radius: 4px 0px 0px 4px;
+  -moz-border-radius: 4px 0px 0px 4px;
+  border-radius: 4px 0px 0px 4px;
+}
+
+/* Icons */
+.ui.panel i {
+  line-height: 1;
+  margin-right: 0.5em;
+}
+
+/* left arrow icons */
+.ui.panel i.icon.left,
+.ui.panel i.icon.left-open,
+.ui.panel i.icon.left-dir {
+  margin: 0em 0.5em 0em;
+}
+/* right positioned icons */
+.ui.panel i.icon.up,
+.ui.panel i.icon.up-open,
+.ui.panel i.icon.up-dir,
+.ui.panel i.icon.down,
+.ui.panel i.icon.down-open,
+.ui.panel i.icon.down-dir,
+.ui.panel i.icon.right,
+.ui.panel i.icon.right-open,
+.ui.panel i.icon.right-dir {
+  margin: 0em 0em 0em 0.5em;
+}
+
+/* States */
+.ui.panel li.hover {
+  background: -webkit-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%);
+  background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%);
+  background: -o-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%);
+  background: -ms-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%);
+  background: linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%);
+  color: #333333;
+}
+.ui.panel li.hover a {
+  color: #333333;
+}
+
+.ui.panel li.down,
+.ui.panel li.active {
+
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+
+  -webkit-box-shadow:
+    0px 1px 5px rgba(0, 0, 0, 0.1) inset,
+    0px 0px 0px 1px #DDDDDD inset,
+    0px 0px 0px 1px #CCCCCC
+  ;
+  -moz-box-shadow:
+    0px 1px 5px rgba(0, 0, 0, 0.1) inset,
+    0px 0px 0px 1px #DDDDDD inset,
+    0px 0px 0px 1px #CCCCCC
+  ;
+  box-shadow:
+    0px 1px 5px rgba(0, 0, 0, 0.1) inset,
+    0px 0px 0px 1px #DDDDDD inset,
+    0px 0px 0px 1px #CCCCCC
+  ;
+
+  background-color: #EAEAEA;
+  background: -webkit-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%);
+  background: -moz-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%);
+  background: -o-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%);
+  background: -ms-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%);
+  background: linear-gradient(top, #EAEAEA 0%, #ECECEC 100%);
+
+}
+.ui.panel li.active,
+.ui.panel li.active.hover {
+  cursor: default;
+  color: #333333;
+}
+.ui.panel li.active a,
+.ui.panel li.active.hover a {
+  color: #333333;
+}
+
+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.panel li.active:after {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  content: "";
+
+  margin-left: -5px;
+  width: 12px;
+  height: 12px;
+
+  -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset;
+
+  background-color: #ECECEC;
+  background-image: none;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 2;
+}
+
+.ui.vertical.pointing.panel li.active:after {
+  position: absolute;
+  top: 50%;
+  right: -6px;
+  bottom: auto;
+  left: auto;
+
+  -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
+
+  margin-top: -7px;
+  width: 12px;
+  height: 12px;
+}
+.ui.simple.pointing.panel li.active:after {
+  background-color: #ECECEC;
+  background-image: none;
+}
+.ui.vertical.pointing.panel li.active:after {
+  background: -webkit-linear-gradient(top, #E9E9E9, #EBEBEB);
+  background: -moz-linear-gradient(top, #E9E9E9, #EBEBEB);
+  background: -o-linear-gradient(top, #E9E9E9, #EBEBEB);
+  background: -ms-linear-gradient(top, #E9E9E9, #EBEBEB);
+  background: linear-gradient(top, #E9E9E9, #EBEBEB);
+}
+.ui.simple.vertical.pointing.panel li.active:after {
+  background: -webkit-linear-gradient(top, #F2F2F2, #ECECEC);
+  background: -moz-linear-gradient(top, #F2F2F2, #ECECEC);
+  background: -o-linear-gradient(top, #F2F2F2, #ECECEC);
+  background: -ms-linear-gradient(top, #F2F2F2, #ECECEC);
+  background: linear-gradient(top, #F2F2F2, #ECECEC);
+}
+
+
+/*-------------------
+       Alerts
+--------------------*/
+
+.ui.panel li .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+
+
+/*-------------------
+       Attached
+--------------------*/
+
+.attached.ui.panel {
+  margin: 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+}
+.attached.ui.panel li:first-child {
+  -webkit-border-radius: 4px 0px 0px 0px;
+  -moz-border-radius: 4px 0px 0px 0px;
+  border-radius: 4px 0px 0px 0px;
+}
+.attached.ui.panel li:last-child {
+  -webkit-border-radius: 0px 4px 0px 0px;
+  -moz-border-radius: 0px 4px 0px 0px;
+  border-radius: 0px 4px 0px 0px;
+}
+
+/* Bottom Side */
+.bottom.attached.ui.panel {
+  margin-top: -1px;
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
+}
+.bottom.attached.ui.panel li:first-child {
+  -webkit-border-radius: 0px 0px 0px 4px;
+  -moz-border-radius: 0px 0px 0px 4px;
+  border-radius: 0px 0px 0px 4px;
+}
+.bottom.attached.ui.panel li:last-child {
+  -webkit-border-radius: 0px 0px 4px 0px;
+  -moz-border-radius: 0px 0px 4px 0px;
+  border-radius: 0px 0px 4px 0px;
+}
+
+/*-------------------
+       Vertical
+--------------------*/
+
+.vertical.ui.panel {
+  float: left;
+  width: 150px;
+  height: auto;
+}
+.vertical.ui.panel li {
+  float: none;
+  border-top: 1px solid #DDDDDD;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 12px 15px;
+}
+.vertical.ui.panel li:first-child {
+  border-top: 1px solid transparent;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+}
+.vertical.ui.panel li:last-child {
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
+}
+.vertical.ui.panel li.down,
+.vertical.ui.panel li.active {
+  border-top: 1px solid #CCCCCC;
+}
+
+.vertical.fluid.ui.panel {
+  height: auto;
+}
+.bottom.attached.vertical.ui.panel li:first-child {
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+}
+.bottom.attached.vertical.ui.panel li:last-child {
+  -moz-border-radius: 0px 0px 4px 4px;
+  -webkit-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
+}
+.attached.vertical.ui.panel li:first-child:last-child {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+/*-------------------
+       Simple
+--------------------*/
+.simple.ui.panel {
+  background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+
+  border-color: #EDEDED #E6E6E6 #E6E6E6 #EDEDED;
+  border-color: rgba(0, 0, 0, 0.09) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.09);
+}
+.simple.ui.panel li {
+  background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+  background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%);
+}
+.simple.ui.panel li.hover {
+  background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%);
+  background-image: -moz-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%);
+  background-image: -o-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%);
+  background-image: -ms-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%);
+  background-image: linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%);
+}
+.simple.ui.panel li.down,
+.simple.ui.panel li.active {
+  background-image: -webkit-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%);
+  background-image: -moz-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%);
+  background-image: -o-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%);
+  background-image: -ms-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%);
+  background-image: linear-gradient(top , #F2F2F2 0px, #ECECEC 100%);
+
+  -webkit-box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.05) inset,
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.05) inset,
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset
+  ;
+  box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.05) inset,
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset
+  ;
+}
+
+.ui.simple.panel li.active,
+.ui.simple.panel li.active.hover {
+  cursor: default;
+  color: #333333;
+}
+.ui.simple.panel li.active a,
+.ui.simple.panel li.active.hover a {
+  color: #333333;
+}
+
+.simple.vertical.ui.panel li.down,
+.simple.vertical.ui.panel li.active {
+  border-top: 1px solid #DDDDDD;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+/*-------------------
+        Fluid
+--------------------*/
+
+.ui.panel.fluid {
+  width: 100%;
+  height: 43px;
+}
+.ui.panel.fluid,
+.ui.panel.fluid li {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+.ui.panel.fluid li {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.ui.panel.two.fluid li {
+  width: 50%;
+}
+.ui.panel.three.fluid li {
+  width: 33.333%;
+}
+.ui.panel.four.fluid li {
+  width: 25%;
+}
+.ui.panel.five.fluid li {
+  width: 20%;
+}
+.ui.panel.six.fluid li {
+  width: 16.666%;
+}
+.ui.panel.seven.fluid li {
+  width: 14.285%;
+}
+.ui.panel.eight.fluid li {
+  width: 12.500%;
+}
+.ui.panel.nine.fluid li {
+  width: 11.11%;
+}
+.ui.panel.ten.fluid li {
+  width: 10.0%;
+}
+.ui.panel.eleven.fluid li {
+  width: 9.09%;
+}
+.ui.panel.twelve.fluid li {
+  width: 8.333%;
+}
+
+/*-------------------
+       Resizes
+--------------------*/
+
+.small.ui.panel {
+  height: 32px;
+  margin: 0px 0px 15px;
+}
+.small.fluid.ui.panel {
+  height: 34px;
+}
+.small.ui.panel li {
+  font-size: 12px;
+  font-weight: bold;
+  padding: 10px 25px;
+}
+
+/* Small Vertical Panel */
+.small.vertical.ui.panel,
+.small.vertical.ui.panel li {
+  height: auto;
+}
+.small.vertical.ui.panel li {
+  padding: 5px 9px;
+}
+.small.vertical.ui.panel li.down,
+.small.vertical.ui.panel li.active {
+  border-top: 1px solid #CCCCCC;
+}
+
+.large.ui.panel {
+  height: 47px;
+}
+.large.fluid.ui.panel {
+  height: 49px;
+}
+.large.ui.panel li {
+  font-size: 15px;
+  font-weight: bold;
+  padding: 16px 35px;
+}
+
+/* Large Vertical Panel */
+.large.vertical.ui.panel,
+.large.vertical.ui.panel li {
+  height: auto;
+}
+.large.vertical.ui.panel li {
+  padding: 15px 20px;
+}
+.large.vertical.ui.panel li.down,
+.large.vertical.ui.panel li.active {
+  border-top: 1px solid #CCCCCC;
+}
+

examples/ui/state.js

@@ -0,0 +1,594 @@
+/*  ******************************
+  Module
+  State
+  Change text based on state context
+  Hover/Pressed/Active/Inactive
+  Author: Jack Lukic
+  Last revision: May 2012
+
+  State text module is used to apply text to a given node
+  depending on the elements "state"
+
+  State is either defined as "active" or "inactive" depending
+  on the returned value of a test function
+
+  Usage:
+
+  $button
+    .state({
+      states: {
+        active: true
+      },
+      text: {
+        inactive: 'Follow',
+        active  : 'Following',
+        enable  : 'Add',
+        disable : 'Remove'
+      }
+    })
+  ;
+
+  "Follow", turns to "Add" on hover, then "Following" on active
+  and finally "Remove" on active hover
+
+  This plugin works in correlation to API module and will, by default,
+  use deffered object accept/reject to determine state.
+
+******************************  */
+
+;(function ( $, window, document, undefined ) {
+
+$.fn.state = function(parameters) {
+  var
+
+    $allModules     = $(this),
+
+    // make arguments available
+    query           = arguments[0],
+    passedArguments = [].slice.call(arguments, 1),
+    invokedResponse
+  ;
+  $allModules
+    .each(function() {
+      var
+        $module       = $(this),
+
+        settings      = $.extend(true, {}, $.fn.state.settings, parameters),
+
+        selector      = $module.selector || '',
+        element       = this,
+        instance      = $module.data('module-' + settings.namespace),
+        methodInvoked = (typeof query == 'string'),
+
+        // shortcuts
+        namespace     = settings.namespace,
+        metadata      = settings.metadata,
+        className     = settings.className,
+        states        = settings.states,
+        text          = settings.text,
+
+        module
+      ;
+      module = {
+
+        initialize: function() {
+          module.verbose('Initializing module for', element);
+
+          // allow module to guess desired state based on element
+          if(settings.automatic) {
+            module.add.defaults();
+          }
+
+          // bind events with delegated events
+          if(settings.context && selector !== '') {
+            if( module.allows('hover') ) {
+              $(element, settings.context)
+                .on(selector, 'mouseenter.' + namespace, module.hover.enable)
+                .on(selector, 'mouseleave.' + namespace, module.hover.disable)
+              ;
+            }
+            if( module.allows('pressed') ) {
+              $(element, settings.context)
+                .on(selector, 'mousedown.' + namespace, module.pressed.enable)
+                .on(selector, 'mouseup.'   + namespace, module.pressed.disable)
+              ;
+            }
+            if( module.allows('focus') ) {
+              $(element, settings.context)
+                .on(selector, 'focus.' + namespace, module.focus.enable)
+                .on(selector, 'blur.'  + namespace, module.focus.disable)
+              ;
+            }
+            $(settings.context)
+              .on(selector, 'mouseover.' + namespace, module.text.change)
+              .on(selector, 'mouseout.'  + namespace, module.text.reset)
+              .on(selector, 'click.'     + namespace, module.toggle)
+            ;
+
+          }
+          else {
+            if( module.allows('hover') ) {
+              $module
+                .on('mouseenter.' + namespace, module.hover.enable)
+                .on('mouseleave.' + namespace, module.hover.disable)
+              ;
+            }
+            if( module.allows('pressed') ) {
+              $module
+                .on('mousedown.' + namespace, module.pressed.enable)
+                .on('mouseup.'   + namespace, module.pressed.disable)
+              ;
+            }
+            if( module.allows('focus') ) {
+              $module
+                .on('focus.' + namespace, module.focus.enable)
+                .on('blur.'  + namespace, module.focus.disable)
+              ;
+            }
+            $module
+              .on('mouseover.' + namespace, module.text.change)
+              .on('mouseout.'  + namespace, module.text.reset)
+              .on('click.'     + namespace, module.toggle)
+            ;
+          }
+          $module
+            .data('module-' + namespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous module for', element);
+          $module
+            .off('.' + namespace)
+          ;
+        },
+
+        refresh: function() {
+          module.verbose('Refreshing selector cache for', element);
+          $module = $(element);
+        },
+
+        add: {
+          defaults: function() {
+            var
+              userStates = parameters && $.isPlainObject(parameters.states)
+                ? parameters.states
+                : {}
+            ;
+            $.each(settings.defaults, function(type, typeStates) {
+              if( module.is[type] !== undefined && module.is[type]() ) {
+                module.verbose('Adding default states for detected type:', type, element);
+                $.extend(settings.states, typeStates, userStates);
+              }
+            });
+          }
+        },
+
+        is: {
+
+          active: function() {
+            return $module.hasClass(className.active);
+          },
+          loading: function() {
+            return $module.hasClass(className.loading);
+          },
+          inactive: function() {
+            return !( $module.hasClass(className.active) );
+          },
+
+          enabled: function() {
+            return !( $module.is(settings.filter.active) );
+          },
+          disabled: function() {
+            return ( $module.is(settings.filter.active) );
+          },
+          textEnabled: function() {
+            return !( $module.is(settings.filter.text) );
+          },
+
+          // definitions for automatic type detection
+          button: function() {
+            return $module.is('.button:not(a, .submit)');
+          },
+          input: function() {
+            return $module.is('input');
+          }
+        },
+
+        allows: function(state) {
+          return states[state] || false;
+        },
+        enable: function(state) {
+          if(module.allows(state)) {
+            $module.addClass( className[state] );
+          }
+        },
+        disable: function(state) {
+          if(module.allows(state)) {
+            $module.removeClass( className[state] );
+          }
+        },
+        textFor: function(state) {
+          return text[state] || false;
+        },
+
+        focus : {
+          enable: function() {
+            $module.addClass(className.focus);
+          },
+          disable: function() {
+            $module.removeClass(className.focus);
+          }
+        },
+
+        hover : {
+          enable: function() {
+            $module.addClass(className.hover);
+          },
+          disable: function() {
+            $module.removeClass(className.hover);
+          }
+        },
+
+        pressed : {
+          enable: function() {
+            $module
+              .addClass(className.pressed)
+              .one('mouseleave', module.pressed.disable)
+            ;
+          },
+          disable: function() {
+            $module.removeClass(className.pressed);
+          }
+        },
+
+        // determines method for state activation
+        toggle: function() {
+          var
+            apiRequest = $module.data(metadata.promise)
+          ;
+          if( module.allows('active') && module.is.enabled() ) {
+            module.refresh();
+            if(apiRequest !== undefined) {
+              module.listenTo(apiRequest);
+            }
+            else {
+              module.change();
+            }
+          }
+        },
+
+        listenTo: function(apiRequest) {
+          module.debug('API request detected, waiting for state signal');
+          if(apiRequest) {
+            if(text.loading) {
+              module.text.update(text.loading);
+            }
+            $.when(apiRequest)
+              .then(function() {
+                if(apiRequest.state() == 'resolved') {
+                  module.debug('API request succeeded');
+                  settings.activateTest   = function(){ return true; };
+                  settings.deactivateTest = function(){ return true; };
+                }
+                else {
+                  module.debug('API request failed');
+                  settings.activateTest   = function(){ return false; };
+                  settings.deactivateTest = function(){ return false; };
+                }
+                module.change();
+              })
+            ;
+          }
+          // xhr exists but set to false, beforeSend killed the xhr
+          else {
+            settings.activateTest   = function(){ return false; };
+            settings.deactivateTest = function(){ return false; };
+          }
+        },
+
+        // checks whether active/inactive state can be given
+        change: function() {
+          module.debug('Determining state change direction');
+          // inactive to active change
+          if( module.is.inactive() ) {
+            module.activate();
+          }
+          else {
+            module.deactivate();
+          }
+          if(settings.sync) {
+            module.sync();
+          }
+          settings.onChange();
+        },
+
+        activate: function() {
+          if( $.proxy(settings.activateTest, element)() ) {
+            module.debug('Setting state to active');
+            $module
+              .addClass(className.active)
+            ;
+            module.text.update(text.active);
+          }
+        },
+
+        deactivate: function() {
+          if($.proxy(settings.deactivateTest, element)() ) {
+            module.debug('Setting state to inactive');
+            $module
+              .removeClass(className.active)
+            ;
+            module.text.update(text.inactive);
+          }
+        },
+
+        sync: function() {
+          module.verbose('Syncing other buttons to current state');
+          if( module.is.active() ) {
+            $allModules
+              .not($module)
+                .state('activate');
+          }
+          else {
+            $allModules
+              .not($module)
+                .state('deactivate')
+            ;
+          }
+        },
+
+        text: {
+
+          // finds text node to update
+          get: function() {
+            return (settings.textFilter)
+              ? $module.find(settings.textFilter).text()
+              : $module.html()
+            ;
+          },
+
+          change: function() {
+            if( module.is.textEnabled() ) {
+              if( module.is.active() ) {
+                if(text.hover) {
+                  module.verbose('Changing text to hover text', text.hover);
+                  module.text.update(text.hover);
+                }
+                else if(text.disable) {
+                  module.verbose('Changing text to disable text', text.disable);
+                  module.text.update(text.disable);
+                }
+              }
+              else {
+                if(text.hover) {
+                  module.verbose('Changing text to hover text', text.disable);
+                  module.text.update(text.hover);
+                }
+                else if(text.enable){
+                  module.verbose('Changing text to enable text', text.disable);
+                  module.text.update(text.enable);
+                }
+              }
+            }
+          },
+
+          // on mouseout sets text to previous value
+          reset : function() {
+            var
+              activeText   = text.active   || $module.data(metadata.storedText),
+              inactiveText = text.inactive || $module.data(metadata.storedText)
+            ;
+            if( module.is.textEnabled() ) {
+              if( module.is.active() && activeText) {
+                module.verbose('Resetting active text', activeText);
+                module.text.update(activeText);
+              }
+              else if(inactiveText) {
+                module.verbose('Resetting inactive text', activeText);
+                module.text.update(inactiveText);
+              }
+            }
+          },
+
+          update: function(text) {
+            var
+              currentText = module.text.get()
+            ;
+            if(text && text !== currentText) {
+              module.debug('Updating text to', text);
+              if(settings.textFilter) {
+                $module
+                  .data(metadata.storedText, text)
+                  .find(settings.textFilter)
+                    .text(text)
+                ;
+              }
+              else {
+                $module
+                  .data(metadata.storedText, text)
+                  .html(text)
+                ;
+              }
+            }
+          }
+        },
+        /* standard module */
+        setting: function(name, value) {
+          if(value === undefined) {
+            return settings[name];
+          }
+          settings[name] = value;
+        },
+        verbose: function() {
+          if(settings.verbose) {
+            module.debug.apply(this, arguments);
+          }
+        },
+        debug: function() {
+          var
+            output    = [],
+            message   = settings.moduleName + ': ' + arguments[0],
+            variables = [].slice.call( arguments, 1 ),
+            log       = console.info || console.log || function(){}
+          ;
+          log = Function.prototype.bind.call(log, console);
+          if(settings.debug) {
+            output.push(message);
+            log.apply(console, output.concat(variables) );
+          }
+        },
+        error: function() {
+          var
+            output       = [],
+            errorMessage = settings.moduleName + ': ' + arguments[0],
+            variables    = [].slice.call( arguments, 1 ),
+            log          = console.warn || console.log || function(){}
+          ;
+          log = Function.prototype.bind.call(log, console);
+          if(settings.debug) {
+            output.push(errorMessage);
+            output.concat(variables);
+            log.apply(console, output.concat(variables) );
+          }
+        },
+        invoke: function(query, context, passedArguments) {
+          var
+            maxDepth,
+            found
+          ;
+          passedArguments = passedArguments || [].slice.call( arguments, 2 );
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split('.');
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+                return true;
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+                return true;
+              }
+              module.error(settings.errors.method);
+              return false;
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          // return retrieved variable or chain
+          return found;
+        }
+      };
+
+      // check for invoking internal method
+      if(methodInvoked) {
+        invokedResponse = module.invoke(query, this, passedArguments);
+      }
+      // otherwise initialize
+      else {
+        if(instance !== undefined) {
+          module.destroy();
+        }
+        module.initialize();
+      }
+    })
+  ;
+  // chain or return queried method
+  return (invokedResponse !== undefined)
+    ? invokedResponse
+    : this
+  ;
+};
+
+$.fn.state.settings = {
+
+  // module info
+  moduleName : 'State Module',
+
+  // debug output
+  debug      : true,
+  // verbose debug output
+  verbose    : false,
+
+  namespace  : 'state',
+
+  // callback occurs on state change
+  onChange: function() {},
+
+  // state test functions
+  activateTest   : function() { return true; },
+  deactivateTest : function() { return true; },
+
+  // whether to automatically map default states
+  automatic: true,
+  // activate / deactivate changes all elements instantiated at same time
+  sync: false,
+
+  // selector filter
+  filter     : {
+    text   : '.loading, .disabled',
+    active : '.disabled'
+  },
+
+  textFilter : false,
+  context    : false,
+  // errors
+  errors: {
+    method : 'The method you called is not defined.'
+  },
+
+  // metadata
+  metadata: {
+    promise    : 'promise',
+    storedText : 'stored-text'
+  },
+
+  // change class on state
+  className: {
+    focus   : 'focus',
+    hover   : 'hover',
+    pressed : 'down',
+    active  : 'active',
+    loading : 'loading'
+  },
+
+  defaults : {
+    input: {
+      hover   : true,
+      focus   : true,
+      pressed : true,
+      loading : false,
+      active  : false
+    },
+    button: {
+      hover   : true,
+      focus   : false,
+      pressed : true,
+      active  : false,
+      loading : true
+    }
+  },
+
+  states     : {
+    hover   : true,
+    focus   : true,
+    pressed : true,
+    loading : false,
+    active  : false
+  },
+
+  text     : {
+    hover    : false,
+    active   : false,
+    inactive : false,
+    enable   : false,
+    disable  : false
+  }
+
+};
+
+
+
+})( jQuery, window , document );

src/origami.css → src/shape.css

@@ -1,8 +1,8 @@
 /*******************************
-        Origami Module
+        shape Module
 *******************************/
 
-.origami.module {
+.shape.module {
   position: relative;
 
   -webkit-perspective: 2000px;
@@ -11,72 +11,48 @@
   perspective: 2000px;
 }
 
-.origami.module .box {
+.shape.module .shape {
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 
-.origami.module .side {
-  display: none;
+.shape.module .side {
   opacity: 1;
   width: 100%;
-  background-color: #FFFFFF;
-
-  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
-/* Handle (Stubbed as image will fix) */
-.origami.module .handle {
-  cursor: pointer;
-  position: absolute;
-  bottom: -28px;
-  right: 50%;
-
-  margin-left: -22px;
-  width: 44px;
-  height: 44px;
-  background: url(/images/modules/origami-handle.png) no-repeat 0px 0px;
-}
-.origami.module .down.handle {
-  background-position: 0px -50px;
-}
-
-
 /*---------------
     States
 ----------------*/
 
+/* Standard */
+.shape.module .side {
+  display: none;
+}
+
 /* Animating */
-.origami.module.animating .box {
+.shape.module.animating .shape {
   position: absolute;
 }
-.origami.module .animating.side {
+.shape.module .animating.side {
   position: absolute;
   width: 100%;
   top: 0px;
   left: 0px;
   z-index: 100;
 }
-.origami.module .hidden.side {
+.shape.module .hidden.side {
   opacity: 0.5;
 }
 
-/* Animate using CSS */
-.origami.css.module {
+/* css animation */
+.shape.css.module {
   -webkit-transition: 
     all 0.5s ease-in-out;
   ;
@@ -93,14 +69,14 @@
     all 0.5s ease-in-out;
   ;
 }
-.origami.css.module .box {
+.shape.css.module .shape {
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
 }
-.origami.css.module .side {
+.shape.css.module .side {
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
@@ -109,6 +85,6 @@
 }
 
 /* Active */
-.origami.module .active.side {
+.shape.module .active.side {
   display: block;
 }

src/origami.js → src/shape.js

@@ -1,31 +1,21 @@
-/*  ******************************
-  Module
-  Origami
-  Author: Jack Lukic
-  Created: Mar 28, 2013
-  Last revision: Mar 2013
+/*  *******************************************************************************************
 
-  Creates a cube which can be rotated
+  Shape - A 3D Animation Plugin
+  Version 0.1
+  (built using Semantic module spec)
 
-  Usage:
+  Author        : Jack Lukic
+  Last revision : April 2013
 
-  $origami
-    .origami()
-  ;
-
-  $origami
-    .origami('flip.up')
-  ;
-
-******************************  */
+*********************************************************************************************  */
 
 ;(function ( $, window, document, undefined ) {
 
-$.fn.origami = function(parameters) {
+$.fn.shape = function(parameters) {
   var
     $allModules     = $(this),
 
-    settings        = $.extend(true, {}, $.fn.origami.settings, parameters),
+    settings        = $.extend(true, {}, $.fn.shape.settings, parameters),
     // make arguments available
     query           = arguments[0],
     passedArguments = [].slice.call(arguments, 1),
@@ -35,28 +25,29 @@ $.fn.origami = function(parameters) {
     .each(function() {
       var
         // selector cache
-        $module            = $(this),
-        $box               = $module.find(settings.selector.box),
-        $side              = $module.find(settings.selector.side),
-
+        $module       = $(this),
+        $shape        = $module.find(settings.selector.shape),
+        $side         = $module.find(settings.selector.side),
+        
         $activeSide,
         $nextSide,
-
-        // private variables
-        selector           = $module.selector || '',
-        element            = this,
-        instance           = $module.data('module-' + settings.namespace),
-        methodInvoked      = (typeof query == 'string'),
-
-        endTransition      = 'transitionend msTransitionEnd oTransitionEnd',
-
-        // shortcuts
-        namespace          = settings.namespace,
-        metadata           = settings.metadata,
-        className          = settings.className,
+        
+        selector      = $module.selector || '',
+        element       = this,
+        instance      = $module.data('module-' + settings.namespace),
+        methodInvoked = (typeof query == 'string'),
+        
+        // private
+        endTransition = 'transitionend msTransitionEnd oTransitionEnd',
+        
+        // internal aliases
+        namespace     = settings.namespace,
+        metadata      = settings.metadata,
+        className     = settings.className,
 
         module
       ;
+
       module = {
 
         initialize: function() {
@@ -77,13 +68,14 @@ $.fn.origami = function(parameters) {
         refresh: function() {
           module.verbose('Refreshing selector cache for', element);
           $module = $(element);
-          $box    = $(this).find(settings.selector.box);
+          $shape  = $(this).find(settings.selector.shape);
           $side   = $(this).find(settings.selector.side);
         },
 
         repaint: function() {
+          module.verbose('Forcing repaint event');
           var 
-            fakeAssignment = $module.get(0).offsetWidth
+            fakeAssignment = $shape.get(0).offsetWidth
           ;
         },
 
@@ -93,9 +85,10 @@ $.fn.origami = function(parameters) {
             callback = function() {
               module.reset();
               module.set.active();
+              $.proxy(settings.onChange, $nextSide)();
             }
           ;
-          if(settings.useCSS) {
+          if(settings.useCSS || 1) {
             module.verbose('Using CSS transitions to animate');
             $module
               .addClass(className.animating)
@@ -108,7 +101,7 @@ $.fn.origami = function(parameters) {
             $activeSide
               .addClass(className.hidden)
             ;
-            $box
+            $shape
               .css(propertyObject)
               .one(endTransition, callback)
             ;
@@ -127,7 +120,7 @@ $.fn.origami = function(parameters) {
                 opacity: 0
               }, settings.duration, settings.easing)
             ;
-            $box
+            $shape
               .animate(propertyObject, settings.duration, settings.easing, callback)
             ;
           }
@@ -140,7 +133,7 @@ $.fn.origami = function(parameters) {
             .removeClass(className.animating)
             .removeAttr('style')
           ;
-          $box
+          $shape
             .removeAttr('style')
           ;
           $side
@@ -153,6 +146,17 @@ $.fn.origami = function(parameters) {
           ;
         },
 
+        get: {
+
+          nextSide: function() {
+            return ( $activeSide.next(settings.selector.side).size() > 0 )
+              ? $activeSide.next(settings.selector.side)
+              : $module.find(settings.selector.side).first()
+            ;
+          }
+
+        },
+
         set: {
 
           defaultSide: function() {
@@ -166,10 +170,17 @@ $.fn.origami = function(parameters) {
           },
 
           stageSize: function() {
-            $module
-              .css({
+            var
+              stage = {
                 width  : $nextSide.outerWidth(),
                 height : $nextSide.outerHeight()
+              }
+            ;
+            module.verbose('Resizing stage to fit new content', stage);
+            $module
+              .css({
+                width  : stage.width,
+                height : stage.height
               })
             ;
           },
@@ -455,34 +466,38 @@ $.fn.origami = function(parameters) {
   ;
 };
 
-$.fn.origami.settings = {
+$.fn.shape.settings = {
 
   // module info
-  moduleName : 'Origami Module',
-
-  // debug output
+  moduleName : 'Shape Module',
+  
+  // debug content outputted to console
   debug      : true,
+  
   // verbose debug output
   verbose    : true,
 
-  namespace  : 'origami',
+  // event namespace
+  namespace  : 'shape',
 
   // callback occurs on side change
-  onChange   : function() {},
+  beforeChange : function() {},
+  onChange     : function() {},
 
+  // use css animation (currently only true is supported)
   useCSS     : true,
+
+  // animation duration (useful only with future js animations)
   duration   : 1000,
   easing     : 'easeInOutQuad',
 
+  // possible errors
   errors: {
-    api        : 'You tried to switch to a side that does not exist.',
-    method     : 'The method you called is not defined'
-  },
-
-  metadata : {
-
+    side   : 'You tried to switch to a side that does not exist.',
+    method : 'The method you called is not defined'
   },
 
+  // classnames used
   className   : {
     css       : 'css',
     animating : 'animating',
@@ -490,13 +505,13 @@ $.fn.origami.settings = {
     active    : 'active'
   },
 
+  // selectors used
   selector    : {
-    box  : '.box',
-    side : '.side'
+    shape : '.shape',
+    side  : '.side'
   }
 
 };
 
 
-
 })( jQuery, window , document );