diff --git a/css/piskel.css b/css/piskel.css
new file mode 100644
index 00000000..c384327b
--- /dev/null
+++ b/css/piskel.css
@@ -0,0 +1,36 @@
+html, body {
+ height : 100%;
+}
+
+.debug {
+ border : 1px Solid black;
+}
+
+.left-nav {
+ position:absolute;
+ top : 0;
+ bottom : 0;
+ width : 200px;
+ background : #000;
+}
+
+.main-panel {
+ position:absolute;
+ top : 0;
+ bottom : 0;
+ left : 200px;
+ right : 0;
+ background : #ccc;
+}
+
+.preview-container {
+ position : absolute;
+ top : 30px;
+ right : 0;
+ height : 200px;
+ width : 200px;
+ background : white;
+ border : 0px Solid black;
+ border-radius:5px 0px 0px 5px;
+ box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..33cf7319
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,83 @@
+html, body {
+ height : 100%;
+ margin : 0;
+ cursor : default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+ul, li {
+ margin : 0;
+ padding : 0;
+}
+
+.debug {
+ border : 1px Solid black;
+}
+
+.left-nav {
+ position:absolute;
+ top : 0;
+ bottom : 0;
+ width : 200px;
+ background : #000;
+ padding : 10px;
+}
+
+.main-panel {
+ position:absolute;
+ top : 0;
+ bottom : 0;
+ left : 200px;
+ right : 0;
+ background : #ccc;
+}
+
+.preview-container {
+ position : absolute;
+ top : 30px;
+ right : 0;
+ height : 256px;
+ width : 256px;
+ background : white;
+ border : 0px Solid black;
+ border-radius:5px 0px 0px 5px;
+ box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+}
+
+.preview-container canvas{
+ border : 0px Solid transparent;
+ border-radius:5px 0px 0px 5px;
+}
+
+#cursorInfo {
+ position : fixed;
+ cursor : default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.action-button {
+ background-color : white;
+ width : 150px;
+ display : inline-block;
+}
+
+#preview-list li{
+ margin : 10px 0;
+ width : 128px;
+ height : 128px;
+}
+
+#preview-list li.selected{
+ margin : 8px -2px;
+ border : 2px Solid red;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..f8f0d7c9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Piskel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/piskel.js b/js/piskel.js
new file mode 100644
index 00000000..62c719e5
--- /dev/null
+++ b/js/piskel.js
@@ -0,0 +1,142 @@
+(function ($) {
+ var frames = [], isClicked = false, brushSize = 10, index = -1, animIndex = 0, button = 0;
+
+
+ var piskel = {
+ init : function () {
+ this.addFrame();
+
+ setInterval(this.refreshAnimatedPreview, 500);
+ },
+
+ getCurrentCanvas : function () {
+ return frames[index];
+ },
+
+ onCanvasMousemove : function (event) {
+ //this.updateCursorInfo(event);
+ if (isClicked) {
+ var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+ this.drawAt(coords.x, coords.y);
+ }
+ },
+
+ createPreviews : function () {
+ var container = $('preview-list');
+ container.innerHTML = "";
+ for (var i = 0 ; i < frames.length ; i++) {
+ var preview = document.createElement("li");
+ if (index == i) {
+ preview.className = "selected";
+ }
+ var canvasPreview = document.createElement("canvas");
+
+ canvasPreview.setAttribute('width', '128');
+ canvasPreview.setAttribute('height', '128');
+
+ canvasPreview.setAttribute('onclick', 'piskel.setFrame('+i+')');
+
+ canvasPreview.getContext('2d').drawImage(frames[i], 0, 0, 320, 320, 0, 0 , 128, 128);
+ preview.appendChild(canvasPreview);
+
+
+ container.appendChild(preview);
+
+ }
+ },
+
+ refreshAnimatedPreview : function () {
+ var context = $('animated-preview').getContext('2d');
+ // erase canvas, verify proper way
+ context.fillStyle = "white";
+ context.fillRect(0, 0, 256, 256);
+
+ context.drawImage(frames[animIndex++], 0, 0, 320, 320, 0, 0 , 256, 256);
+ if (animIndex == frames.length) {
+ animIndex = 0;
+ }
+ },
+
+ setFrame : function (frameIndex) {
+ index = frameIndex;
+ $('canvas-container').innerHTML = "";
+ $('canvas-container').appendChild(this.getCurrentCanvas());
+ this.createPreviews();
+ },
+
+ updateCursorInfo : function (event) {
+ var cursor = $('cursorInfo');
+ cursor.style.top = event.clientY + 10 + "px";
+ cursor.style.left = event.clientX + 10 + "px";
+
+ var coordinates = this.getRelativeCoordinates(event.clientX, event.clientY)
+ cursor.innerHTML = [
+ "X : " + coordinates.x,
+ "Y : " + coordinates.y
+ ].join(", ");
+ },
+
+ onCanvasMousedown : function (event) {
+ isClicked = true;
+ button = event.button;
+ var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+ this.drawAt(coords.x, coords.y);
+ },
+
+ onCanvasMouseup : function (event) {
+ isClicked = false;
+ },
+
+ drawAt : function (x, y) {
+ if (x < 0 || y < 0 || x > 320 || y > 320) return;
+ var context = this.getCurrentCanvas().getContext('2d');
+ if (button == 0) {
+ context.fillStyle = "black";
+ } else {
+ context.fillStyle = "white";
+ }
+
+ context.fillRect(x - x%brushSize, y - y%brushSize, brushSize, brushSize);
+ this.createPreviews();
+ },
+
+ onCanvasContextMenu : function (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ event.cancelBubble = true;
+ return false;
+ },
+ getRelativeCoordinates : function (x, y) {
+ var canvas = this.getCurrentCanvas();
+ var canvasRect = canvas.getBoundingClientRect();
+ return {
+ x : x - canvasRect.left,
+ y : y - canvasRect.top
+ }
+ },
+
+ addFrame : function () {
+ var canvas = document.createElement("canvas");
+ canvas.setAttribute('width', '320');
+ canvas.setAttribute('height', '320');
+ canvas.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
+ canvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
+ canvas.setAttribute('onclick', 'piskel.onCanvasClick(arguments[0])');
+ var context = canvas.getContext('2d');
+
+ context.fillStyle = "white";
+ context.fillRect(0, 0, 320, 320);
+
+ if(frames[index]) { //is a valid canvas
+ context.drawImage(frames[index], 0, 0, 320, 320, 0, 0 , 320, 320);
+ }
+
+ frames.push(canvas);
+ this.setFrame(frames.length - 1);
+ }
+ };
+
+ window.piskel = piskel;
+ piskel.init();
+
+})(function(id){return document.getElementById(id)});
\ No newline at end of file