├── Cakefile
├── LICENSE
├── README.md
├── examples
    ├── login
    │   ├── css
    │   │   ├── application.less
    │   │   └── utils.less
    │   ├── index.html
    │   └── lib
    │   │   ├── coffee-script.js
    │   │   └── less.js
    └── windows8
    │   ├── css
    │       ├── application.less
    │       └── utils.less
    │   ├── index.html
    │   └── lib
    │       ├── coffee-script.js
    │       └── less.js
├── index.html
├── index.js
├── lib
    ├── gfx.cube.js
    ├── gfx.effects.js
    ├── gfx.flip.js
    ├── gfx.js
    └── gfx.overlay.js
├── package.json
├── site
    ├── jquery.js
    └── site.css
└── src
    ├── gfx.coffee
    ├── gfx.cube.coffee
    ├── gfx.effects.coffee
    ├── gfx.flip.coffee
    └── gfx.overlay.coffee


/Cakefile:
--------------------------------------------------------------------------------
 1 | {print} = require 'util'
 2 | {spawn} = require 'child_process'
 3 | 
 4 | build = (callback) ->
 5 |   coffee = spawn 'coffee', ['-c', '-o', 'lib', 'src']
 6 |   coffee.stderr.on 'data', (data) ->
 7 |     process.stderr.write data.toString()
 8 |   coffee.stdout.on 'data', (data) ->
 9 |     print data.toString()
