survivalkit 0.1

data/templates/project/sources/pie/demos/farbtastic/farbtastic.min.js

@@ -0,0 +1 @@
+jQuery.fn.farbtastic=function(a){$.farbtastic(this,a);return this};jQuery.farbtastic=function(a,b){var a=$(a).get(0);return a.farbtastic||(a.farbtastic=new jQuery._farbtastic(a,b))};jQuery._farbtastic=function(a,d){var b=this;$(a).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');var c=$(".farbtastic",a);b.wheel=$(".wheel",a).get(0);b.radius=84;b.square=100;b.width=194;if(navigator.appVersion.match(/MSIE [0-6]\./)){$("*",c).each(function(){if(this.currentStyle.backgroundImage!="none"){var e=this.currentStyle.backgroundImage;e=this.currentStyle.backgroundImage.substring(5,e.length-2);$(this).css({backgroundImage:"none",filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='"+e+"')"})}})}b.linkTo=function(e){if(typeof b.callback=="object"){$(b.callback).unbind("keyup",b.updateValue)}b.color=null;if(typeof e=="function"){b.callback=e}else{if(typeof e=="object"||typeof e=="string"){b.callback=$(e);b.callback.bind("keyup",b.updateValue);if(b.callback.get(0).value){b.setColor(b.callback.get(0).value)}}}return this};b.updateValue=function(e){if(this.value&&this.value!=b.color){b.setColor(this.value)}};b.setColor=function(e){var f=b.unpack(e);if(b.color!=e&&f){b.color=e;b.rgb=f;b.hsl=b.RGBToHSL(b.rgb);b.updateDisplay()}return this};b.setHSL=function(e){b.hsl=e;b.rgb=b.HSLToRGB(e);b.color=b.pack(b.rgb);b.updateDisplay();return this};b.widgetCoords=function(i){var g,m;var h=i.target||i.srcElement;var f=b.wheel;if(typeof i.offsetX!="undefined"){var l={x:i.offsetX,y:i.offsetY};var j=h;while(j){j.mouseX=l.x;j.mouseY=l.y;l.x+=j.offsetLeft;l.y+=j.offsetTop;j=j.offsetParent}var j=f;var k={x:0,y:0};while(j){if(typeof j.mouseX!="undefined"){g=j.mouseX-k.x;m=j.mouseY-k.y;break}k.x+=j.offsetLeft;k.y+=j.offsetTop;j=j.offsetParent}j=h;while(j){j.mouseX=undefined;j.mouseY=undefined;j=j.offsetParent}}else{var l=b.absolutePosition(f);g=(i.pageX||0*(i.clientX+$("html").get(0).scrollLeft))-l.x;m=(i.pageY||0*(i.clientY+$("html").get(0).scrollTop))-l.y}return{x:g-b.width/2,y:m-b.width/2}};b.mousedown=function(e){if(!document.dragging){$(document).bind("mousemove",b.mousemove).bind("mouseup",b.mouseup);document.dragging=true}var f=b.widgetCoords(e);b.circleDrag=Math.max(Math.abs(f.x),Math.abs(f.y))*2>b.square;b.mousemove(e);return false};b.mousemove=function(h){var i=b.widgetCoords(h);if(b.circleDrag){var g=Math.atan2(i.x,-i.y)/6.28;if(g<0){g+=1}b.setHSL([g,b.hsl[1],b.hsl[2]])}else{var f=Math.max(0,Math.min(1,-(i.x/b.square)+0.5));var e=Math.max(0,Math.min(1,-(i.y/b.square)+0.5));b.setHSL([b.hsl[0],f,e])}return false};b.mouseup=function(){$(document).unbind("mousemove",b.mousemove);$(document).unbind("mouseup",b.mouseup);document.dragging=false};b.updateDisplay=function(){var e=b.hsl[0]*6.28;$(".h-marker",c).css({left:Math.round(Math.sin(e)*b.radius+b.width/2)+"px",top:Math.round(-Math.cos(e)*b.radius+b.width/2)+"px"});$(".sl-marker",c).css({left:Math.round(b.square*(0.5-b.hsl[1])+b.width/2)+"px",top:Math.round(b.square*(0.5-b.hsl[2])+b.width/2)+"px"});$(".color",c).css("backgroundColor",b.pack(b.HSLToRGB([b.hsl[0],1,0.5])));if(typeof b.callback=="object"){$(b.callback).css({backgroundColor:b.color,color:b.hsl[2]>0.5?"#000":"#fff"});$(b.callback).each(function(){if(this.value&&this.value!=b.color){this.value=b.color}})}else{if(typeof b.callback=="function"){b.callback.call(b,b.color)}}};b.absolutePosition=function(f){var g={x:f.offsetLeft,y:f.offsetTop};if(f.offsetParent){var e=b.absolutePosition(f.offsetParent);g.x+=e.x;g.y+=e.y}return g};b.pack=function(f){var i=Math.round(f[0]*255);var h=Math.round(f[1]*255);var e=Math.round(f[2]*255);return"#"+(i<16?"0":"")+i.toString(16)+(h<16?"0":"")+h.toString(16)+(e<16?"0":"")+e.toString(16)};b.unpack=function(e){if(e.length==7){return[parseInt("0x"+e.substring(1,3))/255,parseInt("0x"+e.substring(3,5))/255,parseInt("0x"+e.substring(5,7))/255]}else{if(e.length==4){return[parseInt("0x"+e.substring(1,2))/15,parseInt("0x"+e.substring(2,3))/15,parseInt("0x"+e.substring(3,4))/15]}}};b.HSLToRGB=function(m){var o,n,e,j,k;var i=m[0],p=m[1],f=m[2];n=(f<=0.5)?f*(p+1):f+p-f*p;o=f*2-n;return[this.hueToRGB(o,n,i+0.33333),this.hueToRGB(o,n,i),this.hueToRGB(o,n,i-0.33333)]};b.hueToRGB=function(f,e,g){g=(g<0)?g+1:((g>1)?g-1:g);if(g*6<1){return f+(e-f)*g*6}if(g*2<1){return e}if(g*3<2){return f+(e-f)*(0.66666-g)*6}return f};b.RGBToHSL=function(m){var i,o,p,j,q,f;var e=m[0],k=m[1],n=m[2];i=Math.min(e,Math.min(k,n));o=Math.max(e,Math.max(k,n));p=o-i;f=(i+o)/2;q=0;if(f>0&&f<1){q=p/(f<0.5?(2*f):(2-2*f))}j=0;if(p>0){if(o==e&&o!=k){j+=(k-n)/p}if(o==k&&o!=n){j+=(2+(n-e)/p)}if(o==n&&o!=e){j+=(4+(e-k)/p)}j/=6}return[j,q,f]};$("*",c).mousedown(b.mousedown);b.setColor("#000000");if(d){b.linkTo(d)}};

data/templates/project/sources/pie/demos/tabs.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>CSS3 PIE Demo: Tabs</title>
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+    <!--[if lt IE 9]>
+        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <script type="text/javascript">
+        $( function() {
+            var cb = $( '#togglePIE' );
+            if( !( cb[0] && cb[0].addBehavior ) ) return; //IE only
+
+            function togglePIE() {
+                $( cb[0].getAttribute( 'data-target' ) ).each( function() {
+                    if( cb.is(":checked") ) {
+                        if( !this.behaviorId ) {
+                            this.behaviorId = this.addBehavior( '../build/PIE.htc' );
+                        }
+                    }
+                    else if( this.behaviorId ) {
+                        this.removeBehavior( this.behaviorId );
+                        this.behaviorId = null;
+                    }
+                } );
+            }
+
+            cb.change( togglePIE );
+            togglePIE();
+        } );
+    </script>
+
+
+    <style type="text/css">
+
+        /* Page styles */
+
+        body {
+            font-size: 12px;
+            font-family: sans-serif;
+        }
+
+        section {
+            display: block;
+        }
+
+        .control, .demo {
+            border: 1px solid #CCC;
+            padding: 10px;
+            margin: 2em 0;
+            float: left;
+            width: 275px;
+            height: 250px;
+        }
+        .control {
+            margin-right: 1em;
+        }
+
+        .control .desc, .demo .desc {
+            height: 4em;
+        }
+
+        .code {
+            clear: both;
+        }
+
+        .code pre {
+            background: #EEE;
+            padding: 10px;
+        }
+
+
+
+        /* Demo styles */
+
+        .tabBox {
+            padding: 0 3px;
+            font-size: 12px;
+            font-family: sans-serif;
+        }
+
+        .tabBox .tabs {
+            margin: 0;
+            padding: 0 10px;
+            overflow: hidden;
+            margin-bottom: -1px;
+            height: 2.25em;
+        }
+        .tabBox .tabs li {
+            float: left;
+            list-style: none;
+            margin: 0;
+            padding: .25em .25em 0;
+            height: 2em;
+            overflow: hidden;
+            position: relative;
+            z-index: 1;
+            border-bottom: 1px solid #FFF;
+        }
+        .tabBox .tabs li.selected {
+            z-index: 3;
+        }
+        .tabBox .tabs a {
+            float: left;
+            height: 2em;
+            line-height: 2em;
+            -webkit-border-radius: 8px 8px 0 0;
+            -moz-border-radius: 8px 8px 0 0;
+            border-radius: 8px 8px 0 0;
+            background: #EEE;
+            border: 1px solid #CCC;
+            border-bottom: 0;
+            padding: 0 10px;
+            color: #000;
+            text-decoration: none;
+            /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
+        }
+        .tabBox .tabs .selected a {
+            background: #FFF;
+            -webkit-box-shadow: #CCC 0 0 .25em;
+            -moz-box-shadow: #CCC 0 0 .25em;
+            box-shadow: #CCC 0 0 .25em;
+        }
+
+        .tabBox .tabs a:hover {
+            background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
+            background: -moz-linear-gradient(#EEF, #FFF 70%);
+            background: linear-gradient(#EEF, #FFF 70%);
+            -pie-background: linear-gradient(#EEF, #FFF 70%);
+        }
+
+        .tabBox .content {
+            clear: left;
+            position: relative;
+            z-index: 2;
+            padding: 2em 1em;
+            border: 1px solid #CCC;
+            background: #FFF;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 3px;
+            -webkit-box-shadow: #CCC 0 0 .25em;
+            -moz-box-shadow: #CCC 0 0 .25em;
+            box-shadow: #CCC 0 0 .25em;
+            /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
+        }
+        .tabBox .content p {
+            margin: 0;
+        }
+    </style>
+
+</head>
+<body>
+
+    <h1>CSS3 PIE Demo: Tabs</h1>
+
+
+    <section class="explain">
+        <h2>Explanation</h2>
+        <p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). The tabs
+        don't actually do anything, as that would require extra JavaScript beyond the scope of this demo.</p>
+        <p>In this demo <code>border-radius</code> is used to give the tabs rounded corners on the top. Also, <code>box-shadow</code>
+        gives the active tab and the content container a subtle glow, which creates a sense of depth and makes the inactive
+        tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
+    </section>
+
+
+    <section class="control">
+        <h2>Screenshot</h2>
+        <p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
+
+        <img src="tabs-control.png" alt="Rendering in Firefox" />
+    </section>
+
+    <section class="demo">
+        <h2>Live Demo</h2>
+        <p class="desc">This is the live code as rendered by your browser. If you use IE, you can toggle the PIE behavior on and off.</p>
+
+        <div class="tabBox">
+            <ul class="tabs">
+                <li class="selected"><a href="#">Tab One</a></li>
+                <li><a href="#">Tab Two</a></li>
+                <li><a href="#">Tab Three</a></li>
+            </ul>
+            <div class="content">
+                <p>Lorem ipsum dolor sit amet</p>
+            </div>
+        </div>
+
+        <!--[if lt IE 9]>
+            <p>
+                <input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
+                <label for="togglePIE">Toggle PIE behavior</label>
+            </p>
+        <![endif]-->
+    </section>
+
+    <section class="code">
+        <h2>Code</h2>
+        
+        <div class="html">
+            <h3>HTML markup</h3>
+<pre><code>&lt;div class="tabBox">
+    &lt;ul class="tabs">
+        &lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
+        &lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
+        &lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
+    &lt;/ul>
+    &lt;div class="content">
+        &lt;p>Lorem ipsum dolor sit amet&lt;/p>
+    &lt;/div>
+&lt;/div></code></pre>
+        </div>
+
+        <div class="css">
+            <h3>CSS</h3>
+<pre><code>.tabBox .tabs {
+    margin: 0;
+    padding: 0 10px;
+    overflow: hidden;
+    margin-bottom: -1px;
+    height: 2.25em;
+}
+
+.tabBox .tabs li {
+    float: left;
+    list-style: none;
+    margin: 0;
+    padding: .25em .25em 0;
+    height: 2em;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    border-bottom: 1px solid #FFF;
+}
+
+.tabBox .tabs li.selected {
+    z-index: 3;
+}
+
+.tabBox .tabs a {
+    float: left;
+    height: 2em;
+    line-height: 2em;
+    -webkit-border-radius: 8px 8px 0 0;
+    -moz-border-radius: 8px 8px 0 0;
+    border-radius: 8px 8px 0 0;
+    background: #EEE;
+    border: 1px solid #CCC;
+    border-bottom: 0;
+    padding: 0 10px;
+    color: #000;
+    text-decoration: none;
+    behavior: url(PIE.htc);
+}
+
+.tabBox .tabs .selected a {
+    background: #FFF;
+    -webkit-box-shadow: #CCC 0 0 .25em;
+    -moz-box-shadow: #CCC 0 0 .25em;
+    box-shadow: #CCC 0 0 .25em;
+}
+
+.tabBox .tabs a:hover {
+    background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
+    background: -moz-linear-gradient(#EEF, #FFF 70%);
+    background: linear-gradient(#EEF, #FFF 70%);
+    -pie-background: linear-gradient(#EEF, #FFF 70%);
+}
+
+.tabBox .content {
+    clear: left;
+    position: relative;
+    z-index: 2;
+    padding: 2em 1em;
+    border: 1px solid #CCC;
+    background: #FFF;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: #CCC 0 0 .25em;
+    -moz-box-shadow: #CCC 0 0 .25em;
+    box-shadow: #CCC 0 0 .25em;
+    behavior: url(PIE.htc);
+}</code></pre>
+        </div>
+    </section>
+
+
+</body>
+</html>

data/templates/project/sources/pie/documentation/about.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>PIE Documentation: About PIE</title>
+
+</head>
+<body>
+
+<h1>About PIE</h1>
+
+
+
+<!-- noformat on -->
+
+<p>CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on.  These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.</p>
+
+<p>CSS3 promises to do away with all that!  But as we all know, due to Internet Explorer's lack of support for any of these features, <strong>we must be patient and refrain from using them</strong>, and make do with the same old tedious techniques for the foreseeable future.</p>
+
+<p><strong>Or must we?</strong></p>
+
+<p>PIE stands for Progressive Internet Explorer.  It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.  Consider, if you will, the following CSS:</p>
+
+<pre><code>#myElement {
+    background: #EEE;
+    padding: 2em;
+    -moz-border-radius: 1em;
+    -webkit-border-radius: 1em;
+    border-radius: 1em;
+}</code></pre>
+
+<p>This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or 8, which all display a square box.  However, add the following single rule to that CSS:</p>
+
+<pre><code>#myElement {
+    ...
+    behavior: url(PIE.htc);
+}</code></pre>
+
+<p>Now the exact same rounded corners appear in IE!  That's all there is to it.  No, really, I mean it.</p>
+
+<p>PIE currently has full or partial support for the following CSS3 features:</p>
+
+<ul>
+    <li>border-radius</li>
+    <li>box-shadow</li>
+    <li>border-image</li>
+    <li>multiple background images</li>
+    <li>linear-gradient as background image</li>
+</ul>
+
+<p>Other features are under active development.</p>
+
+<p><strong>Want to learn more?</strong> View some live <a href="/demos">demos</a>, read the <a href="/documentation/">documentation</a>, and <a href="/download-latest">download PIE</a> to try it yourself. Be sure to read the <a href="/documentation/known-issues/">Known Issues</a> page for common problems and their solutions.</p>
+
+<p>PIE is still a young project with big plans. But it's already good enough to save you a <em>lot</em> of time and make your life as a Web developer much easier. Happy CSS3 coding!</p>
+
+<!-- noformat off -->
+
+
+
+</body>
+</html>

data/templates/project/sources/pie/documentation/build.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>PIE Documentation: Building PIE From Source</title>
+
+</head>
+<body>
+
+<h1>Building PIE From Source</h1>
+
+
+
+<!-- noformat on -->
+
+<p>This document describes how you can build PIE from the most recent source code. This is useful if you want to get a feature or bug fix which hasn't yet made it into a release package. It's also necessary if you want to make changes to the code yourself to try and fix a bug or implement a new feature. If you do so, please consider contributing your changes back to the main project so we can all benefit!</p>
+
+<h2 id="prereqs">Prerequisites</h2>
+
+<p>Building PIE is straightforward. You need  to have the following tools installed:</p>
+
+<ol>
+    <li><a href="http://git-scm.com/">Git</a>, if you are going to be checking out the source from the Git repository</li>
+    <li><a href="http://java.com">Java</a> runtime, version 6 or higher</li>
+    <li><a href="http://ant.apache.org">Ant</a>, for performing the build</li>
+</ol>
+
+<p>Once these prerequisites are installed, perform the following steps:</p>
+
+
+
+<h2 id="getsource">Get the source code</h2>
+
+<p>You have two options for getting the source:</p>
+
+<ol>
+    <li>Check out the source using Git:
+        <pre><kbd>git clone git://github.com/lojjic/PIE.git</kbd></pre>
+        or:
+    </li>
+    <li>Download an archive of the source:
+        <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a>
+    </li>
+</ol>
+
+
+
+<h2 id="build">Perform the build</h2>
+
+<p>From the root directory of your local copy of the source code, invoke the following command in the terminal:</p>
+
+<pre><kbd>ant</kbd></pre>
+
+<p>This will perform the build, creating a new directory named "build/". This directory will contain the following
+artifacts:</p>
+
+<ul>
+    <li>PIE.htc - The fully compressed behavior file; this is the version which should be deployed in production
+    environments.</li>
+    <li>PIE_uncompressed.htc - An uncompressed version of the behavior; this is useful for debugging purposes but is
+    very large so it should not be deployed in production environments.</li>
+    <li>PIE.js - The compressed version of the alternate <a href="/documentation/pie-js/">JavaScript edition</a> of
+    PIE. PIE.htc is the recommended file for most users.</li>
+    <li>PIE_uncompressed.js - The uncompressed version of the JavaScript edition.</li>
+</ul>
+
+<!-- noformat off -->
+
+
+</body>
+</html>

data/templates/project/sources/pie/documentation/getting-started.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
+  <title>PIE Documentation: Getting Started</title>
+
+</head>
+<body>
+
+<h1>Getting Started</h1>
+
+
+
+<!-- noformat on -->
+
+<p>The following instructions should get you up and running with PIE in most circumstances. If you run into
+problems along the way, consult our <a href="/documentation/known-issues/">known issues</a> page, or ask
+for help in the <a href="http://css3pie.com/forum">forums</a>.</p>
+
+<h2>Step 1: Download it</h2>
+
+<p><a href="/download-latest">Download the PIE distribution</a> and unzip it somewhere.</p>
+
+<h2>Step 2: Upload it</h2>
+
+<p>Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE,
+and is what does all the magic. Upload this file to the server where you're going to serve pages using
+CSS3. It doesn't matter where exactly, as long as you know where it is.</p>
+
+<h2>Step 3: Write some CSS3</h2>
+
+<p>Assuming you already have a HTML document, let's say you want to give one of its elements rounded corners.
+Create a CSS rule for that element and give it a border-radius style like so:</p>
+
+<pre><code>#myAwesomeElement {
+    border: 1px solid #999;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}</code></pre>
+
+<p>(Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in
+WebKit and Mozilla-based browsers.)</p>
+
+<h2>Step 4: Apply PIE</h2>
+
+<p>In that same CSS rule, add the following style line:</p>
+
+<pre><code>behavior: url(path/to/PIE.htc);</code></pre>
+
+<p>Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. <em>Note: this
+path is relative to the HTML file being viewed, not the CSS file it is called from.</em></p>
+
+<h2>Step 5: View it in IE</h2>
+
+<p>If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners
+rendered just like other browsers. Now you can play around with some of the other supported CSS3 decorations
+like box-shadow. See the documentation on <a href="/documentation/supported-css3-features/">supported CSS3
+features</a> to see exactly what PIE can do. Have fun!</p>
+
+<!-- noformat off -->
+
+
+</body>
+</html>