10 |   coffee.on 'exit', (code) ->
11 |     callback?() if code is 0
12 | 
13 | task 'build', 'Build lib/ from src/', ->
14 |   build()


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011 Alex MacCaw (info@eribium.org)
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #GFX 
  2 | 
  3 | GFX is an 3D CSS3 animation library that extends jQuery with some useful functionality for programmatically creating CSS3 transitions. CSS3 transitions are superior to manual ones (using setTimeout) since they're hardware accelerated, something particularly noticeable on mobile devices.
  4 | 
  5 | GFX currently only supports WebKit browsers (Safari/Chrome). Firefox support is planned. For best results, use [WebKit Nightly](http://nightly.webkit.org/)
  6 | 
  7 | To see some demos, checkout [GFX's site](http://maccman.github.com/gfx/).
  8 | 
  9 | ![GFX](https://lh4.googleusercontent.com/-LLsYFy2fsDU/TfWLdsroWuI/AAAAAAAABPY/xZSnjX2EEQQ/s640/Screen%252520shot%2525202011-06-12%252520at%25252020.58.58.png)
 10 | 
 11 | #Basic usage
 12 | 
 13 | Usage is very straightforward, simply include the `gfx.js` file in the page, along with [jQuery](http://jquery.com).
 14 | 
 15 |     <script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>  
 16 |     <script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>  
 17 |     
 18 | Then call, `$.fn.gfx()`, passing in a set of properties and optional options.
 19 |     
 20 |     $("#element").gfx(properties, options)
 21 |     
 22 | Properties can be any CSS styles that you want to transition, such as `color`, `background` or `width`. In addition, any properties that you'd normally use with `-webkit-transform`, can be used without the `transform` prefix, such as with `scale` and `rotate` in the example below.
 23 |     
 24 |     $(this).gfx({
 25 |       scale: "1.5",
 26 |       rotate: "180deg"
 27 |     })
 28 |     
 29 | Valid options for `gfx()` are:
 30 | 
 31 | * `duration` - animation duration in milliseconds
 32 | * `easing` - animation flow control, either `linear`, `ease-in`, `ease-out`, `ease-in-out`, or a custom cubic bezier
 33 | * `complete` - a callback function executed after the animation has finished
 34 | * `queue` - specifies which animation queue to use, by default `fx`. Set to false to disable queuing
 35 |     
 36 | As with normal jQuery animations, GFX transitions can be chained so they run one after an other. Additionally, you can still use the `delay()` function.
 37 |     
 38 |     .gfx({
 39 |       rotate: "0deg",
 40 |       translateX: "-100px"
 41 |     }).delay(100).gfx({
 42 |       scale: "1"
 43 |     }).gfx({
 44 |       rotate: "0deg",
 45 |       translateX: "-100px"
 46 |     })
 47 | 
 48 | ##In-built effects
 49 | 
 50 | GFX comes with several in built effects, but you can easily add your own. They do what they say on the tin. To seem them live checkout the [GFX website](http://maccman.github.com/gfx/).
 51 |         
 52 |     $.fn.gfxExplodeOut()
 53 |     $.fn.gfxExplodeIn()
 54 |     $.fn.gfxBlip()
 55 |     $.fn.gfxFadeIn()
 56 |     $.fn.gfxFadeOut()
 57 |     
 58 | #Overlay
 59 | 
 60 | GFX comes with a overlay (lightbox) effect. First include the script `gfx.overlay.js` (after `gfx.js`).
 61 |     
 62 |     <script src="lib/gfx.overlay.js" type="text/javascript" charset="utf-8"></script>
 63 | 
 64 | Then call `$.gfxOverlay()`, passing in a element and optional settings. The element will be cloned and presented to the user above the overlay. If you specify a `<script />` element, then GFX will use the script's inner HTML. You should also specify a height and width for the dialog box. 
 65 |     
 66 |     $(".about").click(function() {
 67 |       return $.gfxOverlay("#aboutText", {width: 300, height: 130});
 68 |     });
 69 |     
 70 | #Flip
 71 | 
 72 | The flip effect is for showing two elements that be can flipped between. To use it, first include the `gfx.flip.js` script.
 73 | 
 74 |     <script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>
 75 |     
 76 | Then you need to create an element with the correct markup, including two children with `.front` and `.back` classes. You may want to set the `.back` element's `display` to `none` in your CSS file to avoid a flash before the JS kicks in.
 77 | 
 78 |     <div id="flip">
 79 |       <div class="front">Front</div>
 80 |       <div class="back">Back</div>
 81 |     </div>
 82 | 
 83 | Now call `$.fn.gfxFlip()` to setup the flipping. To activate a flip, trigger the `flip` event on the element.
 84 | 
 85 |     $("#flip").gfxFlip().click(function() {
 86 |       return $(this).trigger("flip");
 87 |     });
 88 |     
 89 | #Cube
 90 | 
 91 | The Cube is great for displaying multiple pieces of information, perhaps steps in a tutorial or setup procedure. As before, you first need to include the `gfx.cube.js` file.
 92 | 
 93 |     <script src="lib/gfx.cube.js" type="text/javascript" charset="utf-8"></script>
 94 |     
 95 | Then setup the correct element structure:
 96 | 
 97 |     <div id="cube">
 98 |       <div class="front"></div>
 99 |       <div class="back"></div>
100 |       <div class="left"></div>
101 |       <div class="right"></div>
102 |       <div class="top"></div>
103 |       <div class="bottom"></div>
104 |     </div>
105 |     
106 | You don't have to include all the faces, just the `front` face is required. Now call `$.fn.gfxCube()`, passing in the `height` and `width` of the cube.
107 |     
108 |     $("#cube").gfxCube({
109 |       width: 500,
110 |       height: 290
111 |     });
112 |     
113 | To change the face, just trigger the `cube` event, passing in the face name as event data.
114 |     
115 |     $(".download").click(function() {
116 |       return $("#cube").trigger("cube", "right");
117 |     });
118 |     
119 |     $(".back").click(function() {
120 |       return $("#cube").trigger("cube", "front");
121 |     });
122 | 
123 | #Transforms
124 | 
125 | GFX supports the following CSS3 transforms:
126 | 
127 | * scale
128 | * scaleX
129 | * scaleY
130 | * scale3d
131 | * rotate
132 | * rotateX
133 | * rotateY
134 | * rotateZ
135 | * rotate3d
136 | * translate
137 | * translateX
138 | * translateY
139 | * translateZ
140 | * translate3d
141 | * skew
142 | * skewX
143 | * skewY
144 | * matrix
145 | * matrix3d
146 | * perspective
147 | 
148 | CSS Transforms are a whole subject to themselves, and unfortunately there isn't space to elaborate on them here. Luckily [David DeSandro](http://desandro.com/) has created a great set of tutorials, which you can find [here](http://desandro.github.com/3dtransforms/). 
149 | 
150 | Additionally the WebKit blog has a great [article](http://www.webkit.org/blog/386/3d-transforms/) on transitions when they first introduced, and the [Apple Developer center](http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html) also provides good documentation. 
151 | 
152 | #Demos
153 | 
154 | More demos are planned, but feel free to contribute ideas if you coming up with a cool idea. At the moment, I'm thinking of re-creating the interfaces from Time Machine and Windows 8.


--------------------------------------------------------------------------------
/examples/login/css/application.less:
--------------------------------------------------------------------------------
  1 | @import "./utils";
  2 | 
  3 | body {
  4 | 	line-height: 1.4em;
  5 | 	background: #B5B8BC;
  6 |   color: #636669;
  7 |   font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
  8 | 
  9 |   -webkit-perspective: 1000;
 10 |   -webkit-transform-origin: 50% 50%;
 11 |   -webkit-transform-style: preserve-3d;
 12 | }
 13 | 
 14 | a {
 15 | 	color: #4183C4;
 16 | 	text-decoration: none;
 17 |   text-shadow: 0 1px 1px #FFF;
 18 | }
 19 | 
 20 | a:hover {
 21 | 	text-decoration: underline;
 22 | }
 23 | 
 24 | a.button, input[type=submit], button {
 25 |   line-height: 1.2em;
 26 |   .border-radius(4px);
 27 |   font-family: helvetica, arial, sans-serif;
 28 |   font-size: 13px;
 29 |   color: #6E7076;
 30 |   font-weight: bold;
 31 |   padding: 6px 10px;
 32 |   text-align: center;
 33 |   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
 34 |   border: 1px solid #B0B1B5;
 35 |   .vbg-gradient(#FBF9F9, #E2E1E1);
 36 |   .box-shadow(0, 1px, 1px, #FFF);
 37 |   
 38 |   cursor: pointer;
 39 |   display: inline-block;
 40 |   text-decoration: none;
 41 |   
 42 |   &:active {
 43 |     .vbg-gradient(#E2E1E1, #FBF9F9);
 44 |   }
 45 |   
 46 |   margin: 5px 0 10px;
 47 | }
 48 | 
 49 | a.button.default, input[type=submit].default, button.default {
 50 |   border-color: #2863CE;
 51 |   .vbg-gradient(#5FAFFC, #2B72F5);
 52 |   -webkit-box-shadow: 0 1px 0 rgab(255, 255, 255, 0.1), inset 0 1px 1px #78CBFF;
 53 |   color: #FFF;
 54 |   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
 55 |   
 56 |   &:active {
 57 |     -webkit-box-shadow: 0 1px 1px #FFF;
 58 |     .vbg-gradient(#2B72F5, #5FAFFC);
 59 |   }
 60 |   
 61 |   &:focus {
 62 |     outline: none;
 63 |   }
 64 | }
 65 | 
 66 | textarea, 
 67 | input[type="search"], 
 68 | input[type="text"], 
 69 | input[type="email"], 
 70 | input[type="password"] {
 71 |   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 1px inset, 
 72 |                       rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset, 
 73 |                       rgba(255, 255, 255, 0.8) 0px 1px 0px 0px;
 74 |   .border-radius(4px);
 75 |   font-size: 14px;
 76 |   color: #202122;
 77 |   font-family: helvetica, arial, sans-serif;
 78 |   padding: 7px 7px 4px 7px;
 79 |   background: #FEFFFE;
 80 |   -webkit-appearance: none;
 81 |   border: 0;
 82 | 
 83 |   &:focus {
 84 |     outline: 2px solid rgba(104,189,244,0.6);
 85 |   }
 86 | 
 87 |   margin: 5px;
 88 | }
 89 | 
 90 | select {
 91 |   margin: 5px;
 92 | }
 93 | 
 94 | textarea {
 95 | 	height: 100px;
 96 | 	width: 96%;	
 97 | 	resize: vertical;
 98 | }
 99 | 
100 | label {
101 |   display: block;
102 |   margin: 5px 0 0 0;
103 | }
104 | 
105 | label span {
106 |   display: block;
107 | }
108 | 
109 | h1, h2 {
110 |   font-family: agb, helvetica, arial, sans-serif;
111 |   font-size: 28px;
112 |   color: #000;
113 |   font-style: normal;
114 |   font-weight: normal;
115 | }
116 | 
117 | h2 {
118 |   font-size: 23px;
119 | }
120 | 
121 | footer {
122 |   overflow: hidden;
123 |   
124 |   .right {
125 |     float: right;
126 |   }
127 | }
128 | 
129 | #content {
130 |   -webkit-perspective: 1000;
131 |   -webkit-transform-origin: 50% 50%;
132 |   -webkit-transform-style: preserve-3d;
133 | }
134 | 
135 | .panel {
136 |   width: 210px;
137 | 	margin: 25px auto 50px;
138 | 	border: 1px solid #979A9C;
139 | 	padding: 0 15px 15px 15px;
140 | 	.vbg-gradient(#FEFFFE, #E5E5E8);
141 | 	.box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.2));
142 | 	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1), inset 0 1px 1px #FFF;
143 | 	position: relative;
144 | }
145 | 
146 | /*#content:before, #content:after
147 | {
148 |   position: absolute;
149 |   width: 40%;
150 |   height: 10px;
151 |   content: ' ';
152 |   left: 12px;
153 |   bottom: 8px;
154 |   background: transparent;
155 |   .transform(skew(-4deg) rotate(-4deg));
156 |   .box-shadow(0, 6px, 12px, rgba(0, 0, 0, 0.3));
157 |   z-index: -1;
158 | }
159 | 
160 | #content:after {
161 |   left: auto;
162 |   right: 12px;
163 |   .transform(skew(4deg) rotate(4deg));
164 | }*/
165 | 
166 | #main {
167 |   display: none;
168 |   height: 300px;
169 | }


--------------------------------------------------------------------------------
/examples/login/css/utils.less:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Less CSS3 utils.
 3 | */
 4 | 
 5 | .border-radius(@r: 3px) {
 6 |   -moz-border-radius: @r;
 7 |   -webkit-border-radius: @r;
 8 |   border-radius: @r;
 9 | }
10 | 
11 | /* Vertical Background Gradient */
12 | .vbg-gradient(@fc: #FFF, @tc: #FFF) {
13 |   background: @fc;
14 |   background: -webkit-gradient(linear, left top, left bottom, from(@fc), to(@tc));
15 |   background: -moz-linear-gradient(top, @fc, @tc);
16 |   background: linear-gradient(top, @fc, @tc);
17 | }
18 | 
19 | /* Horizontal Background Gradient */
20 | .hbg-gradient(@fc: #FFF, @tc: #FFF) {
21 |   background: @fc;
22 |   background: -webkit-gradient(linear, left top, right top, from(@fc), to(@tc));
23 |   background: -moz-linear-gradient(left, @fc, @tc);
24 |   background: linear-gradient(left, @fc, @tc);
25 | }
26 | 
27 | .box-shadow (@h: 0px, @v: 0px, @b: 4px, @c: #333) {
28 |   -moz-box-shadow: @h @v @b @c;
29 |   -webkit-box-shadow: @h @v @b @c;
30 |   box-shadow: @h @v @b @c;
31 | }
32 | 
33 | .inset-box-shadow (@h: 0px, @v: 0px, @b: 4px, @c: #333) {
34 |   -moz-box-shadow: inset @h @v @b @c;
35 |   -webkit-box-shadow: inset @h @v @b @c;
36 |   box-shadow: inset @h @v @b @c;
37 | }
38 | 
39 | .box-flex (@s: 0) {
40 |   -webkit-box-flex: @s;
41 |   -moz-box-flex: @s;
42 |   box-flex: @s;
43 | }
44 | 
45 | .hbox () {
46 |   display: -webkit-box;
47 |   -webkit-box-orient: horizontal;
48 |   -webkit-box-align: stretch;
49 |   -webkit-box-pack: left;
50 |   
51 |   display: -moz-box;
52 |   -moz-box-orient: horizontal;
53 |   -moz-box-align: stretch;
54 |   -moz-box-pack: left;  
55 | }
56 | 
57 | .vbox () {
58 |   display: -webkit-box;
59 |   -webkit-box-orient: vertical;
60 |   -webkit-box-align: stretch;
61 |   
62 |   display: -moz-box;
63 |   -moz-box-orient: vertical;
64 |   -moz-box-align: stretch;
65 | }
66 | 
67 | .border-box () {
68 |   -webkit-box-sizing: border-box;
69 |   -moz-box-sizing: border-box;
70 |   box-sizing: border-box;
71 | }
72 | 
73 | .transition (@s: 0.3s, @o: opacity, @t: linear) {
74 |   -webkit-transition: @s @o @t;
75 |   -moz-transition: @s @o @t;
76 |   transition: @s @o @t;
77 | }
78 | 
79 | .ellipsis () {
80 |   text-overflow: ellipsis;
81 |   overflow: hidden;
82 |   white-space:nowrap;
83 | }
84 | 
85 | .inset-line(@opacity: 0.4, @size: 1px) {
86 |   .inset-box-shadow(0, @size, 0, rgba(255, 255, 255, @opacity);
87 | }
88 | 
89 | .transform(@tr: zoom(1)) {
90 |   -webkit-transform: @tr;
91 | 	-moz-transform: @tr;
92 | 	-ms-transform: @tr;
93 | 	-o-transform: @tr;
94 | 	transform: @tr;
95 | }


--------------------------------------------------------------------------------
/examples/login/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset=utf-8>
 5 |   <title>Login</title>
 6 |   <link rel="stylesheet/less" type="text/css" href="css/application.less">
 7 |   <script src="lib/less.js" type="text/javascript"></script>
 8 |   <script src="lib/coffee-script.js" type="text/javascript"></script>
 9 |   <script src="../../site/jquery.js" type="text/javascript"></script>
10 |   <script src="../../src/gfx.coffee" type="text/coffeescript"></script>
11 |   <script type="text/coffeescript" charset="utf-8">
12 |     $ = jQuery
13 |     
14 |     $ ->  
15 |       login = $("#login")
16 |       main  = $("#main")
17 |       
18 |       login.find("form").submit (e) ->
19 |         e.preventDefault()
20 |         $(this).gfx(opacity:0).delay(500).queueNext ->
21 |           login.gfxRotateOut()
22 |           main.gfxRotateIn()
23 |           
24 |   </script>
25 | </head>
26 | <body>
27 |   <div id="content">
28 |     <div class="panel" id="login">
29 |       <form>
30 |         <h1>Login</h1>
31 |         <label><span>Email</span><input type="text" name="email" value=""></label>
32 |         <label><span>Password</span><input type="password" name="password" value=""></label>
33 |         <footer>
34 |           <button>Login</button>
35 |         </footer>
36 |       </form>
37 |     </div>
38 |     
39 |     <div class="panel" id="main">
40 |       <h1>Main</h1>
41 |     </div>
42 |   </div>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/examples/login/lib/less.js:
--------------------------------------------------------------------------------
 1 | //
 2 | // LESS - Leaner CSS v1.1.3
 3 | // http://lesscss.org
 4 | // 
 5 | // Copyright (c) 2009-2011, Alexis Sellier
 6 | // Licensed under the Apache 2.0 License.
 7 | //
 8 | //
 9 | // LESS - Leaner CSS v1.1.3
10 | // http://lesscss.org
11 | // 
12 | // Copyright (c) 2009-2011, Alexis Sellier
13 | // Licensed under the Apache 2.0 License.
14 | //
15 | (function(a,b){function v(a,b){var c="less-error-message:"+p(b),e=["<ul>",'<li><label>[-1]</label><pre class="ctx">{0}</pre></li>',"<li><label>[0]</label><pre>{current}</pre></li>",'<li><label>[1]</label><pre class="ctx">{2}</pre></li>',"</ul>"].join("\n"),f=document.createElement("div"),g,h;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p><a href="'+b+'">'+b+"</a> ",a.extract&&(h+="on line "+a.line+", column "+(a.column+1)+":</p>"+e.replace(/\[(-?\d)\]/g,function(b,c){return parseInt(a.line)+parseInt(c)||""}).replace(/\{(\d)\}/g,function(b,c){return a.extract[parseInt(c)]||""}).replace(/\{current\}/,a.extract[1].slice(0,a.column)+'<span class="error">'+a.extract[1].slice(a.column)+"</span>")),f.innerHTML=h,q([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #ee4444;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.ctx {","color: #dd4444;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}function u(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function t(a){return a&&a.parentNode.removeChild(a)}function s(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){u("browser doesn't support AJAX.");return null}}function r(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=s(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function q(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||p(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(u("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function p(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i),r(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())q(l.css,b),c(null,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type})).parse(a,function(a,d){if(a)return v(a,i);try{c(d,b,{local:!1,lastModified:g,remaining:f}),t(document.getElementById("less-error-message:"+p(i)))}catch(a){v(a,i)}})}catch(h){v(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){a[b].type="text/css",a[b].innerHTML=d.toCSS()})}function c(b){return a.less[b.split("/")[1]]}Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else for(;;){if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,e;typeof a=="undefined"?(d=exports,e=c("less/tree")):(typeof a.less=="undefined"&&(a.less={}),d=a.less,e=a.less.tree={}),d.Parser=function(a){function t(a){return typeof a=="string"?b.charAt(c)===a:a.test(j[f])?!0:!1}function s(a){var d,e,g,h,i,m,n,o;if(a instanceof Function)return a.call(l.parsers);if(typeof a=="string")d=b.charAt(c)===a?a:null,g=1,r();else{r();if(d=a.exec(j[f]))g=d[0].length;else return null}if(d){o=c+=g,m=c+j[f].length-g;while(c<m){h=b.charCodeAt(c);if(h!==32&&h!==10&&h!==9)break;c++}j[f]=j[f].slice(g+(c-o)),k=c,j[f].length===0&&f<j.length-1&&f++;return typeof d=="string"?d:d.length===1?d[0]:d}}function r(){c>k&&(j[f]=j[f].slice(c-k),k=c)}function q(){j[f]=g,c=h,k=c}function p(){g=j[f],h=c,k=c}var b,c,f,g,h,i,j,k,l,m=this,n=function(){},o=this.imports={paths:a&&a.paths||[],queue:[],files:{},mime:a&&a.mime,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=a,c(a),e.queue.length===0&&n()},a)}};this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null;return l={imports:o,parse:function(d,g){var h,l,m,o,p,q,r=[],t,u=null;c=f=k=i=0,j=[],b=d.replace(/\r\n/g,"\n"),j=function(c){var d=0,e=/[^"'`\{\}\/\(\)]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=0,h,i=c[0],j,k;for(var l=0,m,n;l<b.length;l++){e.lastIndex=l,(h=e.exec(b))&&h.index===l&&(l+=h[0].length,i.push(h[0])),m=b.charAt(l),f.lastIndex=l,!k&&!j&&m==="/"&&(n=b.charAt(l+1),(n==="/"||n==="*")&&(h=f.exec(b))&&h.index===l&&(l+=h[0].length,i.push(h[0]),m=b.charAt(l)));if(m==="{"&&!k&&!j)g++,i.push(m);else if(m==="}"&&!k&&!j)g--,i.push(m),c[++d]=i=[];else if(m==="("&&!k&&!j)i.push(m),j=!0;else if(m===")"&&!k&&j)i.push(m),j=!1;else{if(m==='"'||m==="'"||m==="`")k?k=k===m?!1:k:k=m;i.push(m)}}if(g>0)throw{type:"Syntax",message:"Missing closing `}`",filename:a.filename};return c.map(function(a){return a.join("")})}([[]]),h=new e.Ruleset([],s(this.parsers.primary)),h.root=!0,h.toCSS=function(c){var d,f,g;return function(g,h){function n(a){return a?(b.slice(0,a).match(/\n/g)||"").length:null}var i=[];g=g||{},typeof h=="object"&&!Array.isArray(h)&&(h=Object.keys(h).map(function(a){var b=h[a];b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b]));return new e.Rule("@"+a,b,!1,0)}),i=[new e.Ruleset(null,h)]);try{var j=c.call(this,{frames:i}).toCSS([],{compress:g.compress||!1})}catch(k){f=b.split("\n"),d=n(k.index);for(var l=k.index,m=-1;l>=0&&b.charAt(l)!=="\n";l--)m++;throw{type:k.type,message:k.message,filename:a.filename,index:k.index,line:typeof d=="number"?d+1:null,callLine:k.call&&n(k.call)+1,callExtract:f[n(k.call)],stack:k.stack,column:m,extract:[f[d-1],f[d],f[d+1]]}}return g.compress?j.replace(/(\s)+/g,"$1"):j}}(h.eval);if(c<b.length-1){c=i,q=b.split("\n"),p=(b.slice(0,c).match(/\n/g)||"").length+1;for(var v=c,w=-1;v>=0&&b.charAt(v)!=="\n";v--)w++;u={name:"ParseError",message:"Syntax Error on line "+p,index:c,filename:a.filename,line:p,column:w,extract:[q[p-2],q[p-1],q[p]]}}this.imports.queue.length>0?n=function(){g(u,h)}:g(u,h)},parsers:{primary:function(){var a,b=[];while((a=s(this.mixin.definition)||s(this.rule)||s(this.ruleset)||s(this.mixin.call)||s(this.comment)||s(this.directive))||s(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(c)==="/"){if(b.charAt(c+1)==="/")return new e.Comment(s(/^\/\/.*/),!0);if(a=s(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)}},entities:{quoted:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==='"'||b.charAt(d)==="'"){f&&s("~");if(a=s(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],f)}},keyword:function(){var a;if(a=s(/^[A-Za-z-]+/))return new e.Keyword(a)},call:function(){var a,b,d=c;if(!!(a=/^([\w-]+|%)\(/.exec(j[f]))){a=a[1].toLowerCase();if(a==="url")return null;c+=a.length;if(a==="alpha")return s(this.alpha);s("("),b=s(this.entities.arguments);if(!s(")"))return;if(a)return new e.Call(a,b,d)}},arguments:function(){var a=[],b;while(b=s(this.expression)){a.push(b);if(!s(","))break}return a},literal:function(){return s(this.entities.dimension)||s(this.entities.color)||s(this.entities.quoted)},url:function(){var a;if(b.charAt(c)==="u"&&!!s(/^url\(/)){a=s(this.entities.quoted)||s(this.entities.variable)||s(this.entities.dataURI)||s(/^[-\w%@$\/.&=:;#+?~]+/)||"";if(!s(")"))throw new Error("missing closing ) for url()");return new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),o.paths)}},dataURI:function(){var a;if(s(/^data:/)){a={},a.mime=s(/^[^\/]+\/[^,;)]+/)||"",a.charset=s(/^;\s*charset=[^,;)]+/)||"",a.base64=s(/^;\s*base64/)||"",a.data=s(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,d=c;if(b.charAt(c)==="@"&&(a=s(/^@@?[\w-]+/)))return new e.Variable(a,d)},color:function(){var a;if(b.charAt(c)==="#"&&(a=s(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,d=b.charCodeAt(c);if(!(d>57||d<45||d===47))if(a=s(/^(-?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==="`"){f&&s("~");if(a=s(/^`([^`]*)`/))return new e.JavaScript(a[1],c,f)}}},variable:function(){var a;if(b.charAt(c)==="@"&&(a=s(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!!t(/^[@\w.%-]+\/[@\w.-]+/)&&(a=s(this.entity))&&s("/")&&(b=s(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var a=[],d,f,g,h=c,i=b.charAt(c);if(i==="."||i==="#"){while(d=s(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new e.Element(f,d)),f=s(">");s("(")&&(g=s(this.entities.arguments))&&s(")");if(a.length>0&&(s(";")||t("}")))return new e.mixin.Call(a,g,h)}},definition:function(){var a,d=[],f,g,h,i;if(!(b.charAt(c)!=="."&&b.charAt(c)!=="#"||t(/^[^{]*(;|})/)))if(f=s(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=f[1];while(h=s(this.entities.variable)||s(this.entities.literal)||s(this.entities.keyword)){if(h instanceof e.Variable)if(s(":"))if(i=s(this.expression))d.push({name:h.name,value:i});else throw new Error("Expected value");else d.push({name:h.name});else d.push({value:h});if(!s(","))break}if(!s(")"))throw new Error("Expected )");g=s(this.block);if(g)return new e.mixin.Definition(a,d,g)}}},entity:function(){return s(this.entities.literal)||s(this.entities.variable)||s(this.entities.url)||s(this.entities.call)||s(this.entities.keyword)||s(this.entities.javascript)||s(this.comment)},end:function(){return s(";")||t("}")},alpha:function(){var a;if(!!s(/^\(opacity=/i))if(a=s(/^\d+/)||s(this.entities.variable)){if(!s(")"))throw new Error("missing closing ) for alpha()");return new e.Alpha(a)}},element:function(){var a,b,c;c=s(this.combinator),a=s(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||s("*")||s(this.attribute)||s(/^\([^)@]+\)/);if(a)return new e.Element(c,a)},combinator:function(){var a,d=b.charAt(c);if(d===">"||d==="&"||d==="+"||d==="~"){c++;while(b.charAt(c)===" ")c++;return new e.Combinator(d)}if(d===":"&&b.charAt(c+1)===":"){c+=2;while(b.charAt(c)===" ")c++;return new e.Combinator("::")}return b.charAt(c-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,d,f=[],g,h;while(d=s(this.element)){g=b.charAt(c),f.push(d);if(g==="{"||g==="}"||g===";"||g===",")break}if(f.length>0)return new e.Selector(f)},tag:function(){return s(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||s("*")},attribute:function(){var a="",b,c,d;if(!!s("[")){if(b=s(/^[a-zA-Z-]+/)||s(this.entities.quoted))(d=s(/^[|~*$^]?=/))&&(c=s(this.entities.quoted)||s(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!s("]"))return;if(a)return"["+a+"]"}},block:function(){var a;if(s("{")&&(a=s(this.primary))&&s("}"))return a},ruleset:function(){var a=[],b,d,g;p();if(g=/^([.#: \w-]+)[\s\n]*\{/.exec(j[f]))c+=g[0].length-1,a=[new e.Selector([new e.Element(null,g[1])])];else while(b=s(this.selector)){a.push(b),s(this.comment);if(!s(","))break;s(this.comment)}if(a.length>0&&(d=s(this.block)))return new e.Ruleset(a,d);i=c,q()},rule:function(){var a,d,g=b.charAt(c),k,l;p();if(g!=="."&&g!=="#"&&g!=="&")if(a=s(this.variable)||s(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(j[f]))?(c+=l[0].length-1,d=new e.Anonymous(l[1])):a==="font"?d=s(this.font):d=s(this.value),k=s(this.important);if(d&&s(this.end))return new e.Rule(a,d,k,h);i=c,q()}},"import":function(){var a;if(s(/^@import\s+/)&&(a=s(this.entities.quoted)||s(this.entities.url))&&s(";"))return new e.Import(a,o)},directive:function(){var a,d,f,g;if(b.charAt(c)==="@"){if(d=s(this["import"]))return d;if(a=s(/^@media|@page|@-[-a-z]+/)){g=(s(/^[^{]+/)||"").trim();if(f=s(this.block))return new e.Directive(a+" "+g,f)}else if(a=s(/^@[-a-z]+/))if(a==="@font-face"){if(f=s(this.block))return new e.Directive(a,f)}else if((d=s(this.entity))&&s(";"))return new e.Directive(a,d)}},font:function(){var a=[],b=[],c,d,f,g;while(g=s(this.shorthand)||s(this.entity))b.push(g);a.push(new e.Expression(b));if(s(","))while(g=s(this.expression)){a.push(g);if(!s(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=s(this.expression)){b.push(a);if(!s(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(c)==="!")return s(/^! *important/)},sub:function(){var a;if(s("(")&&(a=s(this.expression))&&s(")"))return a},multiplication:function(){var a,b,c,d;if(a=s(this.operand)){while((c=s("/")||s("*"))&&(b=s(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,d,f,g;if(a=s(this.multiplication)){while((f=s(/^[-+]\s+/)||b.charAt(c-1)!=" "&&(s("+")||s("-")))&&(d=s(this.multiplication)))g=new e.Operation(f,[g||a,d]);return g||a}},operand:function(){var a,d=b.charAt(c+1);b.charAt(c)==="-"&&(d==="@"||d==="(")&&(a=s("-"));var f=s(this.sub)||s(this.entities.dimension)||s(this.entities.color)||s(this.entities.variable)||s(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),f]):f},expression:function(){var a,b,c=[],d;while(a=s(this.addition)||s(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=s(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}},typeof a!="undefined"&&(d.Parser.importer=function(a,b,c,d){a.charAt(0)!=="/"&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},c,!0)}),function(a){function d(a){return Math.min(1,Math.max(0,a))}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){a=a<0?a+1:a>1?a-1:a;return a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();e.s+=c.value/100,e.s=d(e.s);return b(e)},desaturate:function(a,c){var e=a.toHSL();e.s-=c.value/100,e.s=d(e.s);return b(e)},lighten:function(a,c){var e=a.toHSL();e.l+=c.value/100,e.l=d(e.l);return b(e)},darken:function(a,c){var e=a.toHSL();e.l-=c.value/100,e.l=d(e.l);return b(e)},fadein:function(a,c){var e=a.toHSL();e.a+=c.value/100,e.a=d(e.a);return b(e)},fadeout:function(a,c){var e=a.toHSL();e.a-=c.value/100,e.a=d(e.a);return b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;d.h=e<0?360+e:e;return b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});d=d.replace(/%%/g,"%");return new a.Quoted('"'+d+'"',d)},round:function(b){if(b instanceof a.Dimension)return new a.Dimension(Math.round(c(b)),b.unit);if(typeof b=="number")return Math.round(b);throw{error:"RuntimeError",message:"math functions take numbers as parameters"}}}}(c("less/tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){this.value.eval&&(this.value=this.value.eval(a));return this}}}(c("less/tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("less/tree")),function(a){a.Call=function(a,b,c){this.name=a,this.args=b,this.index=c},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{message:"error evaluating function `"+this.name+"`",index:this.index}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("less/tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):a.length==8?(this.alpha=parseInt(a.substring(0,2),16)/255,this.rgb=a.substr(2).match(/.{2}/g).map(function(a){return parseInt(a,16)})):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16);return a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}}}}(c("less/tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("less/tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)}}}(c("less/tree")),function(a){a.Directive=function(b,c){this.name=b,Array.isArray(c)?this.ruleset=new a.Ruleset([],c):this.value=c},a.Directive.prototype={toCSS:function(a,b){if(this.ruleset){this.ruleset.root=!0;return this.name+(b.compress?"{":" {\n  ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n  ")+(b.compress?"}":"\n}\n")}return this.name+" "+this.value.toCSS()+";\n"},eval:function(a){a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift();return this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("less/tree")),function(a){a.Element=function(b,c){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),this.value=c.trim()},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+this.value},a.Combinator=function(a){a===" "?this.value=" ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("less/tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(" ")}}}(c("less/tree")),function(a){a.Import=function(b,c){var d=this;this._path=b,b instanceof a.Quoted?this.path=/\.(le?|c)ss$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css$/.test(this.path),this.css||c.push(this.path,function(a){if(!a)throw new Error("Error parsing "+d.path);d.root=a})},a.Import.prototype={toCSS:function(){return this.css?"@import "+this._path.toCSS()+";\n":""},eval:function(b){var c;if(this.css)return this;c=new a.Ruleset(null,this.root.rules.slice(0));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));return c.rules}}}(c("less/tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("less/tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value}}}(c("less/tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d){this.selector=new a.Selector(b),this.arguments=c,this.index=d},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments).rules),e=!0}catch(h){throw{message:h.message,index:h.index,stack:h.stack,call:this.index}}if(e)return d;throw{message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index}}throw{message:this.selector.toCSS().trim()+" is undefined",index:this.index}}},a.mixin.Definition=function(b,c,d){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},eval:function(b,c){var d=new a.Ruleset(null,[]),e,f=[];for(var g=0,h;g<this.params.length;g++)if(this.params[g].name)if(h=c&&c[g]||this.params[g].value)d.rules.unshift(new a.Rule(this.params[g].name,h.eval(b)));else throw{message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};for(var g=0;g<Math.max(this.params.length,c&&c.length);g++)f.push(c[g]||this.params[g].value);d.rules.unshift(new a.Rule("@arguments",(new a.Expression(f)).eval(b)));return(new a.Ruleset(null,this.rules.slice(0))).eval({frames:[this,d].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;d=Math.min(c,this.arity);for(var e=0;e<d;e++)if(!this.params[e].name&&a[e].eval(b).toCSS()!=this.params[e].value.eval(b).toCSS())return!1;return!0}}}(c("less/tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color)if(this.op==="*"||this.op==="+")e=d,d=c,c=e;else throw{name:"OperationError",message:"Can't substract or divide a color from a number"};return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("less/tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return f.value||f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("less/tree")),function(a){a.Rule=function(b,c,d,e){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+";"},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("less/tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=new a.Ruleset(this.selectors,this.rules.slice(0));c.root=this.root,b.frames.unshift(c);if(c.root)for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.mixin.Definition&&(c.rules[d].frames=b.frames.slice(0));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.mixin.Call&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));for(var d=0,e;d<c.rules.length;d++)e=c.rules[d],e instanceof a.mixin.Definition||(c.rules[d]=e.eval?e.eval(b):e);b.frames.shift();return c},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c);return b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();if(g in this._lookups)return this._lookups[g];this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>1?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}});return this._lookups[g]=d},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;if(!this.root)if(b.length===0)g=this.selectors.map(function(a){return[a]});else for(var j=0;j<this.selectors.length;j++)for(var k=0;k<b.length;k++)g.push(b[k].concat([this.selectors[j]]));for(var l=0;l<this.rules.length;l++)i=this.rules[l],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":g.length>3?",\n":", "),d.push(h,(c.compress?"{":" {\n  ")+e.join(c.compress?"":"\n  ")+(c.compress?"}":"\n}\n"))),d.push(f);return d.join("")+(c.compress?"\n":"")}}}(c("less/tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){return this.elements[0].value===a.elements[0].value?!0:!1},a.Selector.prototype.toCSS=function(a){if(this._css)return this._css;return this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("less/tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(!/^(?:https?:\/|file:\/|data:\/)?\//.test(b.value)&&c.length>0&&typeof a!="undefined"&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("less/tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("less/tree")),function(a){a.Variable=function(a,b){this.name=a,this
16 | .index=b},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{message:"variable "+e+" is undefined",index:this.index}}}}(c("less/tree")),c("less/tree").find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},c("less/tree").jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)};var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c){a&&q(a.toCSS(),b,c.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e){e.local?u("loading "+d.href+" from cache."):(u("parsed "+d.href+" successfully."),q(a.toCSS(),d,e.lastModified)),u("css for "+d.href+" generated in "+(new Date-c)+"ms"),e.remaining===0&&u("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window)


--------------------------------------------------------------------------------
/examples/windows8/css/application.less:
--------------------------------------------------------------------------------
 1 | @import "./utils";
 2 | 
 3 | html, body {
 4 |   height: 100%;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   padding: 0;
10 |   -webkit-user-select: none;    
11 |   background: #2C1F44;
12 |   background: #2C1F44 -webkit-gradient(linear, left top, left bottom, from(darken(#2C1F44, 7%)), color-stop(0.3, #2C1F44), color-stop(0.9, #2C1F44), to(darken(#2C1F44, 5%))) no-repeat;
13 |   overflow: hidden;
14 |   
15 |   -webkit-perspective: 1000;
16 |   -webkit-transform-origin: 50% 50%;
17 |   -webkit-transform-style: preserve-3d;
18 | }
19 | 
20 | header {
21 |   padding: 40px 0;
22 |   
23 |   h1 {
24 |     margin: 0;
25 |     padding: 0;
26 |   }
27 | }
28 | 
29 | h1 {
30 |   color: #DDD;
31 |   font-weight: normal;
32 |   font-style: normal;
33 |   font: 43px "Lucida Grande";
34 |   text-shadow: 0 1px rgba(0, 0, 0, 0.8);
35 | }
36 | 
37 | .panels {
38 |   overflow: hidden;
39 |   width: 2500px;
40 | }
41 | 
42 | .sections {
43 |   float: left;
44 |   margin-right: 5%;
45 |   
46 |   .one { 
47 |     background: #429C8A;
48 |     background: darken(#429C8A, 10%) -webkit-gradient(linear, left top, right bottom, from(#429C8A), to(darken(#429C8A, 14%))) no-repeat;
49 |   }
50 |   
51 |   .two { 
52 |     background: #3652AB;
53 |     background: darken(#3652AB, 10%) -webkit-gradient(linear, left top, right bottom, from(#3652AB), to(darken(#3652AB, 14%))) no-repeat;
54 |   }
55 |   
56 |   .three { 
57 |     background: #6C335F;
58 |     background: darken(#6C335F, 10%) -webkit-gradient(linear, left top, right bottom, from(#6C335F), to(darken(#6C335F, 12%))) no-repeat;
59 |   }
60 |   
61 |   .four { 
62 |     background: #C67700;
63 |     background: darken(#C67700, 10%) -webkit-gradient(linear, left top, right bottom, from(#C67700), to(darken(#C67700, 14%))) no-repeat;
64 |   }
65 |   
66 |   .five { 
67 |     background: #738B00;
68 |     background: darken(#738B00, 10%) -webkit-gradient(linear, left top, right bottom, from(#738B00), to(darken(#738B00, 14%))) no-repeat;
69 |   }
70 |   
71 |   .col { 
72 |     float: left;
73 |   }
74 |   
75 |   .col div {
76 |     width: 360px;
77 |     height: 170px;
78 |     margin: 0 8px 8px 0;
79 |     .box-shadow(0, 0, 5px, rgba(0, 0, 0, 0.2));
80 |   }
81 | }
82 | 
83 | .container {
84 |   margin: 0 5%;
85 | }
86 | 
87 | .panelView {
88 |   background: darken(#C67700, 10%) -webkit-gradient(linear, left top, right bottom, from(#C67700), to(darken(#C67700, 14%))) no-repeat;
89 |   height: 100%;
90 | }


--------------------------------------------------------------------------------
/examples/windows8/css/utils.less:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Less CSS3 utils.
 3 | */
 4 | 
 5 | .border-radius(@r: 3px) {
 6 |   -moz-border-radius: @r;
 7 |   -webkit-border-radius: @r;
 8 |   border-radius: @r;
 9 | }
10 | 
11 | /* Vertical Background Gradient */
12 | .vbg-gradient(@fc: #FFF, @tc: #FFF) {
13 |   background: @fc;
14 |   background: -webkit-gradient(linear, left top, left bottom, from(@fc), to(@tc));
15 |   background: -moz-linear-gradient(top, @fc, @tc);
16 |   background: linear-gradient(top, @fc, @tc);
17 | }
18 | 
19 | /* Horizontal Background Gradient */
20 | .hbg-gradient(@fc: #FFF, @tc: #FFF) {
21 |   background: @fc;
22 |   background: -webkit-gradient(linear, left top, right top, from(@fc), to(@tc));
23 |   background: -moz-linear-gradient(left, @fc, @tc);
24 |   background: linear-gradient(left, @fc, @tc);
25 | }
26 | 
27 | .box-shadow (@h: 0px, @v: 0px, @b: 4px, @c: #333) {
28 |   -moz-box-shadow: @h @v @b @c;
29 |   -webkit-box-shadow: @h @v @b @c;
30 |   box-shadow: @h @v @b @c;
31 | }
32 | 
33 | .inset-box-shadow (@h: 0px, @v: 0px, @b: 4px, @c: #333) {
34 |   -moz-box-shadow: inset @h @v @b @c;
35 |   -webkit-box-shadow: inset @h @v @b @c;
36 |   box-shadow: inset @h @v @b @c;
37 | }
38 | 
39 | .box-flex (@s: 0) {
40 |   -webkit-box-flex: @s;
41 |   -moz-box-flex: @s;
42 |   box-flex: @s;
43 | }
44 | 
45 | .hbox () {
46 |   display: -webkit-box;
47 |   -webkit-box-orient: horizontal;
48 |   -webkit-box-align: stretch;
49 |   -webkit-box-pack: left;
50 |   
51 |   display: -moz-box;
52 |   -moz-box-orient: horizontal;
53 |   -moz-box-align: stretch;
54 |   -moz-box-pack: left;  
55 | }
56 | 
57 | .vbox () {
58 |   display: -webkit-box;
59 |   -webkit-box-orient: vertical;
60 |   -webkit-box-align: stretch;
61 |   
62 |   display: -moz-box;
63 |   -moz-box-orient: vertical;
64 |   -moz-box-align: stretch;
65 | }
66 | 
67 | .border-box () {
68 |   -webkit-box-sizing: border-box;
69 |   -moz-box-sizing: border-box;
70 |   box-sizing: border-box;
71 | }
72 | 
73 | .transition (@s: 0.3s, @o: opacity, @t: linear) {
74 |   -webkit-transition: @s @o @t;
75 |   -moz-transition: @s @o @t;
76 |   transition: @s @o @t;
77 | }
78 | 
79 | .ellipsis () {
80 |   text-overflow: ellipsis;
81 |   overflow: hidden;
82 |   white-space:nowrap;
83 | }
84 | 
85 | .inset-line(@opacity: 0.4, @size: 1px) {
86 |   .inset-box-shadow(0, @size, 0, rgba(255, 255, 255, @opacity);
87 | }


--------------------------------------------------------------------------------
/examples/windows8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset=utf-8>
 5 |   <title>Windows 8</title>
 6 |   <link rel="stylesheet/less" type="text/css" href="css/application.less">
 7 |   <script src="lib/less.js" type="text/javascript"></script>
 8 |   <script src="lib/coffee-script.js" type="text/javascript"></script>
 9 |   <script src="../../site/jquery.js" type="text/javascript"></script>
10 |   <script src="../../lib/gfx.js" type="text/javascript"></script>
11 |   
12 |   <script type="text/coffeescript" charset="utf-8">
13 |     $ = jQuery
14 |     $ ->
15 |       $(".col div").click ->
16 |         $("#panelsView").hide();
17 |         view = $("<div />").addClass("panelView").appendTo("body")
18 |         view.css(background: $(@).css('backgroundColor'))
19 |         view.queueNext ->
20 |           view.transform(rotateY: "-40deg", translateZ: "-1000px", scale: ".2", opacity: "0.6")
21 |         view.gfx(rotateY: "0deg", translateZ: "0px", scale: "1", opacity: "1")
22 |         
23 |     $ -> 
24 |       header = $("#panelsView header")
25 |       header.queueNext ->
26 |         header.transform(opacity: "0.1", translate3d: "150px,0,0")
27 |       header.gfx({opacity: "1", translate3d: "0,0,0"}, duration: "600")
28 |       
29 |     $ ->
30 |       $(".sections .col").transform(translate3d: "150px,0,0")
31 |     
32 |       $(".sections .col").each ->
33 |         element = $(this)
34 |         $(".sections").delay(100).queueNext ->
35 |           element.gfx(translate3d: "0,0,0", opacity: "1")
36 |   </script>
37 | </head>
38 | <body>
39 |   <div id="panelsView" class="container">
40 |     <header>
41 |       <h1>Windows 8</h1>
42 |     </header>
43 |   
44 |     <div class="panels">
45 |     <div class="sections">
46 |       <div class="col">
47 |         <div class="one"></div>
48 |         <div class="two"></div>
49 |         <div class="three"></div>
50 |       </div>
51 | 
52 |       <div class="col">
53 |         <div class="four"></div>
54 |         <div class="three"></div>
55 |         <div class="one"></div>
56 |       </div>
57 | 
58 |       <div class="col">
59 |         <div class="two"></div>
60 |         <div class="one"></div>
61 |         <div class="five"></div>
62 |       </div>
63 |     </div>    
64 |   </div>
65 |   
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/examples/windows8/lib/less.js:
--------------------------------------------------------------------------------
 1 | //
 2 | // LESS - Leaner CSS v1.1.3
 3 | // http://lesscss.org
 4 | // 
 5 | // Copyright (c) 2009-2011, Alexis Sellier
 6 | // Licensed under the Apache 2.0 License.
 7 | //
 8 | //
 9 | // LESS - Leaner CSS v1.1.3
10 | // http://lesscss.org
11 | // 
12 | // Copyright (c) 2009-2011, Alexis Sellier
13 | // Licensed under the Apache 2.0 License.
14 | //
15 | (function(a,b){function v(a,b){var c="less-error-message:"+p(b),e=["<ul>",'<li><label>[-1]</label><pre class="ctx">{0}</pre></li>',"<li><label>[0]</label><pre>{current}</pre></li>",'<li><label>[1]</label><pre class="ctx">{2}</pre></li>',"</ul>"].join("\n"),f=document.createElement("div"),g,h;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p><a href="'+b+'">'+b+"</a> ",a.extract&&(h+="on line "+a.line+", column "+(a.column+1)+":</p>"+e.replace(/\[(-?\d)\]/g,function(b,c){return parseInt(a.line)+parseInt(c)||""}).replace(/\{(\d)\}/g,function(b,c){return a.extract[parseInt(c)]||""}).replace(/\{current\}/,a.extract[1].slice(0,a.column)+'<span class="error">'+a.extract[1].slice(a.column)+"</span>")),f.innerHTML=h,q([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #ee4444;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.ctx {","color: #dd4444;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}function u(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function t(a){return a&&a.parentNode.removeChild(a)}function s(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){u("browser doesn't support AJAX.");return null}}function r(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=s(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function q(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||p(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(u("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function p(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i),r(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())q(l.css,b),c(null,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type})).parse(a,function(a,d){if(a)return v(a,i);try{c(d,b,{local:!1,lastModified:g,remaining:f}),t(document.getElementById("less-error-message:"+p(i)))}catch(a){v(a,i)}})}catch(h){v(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){a[b].type="text/css",a[b].innerHTML=d.toCSS()})}function c(b){return a.less[b.split("/")[1]]}Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else for(;;){if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,e;typeof a=="undefined"?(d=exports,e=c("less/tree")):(typeof a.less=="undefined"&&(a.less={}),d=a.less,e=a.less.tree={}),d.Parser=function(a){function t(a){return typeof a=="string"?b.charAt(c)===a:a.test(j[f])?!0:!1}function s(a){var d,e,g,h,i,m,n,o;if(a instanceof Function)return a.call(l.parsers);if(typeof a=="string")d=b.charAt(c)===a?a:null,g=1,r();else{r();if(d=a.exec(j[f]))g=d[0].length;else return null}if(d){o=c+=g,m=c+j[f].length-g;while(c<m){h=b.charCodeAt(c);if(h!==32&&h!==10&&h!==9)break;c++}j[f]=j[f].slice(g+(c-o)),k=c,j[f].length===0&&f<j.length-1&&f++;return typeof d=="string"?d:d.length===1?d[0]:d}}function r(){c>k&&(j[f]=j[f].slice(c-k),k=c)}function q(){j[f]=g,c=h,k=c}function p(){g=j[f],h=c,k=c}var b,c,f,g,h,i,j,k,l,m=this,n=function(){},o=this.imports={paths:a&&a.paths||[],queue:[],files:{},mime:a&&a.mime,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=a,c(a),e.queue.length===0&&n()},a)}};this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null;return l={imports:o,parse:function(d,g){var h,l,m,o,p,q,r=[],t,u=null;c=f=k=i=0,j=[],b=d.replace(/\r\n/g,"\n"),j=function(c){var d=0,e=/[^"'`\{\}\/\(\)]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=0,h,i=c[0],j,k;for(var l=0,m,n;l<b.length;l++){e.lastIndex=l,(h=e.exec(b))&&h.index===l&&(l+=h[0].length,i.push(h[0])),m=b.charAt(l),f.lastIndex=l,!k&&!j&&m==="/"&&(n=b.charAt(l+1),(n==="/"||n==="*")&&(h=f.exec(b))&&h.index===l&&(l+=h[0].length,i.push(h[0]),m=b.charAt(l)));if(m==="{"&&!k&&!j)g++,i.push(m);else if(m==="}"&&!k&&!j)g--,i.push(m),c[++d]=i=[];else if(m==="("&&!k&&!j)i.push(m),j=!0;else if(m===")"&&!k&&j)i.push(m),j=!1;else{if(m==='"'||m==="'"||m==="`")k?k=k===m?!1:k:k=m;i.push(m)}}if(g>0)throw{type:"Syntax",message:"Missing closing `}`",filename:a.filename};return c.map(function(a){return a.join("")})}([[]]),h=new e.Ruleset([],s(this.parsers.primary)),h.root=!0,h.toCSS=function(c){var d,f,g;return function(g,h){function n(a){return a?(b.slice(0,a).match(/\n/g)||"").length:null}var i=[];g=g||{},typeof h=="object"&&!Array.isArray(h)&&(h=Object.keys(h).map(function(a){var b=h[a];b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b]));return new e.Rule("@"+a,b,!1,0)}),i=[new e.Ruleset(null,h)]);try{var j=c.call(this,{frames:i}).toCSS([],{compress:g.compress||!1})}catch(k){f=b.split("\n"),d=n(k.index);for(var l=k.index,m=-1;l>=0&&b.charAt(l)!=="\n";l--)m++;throw{type:k.type,message:k.message,filename:a.filename,index:k.index,line:typeof d=="number"?d+1:null,callLine:k.call&&n(k.call)+1,callExtract:f[n(k.call)],stack:k.stack,column:m,extract:[f[d-1],f[d],f[d+1]]}}return g.compress?j.replace(/(\s)+/g,"$1"):j}}(h.eval);if(c<b.length-1){c=i,q=b.split("\n"),p=(b.slice(0,c).match(/\n/g)||"").length+1;for(var v=c,w=-1;v>=0&&b.charAt(v)!=="\n";v--)w++;u={name:"ParseError",message:"Syntax Error on line "+p,index:c,filename:a.filename,line:p,column:w,extract:[q[p-2],q[p-1],q[p]]}}this.imports.queue.length>0?n=function(){g(u,h)}:g(u,h)},parsers:{primary:function(){var a,b=[];while((a=s(this.mixin.definition)||s(this.rule)||s(this.ruleset)||s(this.mixin.call)||s(this.comment)||s(this.directive))||s(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(c)==="/"){if(b.charAt(c+1)==="/")return new e.Comment(s(/^\/\/.*/),!0);if(a=s(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)}},entities:{quoted:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==='"'||b.charAt(d)==="'"){f&&s("~");if(a=s(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],f)}},keyword:function(){var a;if(a=s(/^[A-Za-z-]+/))return new e.Keyword(a)},call:function(){var a,b,d=c;if(!!(a=/^([\w-]+|%)\(/.exec(j[f]))){a=a[1].toLowerCase();if(a==="url")return null;c+=a.length;if(a==="alpha")return s(this.alpha);s("("),b=s(this.entities.arguments);if(!s(")"))return;if(a)return new e.Call(a,b,d)}},arguments:function(){var a=[],b;while(b=s(this.expression)){a.push(b);if(!s(","))break}return a},literal:function(){return s(this.entities.dimension)||s(this.entities.color)||s(this.entities.quoted)},url:function(){var a;if(b.charAt(c)==="u"&&!!s(/^url\(/)){a=s(this.entities.quoted)||s(this.entities.variable)||s(this.entities.dataURI)||s(/^[-\w%@$\/.&=:;#+?~]+/)||"";if(!s(")"))throw new Error("missing closing ) for url()");return new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),o.paths)}},dataURI:function(){var a;if(s(/^data:/)){a={},a.mime=s(/^[^\/]+\/[^,;)]+/)||"",a.charset=s(/^;\s*charset=[^,;)]+/)||"",a.base64=s(/^;\s*base64/)||"",a.data=s(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,d=c;if(b.charAt(c)==="@"&&(a=s(/^@@?[\w-]+/)))return new e.Variable(a,d)},color:function(){var a;if(b.charAt(c)==="#"&&(a=s(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,d=b.charCodeAt(c);if(!(d>57||d<45||d===47))if(a=s(/^(-?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==="`"){f&&s("~");if(a=s(/^`([^`]*)`/))return new e.JavaScript(a[1],c,f)}}},variable:function(){var a;if(b.charAt(c)==="@"&&(a=s(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!!t(/^[@\w.%-]+\/[@\w.-]+/)&&(a=s(this.entity))&&s("/")&&(b=s(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var a=[],d,f,g,h=c,i=b.charAt(c);if(i==="."||i==="#"){while(d=s(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new e.Element(f,d)),f=s(">");s("(")&&(g=s(this.entities.arguments))&&s(")");if(a.length>0&&(s(";")||t("}")))return new e.mixin.Call(a,g,h)}},definition:function(){var a,d=[],f,g,h,i;if(!(b.charAt(c)!=="."&&b.charAt(c)!=="#"||t(/^[^{]*(;|})/)))if(f=s(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=f[1];while(h=s(this.entities.variable)||s(this.entities.literal)||s(this.entities.keyword)){if(h instanceof e.Variable)if(s(":"))if(i=s(this.expression))d.push({name:h.name,value:i});else throw new Error("Expected value");else d.push({name:h.name});else d.push({value:h});if(!s(","))break}if(!s(")"))throw new Error("Expected )");g=s(this.block);if(g)return new e.mixin.Definition(a,d,g)}}},entity:function(){return s(this.entities.literal)||s(this.entities.variable)||s(this.entities.url)||s(this.entities.call)||s(this.entities.keyword)||s(this.entities.javascript)||s(this.comment)},end:function(){return s(";")||t("}")},alpha:function(){var a;if(!!s(/^\(opacity=/i))if(a=s(/^\d+/)||s(this.entities.variable)){if(!s(")"))throw new Error("missing closing ) for alpha()");return new e.Alpha(a)}},element:function(){var a,b,c;c=s(this.combinator),a=s(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||s("*")||s(this.attribute)||s(/^\([^)@]+\)/);if(a)return new e.Element(c,a)},combinator:function(){var a,d=b.charAt(c);if(d===">"||d==="&"||d==="+"||d==="~"){c++;while(b.charAt(c)===" ")c++;return new e.Combinator(d)}if(d===":"&&b.charAt(c+1)===":"){c+=2;while(b.charAt(c)===" ")c++;return new e.Combinator("::")}return b.charAt(c-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,d,f=[],g,h;while(d=s(this.element)){g=b.charAt(c),f.push(d);if(g==="{"||g==="}"||g===";"||g===",")break}if(f.length>0)return new e.Selector(f)},tag:function(){return s(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||s("*")},attribute:function(){var a="",b,c,d;if(!!s("[")){if(b=s(/^[a-zA-Z-]+/)||s(this.entities.quoted))(d=s(/^[|~*$^]?=/))&&(c=s(this.entities.quoted)||s(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!s("]"))return;if(a)return"["+a+"]"}},block:function(){var a;if(s("{")&&(a=s(this.primary))&&s("}"))return a},ruleset:function(){var a=[],b,d,g;p();if(g=/^([.#: \w-]+)[\s\n]*\{/.exec(j[f]))c+=g[0].length-1,a=[new e.Selector([new e.Element(null,g[1])])];else while(b=s(this.selector)){a.push(b),s(this.comment);if(!s(","))break;s(this.comment)}if(a.length>0&&(d=s(this.block)))return new e.Ruleset(a,d);i=c,q()},rule:function(){var a,d,g=b.charAt(c),k,l;p();if(g!=="."&&g!=="#"&&g!=="&")if(a=s(this.variable)||s(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(j[f]))?(c+=l[0].length-1,d=new e.Anonymous(l[1])):a==="font"?d=s(this.font):d=s(this.value),k=s(this.important);if(d&&s(this.end))return new e.Rule(a,d,k,h);i=c,q()}},"import":function(){var a;if(s(/^@import\s+/)&&(a=s(this.entities.quoted)||s(this.entities.url))&&s(";"))return new e.Import(a,o)},directive:function(){var a,d,f,g;if(b.charAt(c)==="@"){if(d=s(this["import"]))return d;if(a=s(/^@media|@page|@-[-a-z]+/)){g=(s(/^[^{]+/)||"").trim();if(f=s(this.block))return new e.Directive(a+" "+g,f)}else if(a=s(/^@[-a-z]+/))if(a==="@font-face"){if(f=s(this.block))return new e.Directive(a,f)}else if((d=s(this.entity))&&s(";"))return new e.Directive(a,d)}},font:function(){var a=[],b=[],c,d,f,g;while(g=s(this.shorthand)||s(this.entity))b.push(g);a.push(new e.Expression(b));if(s(","))while(g=s(this.expression)){a.push(g);if(!s(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=s(this.expression)){b.push(a);if(!s(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(c)==="!")return s(/^! *important/)},sub:function(){var a;if(s("(")&&(a=s(this.expression))&&s(")"))return a},multiplication:function(){var a,b,c,d;if(a=s(this.operand)){while((c=s("/")||s("*"))&&(b=s(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,d,f,g;if(a=s(this.multiplication)){while((f=s(/^[-+]\s+/)||b.charAt(c-1)!=" "&&(s("+")||s("-")))&&(d=s(this.multiplication)))g=new e.Operation(f,[g||a,d]);return g||a}},operand:function(){var a,d=b.charAt(c+1);b.charAt(c)==="-"&&(d==="@"||d==="(")&&(a=s("-"));var f=s(this.sub)||s(this.entities.dimension)||s(this.entities.color)||s(this.entities.variable)||s(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),f]):f},expression:function(){var a,b,c=[],d;while(a=s(this.addition)||s(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=s(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}},typeof a!="undefined"&&(d.Parser.importer=function(a,b,c,d){a.charAt(0)!=="/"&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},c,!0)}),function(a){function d(a){return Math.min(1,Math.max(0,a))}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){a=a<0?a+1:a>1?a-1:a;return a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();e.s+=c.value/100,e.s=d(e.s);return b(e)},desaturate:function(a,c){var e=a.toHSL();e.s-=c.value/100,e.s=d(e.s);return b(e)},lighten:function(a,c){var e=a.toHSL();e.l+=c.value/100,e.l=d(e.l);return b(e)},darken:function(a,c){var e=a.toHSL();e.l-=c.value/100,e.l=d(e.l);return b(e)},fadein:function(a,c){var e=a.toHSL();e.a+=c.value/100,e.a=d(e.a);return b(e)},fadeout:function(a,c){var e=a.toHSL();e.a-=c.value/100,e.a=d(e.a);return b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;d.h=e<0?360+e:e;return b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});d=d.replace(/%%/g,"%");return new a.Quoted('"'+d+'"',d)},round:function(b){if(b instanceof a.Dimension)return new a.Dimension(Math.round(c(b)),b.unit);if(typeof b=="number")return Math.round(b);throw{error:"RuntimeError",message:"math functions take numbers as parameters"}}}}(c("less/tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){this.value.eval&&(this.value=this.value.eval(a));return this}}}(c("less/tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("less/tree")),function(a){a.Call=function(a,b,c){this.name=a,this.args=b,this.index=c},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{message:"error evaluating function `"+this.name+"`",index:this.index}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("less/tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):a.length==8?(this.alpha=parseInt(a.substring(0,2),16)/255,this.rgb=a.substr(2).match(/.{2}/g).map(function(a){return parseInt(a,16)})):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16);return a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}}}}(c("less/tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("less/tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)}}}(c("less/tree")),function(a){a.Directive=function(b,c){this.name=b,Array.isArray(c)?this.ruleset=new a.Ruleset([],c):this.value=c},a.Directive.prototype={toCSS:function(a,b){if(this.ruleset){this.ruleset.root=!0;return this.name+(b.compress?"{":" {\n  ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n  ")+(b.compress?"}":"\n}\n")}return this.name+" "+this.value.toCSS()+";\n"},eval:function(a){a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift();return this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("less/tree")),function(a){a.Element=function(b,c){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),this.value=c.trim()},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+this.value},a.Combinator=function(a){a===" "?this.value=" ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("less/tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(" ")}}}(c("less/tree")),function(a){a.Import=function(b,c){var d=this;this._path=b,b instanceof a.Quoted?this.path=/\.(le?|c)ss$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css$/.test(this.path),this.css||c.push(this.path,function(a){if(!a)throw new Error("Error parsing "+d.path);d.root=a})},a.Import.prototype={toCSS:function(){return this.css?"@import "+this._path.toCSS()+";\n":""},eval:function(b){var c;if(this.css)return this;c=new a.Ruleset(null,this.root.rules.slice(0));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));return c.rules}}}(c("less/tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("less/tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value}}}(c("less/tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d){this.selector=new a.Selector(b),this.arguments=c,this.index=d},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments).rules),e=!0}catch(h){throw{message:h.message,index:h.index,stack:h.stack,call:this.index}}if(e)return d;throw{message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index}}throw{message:this.selector.toCSS().trim()+" is undefined",index:this.index}}},a.mixin.Definition=function(b,c,d){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},eval:function(b,c){var d=new a.Ruleset(null,[]),e,f=[];for(var g=0,h;g<this.params.length;g++)if(this.params[g].name)if(h=c&&c[g]||this.params[g].value)d.rules.unshift(new a.Rule(this.params[g].name,h.eval(b)));else throw{message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};for(var g=0;g<Math.max(this.params.length,c&&c.length);g++)f.push(c[g]||this.params[g].value);d.rules.unshift(new a.Rule("@arguments",(new a.Expression(f)).eval(b)));return(new a.Ruleset(null,this.rules.slice(0))).eval({frames:[this,d].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;d=Math.min(c,this.arity);for(var e=0;e<d;e++)if(!this.params[e].name&&a[e].eval(b).toCSS()!=this.params[e].value.eval(b).toCSS())return!1;return!0}}}(c("less/tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color)if(this.op==="*"||this.op==="+")e=d,d=c,c=e;else throw{name:"OperationError",message:"Can't substract or divide a color from a number"};return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("less/tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return f.value||f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("less/tree")),function(a){a.Rule=function(b,c,d,e){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+";"},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("less/tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=new a.Ruleset(this.selectors,this.rules.slice(0));c.root=this.root,b.frames.unshift(c);if(c.root)for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.mixin.Definition&&(c.rules[d].frames=b.frames.slice(0));for(var d=0;d<c.rules.length;d++)c.rules[d]instanceof a.mixin.Call&&Array.prototype.splice.apply(c.rules,[d,1].concat(c.rules[d].eval(b)));for(var d=0,e;d<c.rules.length;d++)e=c.rules[d],e instanceof a.mixin.Definition||(c.rules[d]=e.eval?e.eval(b):e);b.frames.shift();return c},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c);return b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();if(g in this._lookups)return this._lookups[g];this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>1?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}});return this._lookups[g]=d},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;if(!this.root)if(b.length===0)g=this.selectors.map(function(a){return[a]});else for(var j=0;j<this.selectors.length;j++)for(var k=0;k<b.length;k++)g.push(b[k].concat([this.selectors[j]]));for(var l=0;l<this.rules.length;l++)i=this.rules[l],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":g.length>3?",\n":", "),d.push(h,(c.compress?"{":" {\n  ")+e.join(c.compress?"":"\n  ")+(c.compress?"}":"\n}\n"))),d.push(f);return d.join("")+(c.compress?"\n":"")}}}(c("less/tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){return this.elements[0].value===a.elements[0].value?!0:!1},a.Selector.prototype.toCSS=function(a){if(this._css)return this._css;return this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("less/tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(!/^(?:https?:\/|file:\/|data:\/)?\//.test(b.value)&&c.length>0&&typeof a!="undefined"&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("less/tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("less/tree")),function(a){a.Variable=function(a,b){this.name=a,this
16 | .index=b},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{message:"variable "+e+" is undefined",index:this.index}}}}(c("less/tree")),c("less/tree").find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},c("less/tree").jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)};var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c){a&&q(a.toCSS(),b,c.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e){e.local?u("loading "+d.href+" from cache."):(u("parsed "+d.href+" successfully."),q(a.toCSS(),d,e.lastModified)),u("css for "+d.href+" generated in "+(new Date-c)+"ms"),e.remaining===0&&u("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8" />
  5 |   <meta name="description" content="GFX - a 3D CSS3 animation library for jQuery">
  6 |   <meta name="keywords" content="gfx,3d,css3,animation,jquery,transitions">
  7 | 
  8 |   <title>GFX</title>
  9 | 
 10 |   <link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
 11 | 
 12 |   <script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
 13 |   <script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>
 14 |   <script src="lib/gfx.effects.js" type="text/javascript" charset="utf-8"></script>
 15 |   <script src="lib/gfx.overlay.js" type="text/javascript" charset="utf-8"></script>
 16 |   <script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>
 17 |   <script src="lib/gfx.cube.js" type="text/javascript" charset="utf-8"></script>
 18 |   <script type="text/javascript" charset="utf-8">
 19 | 
 20 |    jQuery(function($) {
 21 |      $("#container").gfxPopIn({
 22 |        scale: ".8"
 23 |      });
 24 | 
 25 |      if ( !$.browser.webkit )
 26 |       $("#unsupported").show()
 27 | 
 28 |      $("#crazy").click(function() {
 29 |        return $(this).gfx({
 30 |          scale: "1.5",
 31 |          rotate: "180deg"
 32 |        }).delay(100).gfx({
 33 |          scale: "1"
 34 |        }).gfx({
 35 |          rotate: "0deg",
 36 |          translateX: "-100px"
 37 |        }).gfx({
 38 |          translateX: "100px"
 39 |        }).gfx({
 40 |          translateX: 0
 41 |        }).gfxExplodeOut().delay(100).gfxExplodeIn().gfxShake().gfx({
 42 |          background: "#FFFFD1"
 43 |        }).gfx({
 44 |          background: "#E3E3E3"
 45 |        });
 46 |      });
 47 | 
 48 |      $(".about").click(function() {
 49 |        return $.gfxOverlay("#aboutText", {
 50 |          css: {
 51 |            width: 300,
 52 |            height: 130
 53 |          }
 54 |        });
 55 |      });
 56 | 
 57 |      $("#flip").gfxFlip().click(function() {
 58 |        return $(this).trigger("flip");
 59 |      });
 60 | 
 61 |      $("#shake").click(function() {
 62 |        return $(this).gfxShake();
 63 |      });
 64 | 
 65 |      $("#explode").click(function() {
 66 |        return $(this).gfxExplodeOut({
 67 |          reset: false
 68 |        }).delay(300).gfxExplodeIn();
 69 |      });
 70 | 
 71 |      $("#cube").gfxCube({
 72 |        width: 500,
 73 |        height: 290
 74 |      });
 75 | 
 76 |      $("#main .download").click(function() {
 77 |        return $("#cube").trigger("cube", "right");
 78 |      });
 79 | 
 80 |      return $("#main .back").click(function() {
 81 |        return $("#cube").trigger("cube", "front");
 82 |      });
 83 |    });
 84 |   </script>
 85 | 
 86 |   <script type="text/plain" id="aboutText">
 87 |     <h2>About</h2>
 88 |     <p>GFX was created by <a href="http://alexmaccaw.co.uk">Alex MacCaw</a>.</p>
 89 |     <p><a href="http://twitter.com/maccman">Friend him</a> on Twitter.</p>
 90 |   </script>
 91 | </head>
 92 | <body>
 93 |   <div id="container">
 94 |     <div id="inner">
 95 |       <div id="unsupported"><h2>Sorry, your browser isn't fully supported yet. <br /> Things on this site may not work!</h2></div>
 96 | 
 97 |       <div id="main">
 98 |         <div id="cube">
 99 |           <div class="box front face">
100 |             <h1>GFX - a 3D CSS3 animation library for jQuery</h1>
101 | 
102 |             <p>GFX integrates CSS3 transforms and transitions into <a href="http://jquery.com">jQuery</a>, making it stupidly simple to create sophisticated and gorgeous animations.</p>
103 | 
104 |             <pre><code>$(this).gfx({scale: "1.5"})
105 |        .delay(100)
106 |        .gfx({scale: "1"})
107 |        .gfx({rotate: "180deg"})
108 |        .delay(300)
109 |        .gfx({rotate: "0deg"})
110 |        .gfx({translateX: "100px", opacity: 0.2})
111 |        .gfx({translateX: 0, opacity: 1})
112 |        .gfxExplodeOut().delay(100).gfxExplodeIn()
113 |        .gfxShake();</code></pre>
114 | 
115 |             <footer><a class="about">About</a> <a class="download">Download &amp; docs &raquo; </a></footer>
116 |           </div>
117 | 
118 |           <div class="box right face">
119 |             <h2>Download GFX</h2>
120 | 
121 |             <p>Download the <a href="https://github.com/maccman/gfx/tarball/gh-pages">latest version (0.0.1)</a>, or checkout the <a href="http://github.com/maccman/gfx">source</a>.</p>
122 | 
123 |             <h2>Documentation</h2>
124 | 
125 |             <p>You can find the libraries documentation in the <a href="https://github.com/maccman/gfx/blob/master/README.md">README</a></p>
126 | 
127 |             <footer><a class="back">&laquo; Back</a></footer>
128 |           </div>
129 |         </div>
130 |       </div>
131 | 
132 |       <div id="examples">
133 |         <div id="flip" class="item">
134 |           <div class="box front"><h2>Flip</h2></div>
135 |           <div class="box back"><h2>Flipped!</h2></div>
136 |         </div>
137 | 
138 |         <div id="explode" class="box item"><h2>Explode</h2></div>
139 | 
140 |         <div id="shake" class="box item"><h2>Shake</h2></div>
141 | 
142 |         <div id="crazy" class="box item"><h2>Crazy</h2></div>
143 |       </div>
144 |     </div>
145 |   </div>
146 | </body>
147 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/gfx');


--------------------------------------------------------------------------------
/lib/gfx.cube.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |   var $, chrome11, chromeMatch, chromeRegex, defaults, sides;
  3 | 
  4 |   $ = jQuery;
  5 | 
  6 |   sides = {
  7 |     front: {
  8 |       rotateY: '0deg',
  9 |       rotateX: '0deg'
 10 |     },
 11 |     back: {
 12 |       rotateX: '-180deg',
 13 |       rotateX: '0deg'
 14 |     },
 15 |     right: {
 16 |       rotateY: '-90deg',
 17 |       rotateX: '0deg'
 18 |     },
 19 |     left: {
 20 |       rotateY: '90deg',
 21 |       rotateX: '0deg'
 22 |     },
 23 |     top: {
 24 |       rotateY: '0deg',
 25 |       rotateX: '-90deg'
 26 |     },
 27 |     bottom: {
 28 |       rotateY: '0deg',
 29 |       rotateX: '90deg'
 30 |     }
 31 |   };
 32 | 
 33 |   defaults = {
 34 |     width: 300,
 35 |     height: 300
 36 |   };
 37 | 
 38 |   $.fn.gfxCube = function(options) {
 39 |     var back, bottom, element, front, left, opts, right, tZ, top, wrapper;
 40 |     opts = $.extend({}, defaults, options);
 41 |     element = $(this);
 42 |     tZ = opts.translateZ || opts.width / 2;
 43 |     if (typeof tZ === 'number') tZ += 'px';
 44 |     element.transform({
 45 |       position: 'relative',
 46 |       width: opts.width,
 47 |       height: opts.height,
 48 |       '-webkit-perspective': '3000',
 49 |       '-moz-perspective': '3000',
 50 |       '-webkit-perspective-origin': '50% 50%',
 51 |       '-moz-perspective-origin': '50% 50%'
 52 |     });
 53 |     wrapper = $('<div />');
 54 |     wrapper.addClass('gfxCubeWrapper');
 55 |     wrapper.transform({
 56 |       position: 'absolute',
 57 |       width: '100%',
 58 |       height: '100%',
 59 |       left: 0,
 60 |       top: 0,
 61 |       overflow: 'visible',
 62 |       rotateY: '0deg',
 63 |       rotateX: '0deg',
 64 |       translateZ: "-" + tZ,
 65 |       '-webkit-transform-style': 'preserve-3d',
 66 |       '-moz-transform-style': 'preserve-3d',
 67 |       '-webkit-transform-origin': '50% 50%',
 68 |       '-moz-transform-origin': '50% 50%'
 69 |     });
 70 |     element.children().wrapAll(wrapper).css({
 71 |       display: 'block',
 72 |       position: 'absolute',
 73 |       width: '100%',
 74 |       height: '100%',
 75 |       left: 0,
 76 |       top: 0,
 77 |       overflow: 'hidden'
 78 |     });
 79 |     front = element.find('.front');
 80 |     back = element.find('.back');
 81 |     right = element.find('.right');
 82 |     left = element.find('.left');
 83 |     top = element.find('.top');
 84 |     bottom = element.find('.bottom');
 85 |     front.transform({
 86 |       rotateY: '0deg',
 87 |       translateZ: tZ
 88 |     });
 89 |     back.transform({
 90 |       rotateY: '180deg',
 91 |       translateZ: tZ
 92 |     });
 93 |     right.transform({
 94 |       rotateY: '90deg',
 95 |       translateZ: tZ
 96 |     });
 97 |     left.transform({
 98 |       rotateY: '-90deg',
 99 |       translateZ: tZ
100 |     });
101 |     top.transform({
102 |       rotateX: '90deg',
103 |       translateZ: tZ
104 |     });
105 |     bottom.transform({
106 |       rotateX: '-90deg',
107 |       translateZ: tZ
108 |     });
109 |     return $(this).bind('cube', function(e, type) {
110 |       wrapper = element.find('.gfxCubeWrapper');
111 |       return wrapper.gfx($.extend({}, {
112 |         translateZ: "-" + tZ
113 |       }, sides[type]));
114 |     });
115 |   };
116 | 
117 |   chromeRegex = /(Chrome)[\/]([\w.]+)/;
118 | 
119 |   chromeMatch = chromeRegex.exec(navigator.userAgent) || [];
120 | 
121 |   chrome11 = chromeRegex[1] && chromeRegex[2].test(/^12\./);
122 | 
123 |   if (!$.browser.webkit || chrome11) {
124 |     $.fn.gfxCube = function(options) {
125 |       var element, opts, wrapper;
126 |       opts = $.extend({}, defaults, options);
127 |       element = $(this);
128 |       element.css({
129 |         position: 'relative',
130 |         width: opts.width,
131 |         height: opts.height
132 |       });
133 |       wrapper = $('<div />');
134 |       wrapper.addClass('gfxCubeWrapper');
135 |       wrapper.transform({
136 |         position: 'absolute',
137 |         width: '100%',
138 |         height: '100%',
139 |         left: 0,
140 |         top: 0,
141 |         overflow: 'visible'
142 |       });
143 |       element.children().wrapAll(wrapper).css({
144 |         display: 'block',
145 |         position: 'absolute',
146 |         width: '100%',
147 |         height: '100%',
148 |         left: 0,
149 |         top: 0,
150 |         overflow: 'hidden'
151 |       });
152 |       wrapper = element.find('.gfxCubeWrapper');
153 |       wrapper.children('*:not(.front)').hide();
154 |       return element.bind('cube', function(e, type) {
155 |         wrapper.children().hide();
156 |         return wrapper.children("." + type).show();
157 |       });
158 |     };
159 |   }
160 | 
161 | }).call(this);
162 | 


--------------------------------------------------------------------------------
/lib/gfx.effects.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 
  3 |   $.fn.gfxPopIn = function(options) {
  4 |     if (options == null) options = {};
  5 |     if (options.scale == null) options.scale = '.2';
  6 |     $(this).queueNext(function() {
  7 |       return $(this).transform({
  8 |         '-webkit-transform-origin': '50% 50%',
  9 |         '-moz-transform-origin': '50% 50%',
 10 |         scale: options.scale
 11 |       }).show();
 12 |     });
 13 |     return $(this).gfx({
 14 |       scale: '1',
 15 |       opacity: '1'
 16 |     }, options);
 17 |   };
 18 | 
 19 |   $.fn.gfxPopOut = function(options) {
 20 |     $(this).queueNext(function() {
 21 |       return $(this).transform({
 22 |         '-webkit-transform-origin': '50% 50%',
 23 |         '-moz-transform-origin': '50% 50%',
 24 |         scale: '1',
 25 |         opacity: '1'
 26 |       });
 27 |     });
 28 |     $(this).gfx({
 29 |       scale: '.2',
 30 |       opacity: '0'
 31 |     }, options);
 32 |     return $(this).queueNext(function() {
 33 |       return $(this).hide().transform({
 34 |         opacity: '1',
 35 |         scale: '1'
 36 |       });
 37 |     });
 38 |   };
 39 | 
 40 |   $.fn.gfxFadeIn = function(options) {
 41 |     if (options == null) options = {};
 42 |     if (options.duration == null) options.duration = 1000;
 43 |     $(this).queueNext(function() {
 44 |       return $(this).css({
 45 |         opacity: '0'
 46 |       }).show();
 47 |     });
 48 |     return $(this).gfx({
 49 |       opacity: 1
 50 |     }, options);
 51 |   };
 52 | 
 53 |   $.fn.gfxFadeOut = function(options) {
 54 |     if (options == null) options = {};
 55 |     $(this).queueNext(function() {
 56 |       return $(this).css({
 57 |         opacity: 1
 58 |       });
 59 |     });
 60 |     $(this).gfx({
 61 |       opacity: 0
 62 |     }, options);
 63 |     return $(this).queueNext(function() {
 64 |       return $(this).hide().css({
 65 |         opacity: 1
 66 |       });
 67 |     });
 68 |   };
 69 | 
 70 |   $.fn.gfxShake = function(options) {
 71 |     var distance;
 72 |     if (options == null) options = {};
 73 |     if (options.duration == null) options.duration = 100;
 74 |     if (options.easing == null) options.easing = 'ease-out';
 75 |     distance = options.distance || 20;
 76 |     $(this).gfx({
 77 |       translateX: "-" + distance + "px"
 78 |     }, options);
 79 |     $(this).gfx({
 80 |       translateX: "" + distance + "px"
 81 |     }, options);
 82 |     $(this).gfx({
 83 |       translateX: "-" + distance + "px"
 84 |     }, options);
 85 |     $(this).gfx({
 86 |       translateX: "" + distance + "px"
 87 |     }, options);
 88 |     return $(this).queueNext(function() {
 89 |       return $(this).transform({
 90 |         translateX: 0
 91 |       });
 92 |     });
 93 |   };
 94 | 
 95 |   $.fn.gfxBlip = function(options) {
 96 |     if (options == null) options = {};
 97 |     options.scale || (options.scale = '1.15');
 98 |     $(this).gfx({
 99 |       scale: options.scale
100 |     }, options);
101 |     return $(this).gfx({
102 |       scale: '1'
103 |     }, options);
104 |   };
105 | 
106 |   $.fn.gfxExplodeIn = function(options) {
107 |     if (options == null) options = {};
108 |     options.scale || (options.scale = '3');
109 |     $(this).queueNext(function() {
110 |       return $(this).transform({
111 |         scale: options.scale,
112 |         opacity: '0'
113 |       }).show();
114 |     });
115 |     return $(this).gfx({
116 |       scale: '1',
117 |       opacity: '1'
118 |     }, options);
119 |   };
120 | 
121 |   $.fn.gfxExplodeOut = function(options) {
122 |     if (options == null) options = {};
123 |     options.scale || (options.scale = '3');
124 |     $(this).queueNext(function() {
125 |       return $(this).transform({
126 |         scale: '1',
127 |         opacity: '1'
128 |       });
129 |     });
130 |     $(this).gfx({
131 |       scale: options.scale,
132 |       opacity: '0'
133 |     }, options);
134 |     if (options.reset !== false) {
135 |       $(this).queueNext(function() {
136 |         return $(this).hide().transform({
137 |           scale: '1',
138 |           opacity: '1'
139 |         });
140 |       });
141 |     }
142 |     return this;
143 |   };
144 | 
145 |   $.fn.gfxFlipIn = function(options) {
146 |     if (options == null) options = {};
147 |     $(this).queueNext(function() {
148 |       return $(this).transform({
149 |         rotateY: '180deg',
150 |         scale: '.8',
151 |         display: 'block'
152 |       });
153 |     });
154 |     return $(this).gfx({
155 |       rotateY: 0,
156 |       scale: 1
157 |     }, options);
158 |   };
159 | 
160 |   $.fn.gfxFlipOut = function(options) {
161 |     if (options == null) options = {};
162 |     $(this).queueNext(function() {
163 |       return $(this).transform({
164 |         rotateY: 0,
165 |         scale: 1
166 |       });
167 |     });
168 |     $(this).gfx({
169 |       rotateY: '-180deg',
170 |       scale: '.8'
171 |     }, options);
172 |     if (options.reset !== false) {
173 |       $(this).queueNext(function() {
174 |         return $(this).transform({
175 |           scale: 1,
176 |           rotateY: 0,
177 |           display: 'none'
178 |         });
179 |       });
180 |     }
181 |     return this;
182 |   };
183 | 
184 |   $.fn.gfxRotateOut = function(options) {
185 |     if (options == null) options = {};
186 |     $(this).queueNext(function() {
187 |       return $(this).transform({
188 |         rotateY: 0
189 |       }).fix();
190 |     });
191 |     $(this).gfx({
192 |       rotateY: '-180deg'
193 |     }, options);
194 |     if (options.reset !== false) {
195 |       $(this).queueNext(function() {
196 |         return $(this).transform({
197 |           rotateY: 0,
198 |           display: 'none'
199 |         }).unfix();
200 |       });
201 |     }
202 |     return this;
203 |   };
204 | 
205 |   $.fn.gfxRotateIn = function(options) {
206 |     var $;
207 |     if (options == null) options = {};
208 |     $(this).queueNext(function() {
209 |       return $(this).transform({
210 |         rotateY: '180deg',
211 |         display: 'block'
212 |       }).fix();
213 |     });
214 |     $(this).gfx({
215 |       rotateY: 0
216 |     }, options);
217 |     $(this).queueNext(function() {
218 |       return $(this).unfix();
219 |     });
220 |     return $ = jQuery;
221 |   };
222 | 
223 |   $.fn.gfxSlideOut = function(options) {
224 |     var distance, opacity;
225 |     if (options == null) options = {};
226 |     options.direction || (options.direction = 'right');
227 |     distance = options.distance || 100;
228 |     if (options.direction === 'left') distance *= -1;
229 |     distance += "%";
230 |     opacity = options.fade ? 0 : 1;
231 |     $(this).queueNext(function() {
232 |       return $(this).show();
233 |     });
234 |     $(this).gfx({
235 |       translate3d: "" + distance + ",0,0",
236 |       opacity: opacity
237 |     }, options);
238 |     return $(this).queueNext(function() {
239 |       return $(this).transform({
240 |         translate3d: "0,0,0",
241 |         opacity: 1
242 |       }).hide();
243 |     });
244 |   };
245 | 
246 |   $.fn.gfxSlideIn = function(options) {
247 |     var distance, opacity;
248 |     if (options == null) options = {};
249 |     options.direction || (options.direction = 'right');
250 |     distance = options.distance || 100;
251 |     if (options.direction === 'left') distance *= -1;
252 |     distance += "%";
253 |     opacity = options.fade ? 0 : 1;
254 |     $(this).queueNext(function() {
255 |       return $(this).transform({
256 |         translate3d: "" + distance + ",0,0",
257 |         opacity: opacity
258 |       }).show();
259 |     });
260 |     return $(this).gfx({
261 |       translate3d: "0,0,0",
262 |       opacity: 1
263 |     }, options);
264 |   };
265 | 
266 |   $.fn.gfxRaisedIn = function(options) {
267 |     if (options == null) options = {};
268 |     $(this).queueNext(function() {
269 |       return $(this).transform({
270 |         scale: '1',
271 |         opacity: '0',
272 |         translate3d: '0,-15px,0'
273 |       }).show();
274 |     });
275 |     return $(this).gfx({
276 |       scale: '1',
277 |       opacity: '1',
278 |       translate3d: '0,0,0'
279 |     }, options);
280 |   };
281 | 
282 |   $.fn.gfxRaisedOut = function(options) {
283 |     if (options == null) options = {};
284 |     $(this).queueNext(function() {
285 |       return $(this).transform({
286 |         scale: '1',
287 |         opacity: '1',
288 |         translate3d: '0,0,0'
289 |       });
290 |     });
291 |     $(this).gfx({
292 |       scale: '1',
293 |       opacity: '0',
294 |       translate3d: '0,-8px,0'
295 |     }, options);
296 |     return $(this).queueNext(function() {
297 |       return $(this).hide().transform({
298 |         scale: '1',
299 |         opacity: '1',
300 |         translate3d: '0,0,0'
301 |       });
302 |     });
303 |   };
304 | 
305 |   $.fn.fix = function() {
306 |     return $(this).each(function() {
307 |       var element, parentOffset, styles;
308 |       element = $(this);
309 |       styles = element.offset();
310 |       parentOffset = element.parent().offset();
311 |       styles.left -= parentOffset.left;
312 |       styles.top -= parentOffset.top;
313 |       styles.position = 'absolute';
314 |       return element.css(styles);
315 |     });
316 |   };
317 | 
318 |   $.fn.unfix = function() {
319 |     return $(this).each(function() {
320 |       var element;
321 |       element = $(this);
322 |       return element.css({
323 |         position: '',
324 |         top: '',
325 |         left: ''
326 |       });
327 |     });
328 |   };
329 | 
330 | }).call(this);
331 | 


--------------------------------------------------------------------------------
/lib/gfx.flip.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   var $, defaults;
 3 | 
 4 |   $ = jQuery;
 5 | 
 6 |   defaults = {
 7 |     width: 120,
 8 |     height: 120
 9 |   };
10 | 
11 |   $.fn.gfxFlip = function(options) {
12 |     var back, front, opts;
13 |     if (options == null) options = {};
14 |     opts = $.extend({}, defaults, options);
15 |     front = $(this).find('.front');
16 |     back = $(this).find('.back');
17 |     $(this).css({
18 |       'position': 'relative',
19 |       '-webkit-perspective': '600',
20 |       '-moz-perspective': '600',
21 |       '-webkit-transform-style': 'preserve-3d',
22 |       '-moz-transform-style': 'preserve-3d',
23 |       '-webkit-transform-origin': '50% 50%',
24 |       '-moz-transform-origin': '50% 50%',
25 |       'width': opts.width,
26 |       'height': opts.height
27 |     });
28 |     front.add(back).css({
29 |       position: 'absolute',
30 |       width: '100%',
31 |       height: '100%',
32 |       display: 'block',
33 |       '-webkit-backface-visibility': 'hidden',
34 |       '-moz-backface-visibility': 'hidden'
35 |     });
36 |     back.transform({
37 |       rotateY: '-180deg'
38 |     });
39 |     return $(this).bind('flip', function() {
40 |       var flipped;
41 |       $(this).toggleClass('flipped');
42 |       flipped = $(this).hasClass('flipped');
43 |       front.gfx({
44 |         'rotateY': flipped ? '180deg' : '0deg'
45 |       });
46 |       return back.gfx({
47 |         'rotateY': flipped ? '0deg' : '-180deg'
48 |       });
49 |     });
50 |   };
51 | 
52 | }).call(this);
53 | 


--------------------------------------------------------------------------------
/lib/gfx.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   var $, defaults, n, prefix, transformTypes, vendor, vendorNames, _base,
 3 |     __indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 4 | 
 5 |   $ = typeof jQuery !== "undefined" && jQuery !== null ? jQuery : require('jqueryify');
 6 | 
 7 |   if (!$) throw 'jQuery required';
 8 | 
 9 |   (_base = $.support).transition || (_base.transition = (function() {
10 |     var style;
11 |     style = (new Image).style;
12 |     return 'transition' in style || 'webkitTransition' in style || 'MozTransition' in style;
13 |   })());
14 | 
15 |   vendor = $.browser.mozilla ? 'moz' : void 0;
16 | 
17 |   vendor || (vendor = 'webkit');
18 | 
19 |   prefix = "-" + vendor + "-";
20 | 
21 |   vendorNames = n = {
22 |     transition: "" + prefix + "transition",
23 |     transform: "" + prefix + "transform",
24 |     transitionEnd: "" + vendor + "TransitionEnd"
25 |   };
26 | 
27 |   defaults = {
28 |     duration: 400,
29 |     queue: true,
30 |     easing: '',
31 |     enabled: $.support.transition
32 |   };
33 | 
34 |   transformTypes = ['scale', 'scaleX', 'scaleY', 'scale3d', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d', 'translate', 'translateX', 'translateY', 'translateZ', 'translate3d', 'skew', 'skewX', 'skewY', 'matrix', 'matrix3d', 'perspective'];
35 | 
36 |   $.fn.queueNext = function(callback, type) {
37 |     type || (type = "fx");
38 |     return this.queue(function() {
39 |       var redraw;
40 |       callback.apply(this, arguments);
41 |       redraw = this.offsetHeight;
42 |       return jQuery.dequeue(this, type);
43 |     });
44 |   };
45 | 
46 |   $.fn.emulateTransitionEnd = function(duration) {
47 |     var callback, called,
48 |       _this = this;
49 |     called = false;
50 |     $(this).one(n.transitionEnd, function() {
51 |       return called = true;
52 |     });
53 |     callback = function() {
54 |       if (!called) return $(_this).trigger(n.transitionEnd);
55 |     };
56 |     return setTimeout(callback, duration);
57 |   };
58 | 
59 |   $.fn.transform = function(properties, options) {
60 |     var key, opts, transforms, value;
61 |     opts = $.extend({}, defaults, options);
62 |     if (!opts.enabled) return this;
63 |     transforms = [];
64 |     for (key in properties) {
65 |       value = properties[key];
66 |       if (!(__indexOf.call(transformTypes, key) >= 0)) continue;
67 |       transforms.push("" + key + "(" + value + ")");
68 |       delete properties[key];
69 |     }
70 |     if (transforms.length) properties[n.transform] = transforms.join(' ');
71 |     if (opts.origin) properties["" + prefix + "transform-origin"] = opts.origin;
72 |     return $(this).css(properties);
73 |   };
74 | 
75 |   $.fn.gfx = function(properties, options) {
76 |     var callback, opts;
77 |     opts = $.extend({}, defaults, options);
78 |     if (!opts.enabled) return this;
79 |     properties[n.transition] = "all " + opts.duration + "ms " + opts.easing;
80 |     callback = function() {
81 |       var _ref;
82 |       $(this).css(n.transition, '');
83 |       if ((_ref = opts.complete) != null) _ref.apply(this, arguments);
84 |       return $(this).dequeue();
85 |     };
86 |     return this[opts.queue === false ? 'each' : 'queue'](function() {
87 |       $(this).one(n.transitionEnd, callback);
88 |       $(this).transform(properties);
89 |       return $(this).emulateTransitionEnd(opts.duration + 50);
90 |     });
91 |   };
92 | 
93 | }).call(this);
94 | 


--------------------------------------------------------------------------------
/lib/gfx.overlay.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   var $, close, isOpen, overlayStyles, panelCSS;
 3 | 
 4 |   $ = jQuery;
 5 | 
 6 |   isOpen = function() {
 7 |     return !!$('#gfxOverlay').length;
 8 |   };
 9 | 
10 |   close = function() {
11 |     var overlay;
12 |     overlay = $('#gfxOverlay');
13 |     overlay.find('#gfxOverlayPanel').gfx({
14 |       scale: '1.1',
15 |       opacity: 0
16 |     });
17 |     overlay.gfx({
18 |       background: 'rgba(0,0,0,0)'
19 |     });
20 |     return overlay.queueNext(function() {
21 |       return overlay.remove();
22 |     });
23 |   };
24 | 
25 |   panelCSS = {
26 |     opacity: 0,
27 |     scale: 0.5
28 |   };
29 | 
30 |   overlayStyles = {
31 |     display: 'block',
32 |     position: 'fixed',
33 |     zIndex: 99,
34 |     top: 0,
35 |     left: 0,
36 |     width: '100%',
37 |     height: '100%',
38 |     background: 'rgba(0,0,0,0)'
39 |   };
40 | 
41 |   $.gfxOverlay = function(element, options) {
42 |     var overlay, panel;
43 |     if (options == null) options = {};
44 |     if (isOpen()) close();
45 |     element = $(element);
46 |     if (element[0].tagName === 'SCRIPT') {
47 |       element = element.html();
48 |     } else {
49 |       element = element.clone();
50 |     }
51 |     options.css || (options.css = {});
52 |     if (options.width) options.css.width = options.width;
53 |     if (options.height) options.css.height = options.height;
54 |     overlay = $('<div />').attr({
55 |       'id': 'gfxOverlay'
56 |     });
57 |     overlay.css(overlayStyles);
58 |     overlay.click(close);
59 |     overlay.delegate('.close', 'click', close);
60 |     overlay.bind('close', close);
61 |     panel = $('<div />').attr({
62 |       'id': 'gfxOverlayPanel'
63 |     });
64 |     panel.transform($.extend({}, panelCSS, options.css));
65 |     panel.append(element);
66 |     overlay.append(panel);
67 |     $('body').append(overlay);
68 |     overlay.delay().gfx({
69 |       background: 'rgba(0,0,0,0.5)'
70 |     }, {
71 |       duration: options.duration
72 |     });
73 |     return panel.delay().gfx({
74 |       scale: 1,
75 |       opacity: 1
76 |     }, {
77 |       duration: options.duration
78 |     });
79 |   };
80 | 
81 | }).call(this);
82 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | { 
 2 |   "name": "gfx", 
 3 |   "description": "3D CSS3 animation library for jQuery", 
 4 |   "version": "0.0.4", 
 5 |   "author": "maccman", 
 6 |   "licenses":
 7 |     [{ 
 8 |       "type": "MIT", 
 9 |       "url": "https://github.com/maccman/gfx/blob/master/LICENSE"
10 |     }], 
11 |   "repository": { 
12 |     "type" : "git", 
13 |     "url": "http://github.com/maccman/gfx.git"
14 |   }, 
15 |   "engine" : [ "*" ], 
16 |   "main" : "./index.js",
17 |   "dependencies": { 
18 |     "jqueryify": "~0.0.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/site/site.css:
--------------------------------------------------------------------------------
  1 | html, body {
  2 |   height: 100%;
  3 |   overflow: hidden;
  4 | }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 |   font: 15px 'Helvetica Neue',Helvetica,Arial,sans-serif;
  9 |   background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
 10 |   background: -moz-linear-gradient(top, #555, #222);
 11 |   background: linear-gradient(top, #555, #222);
 12 |   color: #666;
 13 | }
 14 | 
 15 | h1, h2, h3 {
 16 |   color: #444;
 17 |   font-size: 1.3em;
 18 |   font-weight: normal;
 19 |   padding: 0 30px;
 20 |   margin: 20px 0 5px 0;
 21 | }
 22 | 
 23 | h1 {
 24 |   margin: 20px 0 10px 0;
 25 | }
 26 | 
 27 | a {
 28 |   color: #444;
 29 |   cursor: pointer;
 30 | }
 31 | 
 32 | #container {
 33 |   width: 100%;
 34 |   height: 100%;
 35 |   display: none;
 36 | }
 37 | 
 38 | #inner {
 39 |   margin: 10% auto;
 40 |   width: 900px;
 41 |   position: relative;
 42 | }
 43 | 
 44 | .box {
 45 |   background: #E3E3E3;
 46 |   border: 1px solid #FFF;
 47 |   text-shadow: #FFF 0px 1px 1px;
 48 |   font-size: 13px;
 49 |   -webkit-box-shadow: rgba(0, 0, 0, 1) 0px 0px 2px;
 50 |   -moz-box-shadow: rgba(0, 0, 0, 1) 0px 0px 2px;
 51 |   box-shadow: rgba(0, 0, 0, 1) 0px 0px 2px;
 52 |   -webkit-border-radius: 2px;
 53 |   -moz-border-radius: 2px;
 54 |   border-radius: 2px;
 55 | }
 56 | 
 57 | #main {
 58 |   float: left;
 59 |   width: 500px;
 60 | }
 61 | 
 62 | #main pre {
 63 |   padding: 0 30px;
 64 |   margin: 10px 0;    
 65 | }
 66 | 
 67 | #main p {
 68 |   padding: 0 30px;
 69 |   margin: 5px 0;
 70 |   line-height: 1.5;
 71 | }
 72 | 
 73 | #main .about {
 74 |   float: left;
 75 | }
 76 | 
 77 | #main .download {
 78 |   float: right;
 79 | }
 80 | 
 81 | #main footer {
 82 |   position: absolute;
 83 |   bottom: 15px;
 84 |   left: 0; right: 0;
 85 |   display: block;
 86 |   padding: 0 30px;
 87 |   line-height: 1.5;
 88 | }
 89 | 
 90 | #main .twitter-share-button {
 91 |   position: absolute;
 92 |   right: 10px;
 93 |   top: 5px;
 94 | }
 95 | 
 96 | #examples {
 97 |   float: left;
 98 |   margin-left: 20px;
 99 |   width: 300px;
100 |   padding-top: 15px;
101 | }
102 | 
103 | #examples h2 {
104 |   padding: 0;
105 |   text-align: center;
106 |   cursor: pointer;
107 |   margin: 45px 0;
108 | }
109 | 
110 | #examples .item {
111 |   float: left;
112 |   margin: 0 0 20px 20px;
113 |   width: 120px;
114 |   height: 120px;
115 |   cursor: pointer;
116 | }
117 | 
118 | #boxes {
119 |   margin: 10% auto;
120 |   width: 400px;
121 |   height: 400px;
122 | }
123 | 
124 | #gfxOverlayPanel {
125 |   margin: 10% auto;
126 |   background: #E3E3E3;
127 |   border: 1px solid #FFF;
128 |   -webkit-border-radius: 2px;
129 |   -moz-border-radius: 2px;
130 |   border-radius: 2px;
131 |   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
132 |   -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
133 |   box-shadow: 0 0 20px rgba(0,0,0,0.4);
134 | }
135 | 
136 | #gfxOverlayPanel p {
137 |   padding: 0 30px;
138 |   margin: 5px 0;
139 |   line-height: 1.5;
140 | }
141 | 
142 | #unsupported {
143 |   text-align: center;
144 |   display: none;
145 |   color: #FFF;
146 |   text-shadow: 0 -1px 0 #000;
147 |   margin: 20px 0;
148 | }
149 | 
150 | #unsupported h2 {
151 |   color: #FFF;
152 | }


--------------------------------------------------------------------------------
/src/gfx.coffee:
--------------------------------------------------------------------------------
 1 | $ = jQuery ? require('jqueryify')
 2 | 
 3 | throw 'jQuery required' unless $
 4 | 
 5 | $.support.transition or= do ->
 6 |   style = (new Image).style
 7 |   'transition' of style or
 8 |    'webkitTransition' of style or
 9 |     'MozTransition' of style
10 | 
11 | vendor = if $.browser.mozilla then 'moz'
12 | vendor or= 'webkit'
13 | prefix = "-#{vendor}-"
14 | 
15 | vendorNames = n =
16 |   transition: "#{prefix}transition"
17 |   transform: "#{prefix}transform"
18 |   transitionEnd: "#{vendor}TransitionEnd"
19 | 
20 | defaults =
21 |   duration: 400
22 |   queue: true
23 |   easing: ''
24 |   enabled: $.support.transition
25 | 
26 | transformTypes = [
27 |   'scale', 'scaleX', 'scaleY', 'scale3d',
28 |   'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d',
29 |   'translate', 'translateX', 'translateY', 'translateZ', 'translate3d',
30 |   'skew', 'skewX', 'skewY',
31 |   'matrix', 'matrix3d', 'perspective'
32 | ]
33 | 
34 | # Internal helper functions
35 | 
36 | $.fn.queueNext = (callback, type) ->
37 |   type or= "fx";
38 | 
39 |   @queue ->
40 |     callback.apply(this, arguments)
41 |     redraw = this.offsetHeight
42 |     jQuery.dequeue(this, type)
43 | 
44 | $.fn.emulateTransitionEnd = (duration) ->
45 |   called = false
46 |   $(@).one(n.transitionEnd, -> called = true)
47 |   callback = => $(@).trigger(n.transitionEnd) unless called
48 |   setTimeout(callback, duration)
49 | 
50 | # Helper function for easily adding transforms
51 | 
52 | $.fn.transform = (properties, options) ->
53 |   opts = $.extend({}, defaults, options)
54 |   return this unless opts.enabled
55 | 
56 |   transforms = []
57 | 
58 |   for key, value of properties when key in transformTypes
59 |     transforms.push("#{key}(#{value})")
60 |     delete properties[key]
61 | 
62 |   if transforms.length
63 |     properties[n.transform] = transforms.join(' ')
64 | 
65 |   if opts.origin
66 |     properties["#{prefix}transform-origin"] = opts.origin
67 | 
68 |   $(@).css(properties)
69 | 
70 | $.fn.gfx = (properties, options) ->
71 |   opts = $.extend({}, defaults, options)
72 |   return this unless opts.enabled
73 | 
74 |   properties[n.transition] = "all #{opts.duration}ms #{opts.easing}"
75 | 
76 |   callback = ->
77 |     $(@).css(n.transition, '')
78 |     opts.complete?.apply(this, arguments)
79 |     $(@).dequeue()
80 | 
81 |   @[ if opts.queue is false then 'each' else 'queue' ] ->
82 |     $(@).one(n.transitionEnd, callback)
83 |     $(@).transform(properties)
84 | 
85 |     # Sometimes the event doesn't fire, so we have to fire it manually
86 |     $(@).emulateTransitionEnd(opts.duration + 50)


--------------------------------------------------------------------------------
/src/gfx.cube.coffee:
--------------------------------------------------------------------------------
  1 | $ = jQuery
  2 | 
  3 | sides =
  4 |   front:  {rotateY: '0deg',    rotateX: '0deg'}
  5 |   back:   {rotateY: '-180deg', rotateX: '0deg'}
  6 |   right:  {rotateY: '-90deg',  rotateX: '0deg'}
  7 |   left:   {rotateY: '90deg',   rotateX: '0deg'}
  8 |   top:    {rotateY: '0deg',    rotateX: '-90deg'}
  9 |   bottom: {rotateY: '0deg',    rotateX: '90deg'}
 10 | 
 11 | defaults =
 12 |   width: 300
 13 |   height: 300
 14 | 
 15 | $.fn.gfxCube = (options) ->
 16 |   opts = $.extend({}, defaults, options)
 17 | 
 18 |   element = $(@)
 19 | 
 20 |   tZ = opts.translateZ or opts.width / 2
 21 |   tZ += 'px' if typeof tZ is 'number'
 22 | 
 23 |   element.transform
 24 |     position: 'relative'
 25 |     width:  opts.width
 26 |     height: opts.height
 27 |     '-webkit-perspective': '3000'
 28 |     '-moz-perspective': '3000'
 29 |     '-webkit-perspective-origin': '50% 50%'
 30 |     '-moz-perspective-origin': '50% 50%'
 31 | 
 32 |   wrapper = $('<div />')
 33 |   wrapper.addClass('gfxCubeWrapper')
 34 |   wrapper.transform
 35 |     position: 'absolute'
 36 |     width: '100%'
 37 |     height: '100%'
 38 |     left: 0
 39 |     top: 0
 40 |     overflow: 'visible'
 41 |     rotateY: '0deg'
 42 |     rotateX: '0deg'
 43 |     translateZ: "-#{tZ}"
 44 |     '-webkit-transform-style': 'preserve-3d'
 45 |     '-moz-transform-style': 'preserve-3d'
 46 |     '-webkit-transform-origin': '50% 50%'
 47 |     '-moz-transform-origin': '50% 50%'
 48 | 
 49 |   element.children().wrapAll(wrapper).css
 50 |     display: 'block'
 51 |     position: 'absolute'
 52 |     width: '100%'
 53 |     height: '100%'
 54 |     left: 0
 55 |     top: 0
 56 |     overflow: 'hidden'
 57 | 
 58 |   front   = element.find('.front')
 59 |   back    = element.find('.back')
 60 |   right   = element.find('.right')
 61 |   left    = element.find('.left')
 62 |   top     = element.find('.top')
 63 |   bottom  = element.find('.bottom')
 64 | 
 65 |   front.transform   rotateY: '0deg',   translateZ: tZ
 66 |   back.transform    rotateY: '180deg', translateZ: tZ
 67 |   right.transform   rotateY: '90deg',  translateZ: tZ
 68 |   left.transform    rotateY: '-90deg', translateZ: tZ
 69 |   top.transform     rotateX: '90deg',  translateZ: tZ
 70 |   bottom.transform  rotateX: '-90deg', translateZ: tZ
 71 | 
 72 |   $(@).bind 'cube', (e, type) ->
 73 |     wrapper = element.find('.gfxCubeWrapper')
 74 |     wrapper.gfx($.extend({}, {translateZ: "-#{tZ}"}, sides[type]))
 75 | 
 76 | # Disable cubes in Firefox / Chrome < 12
 77 | chromeRegex = /(Chrome)[\/]([\w.]+)/
 78 | chromeMatch = chromeRegex.exec( navigator.userAgent ) or []
 79 | chrome11    = chromeRegex[1] and chromeRegex[2].test(/^12\./)
 80 | 
 81 | if not $.browser.webkit or chrome11
 82 |   $.fn.gfxCube = (options) ->
 83 |     opts = $.extend({}, defaults, options)
 84 | 
 85 |     element = $(@)
 86 | 
 87 |     element.css
 88 |       position: 'relative'
 89 |       width:  opts.width
 90 |       height: opts.height
 91 | 
 92 |     wrapper = $('<div />')
 93 |     wrapper.addClass('gfxCubeWrapper')
 94 |     wrapper.transform
 95 |       position: 'absolute'
 96 |       width: '100%'
 97 |       height: '100%'
 98 |       left: 0
 99 |       top: 0
100 |       overflow: 'visible'
101 | 
102 |     element.children().wrapAll(wrapper).css
103 |       display: 'block'
104 |       position: 'absolute'
105 |       width: '100%'
106 |       height: '100%'
107 |       left: 0
108 |       top: 0
109 |       overflow: 'hidden'
110 | 
111 |     wrapper = element.find('.gfxCubeWrapper')
112 | 
113 |     wrapper.children('*:not(.front)').hide()
114 |     element.bind 'cube', (e, type) ->
115 |       wrapper.children().hide()
116 |       wrapper.children(".#{type}").show()


--------------------------------------------------------------------------------
/src/gfx.effects.coffee:
--------------------------------------------------------------------------------
  1 | # Additional Effects
  2 | 
  3 | $.fn.gfxPopIn = (options = {}) ->
  4 |   options.scale ?= '.2'
  5 | 
  6 |   $(@).queueNext ->
  7 |     $(@).transform(
  8 |       '-webkit-transform-origin': '50% 50%'
  9 |       '-moz-transform-origin': '50% 50%'
 10 |       scale: options.scale
 11 |     ).show()
 12 | 
 13 |   $(@).gfx({
 14 |     scale:   '1'
 15 |     opacity: '1'
 16 |   }, options)
 17 | 
 18 | $.fn.gfxPopOut = (options) ->
 19 |   $(@).queueNext ->
 20 |     $(@).transform
 21 |       '-webkit-transform-origin': '50% 50%'
 22 |       '-moz-transform-origin': '50% 50%'
 23 |       scale:   '1'
 24 |       opacity: '1'
 25 | 
 26 |   $(@).gfx({
 27 |     scale:   '.2'
 28 |     opacity: '0'
 29 |   }, options)
 30 | 
 31 |   $(@).queueNext ->
 32 |     $(@).hide().transform(
 33 |       opacity: '1'
 34 |       scale:   '1'
 35 |     )
 36 | 
 37 | $.fn.gfxFadeIn = (options = {}) ->
 38 |   options.duration ?= 1000
 39 |   $(@).queueNext ->
 40 |     $(@).css(opacity: '0').show()
 41 |   $(@).gfx({opacity: 1}, options);
 42 | 
 43 | $.fn.gfxFadeOut = (options = {}) ->
 44 |   $(@).queueNext ->
 45 |     $(@).css(opacity: 1)
 46 |   $(@).gfx({opacity: 0}, options)
 47 |   $(@).queueNext ->
 48 |     $(@).hide().css(opacity: 1)
 49 | 
 50 | $.fn.gfxShake = (options = {}) ->
 51 |   options.duration ?= 100
 52 |   options.easing   ?= 'ease-out'
 53 |   distance = options.distance or 20
 54 |   $(@).gfx({translateX: "-#{distance}px"}, options)
 55 |   $(@).gfx({translateX: "#{distance}px"}, options)
 56 |   $(@).gfx({translateX: "-#{distance}px"}, options)
 57 |   $(@).gfx({translateX: "#{distance}px"}, options)
 58 |   $(@).queueNext ->
 59 |     $(@).transform(translateX: 0)
 60 | 
 61 | $.fn.gfxBlip = (options = {}) ->
 62 |   options.scale or= '1.15'
 63 |   $(@).gfx({scale: options.scale}, options)
 64 |   $(@).gfx({scale: '1'}, options)
 65 | 
 66 | $.fn.gfxExplodeIn = (options = {}) ->
 67 |   options.scale or= '3'
 68 |   $(@).queueNext ->
 69 |     $(@).transform(scale: options.scale, opacity: '0').show()
 70 |   $(@).gfx({scale: '1', opacity: '1'}, options)
 71 | 
 72 | $.fn.gfxExplodeOut = (options = {}) ->
 73 |   options.scale or= '3'
 74 |   $(@).queueNext ->
 75 |     $(@).transform(scale: '1', opacity: '1')
 76 |   $(@).gfx({scale: options.scale, opacity: '0'}, options)
 77 | 
 78 |   unless options.reset is false
 79 |     $(@).queueNext ->
 80 |       $(@).hide().transform(scale: '1', opacity: '1')
 81 |   this
 82 | 
 83 | $.fn.gfxFlipIn = (options = {}) ->
 84 |   $(@).queueNext ->
 85 |     $(@).transform(rotateY: '180deg', scale: '.8', display: 'block')
 86 |   $(@).gfx({rotateY: 0, scale: 1}, options)
 87 | 
 88 | $.fn.gfxFlipOut = (options = {}) ->
 89 |   $(@).queueNext ->
 90 |     $(@).transform(rotateY: 0, scale: 1)
 91 |   $(@).gfx({rotateY: '-180deg', scale: '.8'}, options)
 92 | 
 93 |   unless options.reset is false
 94 |     $(@).queueNext ->
 95 |       $(@).transform(scale: 1, rotateY: 0, display: 'none')
 96 |   this
 97 | 
 98 | $.fn.gfxRotateOut = (options = {}) ->
 99 |   $(@).queueNext ->
100 |     $(@).transform(rotateY: 0).fix()
101 |   $(@).gfx({rotateY: '-180deg'}, options)
102 | 
103 |   unless options.reset is false
104 |     $(@).queueNext ->
105 |       $(@).transform(rotateY: 0, display: 'none').unfix()
106 |   @
107 | 
108 | $.fn.gfxRotateIn = (options = {}) ->
109 |   $(@).queueNext ->
110 |     $(@).transform(rotateY: '180deg', display: 'block').fix()
111 |   $(@).gfx({rotateY: 0}, options)
112 |   $(@).queueNext -> $(@).unfix()
113 | 
114 |   $ = jQuery
115 | 
116 | $.fn.gfxSlideOut = (options = {}) ->
117 |   options.direction or= 'right'
118 | 
119 |   distance = options.distance or 100
120 |   distance *= -1 if options.direction is 'left'
121 |   distance += "%"
122 | 
123 |   opacity = if options.fade then 0 else 1
124 | 
125 |   $(@).queueNext -> $(@).show()
126 |   $(@).gfx({translate3d: "#{distance},0,0", opacity: opacity}, options)
127 |   $(@).queueNext ->
128 |     $(@).transform(translate3d: "0,0,0", opacity: 1).hide()
129 | 
130 | $.fn.gfxSlideIn = (options = {}) ->
131 |   options.direction or= 'right'
132 | 
133 |   distance = options.distance or 100
134 |   distance *= -1 if options.direction is 'left'
135 |   distance += "%"
136 | 
137 |   opacity = if options.fade then 0 else 1
138 | 
139 |   $(@).queueNext ->
140 |     $(@).transform(translate3d: "#{distance},0,0", opacity: opacity).show()
141 |   $(@).gfx({translate3d: "0,0,0", opacity: 1}, options)
142 | 
143 | $.fn.gfxRaisedIn = (options = {}) ->
144 |   $(@).queueNext ->
145 |     $(@).transform(scale: '1', opacity: '0', translate3d: '0,-15px,0').show()
146 |   $(@).gfx({scale: '1', opacity: '1', translate3d: '0,0,0'}, options)
147 | 
148 | $.fn.gfxRaisedOut = (options = {}) ->
149 |   $(@).queueNext ->
150 |     $(@).transform(scale: '1', opacity: '1', translate3d: '0,0,0')
151 |   $(@).gfx({scale: '1', opacity: '0', translate3d: '0,-8px,0'}, options)
152 | 
153 |   $(@).queueNext ->
154 |     $(@).hide().transform(scale: '1', opacity: '1', translate3d: '0,0,0')
155 | 
156 | $.fn.fix = ->
157 |   $(@).each ->
158 |     element = $(@)
159 |     styles  = element.offset()
160 |     parentOffset = element.parent().offset()
161 |     styles.left -= parentOffset.left
162 |     styles.top  -= parentOffset.top
163 |     styles.position = 'absolute'
164 |     element.css(styles)
165 | 
166 | $.fn.unfix = ->
167 |   $(@).each ->
168 |     element = $(@)
169 |     element.css(position: '', top:'', left: '')


--------------------------------------------------------------------------------
/src/gfx.flip.coffee:
--------------------------------------------------------------------------------
 1 | $ = jQuery
 2 | 
 3 | defaults =
 4 |   width: 120
 5 |   height: 120
 6 | 
 7 | $.fn.gfxFlip = (options = {}) ->
 8 |   opts = $.extend({}, defaults, options)
 9 | 
10 |   front = $(@).find('.front')
11 |   back  = $(@).find('.back')
12 | 
13 |   $(@).css(
14 |     'position': 'relative'
15 |     '-webkit-perspective': '600'
16 |     '-moz-perspective': '600'
17 |     '-webkit-transform-style': 'preserve-3d'
18 |     '-moz-transform-style': 'preserve-3d'
19 |     '-webkit-transform-origin': '50% 50%'
20 |     '-moz-transform-origin': '50% 50%'
21 |     'width': opts.width
22 |     'height': opts.height
23 |   )
24 | 
25 |   front.add(back).css
26 |     position: 'absolute'
27 |     width:    '100%'
28 |     height:   '100%'
29 |     display:  'block'
30 |     '-webkit-backface-visibility': 'hidden'
31 |     '-moz-backface-visibility': 'hidden'
32 | 
33 |   back.transform
34 |     rotateY: '-180deg'
35 | 
36 |   $(@).bind 'flip', ->
37 |     $(@).toggleClass('flipped')
38 |     flipped = $(@).hasClass('flipped')
39 | 
40 |     front.gfx('rotateY': if flipped then '180deg' else '0deg')
41 |     back.gfx('rotateY': if flipped then '0deg' else '-180deg')
42 | 


--------------------------------------------------------------------------------
/src/gfx.overlay.coffee:
--------------------------------------------------------------------------------
 1 | $ = jQuery
 2 | 
 3 | isOpen = ->
 4 |   !!$('#gfxOverlay').length
 5 | 
 6 | close = ->
 7 |   overlay = $('#gfxOverlay')
 8 |   overlay.find('#gfxOverlayPanel').gfx(scale: '1.1', opacity: 0)
 9 |   overlay.gfx(background: 'rgba(0,0,0,0)')
10 |   overlay.queueNext -> overlay.remove()
11 |   
12 | panelCSS = 
13 |   opacity:    0
14 |   scale:      0.5
15 |   
16 | overlayStyles = 
17 |   display:    'block'
18 |   position:   'fixed'
19 |   zIndex:     99
20 |   top:        0
21 |   left:       0
22 |   width:      '100%'
23 |   height:     '100%'
24 |   background: 'rgba(0,0,0,0)'
25 | 
26 | $.gfxOverlay = (element, options = {}) ->
27 |   close() if isOpen()
28 |   
29 |   element = $(element)
30 |   if element[0].tagName is 'SCRIPT'
31 |     element = element.html()
32 |   else
33 |     element = element.clone()
34 |     
35 |   options.css or= {}
36 |   options.css.width  = options.width  if options.width
37 |   options.css.height = options.height if options.height
38 |   
39 |   overlay = $('<div />').attr('id': 'gfxOverlay')
40 |   overlay.css(overlayStyles)
41 |   overlay.click(close)
42 |   overlay.delegate('.close', 'click', close)
43 |   overlay.bind('close', close)
44 | 
45 |   panel = $('<div />').attr('id': 'gfxOverlayPanel')
46 |   panel.transform($.extend({}, panelCSS, options.css))
47 | 
48 |   panel.append(element)
49 |   overlay.append(panel)
50 |   $('body').append(overlay)
51 |   
52 |   overlay.delay().gfx({background: 'rgba(0,0,0,0.5)'}, {duration: options.duration})
53 |   panel.delay().gfx({scale: 1, opacity: 1}, {duration: options.duration})


--------------------------------------------------------------------------------