Prepare release 0.5.2

Current colors webworker

.gitignore

@@ -3,10 +3,28 @@
 
 # nodejs local installs
 node_modules
+npm-debug.log
+
+# node webkit cache
+cache
 
 # sublime text stuff (the -project should actually be shared, but then we'd have to share the same disk location)
 *.sublime-project
 *.sublime-workspace
 
 # git stackdumps
-*.stackdump
+*.stackdump
+
+
+# diffs
+diff.txt
+
+# build destination
+dest
+build/closure/closure_compiled_binary.js
+
+# plato report directory
+report
+
+# marked as private
+*.private.*

.travis.yml

@@ -1,7 +1,8 @@
 language: node_js
 node_js:
-  - 0.8
+  - 0.10
 before_install:
+  - npm update -g npm
   - npm install -g grunt-cli
   - git clone git://github.com/n1k0/casperjs.git ~/casperjs
   - cd ~/casperjs

Gruntfile.js

@@ -1,60 +1,261 @@
-/**
- * How to run grunt tasks:
- *   - At project root, run 'npm install' - It will install nodedependencies declared in package,json in <root>/.node_modules
- *   - install grunt CLI tools globally, run 'npm install -g grunt-cli'
- *   - run a grunt target defined in Gruntfiles.js, ex: 'grunt lint'
- *
- * Note: The 'ghost' grunt task have special deps on CasperJS and phantomjs.
- *       For now, It's configured to run only on TravisCI where these deps are 
- *       correctly defined.
- *       If you run this task locally, it may require some env set up first. 
- */
-
 module.exports = function(grunt) {
-	grunt.initConfig({
-		jshint: {
-			/*options: {
-				"evil": true,
-				"asi": true,
-				"smarttabs": true,
-				"eqnull": true
-			},*/
-			files: [
-				'Gruntfile.js',
-				'package.json',
-				'js/**/*.js',
-				'!js/lib/**/*.js' // Exclude lib folder (note the leading !)
-			]
-		},
-		connect: {
-			www: {
-				options: {
-					base: '.',
-					port: 4545
-				}
-			}
-		},
-		ghost: {
-			dist: {
-				filesSrc:  ['tests/integration/casperjs/*_test.js'],
-				options: {
-					args: {
-						baseUrl: 'http://localhost:' +
-							'<%= connect.www.options.port %>/'
-					},
-					direct: false,
-					logLevel: 'error',
-					printCommand: false,
-					printFilePaths: true
-				}
-			}
-		}
-	});
+  var dateFormat = require('dateformat');
+  var now = new Date();
+  var version = '-' + dateFormat(now, "yyyy-mm-dd-hh-MM");
 
-	grunt.loadNpmTasks('grunt-contrib-connect');
-	grunt.loadNpmTasks('grunt-contrib-jshint');
-	grunt.loadNpmTasks('grunt-ghost');
+  var mapToSrcFolder = function (path) {
+    return "src/" + path;
+  };
 
-	grunt.registerTask('lint', ['jshint']);
-	grunt.registerTask('test', ['jshint', 'connect', 'ghost']);
+  var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder).filter(function (path) {
+    return path.indexOf('devtools') === -1;
+  });
+  var piskelStyles = require('./src/piskel-style-list.js').styles.map(mapToSrcFolder);
+
+  var mapToCasperFolder = function (path) {
+    return "test/casperjs/" + path;
+  };
+
+  var casperEnvironments = {
+    'local' : {
+      suite : './test/casperjs/LocalTestSuite.js',
+      delay : 50
+    },
+    'travis' : {
+      suite : './test/casperjs/TravisTestSuite.js',
+      delay : 10000
+    }
+  };
+
+  var getCasperConfig = function (env) {
+    var conf = casperEnvironments[env];
+    var tests = require(conf.suite).tests.map(mapToCasperFolder);
+    return {
+      filesSrc : tests,
+      options : {
+        args : {
+          baseUrl : 'http://localhost:' + '<%= express.test.options.port %>/',
+          mode : '?debug',
+          delay : conf.delay
+        },
+        async : false,
+        direct : false,
+        logLevel : 'info',
+        printCommand : false,
+        printFilePaths : true
+      }
+    };
+  };
+
+  var getExpressConfig = function (source, port, host) {
+    var bases;
+    if (typeof source === 'string') {
+      bases = [source];
+    } else if (Array.isArray(source)) {
+      bases = source;
+    }
+
+    return {
+      options: {
+        port: port,
+        hostname : host || 'localhost',
+        bases: bases
+      }
+    };
+  };
+
+  // load all grunt tasks
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+    clean: {
+      before: ['dest']
+    },
+    leadingIndent : {
+      options: {
+        indentation : "spaces"
+      },
+      css : ['src/css/**/*.css']
+    },
+    jscs : {
+      options : {
+        "preset": "google",
+        "maximumLineLength": 120,
+        "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
+        "validateQuoteMarks": { "mark": "'", "escape": true },
+        "disallowMultipleVarDecl": "exceptUndefined",
+        "disallowSpacesInAnonymousFunctionExpression": null
+      },
+      js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
+    },
+    jshint: {
+      options: {
+        undef : true,
+        latedef : true,
+        browser : true,
+        trailing : true,
+        curly : true,
+        globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true, 'Q':true}
+      },
+      files: [
+        'Gruntfile.js',
+        'package.json',
+        'src/js/**/*.js',
+        '!src/js/**/lib/**/*.js' // Exclude lib folder (note the leading !)
+      ]
+    },
+    express: {
+      test: getExpressConfig(['src', 'test'], 9991),
+      regular: getExpressConfig('dest', 9001),
+      debug: getExpressConfig(['src', 'test'], 9901)
+    },
+    open : {
+      regular : {
+        path : 'http://localhost:9001/'
+      },
+      debug : {
+        path : 'http://localhost:9901/?debug'
+      }
+    },
+
+    watch: {
+      scripts: {
+        files: ['src/**/*.*'],
+        tasks: ['merge'],
+        options: {
+          spawn: false
+        }
+      }
+    },
+    ghost : {
+      'travis' : getCasperConfig('travis'),
+      'local' : getCasperConfig('local')
+    },
+    concat : {
+      js : {
+        options : {
+          separator : ';'
+        },
+        src : piskelScripts,
+        dest : 'dest/js/piskel-packaged' + version + '.js'
+      },
+      css : {
+        src : piskelStyles,
+        dest : 'dest/css/piskel-style-packaged' + version + '.css'
+      }
+    },
+    uglify : {
+      options : {
+        mangle : true
+      },
+      js : {
+        files : {
+          'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
+        }
+      }
+    },
+    replace: {
+      main: {
+        options: {
+          patterns: [
+            {
+              match: 'version',
+              replacement: version
+            }
+          ]
+        },
+        files: [
+          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'}
+        ]
+      },
+      editor: {
+        options: {
+          patterns: [
+            {
+              match: /templates\//g,
+              replacement: "../templates"+version+"/"
+            },{
+              match: /piskel-boot.js/g,
+              replacement: "../piskel-boot"+version+".js"
+            },{
+              match: /^(.|[\r\n])*<!--body-main-start-->/,
+              replacement: "",
+              description : "Remove everything before body-main-start comment"
+            },{
+              match: /<!--body-main-end-->(.|[\r\n])*$/,
+              replacement: "",
+              description : "Remove everything after body-main-end comment"
+            },{
+              match: /([\r\n])  /g,
+              replacement: "$1",
+              description : "Decrease indentation by one"
+            }
+          ]
+        },
+        files: [
+          {src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
+        ]
+      }
+    },
+    copy: {
+      main: {
+        files: [
+          {src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
+          {src: ['dest/piskel-boot.js'], dest: 'dest/piskel-boot' + version + '.js'},
+          {src: ['src/logo.png'], dest: 'dest/logo.png'},
+          {src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
+          {src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/js/lib/gif/gif.ie.worker.js'},
+          {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
+          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
+          {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
+        ]
+      }
+    },
+    karma: {
+      unit: {
+        configFile: 'karma.conf.js'
+      }
+    },
+    nodewebkit: {
+      options: {
+        version : "0.11.5",
+        build_dir: './dest/desktop/', // destination folder of releases.
+        mac: true,
+        win: true,
+        linux32: true,
+        linux64: true
+      },
+      src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
+    }
+  });
+
+  // Validate
+  grunt.registerTask('lint', ['jscs:js', 'leadingIndent:css', 'jshint']);
+
+  // karma/unit-tests task
+  grunt.registerTask('unit-test', ['karma']);
+
+  // Validate & Test
+  grunt.registerTask('test-travis', ['lint', 'unit-test', 'express:test', 'ghost:travis']);
+  // Validate & Test (faster version) will NOT work on travis !!
+  grunt.registerTask('test-local', ['lint', 'unit-test', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local-nolint', ['unit-test', 'express:test', 'ghost:local']);
+
+  grunt.registerTask('test', ['test-travis']);
+  grunt.registerTask('precommit', ['test-local']);
+
+  grunt.registerTask('build',  ['concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
+
+  // Validate & Build
+  grunt.registerTask('default', ['clean:before', 'lint', 'build']);
+
+  // Build stand alone app with nodewebkit
+  grunt.registerTask('desktop', ['default', 'nodewebkit']);
+
+  // Start webserver and watch for changes
+  grunt.registerTask('serve', ['build', 'express:regular', 'open:regular', 'express-keepalive', 'watch']);
+
+  // Start webserver on src folder, in debug mode
+  grunt.registerTask('serve-debug', ['express:debug', 'open:debug', 'express-keepalive']);
+  grunt.registerTask('play', ['serve-debug']);
 };

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<http://www.gnu.org/licenses/>.

README.md

@@ -1,70 +1,88 @@
 Piskel
 ======
 
-The goal is to create an easy-to-use/in-the-cloud/web-based 2d animation editor. 
+[![Travis Status](https://api.travis-ci.org/juliandescottes/piskel.png?branch=master)](https://travis-ci.org/juliandescottes/piskel) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
 
-Try it at : http://juliandescottes.github.com/piskel/
+A simple web-based tool for Spriting and Pixel art.
 
-29 May 2013 
------------------------------------
-Trying to wake up after a big 8 months nap. 
+![Piskel editor screenshot](https://screenletstore.appspot.com/img/8f03e768-ac59-11e3-b2a1-7f5a1b97c420.jpeg "Piskel editor screenshot")
 
-![nap](http://screenletstore.appspot.com/img/68e1690f-c8a3-11e2-a431-13a291e88f09.gif)
+You can try the standalone editor at **http://juliandescottes.github.io/piskel** or see it integrated in **http://piskelapp.com**.
 
-Also, new features :
-* color picker : ![color picker](http://screenletstore.appspot.com/img/18e24a63-c8a4-11e2-b479-13a291e88f09.png)
-* create an animated GIF from your piskel (uses jsgif, results may vary ...)
+Piskel is mainly developped by :
 
-16 Sep 2012
-------------------------------------
-Just a quick update to post a new screenshot. @grosbouddha is delivering features so fast, it's hard to keep up !
+* **[@juliandescottes](https://github.com/juliandescottes)**
+* **[@grosbouddha](https://github.com/grosbouddha)**
 
-![Screenshot 4](https://dl.dropbox.com/u/17803671/screen_piskel_4.png "Screenshot 4")
+## What's the point ?
 
-15 Sep 2012
-------------------------------------
-2 weeks already since the last README.md update, and so many changes ! There has been a continuous stream of features added to piskel by @grosboudda, @captainbrosset (thanks guys) and myself.
-I can't list everything here but quickly
-* __Tools__ : in addition to the regular Pen, you can now draw Rectangles, Circles. You can move stuff, copy, paste !
-* __Undo/redo__ : you can now cancel your actions using ctrl-z/ctrl-y 
-* __Drag and drop__ : move frames around in your framesheet, using drag and drop
+You can use Piskel to do two things :
+* **spriting** : create retro-style sprites for games
 
-And a screenshot, for the record : 
+![Megaman spritesheet](http://piskel-imgstore-a.appspot.com/img/c8081287-ac58-11e3-bd8c-b3c4036c0eee.png "Megaman spritesheet")
 
-![Screenshot 3](https://dl.dropbox.com/u/17803671/screen_piskel_3.png "Screenshot 3")
+* **pixelart** : create crazy/pretty pixelart animations for fun !
 
-30 Aug 2012
-------------------------------------
-Many new features in 2 days :
-* __save animations__, they are persisted in the cloud, and can be retrieved via a __unique URL__
-* __color picker__, no longer limited to black and white 
-* __local storage__, your work is automatically backed up locally
-* __color palette__, listing all the colors already used in the animation
-* __slider__ for choosing the speed of the preview
+![Rabbit jumping](http://piskel-imgstore-a.appspot.com/img/947f2dab-ac58-11e3-949a-b3c4036c0eee.gif "Rabit jumping")
 
-UI was slightly updated : 
+Integrated in **[piskelapp.com](http://piskelapp.com)**, you can share everything you work on with others as easily as you share a link.
 
-![Screenshot 2](https://dl.dropbox.com/u/17803671/screen_piskel_2.png "Screenshot 2")
+## Requirements
 
-28 Aug 2012
-------------------------------------
-Thanks to grosbouddha, new features added to Piskel :
-* modify preview speed !
-* remove frames
-* transparent background
+Piskel supports the following browsers :
+* **Chrome** (latest)
+* **Firefox** (latest)
+* **Internet Explorer** 11+
 
-24 Aug 2012 (aka the thing I did last night)
-------------------------------------
-* create small animations in __black__ (left click) and __white__ (right click)
-* and actually animations are always in __32x32__ zoomed 10 times
-* you can __not even save them__ ! 
-* add new frames for your animation
-* do small __ridiculous__ characters
+... and a fairly recent computer.
 
-Looks like this : 
-![Alt text](https://dl.dropbox.com/u/17803671/screen_piskel.png "Optional title")
+We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've never tested them but the gap shouldn't be huge.
 
-**On the left**, the list of frames for the animation. 
-**In the 'middle'**, the editable canvas.
-**On the right**, the LIVE-ANIMATED-PREVIEW (rocket science stuff going on here).
+## Offline version
+
+Offline builds are available. More details in the [dedicated wiki page](https://github.com/juliandescottes/piskel/wiki/Desktop-applications).
+
+## Built with
+
+The Piskel editor is purely built in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites.
+
+We also use the following **libraries** :
+* [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker
+* [gifjs](http://jnordberg.github.io/gif.js/) : generate animated GIFs in javascript, using webworkers
+* [supergif](https://github.com/buzzfeed/libgif-js) : modified version of SuperGif to parse and import GIFs
+* [jszip](https://github.com/Stuk/jszip) : create, read and edit .zip files with Javascript
+* [canvas-toBlob](https://github.com/eligrey/canvas-toBlob.js/) : shim for canvas toBlob
+* [jquery](http://jquery.com/) : used sporadically in the application
+* [bootstrap-tooltip](http://getbootstrap.com/javascript/#tooltips) : nice tooltips
+
+As well as some **icons** from the [Noun Project](http://thenounproject.com/) :
+* Folder by Simple Icons from The Noun Project
+* (and probably one or two others)
+
+
+## Contributing ?
+
+Help is always welcome !
+
+* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues).
+* **Participate** : Have a look at the [wiki](https://github.com/juliandescottes/piskel/wiki) to set up the development environment
+
+## License
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+## Mobile/Tablets
+
+There is no support for mobile for now.
 

all.html

@@ -1,39 +0,0 @@
-<!doctype html5>
-<html>
-<head>
-	<title>All piskels</title>
-</head>
-<body>
-	<script type="text/javascript">
-	(function () {
-		var loadAllPiskelIds = function (frameId) {
-			var xhr = new XMLHttpRequest();
-			// TODO: Change frameId to framesheetId on the backend
-			xhr.open('GET', 'http://2.piskel-app.appspot.com/all?l=' + frameId, true);
-			xhr.responseType = 'text';
-
-			xhr.onload = function(e) {
-				var ul = document.createElement("UL");
-				var innerHTML = "";
-				eval("var responseObject = " + this.responseText);
-				var keys = responseObject.keys;
-				var baseUrl = window.location.origin + "/piskel/?frameId=";
-				if (keys) {
-					for (var i = 0 ; i < keys.length ; i++) {
-						var key = keys[i];
-
-						innerHTML += "<li><a target='_blank' href='"+baseUrl+key+"'>"+key+"</a></li>" 
-					}
-				}
-				ul.innerHTML = innerHTML;
-				document.body.appendChild(ul);
-			};
-
-			xhr.send();
-	    };
-
-	    loadAllPiskelIds();
-	})();
-	</script>
-</body>
-</html>

css/style.css

@@ -1,309 +0,0 @@
-
-
-body {
-  background: radial-gradient(circle, #000, #373737);
-  /* 16/06/2013 : -webkit still needed for 
-  safari, safari mobile and android browser and chrome for android
-  cf http://caniuse.com/css-gradients */
-  background: -webkit-radial-gradient(circle, #000, #373737);
-}
-
-/**
- * Application layout
- */
-
-.main-wrapper {
-  position: absolute;
-  top: 5px;
-  right: 0;
-  bottom: 5px;
-  left: 0;
-}
-
-.column-wrapper {
-  text-align: center;
-  font-size: 0;
-  position: absolute;
-  left: 100px; /* Reserve room for tools on the left edge of the screen. */
-  top: 0;
-  right: 50px; /* Reserve room for actions on the right edge of the screen. */
-  bottom: 0;
-}
-
-.piskel-name-container {
-  overflow:hidden;
-  position:fixed;
-  top:10px;
-  left:10px;
-  color:white;
-  font-family:Tahoma;
-  z-index: 10000;
-}
-
-.piskel-name-container #piskel-name {
-  border :none;
-  color : lightgrey;
-  background: transparent;
-  font-size:16pt;
-
-}
-
-.column {
-  display: inline-block;
-}
-
-.left-column {
-  vertical-align: top;
-  height: 100%;
-  margin-right: 7px;
-}
-
-.main-column {
-  height: 100%;
-  position: relative;
-}
-
-.right-column {
-  vertical-align: top;
-  margin-left: 10px;
-}
-
-.drawing-canvas-container {
-  font-size: 0;
-}
-
-.sticky-section {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 1000;
-}
-
-.sticky-section .sticky-section-wrap {
-  display: table;
-  height: 100%;
-}
-
-.sticky-section .vertical-centerer {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.left-sticky-section.sticky-section {
-  left: 0;
-  max-width: 100px;
-}
-
-.left-sticky-section .tool-icon {
-  float: left;
-}
-
-.right-sticky-section.sticky-section {
-  right: 0;
-  width: 47px;
-
-  -webkit-transition: all 200ms ease-out;
-  -moz-transition: all 200ms ease-out;
-  -ms-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-}
-
-.right-sticky-section .tool-icon {
-  float: right;
-  margin-right: 0;
-}
-
-.drawer {
-
-}
-
-.drawer-content {
-  overflow: hidden;
-  background-color: #444;
-  height: 550px;
-  max-height: 100%;
-  width: 280px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-/** Righty sticky drawer expanded state. */
-
-.right-sticky-section.expanded {
-  right: 280px;
-}
-
-.right-sticky-section.expanded .tool-icon {
-  margin-right: 1px;
-}
-
-.right-sticky-section .tool-icon.has-expanded-drawer {
-  position: relative;
-  background-color: #444;
-  margin-right: 0;
-  padding-right: 1px;
-}
-
-.settings-section {
-  margin: 10px 20px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #ccc;
-  text-shadow: 1px 1px #000;
-}
-
-.settings-title {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  text-transform: uppercase;
-  border-bottom: 1px #aaa solid;
-  padding-bottom: 5px;
-}
-
-.settings-item {}
-
-.background-picker-wrapper {
-  overflow: hidden;
-  padding: 10px 5px 20px 5px;
-}
-
-.background-picker {
-  cursor: pointer;
-  float: left;
-  height: 35px;
-  width: 35px;
-  background-color: transparent;
-  margin-right: 15px;
-  padding: 1px;
-  position: relative;
-}
-
-.background-picker:after {
-  content: " ";
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  bottom: -2px;
-  left: -2px; 
-}
-
-.background-picker:hover:after {
-  border: #eee 1px solid;
-}
-
-.background-picker.selected:after {
-  border: gold 1px solid;
-}
-
-/**
- * Canvases layout
- */
-
-.canvas {
-  position: relative;
-  z-index: 1;
-}
-
-.canvas-container {
-  position: relative;
-  display: block;
-}
-
-.canvas-container .canvas-background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.light-picker-background,
-.light-canvas-background .canvas-background {
-  background: url(../img/canvas_background/light_canvas_background.png) repeat;
-}
-
-.medium-picker-background,
-.medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
-}
-
-.lowcont-medium-picker-background,
-.lowcont-medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
-}
-
-.lowcont-dark-picker-background,
-.lowcont-dark-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
-}
-
-
-.canvas.canvas-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-}
-
-
-/**
- * Animated preview styles.
- */
-
-.preview-container {
-  border : 0px Solid black;
-  border-radius:5px 0px 0px 5px;
-  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
-  font-size: 0;
-}
-
-.preview-container canvas {
-  border : 0px Solid transparent;
-}
-
-.display-fps {
-  float: left;
-  color: #aaa;
-  font-size: 12px;
-  min-width: 55px;
-  vertical-align: bottom;
-  line-height: 24px;
-}
-
-.range-fps {
-  overflow: hidden;
-}
-
-/** 
- * User messages 
- */
-.user-message {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background-color: #F9EDBE;
-  padding: 10px 47px;
-  border-top-left-radius: 7px;
-  color: #222;
-  border: #F0C36D 1px solid;
-  border-right: 0;
-  border-bottom: 0;
-  font-weight: bold;
-  font-size: 13px; 
-  z-index: 10000;
-  max-width: 300px;
-}
-
-.user-message .close {
-  position: absolute;
-  top: 6px;
-  right: 17px;
-  color: gray;
-  font-weight: bold;
-  cursor: pointer;
-  font-size: 18px;
-}
-
-.user-message .close:hover {
-  color: black;
-}

index.html

@@ -1,188 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
-  <title>Piskel</title>
-  <meta name="description" content="">
-  <meta name="author" content="Julian Descottes">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" href="css/reset.css">
-  <link rel="stylesheet" type="text/css" href="css/style.css">
-  <link rel="stylesheet" type="text/css" href="css/tools.css">
-  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
-  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
-  <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
-</head>
-<body>
-  <div class="piskel-name-container">
-    <input readonly id="piskel-name" type="text" value=""/>
-  </div>
-  <div id="main-wrapper" class="main-wrapper">
-    <div class="sticky-section left-sticky-section" id="tool-section">
-      <div class="sticky-section-wrap">
-        <div class="vertical-centerer">
-          <ul id="tools-container" class="tools-wrapper"></ul>
-          <div class="palette-wrapper">
-            <div class="tool-icon tool-color-picker">
-              <input id="color-picker" class="color {hash:true}" type="text" value="" />
-              <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
-            </div>
-            <div class="tool-icon tool-palette">
-              <div id="palette" class="palette">
-                <span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="application-action-section" class="sticky-section right-sticky-section">
-      <div class="sticky-section-wrap">
-        <div class="vertical-centerer">
-          <div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
-          <a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
-          <div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
-          <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
-            <span class="label">GIF</span>
-          </div>
-          <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
-            <span class="label">PNG</span>
-          </div>
-        </div>
-        <div class="drawer vertical-centerer">
-          <div class="drawer-content">
-            <div class="settings-section">
-              <div class="settings-title">
-                Canvas settings:
-              </div>
-              <div class="settings-item">
-                <label>Background:</label>
-                <div id="background-picker-wrapper" class="background-picker-wrapper">
-                  <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
-                        rel="tooltip" data-placement="bottom" title="light / high contrast">
-                  </div>
-                  <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
-                        rel="tooltip" data-placement="bottom" title="medium / high contrast">
-                  </div>
-                  <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
-                        rel="tooltip" data-placement="bottom" title="medium / low contrast">
-                  </div>
-                  <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
-                        rel="tooltip" data-placement="bottom" title="dark / low contrast">
-                  </div>
-                </div>
-              </div>
-              <div class="settings-item">
-                <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="column-wrapper" class="column-wrapper">
-      <div class='column left-column'>
-        
-        <!-- List of frames: -->
-        <div id="preview-list-wrapper" class="preview-list-wrapper">
-          <div id="preview-list-scroller" class="preview-list-scroller">
-            <ul class="preview-list" id="preview-list"></ul>
-          </div>
-          <div class="top-overflow"></div>
-          <div class="bottom-overflow"></div>
-        </div>
-      </div>
-
-      <div class='column main-column'>
-        <!-- Drawing area: -->
-        <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
-          <div class="canvas-background"></div>
-        </div>
-      </div>
-
-      <div class="column right-column">
-        <!-- Animation preview: -->
-        <div class='preview-container'>
-          <div id='preview-canvas-container' class="canvas-container">
-            <div class="canvas-background"></div>
-          </div>
-          <div>
-            <span id="display-fps" class="display-fps">12 FPS</span>
-            <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
-          </div>   
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <!-- Core libraries: -->
-  <script src="js/lib/jquery-1.8.0.js"></script>
-  <script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
-  <script src="js/lib/pubsub.js"></script>
-  <script src="js/lib/bootstrap/bootstrap.js"></script> 
-
-  <!-- GIF Encoding libraries -->
-  <script src="js/lib/gif/GIFEncoder.js"></script>
-  <script src="js/lib/gif/b64.js"></script>
-  <script src="js/lib/gif/NeuQuant.js"></script>
-  <script src="js/lib/gif/LZWEncoder.js"></script>
-
-  <!-- Application wide configuration -->
-  <script src="js/Constants.js"></script>
-  <script src="js/Events.js"></script>
-  
-  <!-- Libraries -->
-  <script src="js/utils/core.js"></script>
-  <script src="js/utils/PixelUtils.js"></script>
-  <script src="js/utils/CanvasUtils.js"></script>
-  <script src="js/utils/UserSettings.js"></script>
-  <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
-
-  <!-- Application libraries-->
-  <script src="js/rendering/DrawingLoop.js"></script>
-  <!-- Models -->
-  <script src="js/model/Frame.js"></script>
-  <script src="js/model/FrameSheet.js"></script>
-  <script src="js/selection/SelectionManager.js"></script>
-  <script src="js/selection/BaseSelection.js"></script>
-  <script src="js/selection/RectangularSelection.js"></script>
-  <script src="js/selection/ShapeSelection.js"></script>
-  <!-- Rendering -->
-  <script src="js/rendering/CanvasRenderer.js"></script>
-  <script src="js/rendering/FrameRenderer.js"></script>
-  <script src="js/rendering/SpritesheetRenderer.js"></script>
-  <!-- Controllers -->
-  <script src="js/controller/DrawingController.js"></script>
-  <script src="js/controller/PreviewFilmController.js"></script>
-  <script src="js/controller/AnimatedPreviewController.js"></script>
-  <script src="js/controller/ToolController.js"></script>
-  <script src="js/controller/PaletteController.js"></script>
-  <script src="js/controller/NotificationController.js"></script>
-  <script src="js/controller/SettingsController.js"></script>
-  <!-- Services -->
-  <script src="js/service/LocalStorageService.js"></script>
-  <script src="js/service/HistoryService.js"></script>
-  <script src="js/service/KeyboardEventService.js"></script>  
-  <!-- Tools-->
-  <script src="js/drawingtools/BaseTool.js"></script>
-  <script src="js/drawingtools/SimplePen.js"></script>
-  <script src="js/drawingtools/VerticalMirrorPen.js"></script>
-  <script src="js/drawingtools/Eraser.js"></script>
-  <script src="js/drawingtools/Stroke.js"></script>
-  <script src="js/drawingtools/PaintBucket.js"></script>
-  <script src="js/drawingtools/Rectangle.js"></script>
-  <script src="js/drawingtools/Circle.js"></script>
-  <script src="js/drawingtools/Move.js"></script>
-  <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
-  <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
-  <script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
-  <script src="js/drawingtools/ColorPicker.js"></script>
-  
-  <!-- Application controller and initialization -->
-  <script src="js/piskel.js"></script>
-</body>
-</html>

js/Constants.js

@@ -1,36 +0,0 @@
-// TODO(grosbouddha): put under pskl namespace.
-var Constants = {
-    DEFAULT_SIZE : {
-        height : 32,
-        width : 32
-    },
-
-    MAX_HEIGHT : 128,
-    MAX_WIDTH : 128,
-
-    DEFAULT_PEN_COLOR : '#000000',  
-    TRANSPARENT_COLOR : 'TRANSPARENT',
-    
-    /*
-     * Fake semi-transparent color used to highlight transparent
-     * strokes and rectangles:
-     */
-    SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
-
-    /*
-     * When a tool is hovering the drawing canvas, we highlight the eventual
-     * pixel target with this color:
-     */
-    TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)',
-    
-    /*
-     * Default entry point for piskel web service:
-     */
-    PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com',
-
-    GRID_STROKE_WIDTH: 1,
-    GRID_STROKE_COLOR: "lightgray",
-
-    LEFT_BUTTON : "left_button_1",
-    RIGHT_BUTTON : "right_button_2"
-};

js/Events.js

@@ -1,64 +0,0 @@
-// TODO(grosbouddha): put under pskl namespace.
-Events = {
-    
-    TOOL_SELECTED : "TOOL_SELECTED",
-    TOOL_RELEASED : "TOOL_RELEASED",
-    PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
-    PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
-    SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
-    SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
-
-    /**
-     *  When this event is emitted, a request is sent to the localstorage
-     *  Service to save the current framesheet. The storage service 
-     *  may not immediately store data (internal throttling of requests).
-     */
-    LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
-
-    CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
-
-    /**
-     * Event to request a refresh of the display.
-     * A bit overkill but, it's just workaround in our current drawing system.
-     * TODO: Remove or rework when redraw system is refactored.
-     */
-    REFRESH: "REFRESH",
-
-    /**
-     * Temporary event to bind the redraw of right preview film to the canvas.
-     * This redraw should be driven by model updates.
-     * TODO(vincz): Remove.
-     */
-    REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
-
-    /**
-     * Fired each time a user setting change.
-     * The payload will be:
-     *   1st argument: Name of the settings
-     *   2nd argument: New value
-     */
-    USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
-    
-    /**
-     * The framesheet was reseted and is now probably drastically different.
-     * Number of frames, content of frames, color used for the palette may have changed.
-     */
-    FRAMESHEET_RESET: "FRAMESHEET_RESET",
-
-    FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
-
-    CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
-
-    SELECTION_CREATED: "SELECTION_CREATED",
-    SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
-    SELECTION_DISMISSED: "SELECTION_DISMISSED",
-    
-    SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
-    HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
-
-    UNDO: "UNDO",
-    REDO: "REDO",
-    CUT: "CUT",
-    COPY: "COPY",
-    PASTE: "PASTE"    
-};

js/controller/AnimatedPreviewController.js

@@ -1,67 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl.controller");
-    ns.AnimatedPreviewController = function (framesheet, container, dpi) {
-        this.framesheet = framesheet;
-        this.container = container;
-
-        this.elapsedTime = 0;
-        this.currentIndex = 0;
-
-        this.fps = parseInt($("#preview-fps")[0].value, 10);
-        
-        var renderingOptions = {
-            "dpi": this.calculateDPI_()
-        };
-        this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
-
-        $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
-    };
-
-    ns.AnimatedPreviewController.prototype.init = function () {
-        // the oninput event won't work on IE10 unfortunately, but at least will provide a
-        // consistent behavior across all other browsers that support the input type range
-        // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
-        $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
-    };
-
-    ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
-        this.setFPS(parseInt($("#preview-fps")[0].value, 10));
-    };
-
-    ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
-        this.fps = fps;
-        $("#preview-fps").val(this.fps);
-        $("#display-fps").html(this.fps + " FPS");
-    };
-
-    ns.AnimatedPreviewController.prototype.render = function (delta) {
-        this.elapsedTime += delta;
-        var index = Math.floor(this.elapsedTime / (1000/this.fps));
-        if (index != this.currentIndex) {
-            this.currentIndex = index;
-            if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
-                this.currentIndex = 0;
-                this.elapsedTime = 0;
-            }
-            this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
-        }
-    };
-
-    /**
-     * Calculate the preview DPI depending on the framesheet size
-     */
-    ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
-        var previewSize = 200,
-            framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
-            framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
-        // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
-        
-        //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
-        return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
-    };
-
-    ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
-        this.dpi = this.calculateDPI_();
-        this.renderer.updateDPI(this.dpi);
-    };
-})();

js/controller/DrawingController.js

@@ -1,313 +0,0 @@
-(function () {
-  var ns = $.namespace("pskl.controller");
-  ns.DrawingController = function (framesheet, container) {
-    /**
-     * @public
-     */
-    this.framesheet = framesheet;
-    
-    /**
-     * @public
-     */
-    this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
-
-    /**
-     * @private
-     */
-    this.container = container;
-
-    // TODO(vincz): Store user prefs in a localstorage string ?
-    var renderingOptions = {
-      "dpi": this.calculateDPI_(),
-      "supportGridRendering" : true
-    };
-    
-    this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
-    this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
-    
-    this.renderer.init(framesheet.getCurrentFrame());
-    this.overlayRenderer.init(this.overlayFrame);
-
-    // State of drawing controller:
-    this.isClicked = false;
-    this.isRightClicked = false;
-    this.previousMousemoveTime = 0;
-    this.currentToolBehavior = null;
-    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
-
-    this.initMouseBehavior();
-
-    $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
-      console.log("Tool selected: ", toolBehavior);
-      this.currentToolBehavior = toolBehavior;
-    }, this));
-
-    /**
-     * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
-     *     Find a better place to store that. Perhaps PaletteController?
-     */
-    $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Primary color selected: ", color);
-      this.primaryColor = color;
-      $.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
-    }, this));
-    $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Secondary color selected: ", color);
-      this.secondaryColor = color;
-      $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
-    }, this));
-
-    $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
-
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
-    $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
-
-    this.updateDPI_();
-  };
-
-  ns.DrawingController.prototype.initMouseBehavior = function() {
-    var body = $('body');
-        this.container.mousedown($.proxy(this.onMousedown_, this));
-        this.container.mousemove($.proxy(this.onMousemove_, this));
-        body.mouseup($.proxy(this.onMouseup_, this));
-        
-        // Deactivate right click:
-        body.contextmenu(this.onCanvasContextMenu_);
-  };
-
-
-
-  ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
-      if (this.dpiUpdateTimer) {
-        window.clearInterval(this.dpiUpdateTimer);
-      }
-      this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
-  },
-
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
-    if(settingsName == pskl.UserSettings.SHOW_GRID) {
-      this.updateDPI_();
-    }
-  },
-
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.onMousedown_ = function (event) {
-      this.isClicked = true;
-      
-      if(event.button == 2) { // right click
-        this.isRightClicked = true;
-        $.publish(Events.CANVAS_RIGHT_CLICKED);
-      }
-
-      var coords = this.getSpriteCoordinates(event);
-      
-      this.currentToolBehavior.applyToolAt(
-        coords.col, coords.row,
-        this.getCurrentColor_(),
-        this.framesheet.getCurrentFrame(),
-        this.overlayFrame,
-        this.wrapEvtInfo_(event)
-      );      
-        
-      $.publish(Events.LOCALSTORAGE_REQUEST);
-    };
-
-    /**
-   * @private
-   */
-    ns.DrawingController.prototype.onMousemove_ = function (event) {
-      var currentTime = new Date().getTime();
-      // Throttling of the mousemove event:
-      if ((currentTime - this.previousMousemoveTime) > 40 ) {
-        var coords = this.getSpriteCoordinates(event);
-        if (this.isClicked) {
-       
-          this.currentToolBehavior.moveToolAt(
-            coords.col, coords.row,
-            this.getCurrentColor_(),
-            this.framesheet.getCurrentFrame(),
-            this.overlayFrame,
-            this.wrapEvtInfo_(event)
-          );
-      
-          // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
-          // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
-          // you don't need to draw anything when mousemoving and you request useless localStorage.
-          $.publish(Events.LOCALSTORAGE_REQUEST);
-        } else {
-
-          this.currentToolBehavior.moveUnactiveToolAt(
-            coords.col, coords.row,
-            this.getCurrentColor_(),
-            this.framesheet.getCurrentFrame(),
-            this.overlayFrame,
-            this.wrapEvtInfo_(event)
-          );
-        }
-        this.previousMousemoveTime = currentTime;
-      }
-    };
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.onMouseup_ = function (event) {
-      if(this.isClicked || this.isRightClicked) {
-        // A mouse button was clicked on the drawing canvas before this mouseup event,
-        // the user was probably drawing on the canvas.
-        // Note: The mousemove movement (and the mouseup) may end up outside
-        // of the drawing canvas.
-
-        this.isClicked = false;
-        this.isRightClicked = false;
-
-        var coords = this.getSpriteCoordinates(event);
-        //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
-        this.currentToolBehavior.releaseToolAt(
-          coords.col, coords.row,
-          this.getCurrentColor_(),
-          this.framesheet.getCurrentFrame(),
-          this.overlayFrame,
-          this.wrapEvtInfo_(event)
-        );
-
-        $.publish(Events.TOOL_RELEASED);
-      }
-    },
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
-      var evtInfo = {};
-      if (event.button === 0) {
-        evtInfo.button = Constants.LEFT_BUTTON;
-      } else if (event.button == 2) {
-        evtInfo.button = Constants.RIGHT_BUTTON;
-      }
-      return evtInfo;
-    },    
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
-      var canvasPageOffset = this.container.offset();
-      return {
-        x : clientX - canvasPageOffset.left,
-        y : clientY - canvasPageOffset.top
-      };
-    };
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
-        var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
-        return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
-    };
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.getCurrentColor_ = function () {
-      if(this.isRightClicked) {
-        return this.secondaryColor;
-      } else {
-        return this.primaryColor;
-      }
-    };
-
-    /**
-     * @private
-     */
-    ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
-      if ($(event.target).closest('#drawing-canvas-container').length) {
-        // Deactivate right click on drawing canvas only.
-        event.preventDefault();
-        event.stopPropagation();
-        event.cancelBubble = true;
-        return false;
-      }   
-    };
-
-  ns.DrawingController.prototype.render = function () {
-    this.renderFrame();
-    this.renderOverlay();
-  };
-
-  ns.DrawingController.prototype.renderFrame = function () {
-    var frame = this.framesheet.getCurrentFrame();
-    var serializedFrame = frame.serialize();
-    if (this.serializedFrame != serializedFrame) {
-      if (!frame.isSameSize(this.overlayFrame)) {
-        this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
-      }
-      this.serializedFrame = serializedFrame;
-      this.renderer.render(frame);
-    }
-  };
-
-  ns.DrawingController.prototype.renderOverlay = function () {
-    var serializedOverlay = this.overlayFrame.serialize();
-    if (this.serializedOverlay != serializedOverlay) {
-      this.serializedOverlay = serializedOverlay;
-      this.overlayRenderer.render(this.overlayFrame);
-    }
-  };
-
-  ns.DrawingController.prototype.forceRendering_ = function () {
-    this.serializedFrame = this.serializedOverlay = null;
-  };
-
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.calculateDPI_ = function() {
-    var availableViewportHeight = $('#main-wrapper').height(),
-        leftSectionWidth = $('.left-column').outerWidth(true),
-        rightSectionWidth = $('.right-column').outerWidth(true),
-        availableViewportWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth,
-        framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
-        framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
-
-    if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
-      availableViewportWidth = availableViewportWidth - (framePixelWidth * Constants.GRID_STROKE_WIDTH);
-      availableViewportHeight = availableViewportHeight - (framePixelHeight * Constants.GRID_STROKE_WIDTH);
-    }
-
-    var dpi = pskl.PixelUtils.calculateDPI(
-      availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
-
-    return dpi;
-  };
-
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.updateDPI_ = function() {
-    var dpi = this.calculateDPI_();
-    this.renderer.updateDPI(dpi);
-    this.overlayRenderer.updateDPI(dpi);
-
-    var currentFrameHeight =  this.framesheet.getCurrentFrame().getHeight();
-    var canvasHeight = currentFrameHeight * dpi;
-    if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
-        canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
-    }
-    
-    var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
-    $('#column-wrapper').css({
-      'top': verticalGapInPixel + 'px',
-      'height': canvasHeight + 'px'
-    });
-
-    this.forceRendering_();
-  };
-})();

js/controller/PaletteController.js

@@ -1,116 +0,0 @@
-(function () {
-  var ns = $.namespace("pskl.controller");
-
-  ns.PaletteController = function () {
-    this.paletteRoot = null;
-    this.paletteColors = [];
-  };
-
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
-    var inputPicker = $(evt.target);
-    if(evt.data.isPrimary) {
-      $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
-    }
-    else {
-      $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
-    }
-  };
-  
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.addColorToPalette_ = function (color) {
-    if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
-      this.paletteColors.push(color);
-    }
-  };
-
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.addColorsToPalette_ = function (colors) {
-    for(var color in colors) {
-      this.addColorToPalette_(color);
-    }
-  };
-
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
-    var selectedColor = $(event.target).data("color");
-    var isLeftClick = (event.which == 1);
-    var isRightClick = (event.which == 3);
-    if (isLeftClick) {
-      $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
-    } else if (isRightClick) {
-      $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
-    }
-  };
-
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
-    if (color == Constants.TRANSPARENT_COLOR) {
-      // We can set the current palette color to transparent.
-      // You can then combine this transparent color with an advanced
-      // tool for customized deletions. 
-      // Eg: bucket + transparent: Delete a colored area
-      //     Stroke + transparent: hollow out the equivalent of a stroke
-
-      // The colorpicker can't be set to a transparent state.
-      // We set its background to white and insert the
-      // string "TRANSPARENT" to mimic this state:
-      colorPicker[0].color.fromString("#fff");
-      colorPicker.val(Constants.TRANSPARENT_COLOR);
-    } else {
-      colorPicker[0].color.fromString(color);
-    }
-  };
-
-  /**
-   * @public
-   */
-  ns.PaletteController.prototype.init = function(framesheet) {
-      
-    this.paletteRoot = $("#palette");
-    this.framesheet = framesheet;
-
-    // Initialize palette:
-    this.addColorsToPalette_(this.framesheet.getUsedColors());
-
-    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
-      this.addColorsToPalette_(this.framesheet.getUsedColors());
-    }, this));
-
-    this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
-    
-    $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#color-picker'));
-      this.addColorToPalette_(color);
-    }, this));
-
-    $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#secondary-color-picker'));
-      this.addColorToPalette_(color);
-    }, this));
-
-    // Initialize colorpickers:
-    var colorPicker = $('#color-picker');
-    colorPicker.val(Constants.DEFAULT_PEN_COLOR);
-    colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
-
-
-    var secondaryColorPicker = $('#secondary-color-picker');
-    secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
-    secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
-
-  };
-})();
-
-
-

js/controller/PreviewFilmController.js

@@ -1,217 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl.controller");
-    ns.PreviewFilmController = function (framesheet, container, dpi) {
-
-        this.framesheet = framesheet;
-        this.container = container;
-        this.dpi = this.calculateDPI_();
-
-        this.redrawFlag = true;
-
-        $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
-        $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
-        $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
-
-        $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
-        this.updateScrollerOverflows();
-    };
-
-    ns.PreviewFilmController.prototype.init = function() {};
-
-    ns.PreviewFilmController.prototype.addFrame = function () {
-        this.framesheet.addEmptyFrame();
-        this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
-        this.updateScrollerOverflows();
-    };
-
-    ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
-        this.redrawFlag = true;
-    };
-
-    ns.PreviewFilmController.prototype.refreshDPI_ = function () {
-        this.dpi = this.calculateDPI_();
-    };
-
-    ns.PreviewFilmController.prototype.render = function () {
-        if (this.redrawFlag) {
-            // TODO(vincz): Full redraw on any drawing modification, optimize.
-            this.createPreviews_();
-            this.redrawFlag = false;
-        }
-    };
-
-    ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
-        var scroller = $('#preview-list-scroller');
-        var scrollerHeight = scroller.height();
-        var scrollTop = scroller.scrollTop();
-        var scrollerContentHeight = $('#preview-list').height();
-        var treshold = $('.top-overflow').height();
-        var overflowTop = false,
-            overflowBottom = false;
-        if (scrollerHeight < scrollerContentHeight) {
-            if (scrollTop > treshold) {
-                overflowTop = true;
-            }
-            var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
-            if (scrollBottom > treshold) {
-                overflowBottom = true;
-            }
-        }
-        var wrapper = $('#preview-list-wrapper');
-        wrapper.toggleClass('top-overflow-visible', overflowTop);
-        wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
-    };
-
-    ns.PreviewFilmController.prototype.createPreviews_ = function () {
-        
-        this.container.html("");
-        // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
-        $(".tooltip").remove();
-
-        var frameCount = this.framesheet.getFrameCount();
-
-        for (var i = 0, l = frameCount; i < l ; i++) {
-            this.container.append(this.createPreviewTile_(i));
-        }
-        // Append 'new empty frame' button
-        var newFrameButton = document.createElement("div");
-        newFrameButton.id = "add-frame-action";
-        newFrameButton.className = "add-frame-action";
-        newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
-        this.container.append(newFrameButton);
-
-        $(newFrameButton).click(this.addFrame.bind(this));
-
-        var needDragndropBehavior = (frameCount > 1);
-        if(needDragndropBehavior) {
-            this.initDragndropBehavior_();
-        }
-        this.updateScrollerOverflows();
-    };
-
-
-    /**
-     * @private
-     */
-    ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
-        
-        $("#preview-list").sortable({
-          placeholder: "preview-tile-drop-proxy",
-          update: $.proxy(this.onUpdate_, this),
-          items: ".preview-tile"
-        });
-        $("#preview-list").disableSelection();
-    };
-
-    /**
-     * @private
-     */
-    ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
-        var originFrameId = parseInt(ui.item.data("tile-number"), 10);
-        var targetInsertionId = $('.preview-tile').index(ui.item);
-
-        this.framesheet.moveFrame(originFrameId, targetInsertionId);
-        this.framesheet.setCurrentFrameIndex(targetInsertionId);
-
-        // TODO(grosbouddha): move localstorage request to the model layer?
-        $.publish(Events.LOCALSTORAGE_REQUEST);
-    };
-
-
-    /**
-     * @private
-     * TODO(vincz): clean this giant rendering function & remove listeners.
-     */
-    ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
-        var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
-        
-        var previewTileRoot = document.createElement("li");
-        var classname = "preview-tile";
-        previewTileRoot.setAttribute("data-tile-number", tileNumber);
-
-        if (this.framesheet.getCurrentFrame() == currentFrame) {
-            classname += " selected";
-        }
-        previewTileRoot.className = classname;
-
-        var canvasContainer = document.createElement("div");
-        canvasContainer.className = "canvas-container";
-        
-        var canvasBackground = document.createElement("div");
-        canvasBackground.className = "canvas-background";
-        canvasContainer.appendChild(canvasBackground);
-        
-        previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
-
-        var cloneFrameButton = document.createElement("button");
-        cloneFrameButton.setAttribute('rel', 'tooltip');
-        cloneFrameButton.setAttribute('data-placement', 'right');
-        cloneFrameButton.setAttribute('title', 'Duplicate this frame');
-        cloneFrameButton.className = "tile-overlay duplicate-frame-action";
-        previewTileRoot.appendChild(cloneFrameButton);
-        cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
-
-        // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
-        // is to make this update function (#createPreviewTile) less aggressive.
-        var renderingOptions = {"dpi": this.dpi };
-        var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
-        currentFrameRenderer.init(currentFrame);
-        
-        previewTileRoot.appendChild(canvasContainer);
-
-        if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
-            // Add 'remove frame' button.
-            var deleteButton = document.createElement("button");
-            deleteButton.setAttribute('rel', 'tooltip');
-            deleteButton.setAttribute('data-placement', 'right');
-            deleteButton.setAttribute('title', 'Delete this frame');
-            deleteButton.className = "tile-overlay delete-frame-action";
-            deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
-            previewTileRoot.appendChild(deleteButton);
-
-            // Add 'dragndrop handle'.
-            var dndHandle = document.createElement("div");
-            dndHandle.className = "tile-overlay dnd-action";
-            previewTileRoot.appendChild(dndHandle);
-        }
-        var tileCount = document.createElement("div");
-        tileCount.className = "tile-overlay tile-count";
-        tileCount.innerHTML = tileNumber;
-        previewTileRoot.appendChild(tileCount);
-        
-
-        return previewTileRoot;
-    };
-
-    ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
-        // has not class tile-action:
-        if(!evt.target.classList.contains('tile-overlay')) {
-            this.framesheet.setCurrentFrameIndex(index);
-        }    
-    };
-
-    ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
-        this.framesheet.removeFrameByIndex(index);
-        $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
-        this.updateScrollerOverflows();
-    };
-
-    ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
-        this.framesheet.duplicateFrameByIndex(index);
-        $.publish(Events.LOCALSTORAGE_REQUEST);  // Should come from model
-        this.framesheet.setCurrentFrameIndex(index + 1);
-        this.updateScrollerOverflows();
-    };
-
-    /**
-     * Calculate the preview DPI depending on the framesheet size
-     */
-    ns.PreviewFilmController.prototype.calculateDPI_ = function () {
-        var previewSize = 120,
-            framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
-            framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
-        // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
-
-        return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
-    };
-})();

js/controller/SettingsController.js

@@ -1,45 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl.controller");
-  
-    ns.SettingsController = function () {};
-
-    /**
-     * @public
-     */
-    ns.SettingsController.prototype.init = function() {
-
-        // Highlight selected background picker:
-        var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
-        $('#background-picker-wrapper')
-            .find('.background-picker[data-background-class=' + backgroundClass + ']')
-            .addClass('selected');
-
-        // Initial state for grid display:
-        var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
-        $('#show-grid').prop('checked', show_grid);
-
-        // Expand drawer when clicking 'Settings' tab.
-        $('#settings').click(function(evt) {
-            $('.right-sticky-section').toggleClass('expanded');
-            $('#settings').toggleClass('has-expanded-drawer');
-        });
-
-        // Handle grid display changes:
-        $('#show-grid').change($.proxy(function(evt) {
-            var checked = $('#show-grid').prop('checked');
-            pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
-        }, this));
-
-        // Handle canvas background changes:
-        $('#background-picker-wrapper').click(function(evt) {
-          var target = $(evt.target).closest('.background-picker');
-          if (target.length) {
-            var backgroundClass = target.data('background-class');
-            pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
-
-            $('.background-picker').removeClass('selected');
-            target.addClass('selected');
-          }
-        });
-    };
-})();

js/controller/ToolController.js

@@ -1,99 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl.controller");
-
-    
-    ns.ToolController = function () {
-	
-        this.toolInstances = {
-            "simplePen" : new pskl.drawingtools.SimplePen(),
-            "verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
-            "eraser" : new pskl.drawingtools.Eraser(),
-            "paintBucket" : new pskl.drawingtools.PaintBucket(),
-            "stroke" : new pskl.drawingtools.Stroke(),
-            "rectangle" : new pskl.drawingtools.Rectangle(),
-            "circle" : new pskl.drawingtools.Circle(),
-            "move" : new pskl.drawingtools.Move(),
-            "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
-            "shapeSelect" : new pskl.drawingtools.ShapeSelect(),
-            "colorPicker" : new pskl.drawingtools.ColorPicker()
-        };
-
-        this.currentSelectedTool = this.toolInstances.simplePen;
-        this.previousSelectedTool = this.toolInstances.simplePen;
-    };
-
-    /**
-     * @private
-     */
-    ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
-        var stage = $("body");
-        var previousSelectedToolClass = stage.data("selected-tool-class");
-        if(previousSelectedToolClass) {
-          stage.removeClass(previousSelectedToolClass);
-        }
-        stage.addClass(tool.toolId);
-        stage.data("selected-tool-class", tool.toolId);
-    };
-
-    /**
-     * @private
-     */
-    ns.ToolController.prototype.selectTool_ = function(tool) {
-        console.log("Selecting Tool:" , this.currentSelectedTool);
-        this.currentSelectedTool = tool;
-        this.activateToolOnStage_(this.currentSelectedTool);
-        $.publish(Events.TOOL_SELECTED, [tool]);
-    };
-
-    /**
-     * @private
-     */
-    ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
-        var target = $(evt.target);
-        var clickedTool = target.closest(".tool-icon");
-
-        if(clickedTool.length) {
-            for(var tool in this.toolInstances) {
-                if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
-                    this.selectTool_(this.toolInstances[tool]);
-
-                    // Show tool as selected:
-                    $('#tool-section .tool-icon.selected').removeClass('selected');
-                    clickedTool.addClass('selected');
-                }
-            }
-        }
-    };
-
-    /**
-     * @private
-     */
-    ns.ToolController.prototype.createToolMarkup_ = function() {
-        var currentTool, toolMarkup = '', extraClass;
-        // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
-        for (var toolKey in this.toolInstances) {
-            currentTool = this.toolInstances[toolKey];
-            extraClass = currentTool.toolId;
-            if (this.currentSelectedTool == currentTool) {
-                extraClass = extraClass + " selected";
-            }
-            toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + currentTool.toolId +
-                            '" title="' + currentTool.helpText + '"></li>';
-        }
-        $('#tools-container').html(toolMarkup);
-    };
-
-    /**
-     * @public
-     */
-    ns.ToolController.prototype.init = function() {
-
-        this.createToolMarkup_();
-
-        // Initialize tool:
-        // Set SimplePen as default selected tool:
-        this.selectTool_(this.toolInstances.simplePen);
-        // Activate listener on tool panel:
-        $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
-    };
-})();

js/drawingtools/BaseTool.js

@@ -1,72 +0,0 @@
-/*
- * @provide pskl.drawingtools.BaseTool
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.BaseTool = function() {};
-
-	ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
-	
-	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
-
-	ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
-		if (overlay.containsPixel(col, row)) {
-			if (!isNaN(this.highlightedPixelCol) &&
-				!isNaN(this.highlightedPixelRow) &&
-				(this.highlightedPixelRow != row ||
-					this.highlightedPixelCol != col)) {
-
-				// Clean the previously highlighted pixel:
-				overlay.clear();
-			}
-
-			// Show the current pixel targeted by the tool:
-			overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
-
-			this.highlightedPixelCol = col;
-			this.highlightedPixelRow = row;	
-		}
-	};
-
-	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
-
-	/**
-	 * Bresenham line algorihtm: Get an array of pixels from
-	 * start and end coordinates.
-	 *
-	 * http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
-	 * http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
-	 *
-	 * @private
-	 */
-	ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
-		
-		var pixels = [];
-		var dx = Math.abs(x1-x0);
-		var dy = Math.abs(y1-y0);
-		var sx = (x0 < x1) ? 1 : -1;
-		var sy = (y0 < y1) ? 1 : -1;
-		var err = dx-dy;
-
-		while(true){
-
-			// Do what you need to for this
-			pixels.push({"col": x0, "row": y0});
-
-			if ((x0==x1) && (y0==y1)) break;
-			var e2 = 2*err;
-			if (e2>-dy){
-				err -= dy;
-				x0  += sx;
-			}
-			if (e2 < dx) {
-				err += dx;
-				y0  += sy;
-			}
-		}
-		return pixels;
-	};
-})();

js/drawingtools/Circle.js

@@ -1,85 +0,0 @@
-/*
- * @provide pskl.drawingtools.Circle
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Circle = function() {
-		this.toolId = "tool-circle";
-		this.helpText = "Circle tool";
-		
-		// Circle's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.Circle, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.startCol = col;
-		this.startRow = row;
-		
-		// Drawing the first point of the rectangle in the fake overlay canvas:
-		overlay.setPixel(col, row, color);
-	};
-
-	ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		overlay.clear();
-		if(color == Constants.TRANSPARENT_COLOR) {
-			color = Constants.SELECTION_TRANSPARENT_COLOR;
-		}
-
-		// draw in overlay
-		this.drawCircle_(col, row, color, overlay);
-	};
-
-	/**
-	 * @override
-	 */
-	ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
-		overlay.clear();
-		if(frame.containsPixel(col, row)) { // cancel if outside of canvas
-			// draw in frame to finalize
-			this.drawCircle_(col, row, color, frame);
-		}
-	};
-
-	ns.Circle.prototype.drawCircle_ = function (col, row, color, targetFrame) {
-		var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
-		for(var i = 0; i< circlePoints.length; i++) {
-			// Change model:
-			targetFrame.setPixel(circlePoints[i].col, circlePoints[i].row, color);
-		}
-	};
-
-	ns.Circle.prototype.getCirclePixels_ = function (x0, y0, x1, y1) {
-		var coords = pskl.PixelUtils.getOrderedRectangleCoordinates(x0, y0, x1, y1);
-		var xC = (coords.x0 + coords.x1)/2;
-		var yC = (coords.y0 + coords.y1)/2;
-		
-		var rX = coords.x1 - xC;
-		var rY = coords.y1 - yC;
-
-		var pixels = [];
-		var x, y, angle;
-		for (x = coords.x0 ; x < coords.x1 ; x++) {
-			angle = Math.acos((x - xC)/rX);
-			y = Math.round(rY * Math.sin(angle) + yC);
-			pixels.push({"col": x, "row": y});
-			pixels.push({"col": 2*xC - x, "row": 2*yC - y});
-		}
-
-		for (y = coords.y0 ; y < coords.y1 ; y++) {
-			angle = Math.asin((y - yC)/rY);
-			x = Math.round(rX * Math.cos(angle) + xC);
-			pixels.push({"col": x, "row": y});
-			pixels.push({"col": 2*xC - x, "row": 2*yC - y});
-		}
-		return pixels;
-	};
-})();

js/drawingtools/ColorPicker.js

@@ -1,29 +0,0 @@
-/*
- * @provide pskl.drawingtools.ColorPicker
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.ColorPicker = function() {
-		this.toolId = "tool-colorpicker";
-		this.helpText = "Color picker";
-	};
-
-	pskl.utils.inherit(ns.ColorPicker, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, context) {
-		if (frame.containsPixel(col, row)) {
-			var sampledColor = frame.getPixel(col, row);
-			if (context.button == Constants.LEFT_BUTTON) {
-				$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
-			} else if (context.button == Constants.RIGHT_BUTTON) {
-				$.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
-			}
-		}
-	};
-})();

js/drawingtools/Eraser.js

@@ -1,23 +0,0 @@
-/*
- * @provide pskl.drawingtools.Eraser
- *
- * @require Constants
- * @require pskl.utils
- */
- (function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Eraser = function() {
-		this.toolId = "tool-eraser";
-		this.helpText = "Eraser tool";
-	};
-
-	pskl.utils.inherit(ns.Eraser, ns.SimplePen);
-
-	/**
-	 * @override
-	 */
-	ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay);
-	};
-})();

js/drawingtools/Move.js

@@ -1,54 +0,0 @@
-/*
- * @provide pskl.drawingtools.Move
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Move = function() {
-		this.toolId = "tool-move";
-		this.helpText = "Move tool";
-		
-		// Stroke's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.Move, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.startCol = col;
-		this.startRow = row;
-		this.frameClone = frame.clone();
-	};
-
-	ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {	
-		var colDiff = col - this.startCol, rowDiff = row - this.startRow;
-		this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
-	};
-
-	ns.Move.prototype.shiftFrame = function (colDiff, rowDiff, frame, reference) {
-		var color;
-		for (var col = 0 ; col < frame.getWidth() ; col++) {
-			for (var row = 0 ; row < frame.getHeight() ; row++) {
-				if (reference.containsPixel(col - colDiff, row - rowDiff)) {
-					color = reference.getPixel(col - colDiff, row - rowDiff);
-				} else {
-					color = Constants.TRANSPARENT_COLOR;
-				}
-				frame.setPixel(col, row, color);
-			}
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
-		this.moveToolAt(col, row, color, frame, overlay);
-	};
-})();

js/drawingtools/PaintBucket.js

@@ -1,36 +0,0 @@
-/*
- * @provide pskl.drawingtools.PaintBucket
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.PaintBucket = function() {
-		this.toolId = "tool-paint-bucket";
-		this.helpText = "Paint bucket tool";
-	};
-
-	pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);
-
-	/**
-	 * @override
-	 */
-	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-
-		pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
-	};
-})();
-
-
-
-
-
-
-
-
-
-
-
-
-

js/drawingtools/Rectangle.js

@@ -1,59 +0,0 @@
-/*
- * @provide pskl.drawingtools.Rectangle
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Rectangle = function() {
-		this.toolId = "tool-rectangle";
-		this.helpText = "Rectangle tool";
-		
-		// Rectangle's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.startCol = col;
-		this.startRow = row;
-		
-		// Drawing the first point of the rectangle in the fake overlay canvas:
-		overlay.setPixel(col, row, color);
-	};
-
-	ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		overlay.clear();
-		if(color == Constants.TRANSPARENT_COLOR) {
-			color = Constants.SELECTION_TRANSPARENT_COLOR;
-		}
-
-		// draw in overlay
-		this.drawRectangle_(col, row, color, overlay);
-	};
-
-	/**
-	 * @override
-	 */
-	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
-		overlay.clear();
-		if(frame.containsPixel(col, row)) { // cancel if outside of canvas
-			// draw in frame to finalize
-			this.drawRectangle_(col, row, color, frame);
-		}
-	};
-
-	ns.Rectangle.prototype.drawRectangle_ = function (col, row, color, targetFrame) {
-		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
-		for(var i = 0; i< strokePoints.length; i++) {
-			// Change model:
-			targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-		}
-	};
-})();

js/drawingtools/SimplePen.js

@@ -1,49 +0,0 @@
-/*
- * @provide pskl.drawingtools.SimplePen
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.SimplePen = function() {
-		this.toolId = "tool-pen";
-		this.helpText = "Pen tool";
-
-		this.previousCol = null;
-		this.previousRow = null;
-
-	};
-
-	pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		if (frame.containsPixel(col, row)) {
-			frame.setPixel(col, row, color);
-		}
-		this.previousCol = col;
-		this.previousRow = row;
-	};
-
-	ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
-			// The pen movement is too fast for the mousemove frequency, there is a gap between the
-			// current point and the previously drawn one.
-			// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
-			var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
-			for(var i=0, l=interpolatedPixels.length; i<l; i++) {
-				var coords = interpolatedPixels[i];
-				this.applyToolAt(coords.col, coords.row, color, frame, overlay);
-			}
-		}
-		else {
-			this.applyToolAt(col, row, color, frame, overlay);
-		}
-
-		this.previousCol = col;
-		this.previousRow = row;
-	};
-})();

js/drawingtools/Stroke.js

@@ -1,80 +0,0 @@
-/*
- * @provide pskl.drawingtools.Stroke
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Stroke = function() {
-		this.toolId = "tool-stroke";
-		this.helpText = "Stroke tool";
-
-		// Stroke's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.Stroke, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.startCol = col;
-		this.startRow = row;
-		
-		// When drawing a stroke we don't change the model instantly, since the
-		// user can move his cursor to change the stroke direction and length
-		// dynamically. Instead we draw the (preview) stroke in a fake canvas that
-		// overlay the drawing canvas.
-		// We wait for the releaseToolAt callback to impact both the
-		// frame model and canvas rendering.
-
-		// The fake canvas where we will draw the preview of the stroke:
-		// Drawing the first point of the stroke in the fake overlay canvas:
-		overlay.setPixel(col, row, color);
-	};
-
-	ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		overlay.clear();
-
-		// When the user moussemove (before releasing), we dynamically compute the 
-		// pixel to draw the line and draw this line in the overlay canvas:
-		var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
-		
-		// Drawing current stroke:
-		for(var i = 0; i< strokePoints.length; i++) {
-
-			if(color == Constants.TRANSPARENT_COLOR) {
-				// When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas.
-				// If the stroke color is transparent, we won't be
-				// able to see it during the movement.
-				// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
-				// When the stroke tool will be released, It will draw a transparent stroke, 
-				// eg deleting the equivalent of a stroke.		
-				color = Constants.SELECTION_TRANSPARENT_COLOR;
-			}			
-			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
-		// If the stroke tool is released outside of the canvas, we cancel the stroke:
-		// TODO: Mutualize this check in common method
-		if(frame.containsPixel(col, row)) {
-			// The user released the tool to draw a line. We will compute the pixel coordinate, impact
-			// the model and draw them in the drawing canvas (not the fake overlay anymore)
-			var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
-			for(var i = 0; i< strokePoints.length; i++) {
-				// Change model:
-				frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-			}
-		} 
-		// For now, we are done with the stroke tool and don't need an overlay anymore:
-		overlay.clear();   
-	};
-})();

js/drawingtools/VerticalMirrorPen.js

@@ -1,46 +0,0 @@
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.VerticalMirrorPen = function() {
-		this.toolId = "tool-vertical-mirror-pen";
-		this.helpText = "vertical mirror pen tool";
-
-		this.swap = null;
-		this.mirroredPreviousCol = null;
-		this.mirroredPreviousRow = null;
-	};
-
-	pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
-	
-
-	ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
-		this.swap = this.previousCol;
-		this.previousCol = this.mirroredPreviousCol;
-	};
-
-	ns.VerticalMirrorPen.prototype.unsetMirrorContext = function() {
-		this.mirroredPreviousCol = this.previousCol;
-		this.previousCol = this.swap;
-	};
-
-	/**
-	 * @override
-	 */
-	ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
-
-		var mirroredCol = this.getSymmetricCol_(col, frame);
-		this.mirroredPreviousCol = mirroredCol;
-
-		this.setMirrorContext();
-		this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
-		this.unsetMirrorContext();
-	};
-
-	/**
-	 * @private
-	 */
-	ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
-		return frame.getWidth() - col - 1; 
-	};
-})();

js/drawingtools/selectiontools/BaseSelect.js

@@ -1,150 +0,0 @@
-/*
- * @provide pskl.drawingtools.BaseSelect
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.BaseSelect = function() {
-		this.secondaryToolId = "tool-move";
-		this.BodyRoot = $('body');
-		
-		// Select's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
-
-	/**
-	 * @override
-	 */
-	ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.startCol = col;
-		this.startRow = row;
-		
-		this.lastCol = col;
-		this.lastRow = row;
-		
-		// The select tool can be in two different state.
-		// If the inital click of the tool is not on a selection, we go in "select"
-		// mode to create a selection.
-		// If the initial click is on a previous selection, we go in "moveSelection"
-		// mode to allow to move the selection by drag'n dropping it.
-		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
-			
-			this.mode = "select";
-			this.onSelectStart_(col, row, color, frame, overlay);
-		}
-		else {
-
-			this.mode = "moveSelection";
-			this.onSelectionDragStart_(col, row, color, frame, overlay);
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		if(this.mode == "select") {
-			
-			this.onSelect_(col, row, color, frame, overlay);
-		}
-		else if(this.mode == "moveSelection") {
-			
-			this.onSelectionDrag_(col, row, color, frame, overlay);
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
-		if(this.mode == "select") {
-			
-			this.onSelectEnd_(col, row, color, frame, overlay);
-		} else if(this.mode == "moveSelection") {
-			
-			this.onSelectionDragEnd_(col, row, color, frame, overlay);
-		}
-	};
-
-
-	/**
-	 * If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
-	 * instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
-	 * @override
-	 */
-	ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
-		
-		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
-			// We're hovering the selection, show the move tool:
-			this.BodyRoot.addClass(this.toolId);
-			this.BodyRoot.removeClass(this.secondaryToolId);
-		} else {
-			// We're not hovering the selection, show create selection tool:
-			this.BodyRoot.addClass(this.secondaryToolId);
-			this.BodyRoot.removeClass(this.toolId);
-		}
-	};
-
-	/**
-	 * Move the overlay frame filled with semi-transparent pixels that represent the selection.
-	 * @private
-	 */
-	ns.BaseSelect.prototype.shiftOverlayFrame_ = function (colDiff, rowDiff, overlayFrame, reference) {
-		var color;
-		for (var col = 0 ; col < overlayFrame.getWidth() ; col++) {
-			for (var row = 0 ; row < overlayFrame.getHeight() ; row++) {
-				if (reference.containsPixel(col - colDiff, row - rowDiff)) {
-					color = reference.getPixel(col - colDiff, row - rowDiff);
-				} else {
-					color = Constants.TRANSPARENT_COLOR;
-				}
-				overlayFrame.setPixel(col, row, color);
-			}
-		}
-	};
-
-
-	// The list of callbacks to implement by specialized tools to implement the selection creation behavior.
-	/** @protected */
-	ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};
-	/** @protected */
-	ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {};
-	/** @protected */
-	ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {};
-
-
-	// The list of callbacks that define the drag'n drop behavior of the selection.
-	/** @private */
-	ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {
-		// Since we will move the overlayFrame in which  the current selection is rendered,
-		// we clone it to have a reference for the later shifting process.
-		this.overlayFrameReference = overlay.clone();
-	};
-	/** @private */
-	ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
-		var deltaCol = col - this.lastCol;
-		var deltaRow = row - this.lastRow;
-		
-		var colDiff = col - this.startCol, rowDiff = row - this.startRow;
-		
-		// Shifting selection on overlay frame:
-		this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
-
-		// Update selection model:
-		$.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
-
-		this.lastCol = col;
-		this.lastRow = row;	
-	};
-	/** @private */
-	ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) {
-		this.onSelectionDrag_(col, row, color, frame, overlay);
-	};
-
-
-})();

js/drawingtools/selectiontools/RectangleSelect.js

@@ -1,51 +0,0 @@
-/*
- * @provide pskl.drawingtools.RectangleSelect
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.RectangleSelect = function() {
-		this.toolId = "tool-rectangle-select";
-		this.helpText = "Rectangle selection tool";
-		
-		ns.BaseSelect.call(this);
-	};
-
-	pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
-	
-
-	/**
-	 * @override
-	 */
-	ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
-		// Drawing the first point of the rectangle in the fake overlay canvas:
-		overlay.setPixel(col, row, color);
-	};
-
-	/**
-	 * When creating the rectangle selection, we clear the current overlayFrame and
-	 * redraw the current rectangle based on the orgin coordinate and
-	 * the current mouse coordiinate in sprite.
-	 * @override
-	 */
-	ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {
-		overlay.clear();
-		if(this.startCol == col &&this.startRow == row) {
-			$.publish(Events.SELECTION_DISMISSED);
-		} else {
-			var selection = new pskl.selection.RectangularSelection(
-				this.startCol, this.startRow, col, row);
-			$.publish(Events.SELECTION_CREATED, [selection]);
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
-		this.onSelect_(col, row, color, frame, overlay);
-	};
-
-})();

js/drawingtools/selectiontools/ShapeSelect.js

@@ -1,34 +0,0 @@
-/*
- * @provide pskl.drawingtools.ShapeSelect
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.ShapeSelect = function() {
-		this.toolId = "tool-shape-select";
-		this.helpText = "Shape selection tool";
-		
-		ns.BaseSelect.call(this);
-	};
-
-	pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
-	
-
-	/**
-	 * For the shape select tool, you just need to click one time to create a selection.
-	 * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
-	 * @override
-	 */
-	ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
-		// Clean previous selection:
-		$.publish(Events.SELECTION_DISMISSED);
-		
-		// From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
-		var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
-		var selection = new pskl.selection.ShapeSelection(pixels);
-		$.publish(Events.SELECTION_CREATED, [selection]);
-	};
-
-})();

js/lib/gif/GIFEncoder.js

@@ -1,571 +0,0 @@
-/**
-* This class lets you encode animated GIF files
-* Base class :  http://www.java2s.com/Code/Java/2D-Graphics-GUI/AnimatedGifEncoder.htm
-* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
-* @author Thibault Imbert (AS3 version - bytearray.org)
-* @version 0.1 AS3 implementation
-*/
-
-
-	//import flash.utils.ByteArray;
-	//import flash.display.BitmapData;
-	//import flash.display.Bitmap;
-	//import org.bytearray.gif.encoder.NeuQuant
-	//import flash.net.URLRequestHeader;
-	//import flash.net.URLRequestMethod;
-	//import flash.net.URLRequest;
-	//import flash.net.navigateToURL;
-	
-	GIFEncoder = function()
-	{
-	    for(var i = 0, chr = {}; i < 256; i++)
-        chr[i] = String.fromCharCode(i);
-        
-      function ByteArray(){
-        this.bin = [];
-      }
-
-      ByteArray.prototype.getData = function(){
-        
-	      for(var v = '', l = this.bin.length, i = 0; i < l; i++)
-          v += chr[this.bin[i]];
-        return v;
-      }
-      ByteArray.prototype.writeByte = function(val){
-        this.bin.push(val);
-      }
-      ByteArray.prototype.writeUTFBytes = function(string){
-        for(var l = string.length, i = 0; i < l; i++)
-          this.writeByte(string.charCodeAt(i));
-      }
-      ByteArray.prototype.writeBytes = function(array, offset, length){
-        for(var l = length || array.length, i = offset||0; i < l; i++)
-          this.writeByte(array[i]);
-      }
-	
-	    var exports = {};
-		/*private*/ var width/*int*/ // image size
-  		/*private*/ var height/*int*/;
-	    /*private*/ var transparent/***/ = null; // transparent color if given
-	    /*private*/ var transIndex/*int*/; // transparent index in color table
-	    /*private*/ var repeat/*int*/ = -1; // no repeat
-	    /*private*/ var delay/*int*/ = 0; // frame delay (hundredths)
-	    /*private*/ var started/*Boolean*/ = false; // ready to output frames
-	    /*private*/ var out/*ByteArray*/;
-	    /*private*/ var image/*Bitmap*/; // current frame
-	    /*private*/ var pixels/*ByteArray*/; // BGR byte array from frame
-	    /*private*/ var indexedPixels/*ByteArray*/ // converted frame indexed to palette
-	    /*private*/ var colorDepth/*int*/; // number of bit planes
-	    /*private*/ var colorTab/*ByteArray*/; // RGB palette
-	    /*private*/ var usedEntry/*Array*/ = new Array; // active palette entries
-	    /*private*/ var palSize/*int*/ = 7; // color table size (bits-1)
-	    /*private*/ var dispose/*int*/ = -1; // disposal code (-1 = use default)
-	    /*private*/ var closeStream/*Boolean*/ = false; // close stream when finished
-	    /*private*/ var firstFrame/*Boolean*/ = true;
-	    /*private*/ var sizeSet/*Boolean*/ = false; // if false, get size from first frame
-	    /*private*/ var sample/*int*/ = 10; // default sample interval for quantizer
-		
-		/**
-		* Sets the delay time between each frame, or changes it for subsequent frames
-		* (applies to last frame added)
-		* int delay time in milliseconds
-		* @param ms
-		*/
-		
-		var setDelay = exports.setDelay = function setDelay(ms/*int*/)/*void*/
-		{
-			
-			delay = Math.round(ms / 10);
-			
-		}
-		
-		/**
-		* Sets the GIF frame disposal code for the last added frame and any
-		* 
-		* subsequent frames. Default is 0 if no transparent color has been set,
-		* otherwise 2.
-		* @param code
-		* int disposal code.
-		*/
-		
-		var setDispose = exports.setDispose = function setDispose(code/*int*/)/*void*/ 
-		{
-			
-			if (code >= 0) dispose = code;
-			
-		}
-		
-		/**
-		* Sets the number of times the set of GIF frames should be played. Default is
-		* 1; 0 means play indefinitely. Must be invoked before the first image is
-		* added.
-		* 
-		* @param iter
-		* int number of iterations.
-		* @return
-		*/
-		
-		var setRepeat = exports.setRepeat = function setRepeat(iter/*int*/)/*void*/ 
-		{
-			
-			if (iter >= 0) repeat = iter;
-			
-		}
-		
-		/**
-		* Sets the transparent color for the last added frame and any subsequent
-		* frames. Since all colors are subject to modification in the quantization
-		* process, the color in the final palette for each frame closest to the given
-		* color becomes the transparent color for that frame. May be set to null to
-		* indicate no transparent color.
-		* @param
-		* Color to be treated as transparent on display.
-		*/
-		
-		var setTransparent = exports.setTransparent = function setTransparent(c/*Number*/)/*void*/
-		{
-			
-			transparent = c;
-			
-		}
-		
-		/**
-		* The addFrame method takes an incoming BitmapData object to create each frames
-		* @param
-		* BitmapData object to be treated as a GIF's frame
-		*/
-		
-		var addFrame = exports.addFrame = function addFrame(im/*BitmapData*/, is_imageData)/*Boolean*/
-		{
-			
-			if ((im == null) || !started || out == null) 
-			{
-				throw new Error ("Please call start method before calling addFrame");
-				return false;
-			}
-			
-		    var ok/*Boolean*/ = true;
-			
-		    try {
-				if(!is_imageData){
-				  image = im.getImageData(0,0, im.canvas.width, im.canvas.height).data;
-				  if (!sizeSet) setSize(im.canvas.width, im.canvas.height);
-				}else{
-				  image = im;
-				}
-				getImagePixels(); // convert to correct format if necessary
-				analyzePixels(); // build color table & map pixels
-				
-				if (firstFrame) 
-				{
-					writeLSD(); // logical screen descriptior
-					writePalette(); // global color table
-					if (repeat >= 0) 
-					{
-						// use NS app extension to indicate reps
-						writeNetscapeExt();
-					}
-		      }
-			  
-			  writeGraphicCtrlExt(); // write graphic control extension
-		      writeImageDesc(); // image descriptor
-		      if (!firstFrame) writePalette(); // local color table
-		      writePixels(); // encode and write pixel data
-		      firstFrame = false;
-		    } catch (e/*Error*/) {
-		      ok = false;
-		    }
-		    
-			return ok;
-			
-		}
-		
-		/**
-		* Adds final trailer to the GIF stream, if you don't call the finish method
-		* the GIF stream will not be valid.
-		*/
-		
-		var finish = exports.finish = function finish()/*Boolean*/
-		{
-		    if (!started) return false;
-		    var ok/*Boolean*/ = true;
-		    started = false;
-		    try {
-		      out.writeByte(0x3b); // gif trailer
-		    } catch (e/*Error*/) {
-		      ok = false;
-		    }
-	
-		    return ok;
-			
-		}
-		
-		/**
-		* Resets some members so that a new stream can be started.
-		* This method is actually called by the start method
-		*/
-		
-		var reset = function reset ( )/*void*/
-		{
-			
-			// reset for subsequent use
-			transIndex = 0;
-			image = null;
-		    pixels = null;
-		    indexedPixels = null;
-		    colorTab = null;
-		    closeStream = false;
-		    firstFrame = true;
-			
-		}
-
-		/**
-		* * Sets frame rate in frames per second. Equivalent to
-		* <code>setDelay(1000/fps)</code>.
-		* @param fps
-		* float frame rate (frames per second)         
-		*/
-		
-		var setFrameRate = exports.setFrameRate = function setFrameRate(fps/*Number*/)/*void*/ 
-		{
-			
-			if (fps != 0xf) delay = Math.round(100/fps);
-			
-		}
-		
-		/**
-		* Sets quality of color quantization (conversion of images to the maximum 256
-		* colors allowed by the GIF specification). Lower values (minimum = 1)
-		* produce better colors, but slow processing significantly. 10 is the
-		* default, and produces good color mapping at reasonable speeds. Values
-		* greater than 20 do not yield significant improvements in speed.
-		* @param quality
-		* int greater than 0.
-		* @return
-		*/
-		
-		var setQuality = exports.setQuality = function setQuality(quality/*int*/)/*void*/
-		{
-			
-		    if (quality < 1) quality = 1;
-		    sample = quality;
-			
-		}
-		
-		/**
-		* Sets the GIF frame size. The default size is the size of the first frame
-		* added if this method is not invoked.
-		* @param w
-		* int frame width.
-		* @param h
-		* int frame width.
-		*/
-		
-		var setSize = exports.setSize = function setSize(w/*int*/, h/*int*/)/*void*/
-		{
-			
-			if (started && !firstFrame) return;
-		    width = w;
-		    height = h;
-		    if (width < 1)width = 320;
-		    if (height < 1)height = 240;
-		    sizeSet = true
-			
-		}
-		
-		/**
-		* Initiates GIF file creation on the given stream.
-		* @param os
-		* OutputStream on which GIF images are written.
-		* @return false if initial write failed.
-		* 
-		*/
-		
-		var start = exports.start = function start()/*Boolean*/
-		{
-			
-			reset(); 
-		    var ok/*Boolean*/ = true;
-		    closeStream = false;
-		    out = new ByteArray;
-		    try {
-		      out.writeUTFBytes("GIF89a"); // header
-		    } catch (e/*Error*/) {
-		      ok = false;
-		    }
-			
-		    return started = ok;
-			
-		}
-		
-		var cont = exports.cont = function cont()/*Boolean*/
-		{
-			
-		    reset(); 
-		    var ok/*Boolean*/ = true;
-		    closeStream = false;
-		    out = new ByteArray;
-			
-		    return started = ok;
-			
-		}
-		
-		/**
-		* Analyzes image colors and creates color map.
-		*/
-		
-		var analyzePixels = function analyzePixels()/*void*/
-		{
-		    
-			var len/*int*/ = pixels.length;
-		    var nPix/*int*/ = len / 3;
-		    indexedPixels = [];
-		    var nq/*NeuQuant*/ = new NeuQuant(pixels, len, sample);
-		    // initialize quantizer
-		    colorTab = nq.process(); // create reduced palette
-		    // map image pixels to new palette
-		    var k/*int*/ = 0;
-		    for (var j/*int*/ = 0; j < nPix; j++) {
-		      var index/*int*/ = nq.map(pixels[k++] & 0xff, pixels[k++] & 0xff, pixels[k++] & 0xff);
-		      usedEntry[index] = true;
-		      indexedPixels[j] = index;
-		    }
-		    pixels = null;
-		    colorDepth = 8;
-		    palSize = 7;
-		    // get closest match to transparent color if specified
-		    if (transparent != null) {
-		      	transIndex = findClosest(transparent);
-
-			    var r = colorTab[transIndex*3];
-			    var g = colorTab[transIndex*3+1];
-			    var b = colorTab[transIndex*3+2];
-			    var trans_indices = [];
-			    for (var i=0; i<colorTab.length; i+=3)
-			    {
-			        var index = i / 3;
-			        if (!usedEntry[index]) continue;
-			        if (colorTab[i] == r && colorTab[i+1] == g && colorTab[i+2] == b)
-			            trans_indices.push(index);
-			    }
-			    for (var i=0; i<indexedPixels.length; i++) {
-			        if (trans_indices.indexOf(indexedPixels[i]) >= 0) {
-			            indexedPixels[i] = transIndex;
-			        }
-			    }
-		    }
-		}
-		
-		/**
-		* Returns index of palette color closest to c
-		*
-		*/
-		
-		var findClosest = function findClosest(c/*Number*/)/*int*/
-		{
-			
-			if (colorTab == null) return -1;
-		    var r/*int*/ = (c & 0xFF0000) >> 16;
-		    var g/*int*/ = (c & 0x00FF00) >> 8;
-		    var b/*int*/ = (c & 0x0000FF);
-		    var minpos/*int*/ = 0;
-		    var dmin/*int*/ = 256 * 256 * 256;
-		    var len/*int*/ = colorTab.length;
-			
-		    for (var i/*int*/ = 0; i < len;) {
-		      var dr/*int*/ = r - (colorTab[i++] & 0xff);
-		      var dg/*int*/ = g - (colorTab[i++] & 0xff);
-		      var db/*int*/ = b - (colorTab[i] & 0xff);
-		      var d/*int*/ = dr * dr + dg * dg + db * db;
-		      var index/*int*/ = i / 3;
-		      if (usedEntry[index] && (d < dmin)) {
-		        dmin = d;
-		        minpos = index;
-		      }
-		      i++;
-		    }
-		    return minpos;
-			
-		}
-		
-		/**
-		* Extracts image pixels into byte array "pixels
-		*/
-		
-		var getImagePixels = function getImagePixels()/*void*/
-		{
-		    
-		    var w/*int*/ = width;
-		    var h/*int*/ = height;
-		    pixels = [];
-  			var data = image;
-		    var count/*int*/ = 0;
-		    
-		    for ( var i/*int*/ = 0; i < h; i++ )
-		    {
-		    	
-		    	for (var j/*int*/ = 0; j < w; j++ )
-		    	{
-		    		
-	        		var b = (i*w*4)+j*4;
-	        		pixels[count++] = data[b];
-	        		pixels[count++] = data[b+1];
-	        		pixels[count++] = data[b+2];
-		    		
-		    	}
-		    	
-		    }
-		    
-		}
-		
-		/**
-		* Writes Graphic Control Extension
-		*/
-		
-		var writeGraphicCtrlExt = function writeGraphicCtrlExt()/*void*/
-		{
-			out.writeByte(0x21); // extension introducer
-		    out.writeByte(0xf9); // GCE label
-		    out.writeByte(4); // data block size
-		    var transp/*int*/
-		    var disp/*int*/;
-		    if (transparent == null) {
-		      transp = 0;
-		      disp = 0; // dispose = no action
-		    } else {
-		      transp = 1;
-		      disp = 2; // force clear if using transparent color
-		    }
-		    if (dispose >= 0) {
-		      disp = dispose & 7; // user override
-		    }
-		    disp <<= 2;
-		    // packed fields
-		    out.writeByte(0 | // 1:3 reserved
-		        disp | // 4:6 disposal
-		        0 | // 7 user input - 0 = none
-		        transp); // 8 transparency flag
-		
-		    WriteShort(delay); // delay x 1/100 sec
-		    out.writeByte(transIndex); // transparent color index
-		    out.writeByte(0); // block terminator
-			
-		}
-		  
-		/**
-		* Writes Image Descriptor
-		*/
-		
-		var writeImageDesc = function writeImageDesc()/*void*/
-		{
-		  	
-		    out.writeByte(0x2c); // image separator
-		   	WriteShort(0); // image position x,y = 0,0
-		    WriteShort(0);
-		    WriteShort(width); // image size
-		    WriteShort(height);
-
-		    // packed fields
-		    if (firstFrame) {
-		      // no LCT - GCT is used for first (or only) frame
-		      out.writeByte(0);
-		    } else {
-		      // specify normal LCT
-		      out.writeByte(0x80 | // 1 local color table 1=yes
-		          0 | // 2 interlace - 0=no
-		          0 | // 3 sorted - 0=no
-		          0 | // 4-5 reserved
-		          palSize); // 6-8 size of color table
-		    }
-		}
-		
-		/**
-		* Writes Logical Screen Descriptor
-		*/
-		
-		var writeLSD = function writeLSD()/*void*/
-		{
-			
-			// logical screen size
-		    WriteShort(width);
-		    WriteShort(height);
-		    // packed fields
-		    out.writeByte((0x80 | // 1 : global color table flag = 1 (gct used)
-		        0x70 | // 2-4 : color resolution = 7
-		        0x00 | // 5 : gct sort flag = 0
-		        palSize)); // 6-8 : gct size
-		
-		    out.writeByte(0); // background color index
-		    out.writeByte(0); // pixel aspect ratio - assume 1:1
-			
-		}
-		
-		/**
-		* Writes Netscape application extension to define repeat count.
-		*/
-		
-		var writeNetscapeExt = function writeNetscapeExt()/*void*/
-		{
-			
-		    out.writeByte(0x21); // extension introducer
-		    out.writeByte(0xff); // app extension label
-		    out.writeByte(11); // block size
-		    out.writeUTFBytes("NETSCAPE" + "2.0"); // app id + auth code
-		    out.writeByte(3); // sub-block size
-		    out.writeByte(1); // loop sub-block id
-		    WriteShort(repeat); // loop count (extra iterations, 0=repeat forever)
-		    out.writeByte(0); // block terminator
-		
-		}
-		
-		/**
-		* Writes color table
-		*/
-		
-		var writePalette = function writePalette()/*void*/
-		{
-		    out.writeBytes(colorTab);
-		    var n/*int*/ = (3 * 256) - colorTab.length;
-		    for (var i/*int*/ = 0; i < n; i++) out.writeByte(0);
-			
-		}
-		
-		var WriteShort = function WriteShort (pValue/*int*/)/*void*/
-		{  	
-			
-		  	out.writeByte( pValue & 0xFF );
-		  	out.writeByte( (pValue >> 8) & 0xFF);
-			
-		}
-		
-		/**
-		* Encodes and writes pixel data
-		*/
-		
-		var writePixels = function writePixels()/*void*/
-		{
-			
-		    var myencoder/*LZWEncoder*/ = new LZWEncoder(width, height, indexedPixels, colorDepth);
-		    myencoder.encode(out);
-			
-		}
-		
-		/**
-		* retrieves the GIF stream
-		*/
-		var stream = exports.stream = function stream ( )/*ByteArray*/
-		{
-			
-			return out; 
-			
-		}
-		
-		var setProperties = exports.setProperties = function setProperties(has_start, is_first){
-		  started = has_start;
-		  firstFrame = is_first;
-		  //out = new ByteArray; //??
-		}
-		
-		return exports
-		  
-	}

js/lib/gif/LZWEncoder.js

@@ -1,328 +0,0 @@
-/**
-* This class handles LZW encoding
-* Adapted from Jef Poskanzer's Java port by way of J. M. G. Elliott.
-* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
-* @author Thibault Imbert (AS3 version - bytearray.org)
-* @version 0.1 AS3 implementation
-*/
-
-	//import flash.utils.ByteArray;
-	
-	LZWEncoder = function()
-	{
-	    var exports = {};
-		/*private_static*/ var EOF/*int*/ = -1;
-		/*private*/ var imgW/*int*/;
-		/*private*/ var imgH/*int*/
-		/*private*/ var pixAry/*ByteArray*/;
-		/*private*/ var initCodeSize/*int*/;
-		/*private*/ var remaining/*int*/;
-		/*private*/ var curPixel/*int*/;
-		
-		// GIFCOMPR.C - GIF Image compression routines
-		// Lempel-Ziv compression based on 'compress'. GIF modifications by
-		// David Rowley (mgardi@watdcsu.waterloo.edu)
-		// General DEFINEs
-		
-		/*private_static*/ var BITS/*int*/ = 12;
-		/*private_static*/ var HSIZE/*int*/ = 5003; // 80% occupancy
-		
-		// GIF Image compression - modified 'compress'
-		// Based on: compress.c - File compression ala IEEE Computer, June 1984.
-		// By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas)
-		// Jim McKie (decvax!mcvax!jim)
-		// Steve Davies (decvax!vax135!petsd!peora!srd)
-		// Ken Turkowski (decvax!decwrl!turtlevax!ken)
-		// James A. Woods (decvax!ihnp4!ames!jaw)
-		// Joe Orost (decvax!vax135!petsd!joe)
-		
-		/*private*/ var n_bits/*int*/ // number of bits/code
-		/*private*/ var maxbits/*int*/ = BITS; // user settable max # bits/code
-		/*private*/ var maxcode/*int*/ // maximum code, given n_bits
-		/*private*/ var maxmaxcode/*int*/ = 1 << BITS; // should NEVER generate this code
-		/*private*/ var htab/*Array*/ = new Array;
-		/*private*/ var codetab/*Array*/ = new Array;
-		/*private*/ var hsize/*int*/ = HSIZE; // for dynamic table sizing
-		/*private*/ var free_ent/*int*/ = 0; // first unused entry
-		
-		// block compression parameters -- after all codes are used up,
-		// and compression rate changes, start over.
-		
-		/*private*/ var clear_flg/*Boolean*/ = false;
-		
-		// Algorithm: use open addressing double hashing (no chaining) on the
-		// prefix code / next character combination. We do a variant of Knuth's
-		// algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime
-		// secondary probe. Here, the modular division first probe is gives way
-		// to a faster exclusive-or manipulation. Also do block compression with
-		// an adaptive reset, whereby the code table is cleared when the compression
-		// ratio decreases, but after the table fills. The variable-length output
-		// codes are re-sized at this point, and a special CLEAR code is generated
-		// for the decompressor. Late addition: construct the table according to
-		// file size for noticeable speed improvement on small files. Please direct
-		// questions about this implementation to ames!jaw.
-		
-		/*private*/ var g_init_bits/*int*/;
-		/*private*/ var ClearCode/*int*/;
-		/*private*/ var EOFCode/*int*/;
-		
-		// output
-		// Output the given code.
-		// Inputs:
-		// code: A n_bits-bit integer. If == -1, then EOF. This assumes
-		// that n_bits =< wordsize - 1.
-		// Outputs:
-		// Outputs code to the file.
-		// Assumptions:
-		// Chars are 8 bits long.
-		// Algorithm:
-		// Maintain a BITS character long buffer (so that 8 codes will
-		// fit in it exactly). Use the VAX insv instruction to insert each
-		// code in turn. When the buffer fills up empty it and start over.
-		
-		/*private*/ var cur_accum/*int*/ = 0;
-		/*private*/ var cur_bits/*int*/ = 0;
-		/*private*/ var masks/*Array*/ = [ 0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F, 0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF, 0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF ];
-		
-		// Number of characters so far in this 'packet'
-		/*private*/ var a_count/*int*/;
-		
-		// Define the storage for the packet accumulator
-		/*private*/ var accum/*ByteArray*/ = [];
-		
-		var LZWEncoder = exports.LZWEncoder = function LZWEncoder (width/*int*/, height/*int*/, pixels/*ByteArray*/, color_depth/*int*/)
-		{
-			
-			imgW = width;
-			imgH = height;
-			pixAry = pixels;
-			initCodeSize = Math.max(2, color_depth);
-			
-		}
-		
-		// Add a character to the end of the current packet, and if it is 254
-		// characters, flush the packet to disk.
-		var char_out = function char_out(c/*Number*/, outs/*ByteArray*/)/*void*/
-		{
-			accum[a_count++] = c;
-			if (a_count >= 254) flush_char(outs);
-			
-		}
-		
-		// Clear out the hash table
-		// table clear for block compress
-		
-		var cl_block = function cl_block(outs/*ByteArray*/)/*void*/
-		{
-			
-			cl_hash(hsize);
-			free_ent = ClearCode + 2;
-			clear_flg = true;
-			output(ClearCode, outs);
-			
-		}
-		
-		// reset code table
-		var cl_hash = function cl_hash(hsize/*int*/)/*void*/
-		{
-			
-			for (var i/*int*/ = 0; i < hsize; ++i) htab[i] = -1;
-			
-		}
-		
-		var compress = exports.compress = function compress(init_bits/*int*/, outs/*ByteArray*/)/*void*/
-		
-		{
-			var fcode/*int*/;
-			var i/*int*/ /* = 0 */;
-			var c/*int*/;
-			var ent/*int*/;
-			var disp/*int*/;
-			var hsize_reg/*int*/;
-			var hshift/*int*/;
-			
-			// Set up the globals: g_init_bits - initial number of bits
-			g_init_bits = init_bits;
-			
-			// Set up the necessary values
-			clear_flg = false;
-			n_bits = g_init_bits;
-			maxcode = MAXCODE(n_bits);
-	
-			ClearCode = 1 << (init_bits - 1);
-			EOFCode = ClearCode + 1;
-			free_ent = ClearCode + 2;
-	
-			a_count = 0; // clear packet
-		
-			ent = nextPixel();
-	
-			hshift = 0;
-			for (fcode = hsize; fcode < 65536; fcode *= 2)
-			  ++hshift;
-			hshift = 8 - hshift; // set hash code range bound
-	
-			hsize_reg = hsize;
-			cl_hash(hsize_reg); // clear hash table
-		
-			output(ClearCode, outs);
-		
-			outer_loop: while ((c = nextPixel()) != EOF)
-			
-			{
-				
-				fcode = (c << maxbits) + ent;
-				i = (c << hshift) ^ ent; // xor hashing
-	
-				if (htab[i] == fcode)
-				{
-				ent = codetab[i];
-				continue;
-				} else if (htab[i] >= 0) // non-empty slot
-				{
-					disp = hsize_reg - i; // secondary hash (after G. Knott)
-					if (i == 0)
-					disp = 1;
-					do 
-					{
-						
-						if ((i -= disp) < 0) i += hsize_reg;
-	
-						if (htab[i] == fcode)
-						{
-						ent = codetab[i];
-						continue outer_loop;
-						}
-					} while (htab[i] >= 0);
-				}
-	      
-				output(ent, outs);
-				ent = c;
-				if (free_ent < maxmaxcode)
-				{
-					codetab[i] = free_ent++; // code -> hashtable
-					htab[i] = fcode;
-				} else cl_block(outs);
-			}
-			
-			// Put out the final code.
-			output(ent, outs);
-			output(EOFCode, outs);
-			
-		}
-		
-		// ----------------------------------------------------------------------------
-		var encode = exports.encode = function encode(os/*ByteArray*/)/*void*/
-		{
-			os.writeByte(initCodeSize); // write "initial code size" byte
-			remaining = imgW * imgH; // reset navigation variables
-			curPixel = 0;
-			compress(initCodeSize + 1, os); // compress and write the pixel data
-			os.writeByte(0); // write block terminator
-			
-		}
-		
-		// Flush the packet to disk, and reset the accumulator
-		var flush_char = function flush_char(outs/*ByteArray*/)/*void*/
-		{
-			
-			if (a_count > 0)
-			{
-				outs.writeByte(a_count);
-				outs.writeBytes(accum, 0, a_count);
-				a_count = 0;
-			}
-			
-		}
-		
-		var MAXCODE = function MAXCODE(n_bits/*int*/)/*int*/
-		{
-			
-			return (1 << n_bits) - 1;
-			
-		}
-		
-		// ----------------------------------------------------------------------------
-		// Return the next pixel from the image
-		// ----------------------------------------------------------------------------
-		
-		var nextPixel = function nextPixel()/*int*/
-		{
-			
-			if (remaining == 0) return EOF;
-			
-			--remaining;
-			
-			var pix/*Number*/ = pixAry[curPixel++];
-			
-			return pix & 0xff;
-			
-		}
-		
-		var output = function output(code/*int*/, outs/*ByteArray*/)/*void*/
-		
-		{
-			cur_accum &= masks[cur_bits];
-			
-			if (cur_bits > 0) cur_accum |= (code << cur_bits);
-			else cur_accum = code;
-			
-			cur_bits += n_bits;
-			
-			while (cur_bits >= 8)
-			
-			{
-				
-				char_out((cur_accum & 0xff), outs);
-				cur_accum >>= 8;
-				cur_bits -= 8;
-				
-			}
-			
-			// If the next entry is going to be too big for the code size,
-			// then increase it, if possible.
-			
-			if (free_ent > maxcode || clear_flg)
-			{
-				
-				if (clear_flg)
-				{
-					
-					maxcode = MAXCODE(n_bits = g_init_bits);
-					clear_flg = false;
-					
-				} else
-				{
-					
-					++n_bits;
-					
-					if (n_bits == maxbits) maxcode = maxmaxcode;
-					
-					else maxcode = MAXCODE(n_bits);
-					
-				}
-				
-			}
-			
-			if (code == EOFCode) 
-			{
-				
-				// At EOF, write the rest of the buffer.
-				while (cur_bits > 0) 
-				{
-					
-					char_out((cur_accum & 0xff), outs);
-					cur_accum >>= 8;
-					cur_bits -= 8;
-				}
-				
-				
-				flush_char(outs);
-				
-			}
-			
-		}
-		LZWEncoder.apply(this, arguments);
-	   return exports;
-	}
-	

js/lib/gif/NeuQuant.js

@@ -1,668 +0,0 @@
-/*
-* NeuQuant Neural-Net Quantization Algorithm
-* ------------------------------------------
-* 
-* Copyright (c) 1994 Anthony Dekker
-* 
-* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994. See
-* "Kohonen neural networks for optimal colour quantization" in "Network:
-* Computation in Neural Systems" Vol. 5 (1994) pp 351-367. for a discussion of
-* the algorithm.
-* 
-* Any party obtaining a copy of these files from the author, directly or
-* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
-* world-wide, paid up, royalty-free, nonexclusive right and license to deal in
-* this software and documentation files (the "Software"), including without
-* limitation the rights to use, copy, modify, merge, publish, distribute,
-* sublicense, and/or sell copies of the Software, and to permit persons who
-* receive copies from any such party to do so, with the only requirement being
-* that this copyright notice remain intact.
-*/
- 
-/*
-* This class handles Neural-Net quantization algorithm
-* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
-* @author Thibault Imbert (AS3 version - bytearray.org)
-* @version 0.1 AS3 implementation
-*/
-
-	//import flash.utils.ByteArray;
-	
-	NeuQuant = function()
-	{
-	    var exports = {};
-		/*private_static*/ var netsize/*int*/ = 256; /* number of colours used */
-		
-		/* four primes near 500 - assume no image has a length so large */
-		/* that it is divisible by all four primes */
-		
-		/*private_static*/ var prime1/*int*/ = 499;
-		/*private_static*/ var prime2/*int*/ = 491;
-		/*private_static*/ var prime3/*int*/ = 487;
-		/*private_static*/ var prime4/*int*/ = 503;
-		/*private_static*/ var minpicturebytes/*int*/ = (3 * prime4);
-		
-		/* minimum size for input image */
-		/*
-		* Program Skeleton ---------------- [select samplefac in range 1..30] [read
-		* image from input file] pic = (unsigned char*) malloc(3*width*height);
-		* initnet(pic,3*width*height,samplefac); learn(); unbiasnet(); [write output
-		* image header, using writecolourmap(f)] inxbuild(); write output image using
-		* inxsearch(b,g,r)
-		*/
-
-		/*
-		* Network Definitions -------------------
-		*/
-		
-		/*private_static*/ var maxnetpos/*int*/ = (netsize - 1);
-		/*private_static*/ var netbiasshift/*int*/ = 4; /* bias for colour values */
-		/*private_static*/ var ncycles/*int*/ = 100; /* no. of learning cycles */
-		
-		/* defs for freq and bias */
-		/*private_static*/ var intbiasshift/*int*/ = 16; /* bias for fractions */
-		/*private_static*/ var intbias/*int*/ = (1 << intbiasshift);
-		/*private_static*/ var gammashift/*int*/ = 10; /* gamma = 1024 */
-		/*private_static*/ var gamma/*int*/ = (1 << gammashift);
-		/*private_static*/ var betashift/*int*/ = 10;
-		/*private_static*/ var beta/*int*/ = (intbias >> betashift); /* beta = 1/1024 */
-		/*private_static*/ var betagamma/*int*/ = (intbias << (gammashift - betashift));
-		
-		/* defs for decreasing radius factor */
-		/*private_static*/ var initrad/*int*/ = (netsize >> 3); /*
-	                                                         * for 256 cols, radius
-	                                                         * starts
-	                                                         */
-															 
-		/*private_static*/ var radiusbiasshift/*int*/ = 6; /* at 32.0 biased by 6 bits */
-		/*private_static*/ var radiusbias/*int*/ = (1 << radiusbiasshift);
-		/*private_static*/ var initradius/*int*/ = (initrad * radiusbias); /*
-	                                                                   * and
-	                                                                   * decreases
-	                                                                   * by a
-	                                                                   */
-																	   
-		/*private_static*/ var radiusdec/*int*/ = 30; /* factor of 1/30 each cycle */
-		
-		/* defs for decreasing alpha factor */
-		/*private_static*/ var alphabiasshift/*int*/ = 10; /* alpha starts at 1.0 */
-		/*private_static*/ var initalpha/*int*/ = (1 << alphabiasshift);
-		/*private*/ var alphadec/*int*/ /* biased by 10 bits */
-		
-		/* radbias and alpharadbias used for radpower calculation */
-		/*private_static*/ var radbiasshift/*int*/ = 8;
-		/*private_static*/ var radbias/*int*/ = (1 << radbiasshift);
-		/*private_static*/ var alpharadbshift/*int*/ = (alphabiasshift + radbiasshift);
-		
-		/*private_static*/ var alpharadbias/*int*/ = (1 << alpharadbshift);
-		
-		/*
-		* Types and Global Variables --------------------------
-		*/
-		
-		/*private*/ var thepicture/*ByteArray*//* the input image itself */
-		/*private*/ var lengthcount/*int*/; /* lengthcount = H*W*3 */
-		/*private*/ var samplefac/*int*/; /* sampling factor 1..30 */
-		
-		// typedef int pixel[4]; /* BGRc */
-		/*private*/ var network/*Array*/; /* the network itself - [netsize][4] */
-		/*protected*/ var netindex/*Array*/ = new Array();
-		
-		/* for network lookup - really 256 */
-		/*private*/ var bias/*Array*/ = new Array();
-		
-		/* bias and freq arrays for learning */
-		/*private*/ var freq/*Array*/ = new Array();
-		/*private*/ var radpower/*Array*/ = new Array();
-		
-		var NeuQuant = exports.NeuQuant = function NeuQuant(thepic/*ByteArray*/, len/*int*/, sample/*int*/)
-		{
-			
-			var i/*int*/;
-			var p/*Array*/;
-			
-			thepicture = thepic;
-			lengthcount = len;
-			samplefac = sample;
-			
-			network = new Array(netsize);
-			
-			for (i = 0; i < netsize; i++)
-			{
-				
-				network[i] = new Array(4);
-				p = network[i];
-				p[0] = p[1] = p[2] = (i << (netbiasshift + 8)) / netsize;
-				freq[i] = intbias / netsize; /* 1/netsize */
-				bias[i] = 0;
-			}
-			
-		}
-		
-		var colorMap = function colorMap()/*ByteArray*/
-		{
-			
-			var map/*ByteArray*/ = [];
-		    var index/*Array*/ = new Array(netsize);
-		    for (var i/*int*/ = 0; i < netsize; i++)
-		      index[network[i][3]] = i;
-		    var k/*int*/ = 0;
-		    for (var l/*int*/ = 0; l < netsize; l++) {
-		      var j/*int*/ = index[l];
-		      map[k++] = (network[j][0]);
-		      map[k++] = (network[j][1]);
-		      map[k++] = (network[j][2]);
-		    }
-		    return map;
-			
-		}
-		
-		/*
-	   * Insertion sort of network and building of netindex[0..255] (to do after
-	   * unbias)
-	   * -------------------------------------------------------------------------------
-	   */
-	   
-	   var inxbuild = function inxbuild()/*void*/
-	   {
-		   
-		  var i/*int*/;
-		  var j/*int*/;
-		  var smallpos/*int*/;
-		  var smallval/*int*/;
-		  var p/*Array*/;
-		  var q/*Array*/;
-		  var previouscol/*int*/
-		  var startpos/*int*/
-		  
-		  previouscol = 0;
-		  startpos = 0;
-		  for (i = 0; i < netsize; i++)
-		  {
-			  
-			  p = network[i];
-			  smallpos = i;
-			  smallval = p[1]; /* index on g */
-			  /* find smallest in i..netsize-1 */
-			  for (j = i + 1; j < netsize; j++)
-			  {
-				  q = network[j];
-				  if (q[1] < smallval)
-				  { /* index on g */
-				  
-					smallpos = j;
-					smallval = q[1]; /* index on g */
-				}
-			  }
-			  
-			  q = network[smallpos];
-			  /* swap p (i) and q (smallpos) entries */
-			  
-			  if (i != smallpos)
-			  {
-				  
-				  j = q[0];
-				  q[0] = p[0];
-				  p[0] = j;
-				  j = q[1];
-				  q[1] = p[1];
-				  p[1] = j;
-				  j = q[2];
-				  q[2] = p[2];
-				  p[2] = j;
-				  j = q[3];
-				  q[3] = p[3];
-				  p[3] = j;
-				  
-			  }
-			  
-			  /* smallval entry is now in position i */
-			  
-			  if (smallval != previouscol)
-			  
-			  {
-				  
-				netindex[previouscol] = (startpos + i) >> 1;
-				  
-				for (j = previouscol + 1; j < smallval; j++) netindex[j] = i;
-				  
-				previouscol = smallval;
-				startpos = i;
-				
-			  }
-			  
-			}
-			
-			netindex[previouscol] = (startpos + maxnetpos) >> 1;
-			for (j = previouscol + 1; j < 256; j++) netindex[j] = maxnetpos; /* really 256 */
-			
-	   }
-	   
-	   /*
-	   * Main Learning Loop ------------------
-	   */
-	   
-	   var learn = function learn()/*void*/ 
-	   
-	   {
-		   
-		   var i/*int*/;
-		   var j/*int*/;
-		   var b/*int*/;
-		   var g/*int*/
-		   var r/*int*/;
-		   var radius/*int*/;
-		   var rad/*int*/;
-		   var alpha/*int*/;
-		   var step/*int*/;
-		   var delta/*int*/;
-		   var samplepixels/*int*/;
-		   var p/*ByteArray*/;
-		   var pix/*int*/;
-		   var lim/*int*/;
-		   
-		   if (lengthcount < minpicturebytes) samplefac = 1;
-		   
-		   alphadec = 30 + ((samplefac - 1) / 3);
-		   p = thepicture;
-		   pix = 0;
-		   lim = lengthcount;
-		   samplepixels = lengthcount / (3 * samplefac);
-		   delta = samplepixels / ncycles;
-		   alpha = initalpha;
-		   radius = initradius;
-		   
-		   rad = radius >> radiusbiasshift;
-		   if (rad <= 1) rad = 0;
-		   
-		   for (i = 0; i < rad; i++) radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
-		   
-		   
-		   if (lengthcount < minpicturebytes) step = 3;
-		   
-		   else if ((lengthcount % prime1) != 0) step = 3 * prime1;
-		   
-		   else
-		   
-		   {
-			   
-			   if ((lengthcount % prime2) != 0) step = 3 * prime2;
-			   
-			   else
-			   
-			   {
-				   
-				   if ((lengthcount % prime3) != 0) step = 3 * prime3;
-				   
-				   else step = 3 * prime4;
-				   
-			   }
-			   
-		   }
-		   
-		   i = 0;
-		   
-		   while (i < samplepixels)
-		   
-		   {
-			   
-			   b = (p[pix + 0] & 0xff) << netbiasshift;
-			   g = (p[pix + 1] & 0xff) << netbiasshift;
-			   r = (p[pix + 2] & 0xff) << netbiasshift;
-			   j = contest(b, g, r);
-			   
-			   altersingle(alpha, j, b, g, r);
-			   
-			   if (rad != 0) alterneigh(rad, j, b, g, r); /* alter neighbours */
-			   
-			   pix += step;
-			   
-			   if (pix >= lim) pix -= lengthcount;
-			   
-			   i++;
-			   
-			   if (delta == 0) delta = 1;
-			   
-			   if (i % delta == 0)
-			   
-			   {
-				   
-				   alpha -= alpha / alphadec;
-				   radius -= radius / radiusdec;
-				   rad = radius >> radiusbiasshift;
-				   
-				   if (rad <= 1) rad = 0;
-				   
-				   for (j = 0; j < rad; j++) radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
-				   
-			   }
-			   
-		   }
-		   
-	   }
-	   
-	   /*
-	   ** Search for BGR values 0..255 (after net is unbiased) and return colour
-	   * index
-	   * ----------------------------------------------------------------------------
-	   */
-	   
-	   var map = exports.map = function map(b/*int*/, g/*int*/, r/*int*/)/*int*/
-	  
-	   {
-		   
-		   var i/*int*/;
-		   var j/*int*/;
-		   var dist/*int*/
-		   var a/*int*/;
-		   var bestd/*int*/;
-		   var p/*Array*/;
-		   var best/*int*/;
-		   
-		   bestd = 1000; /* biggest possible dist is 256*3 */
-		   best = -1;
-		   i = netindex[g]; /* index on g */
-		   j = i - 1; /* start at netindex[g] and work outwards */
-	
-	    while ((i < netsize) || (j >= 0))
-		
-		{
-			
-			if (i < netsize)
-			
-			{
-				
-				p = network[i];
-				
-				dist = p[1] - g; /* inx key */
-				
-				if (dist >= bestd) i = netsize; /* stop iter */
-				
-				else
-				
-				{
-					
-					i++;
-					
-					if (dist < 0) dist = -dist;
-					
-					a = p[0] - b;
-					
-					if (a < 0) a = -a;
-					
-					dist += a;
-					
-					if (dist < bestd)
-					
-					{
-						
-						a = p[2] - r;
-						
-						if (a < 0) a = -a;
-						
-						dist += a;
-						
-						if (dist < bestd)
-						
-						{
-							
-							bestd = dist;
-							best = p[3];
-							
-						}
-						
-					}
-					
-				}
-				
-			}
-		  
-	      if (j >= 0)
-		  {
-			  
-			  p = network[j];
-			  
-			  dist = g - p[1]; /* inx key - reverse dif */
-			  
-			  if (dist >= bestd) j = -1; /* stop iter */
-			  
-			  else 
-			  {
-				  
-				  j--;
-				  if (dist < 0) dist = -dist;
-				  a = p[0] - b;
-				  if (a < 0) a = -a;
-				  dist += a;
-				  
-				  if (dist < bestd)
-				  
-				  {
-					  
-					  a = p[2] - r;
-					  if (a < 0)a = -a;
-					  dist += a;
-					  if (dist < bestd)
-					  {
-						  bestd = dist;
-						  best = p[3];
-					  }
-					  
-				  }
-				  
-			  }
-			  
-		  }
-		  
-		}
-		
-	    return (best);
-		
-	  }
-	  
-	  var process = exports.process = function process()/*ByteArray*/
-	  {
-	   
-	    learn();
-	    unbiasnet();
-	    inxbuild();
-	    return colorMap();
-		
-	  }
-	  
-	  /*
-	  * Unbias network to give byte values 0..255 and record position i to prepare
-	  * for sort
-	  * -----------------------------------------------------------------------------------
-	  */
-	  
-	  var unbiasnet = function unbiasnet()/*void*/
-	  
-	  {
-	
-	    var i/*int*/;
-	    var j/*int*/;
-	
-	    for (i = 0; i < netsize; i++)
-		{
-	      network[i][0] >>= netbiasshift;
-	      network[i][1] >>= netbiasshift;
-	      network[i][2] >>= netbiasshift;
-	      network[i][3] = i; /* record colour no */
-	    }
-		
-	  }
-	  
-	  /*
-	  * Move adjacent neurons by precomputed alpha*(1-((i-j)^2/[r]^2)) in
-	  * radpower[|i-j|]
-	  * ---------------------------------------------------------------------------------
-	  */
-	  
-	  var alterneigh = function alterneigh(rad/*int*/, i/*int*/, b/*int*/, g/*int*/, r/*int*/)/*void*/
-	  
-	  {
-		  
-		  var j/*int*/;
-		  var k/*int*/;
-		  var lo/*int*/;
-		  var hi/*int*/;
-		  var a/*int*/;
-		  var m/*int*/;
-		  
-		  var p/*Array*/;
-		  
-		  lo = i - rad;
-		  if (lo < -1) lo = -1;
-		  
-		  hi = i + rad;
-		  
-		  if (hi > netsize) hi = netsize;
-		  
-		  j = i + 1;
-		  k = i - 1;
-		  m = 1;
-		  
-		  while ((j < hi) || (k > lo))
-		  
-		  {
-			  
-			  a = radpower[m++];
-			  
-			  if (j < hi)
-			  
-			  {
-				  
-				  p = network[j++];
-				  
-				  try {
-					  
-					  p[0] -= (a * (p[0] - b)) / alpharadbias;
-					  p[1] -= (a * (p[1] - g)) / alpharadbias;
-					  p[2] -= (a * (p[2] - r)) / alpharadbias;
-					  
-					  } catch (e/*Error*/) {} // prevents 1.3 miscompilation
-					  
-				}
-				
-				if (k > lo)
-				
-				{
-					
-					p = network[k--];
-					
-					try
-					{
-						
-						p[0] -= (a * (p[0] - b)) / alpharadbias;
-						p[1] -= (a * (p[1] - g)) / alpharadbias;
-						p[2] -= (a * (p[2] - r)) / alpharadbias;
-						
-					} catch (e/*Error*/) {}
-					
-				}
-				
-		  }
-		  
-	  }
-	  
-	  /*
-	  * Move neuron i towards biased (b,g,r) by factor alpha
-	  * ----------------------------------------------------
-	  */
-	  
-	  var altersingle = function altersingle(alpha/*int*/, i/*int*/, b/*int*/, g/*int*/, r/*int*/)/*void*/ 
-	  {
-		  
-		  /* alter hit neuron */
-		  var n/*Array*/ = network[i];
-		  n[0] -= (alpha * (n[0] - b)) / initalpha;
-		  n[1] -= (alpha * (n[1] - g)) / initalpha;
-		  n[2] -= (alpha * (n[2] - r)) / initalpha;
-		
-	  }
-	  
-	  /*
-	  * Search for biased BGR values ----------------------------
-	  */
-	  
-	  var contest = function contest(b/*int*/, g/*int*/, r/*int*/)/*int*/
-	  {
-		  
-		  /* finds closest neuron (min dist) and updates freq */
-		  /* finds best neuron (min dist-bias) and returns position */
-		  /* for frequently chosen neurons, freq[i] is high and bias[i] is negative */
-		  /* bias[i] = gamma*((1/netsize)-freq[i]) */
-		  
-		  var i/*int*/;
-		  var dist/*int*/;
-		  var a/*int*/;
-		  var biasdist/*int*/;
-		  var betafreq/*int*/;
-		  var bestpos/*int*/;
-		  var bestbiaspos/*int*/;
-		  var bestd/*int*/;
-		  var bestbiasd/*int*/;
-		  var n/*Array*/;
-		  
-		  bestd = ~(1 << 31);
-		  bestbiasd = bestd;
-		  bestpos = -1;
-		  bestbiaspos = bestpos;
-		  
-		  for (i = 0; i < netsize; i++)
-		  
-		  {
-			  
-			  n = network[i];
-			  dist = n[0] - b;
-			  
-			  if (dist < 0) dist = -dist;
-			  
-			  a = n[1] - g;
-			  
-			  if (a < 0) a = -a;
-			  
-			  dist += a;
-			  
-			  a = n[2] - r;
-			  
-			  if (a < 0) a = -a;
-			  
-			  dist += a;
-			  
-			  if (dist < bestd)
-			  
-			  {
-				  
-				  bestd = dist;
-				  bestpos = i;
-				  
-			  }
-			  
-			  biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
-			  
-			  if (biasdist < bestbiasd)
-			  
-			  {
-				  
-				  bestbiasd = biasdist;
-				  bestbiaspos = i;
-				  
-			  }
-			  
-			  betafreq = (freq[i] >> betashift);
-			  freq[i] -= betafreq;
-			  bias[i] += (betafreq << gammashift);
-			  
-		  }
-		  
-		  freq[bestpos] += beta;
-		  bias[bestpos] -= betagamma;
-		  return (bestbiaspos);
-		  
-	  }
-	  
-	  NeuQuant.apply(this, arguments);
-	  return exports;
-	}

js/lib/gif/b64.js

@@ -1,18 +0,0 @@
-function encode64(input) {
-	var output = "", i = 0, l = input.length,
-	key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", 
-	chr1, chr2, chr3, enc1, enc2, enc3, enc4;
-	while (i < l) {
-		chr1 = input.charCodeAt(i++);
-		chr2 = input.charCodeAt(i++);
-		chr3 = input.charCodeAt(i++);
-		enc1 = chr1 >> 2;
-		enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
-		enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
-		enc4 = chr3 & 63;
-		if (isNaN(chr2)) enc3 = enc4 = 64;
-		else if (isNaN(chr3)) enc4 = 64;
-		output = output + key.charAt(enc1) + key.charAt(enc2) + key.charAt(enc3) + key.charAt(enc4);
-	}
-	return output;
-}

js/lib/jsColor_1_4_0/demo.html

@@ -1,12 +0,0 @@
-<html>
-<head>
-	<title>jscolor demo</title>
-</head>
-<body>
-
-	<script type="text/javascript" src="jscolor.js"></script>
-
-	Click here: <input class="color" value="66ff00">
-
-</body>
-</html>

js/lib/jsColor_1_4_0/jscolor.js

@@ -1,953 +0,0 @@
-/**
- * jscolor, JavaScript Color Picker
- *
- * @version 1.4.0
- * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
- * @author  Jan Odvarko, http://odvarko.cz
- * @created 2008-06-15
- * @updated 2012-07-06
- * @link    http://jscolor.com
- */
-
-
-var jscolor = {
-
-
-	dir : '', // location of jscolor directory (leave empty to autodetect)
-	bindClass : 'color', // class name
-	binding : true, // automatic binding via <input class="...">
-	preloading : true, // use image preloading?
-
-
-	install : function() {
-		jscolor.addEvent(window, 'load', jscolor.init);
-	},
-
-
-	init : function() {
-		if(jscolor.binding) {
-			jscolor.bind();
-		}
-		if(jscolor.preloading) {
-			jscolor.preload();
-		}
-	},
-
-
-	getDir : function() {
-		if(!jscolor.dir) {
-			var detected = jscolor.detectDir();
-			jscolor.dir = detected!==false ? detected : 'jscolor/';
-		}
-		return jscolor.dir;
-	},
-
-
-	detectDir : function() {
-		var base = location.href;
-
-		var e = document.getElementsByTagName('base');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].href) { base = e[i].href; }
-		}
-
-		var e = document.getElementsByTagName('script');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
-				var src = new jscolor.URI(e[i].src);
-				var srcAbs = src.toAbsolute(base);
-				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
-				srcAbs.query = null;
-				srcAbs.fragment = null;
-				return srcAbs.toString();
-			}
-		}
-		return false;
-	},
-
-
-	bind : function() {
-		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i');
-		var e = document.getElementsByTagName('input');
-		for(var i=0; i<e.length; i+=1) {
-			var m;
-			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
-				var prop = {};
-				if(m[3]) {
-					try {
-						prop = (new Function ('return (' + m[3] + ')'))();
-					} catch(eInvalidProp) {}
-				}
-				e[i].color = new jscolor.color(e[i], prop);
-			}
-		}
-	},
-
-
-	preload : function() {
-		for(var fn in jscolor.imgRequire) {
-			if(jscolor.imgRequire.hasOwnProperty(fn)) {
-				jscolor.loadImage(fn);
-			}
-		}
-	},
-
-
-	images : {
-		pad : [ 181, 101 ],
-		sld : [ 16, 101 ],
-		cross : [ 15, 15 ],
-		arrow : [ 7, 11 ]
-	},
-
-
-	imgRequire : {},
-	imgLoaded : {},
-
-
-	requireImage : function(filename) {
-		jscolor.imgRequire[filename] = true;
-	},
-
-
-	loadImage : function(filename) {
-		if(!jscolor.imgLoaded[filename]) {
-			jscolor.imgLoaded[filename] = new Image();
-			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
-		}
-	},
-
-
-	fetchElement : function(mixed) {
-		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
-	},
-
-
-	addEvent : function(el, evnt, func) {
-		if(el.addEventListener) {
-			el.addEventListener(evnt, func, false);
-		} else if(el.attachEvent) {
-			el.attachEvent('on'+evnt, func);
-		}
-	},
-
-
-	fireEvent : function(el, evnt) {
-		if(!el) {
-			return;
-		}
-		if(document.createEvent) {
-			var ev = document.createEvent('HTMLEvents');
-			ev.initEvent(evnt, true, true);
-			el.dispatchEvent(ev);
-		} else if(document.createEventObject) {
-			var ev = document.createEventObject();
-			el.fireEvent('on'+evnt, ev);
-		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
-			el['on'+evnt]();
-		}
-	},
-
-
-	getElementPos : function(e) {
-		var e1=e, e2=e;
-		var x=0, y=0;
-		if(e1.offsetParent) {
-			do {
-				x += e1.offsetLeft;
-				y += e1.offsetTop;
-			} while(e1 = e1.offsetParent);
-		}
-		while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
-			x -= e2.scrollLeft;
-			y -= e2.scrollTop;
-		}
-		return [x, y];
-	},
-
-
-	getElementSize : function(e) {
-		return [e.offsetWidth, e.offsetHeight];
-	},
-
-
-	getRelMousePos : function(e) {
-		var x = 0, y = 0;
-		if (!e) { e = window.event; }
-		if (typeof e.offsetX === 'number') {
-			x = e.offsetX;
-			y = e.offsetY;
-		} else if (typeof e.layerX === 'number') {
-			x = e.layerX;
-			y = e.layerY;
-		}
-		return { x: x, y: y };
-	},
-
-
-	getViewPos : function() {
-		if(typeof window.pageYOffset === 'number') {
-			return [window.pageXOffset, window.pageYOffset];
-		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
-			return [document.body.scrollLeft, document.body.scrollTop];
-		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
-			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
-		} else {
-			return [0, 0];
-		}
-	},
-
-
-	getViewSize : function() {
-		if(typeof window.innerWidth === 'number') {
-			return [window.innerWidth, window.innerHeight];
-		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
-			return [document.body.clientWidth, document.body.clientHeight];
-		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
-			return [document.documentElement.clientWidth, document.documentElement.clientHeight];
-		} else {
-			return [0, 0];
-		}
-	},
-
-
-	URI : function(uri) { // See RFC3986
-
-		this.scheme = null;
-		this.authority = null;
-		this.path = '';
-		this.query = null;
-		this.fragment = null;
-
-		this.parse = function(uri) {
-			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
-			this.scheme = m[3] ? m[2] : null;
-			this.authority = m[5] ? m[6] : null;
-			this.path = m[7];
-			this.query = m[9] ? m[10] : null;
-			this.fragment = m[12] ? m[13] : null;
-			return this;
-		};
-
-		this.toString = function() {
-			var result = '';
-			if(this.scheme !== null) { result = result + this.scheme + ':'; }
-			if(this.authority !== null) { result = result + '//' + this.authority; }
-			if(this.path !== null) { result = result + this.path; }
-			if(this.query !== null) { result = result + '?' + this.query; }
-			if(this.fragment !== null) { result = result + '#' + this.fragment; }
-			return result;
-		};
-
-		this.toAbsolute = function(base) {
-			var base = new jscolor.URI(base);
-			var r = this;
-			var t = new jscolor.URI;
-
-			if(base.scheme === null) { return false; }
-
-			if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
-				r.scheme = null;
-			}
-
-			if(r.scheme !== null) {
-				t.scheme = r.scheme;
-				t.authority = r.authority;
-				t.path = removeDotSegments(r.path);
-				t.query = r.query;
-			} else {
-				if(r.authority !== null) {
-					t.authority = r.authority;
-					t.path = removeDotSegments(r.path);
-					t.query = r.query;
-				} else {
-					if(r.path === '') {
-						t.path = base.path;
-						if(r.query !== null) {
-							t.query = r.query;
-						} else {
-							t.query = base.query;
-						}
-					} else {
-						if(r.path.substr(0,1) === '/') {
-							t.path = removeDotSegments(r.path);
-						} else {
-							if(base.authority !== null && base.path === '') {
-								t.path = '/'+r.path;
-							} else {
-								t.path = base.path.replace(/[^\/]+$/,'')+r.path;
-							}
-							t.path = removeDotSegments(t.path);
-						}
-						t.query = r.query;
-					}
-					t.authority = base.authority;
-				}
-				t.scheme = base.scheme;
-			}
-			t.fragment = r.fragment;
-
-			return t;
-		};
-
-		function removeDotSegments(path) {
-			var out = '';
-			while(path) {
-				if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
-					path = path.replace(/^\.+/,'').substr(1);
-				} else if(path.substr(0,3)==='/./' || path==='/.') {
-					path = '/'+path.substr(3);
-				} else if(path.substr(0,4)==='/../' || path==='/..') {
-					path = '/'+path.substr(4);
-					out = out.replace(/\/?[^\/]*$/, '');
-				} else if(path==='.' || path==='..') {
-					path = '';
-				} else {
-					var rm = path.match(/^\/?[^\/]*/)[0];
-					path = path.substr(rm.length);
-					out = out + rm;
-				}
-			}
-			return out;
-		}
-
-		if(uri) {
-			this.parse(uri);
-		}
-
-	},
-
-
-	/*
-	 * Usage example:
-	 * var myColor = new jscolor.color(myInputElement)
-	 */
-
-	color : function(target, prop) {
-
-
-		this.required = true; // refuse empty values?
-		this.adjust = true; // adjust value to uniform notation?
-		this.hash = false; // prefix color with # symbol?
-		this.caps = true; // uppercase?
-		this.slider = true; // show the value/saturation slider?
-		this.valueElement = target; // value holder
-		this.styleElement = target; // where to reflect current color
-		this.onImmediateChange = null; // onchange callback (can be either string or function)
-		this.hsv = [0, 0, 1]; // read-only  0-6, 0-1, 0-1
-		this.rgb = [1, 1, 1]; // read-only  0-1, 0-1, 0-1
-		this.minH = 0; // read-only  0-6
-		this.maxH = 6; // read-only  0-6
-		this.minS = 0; // read-only  0-1
-		this.maxS = 1; // read-only  0-1
-		this.minV = 0; // read-only  0-1
-		this.maxV = 1; // read-only  0-1
-
-		this.pickerOnfocus = true; // display picker on focus?
-		this.pickerMode = 'HSV'; // HSV | HVS
-		this.pickerPosition = 'bottom'; // left | right | top | bottom
-		this.pickerSmartPosition = true; // automatically adjust picker position when necessary
-		this.pickerButtonHeight = 20; // px
-		this.pickerClosable = false;
-		this.pickerCloseText = 'Close';
-		this.pickerButtonColor = 'ButtonText'; // px
-		this.pickerFace = 10; // px
-		this.pickerFaceColor = 'ThreeDFace'; // CSS color
-		this.pickerBorder = 1; // px
-		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
-		this.pickerInset = 1; // px
-		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
-		this.pickerZIndex = 10000;
-
-
-		for(var p in prop) {
-			if(prop.hasOwnProperty(p)) {
-				this[p] = prop[p];
-			}
-		}
-
-
-		this.hidePicker = function() {
-			if(isPickerOwner()) {
-				removePicker();
-			}
-		};
-
-
-		this.showPicker = function() {
-			if(!isPickerOwner()) {
-				var tp = jscolor.getElementPos(target); // target pos
-				var ts = jscolor.getElementSize(target); // target size
-				var vp = jscolor.getViewPos(); // view pos
-				var vs = jscolor.getViewSize(); // view size
-				var ps = getPickerDims(this); // picker size
-				var a, b, c;
-				switch(this.pickerPosition.toLowerCase()) {
-					case 'left': a=1; b=0; c=-1; break;
-					case 'right':a=1; b=0; c=1; break;
-					case 'top':  a=0; b=1; c=-1; break;
-					default:     a=0; b=1; c=1; break;
-				}
-				var l = (ts[b]+ps[b])/2;
-
-				// picker pos
-				if (!this.pickerSmartPosition) {
-					var pp = [
-						tp[a],
-						tp[b]+ts[b]-l+l*c
-					];
-				} else {
-					var pp = [
-						-vp[a]+tp[a]+ps[a] > vs[a] ?
-							(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
-							tp[a],
-						-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
-							(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
-							(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
-					];
-				}
-				drawPicker(pp[a], pp[b]);
-			}
-		};
-
-
-		this.importColor = function() {
-			if(!valueElement) {
-				this.exportColor();
-			} else {
-				if(!this.adjust) {
-					if(!this.fromString(valueElement.value, leaveValue)) {
-						styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
-						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
-						styleElement.style.color = styleElement.jscStyle.color;
-						this.exportColor(leaveValue | leaveStyle);
-					}
-				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
-					valueElement.value = '';
-					styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
-					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
-					styleElement.style.color = styleElement.jscStyle.color;
-					this.exportColor(leaveValue | leaveStyle);
-
-				} else if(this.fromString(valueElement.value)) {
-					// OK
-				} else {
-					this.exportColor();
-				}
-			}
-		};
-
-
-		this.exportColor = function(flags) {
-			if(!(flags & leaveValue) && valueElement) {
-				var value = this.toString();
-				if(this.caps) { value = value.toUpperCase(); }
-				if(this.hash) { value = '#'+value; }
-				valueElement.value = value;
-			}
-			if(!(flags & leaveStyle) && styleElement) {
-				styleElement.style.backgroundImage = "none";
-				styleElement.style.backgroundColor =
-					'#'+this.toString();
-				styleElement.style.color =
-					0.213 * this.rgb[0] +
-					0.715 * this.rgb[1] +
-					0.072 * this.rgb[2]
-					< 0.5 ? '#FFF' : '#000';
-			}
-			if(!(flags & leavePad) && isPickerOwner()) {
-				redrawPad();
-			}
-			if(!(flags & leaveSld) && isPickerOwner()) {
-				redrawSld();
-			}
-		};
-
-
-		this.fromHSV = function(h, s, v, flags) { // null = don't change
-			if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
-			if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
-			if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
-
-			this.rgb = HSV_RGB(
-				h===null ? this.hsv[0] : (this.hsv[0]=h),
-				s===null ? this.hsv[1] : (this.hsv[1]=s),
-				v===null ? this.hsv[2] : (this.hsv[2]=v)
-			);
-
-			this.exportColor(flags);
-		};
-
-
-		this.fromRGB = function(r, g, b, flags) { // null = don't change
-			if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
-			if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
-			if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
-
-			var hsv = RGB_HSV(
-				r===null ? this.rgb[0] : r,
-				g===null ? this.rgb[1] : g,
-				b===null ? this.rgb[2] : b
-			);
-			if(hsv[0] !== null) {
-				this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
-			}
-			if(hsv[2] !== 0) {
-				this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
-			}
-			this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
-
-			// update RGB according to final HSV, as some values might be trimmed
-			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
-			this.rgb[0] = rgb[0];
-			this.rgb[1] = rgb[1];
-			this.rgb[2] = rgb[2];
-
-			this.exportColor(flags);
-		};
-
-
-		this.fromString = function(hex, flags) {
-			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
-			if(!m) {
-				return false;
-			} else {
-				if(m[1].length === 6) { // 6-char notation
-					this.fromRGB(
-						parseInt(m[1].substr(0,2),16) / 255,
-						parseInt(m[1].substr(2,2),16) / 255,
-						parseInt(m[1].substr(4,2),16) / 255,
-						flags
-					);
-				} else { // 3-char notation
-					this.fromRGB(
-						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
-						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
-						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
-						flags
-					);
-				}
-				return true;
-			}
-		};
-
-
-		this.toString = function() {
-			return (
-				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
-				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
-				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
-			);
-		};
-
-
-		function RGB_HSV(r, g, b) {
-			var n = Math.min(Math.min(r,g),b);
-			var v = Math.max(Math.max(r,g),b);
-			var m = v - n;
-			if(m === 0) { return [ null, 0, v ]; }
-			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
-			return [ h===6?0:h, m/v, v ];
-		}
-
-
-		function HSV_RGB(h, s, v) {
-			if(h === null) { return [ v, v, v ]; }
-			var i = Math.floor(h);
-			var f = i%2 ? h-i : 1-(h-i);
-			var m = v * (1 - s);
-			var n = v * (1 - s*f);
-			switch(i) {
-				case 6:
-				case 0: return [v,n,m];
-				case 1: return [n,v,m];
-				case 2: return [m,v,n];
-				case 3: return [m,n,v];
-				case 4: return [n,m,v];
-				case 5: return [v,m,n];
-			}
-		}
-
-
-		function removePicker() {
-			delete jscolor.picker.owner;
-			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
-		}
-
-
-		function drawPicker(x, y) {
-			if(!jscolor.picker) {
-				jscolor.picker = {
-					box : document.createElement('div'),
-					boxB : document.createElement('div'),
-					pad : document.createElement('div'),
-					padB : document.createElement('div'),
-					padM : document.createElement('div'),
-					sld : document.createElement('div'),
-					sldB : document.createElement('div'),
-					sldM : document.createElement('div'),
-					btn : document.createElement('div'),
-					btnS : document.createElement('span'),
-					btnT : document.createTextNode(THIS.pickerCloseText)
-				};
-				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
-					var seg = document.createElement('div');
-					seg.style.height = segSize+'px';
-					seg.style.fontSize = '1px';
-					seg.style.lineHeight = '0';
-					jscolor.picker.sld.appendChild(seg);
-				}
-				jscolor.picker.sldB.appendChild(jscolor.picker.sld);
-				jscolor.picker.box.appendChild(jscolor.picker.sldB);
-				jscolor.picker.box.appendChild(jscolor.picker.sldM);
-				jscolor.picker.padB.appendChild(jscolor.picker.pad);
-				jscolor.picker.box.appendChild(jscolor.picker.padB);
-				jscolor.picker.box.appendChild(jscolor.picker.padM);
-				jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
-				jscolor.picker.btn.appendChild(jscolor.picker.btnS);
-				jscolor.picker.box.appendChild(jscolor.picker.btn);
-				jscolor.picker.boxB.appendChild(jscolor.picker.box);
-			}
-
-			var p = jscolor.picker;
-
-			// controls interaction
-			p.box.onmouseup =
-			p.box.onmouseout = function() { target.focus(); };
-			p.box.onmousedown = function() { abortBlur=true; };
-			p.box.onmousemove = function(e) {
-				if (holdPad || holdSld) {
-					holdPad && setPad(e);
-					holdSld && setSld(e);
-					if (document.selection) {
-						document.selection.empty();
-					} else if (window.getSelection) {
-						window.getSelection().removeAllRanges();
-					}
-					dispatchImmediateChange();
-				}
-			};
-			p.padM.onmouseup =
-			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
-			p.padM.onmousedown = function(e) {
-				// if the slider is at the bottom, move it up
-				switch(modeID) {
-					case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
-					case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
-				}
-				holdPad=true;
-				setPad(e);
-				dispatchImmediateChange();
-			};
-			p.sldM.onmouseup =
-			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
-			p.sldM.onmousedown = function(e) {
-				holdSld=true;
-				setSld(e);
-				dispatchImmediateChange();
-			};
-
-			// picker
-			var dims = getPickerDims(THIS);
-			p.box.style.width = dims[0] + 'px';
-			p.box.style.height = dims[1] + 'px';
-
-			// picker border
-			p.boxB.style.position = 'absolute';
-			p.boxB.style.clear = 'both';
-			p.boxB.style.left = x+'px';
-			p.boxB.style.top = y+'px';
-			p.boxB.style.zIndex = THIS.pickerZIndex;
-			p.boxB.style.border = THIS.pickerBorder+'px solid';
-			p.boxB.style.borderColor = THIS.pickerBorderColor;
-			p.boxB.style.background = THIS.pickerFaceColor;
-
-			// pad image
-			p.pad.style.width = jscolor.images.pad[0]+'px';
-			p.pad.style.height = jscolor.images.pad[1]+'px';
-
-			// pad border
-			p.padB.style.position = 'absolute';
-			p.padB.style.left = THIS.pickerFace+'px';
-			p.padB.style.top = THIS.pickerFace+'px';
-			p.padB.style.border = THIS.pickerInset+'px solid';
-			p.padB.style.borderColor = THIS.pickerInsetColor;
-
-			// pad mouse area
-			p.padM.style.position = 'absolute';
-			p.padM.style.left = '0';
-			p.padM.style.top = '0';
-			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
-			p.padM.style.height = p.box.style.height;
-			p.padM.style.cursor = 'crosshair';
-
-			// slider image
-			p.sld.style.overflow = 'hidden';
-			p.sld.style.width = jscolor.images.sld[0]+'px';
-			p.sld.style.height = jscolor.images.sld[1]+'px';
-
-			// slider border
-			p.sldB.style.display = THIS.slider ? 'block' : 'none';
-			p.sldB.style.position = 'absolute';
-			p.sldB.style.right = THIS.pickerFace+'px';
-			p.sldB.style.top = THIS.pickerFace+'px';
-			p.sldB.style.border = THIS.pickerInset+'px solid';
-			p.sldB.style.borderColor = THIS.pickerInsetColor;
-
-			// slider mouse area
-			p.sldM.style.display = THIS.slider ? 'block' : 'none';
-			p.sldM.style.position = 'absolute';
-			p.sldM.style.right = '0';
-			p.sldM.style.top = '0';
-			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
-			p.sldM.style.height = p.box.style.height;
-			try {
-				p.sldM.style.cursor = 'pointer';
-			} catch(eOldIE) {
-				p.sldM.style.cursor = 'hand';
-			}
-
-			// "close" button
-			function setBtnBorder() {
-				var insetColors = THIS.pickerInsetColor.split(/\s+/);
-				var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
-				p.btn.style.borderColor = pickerOutsetColor;
-			}
-			p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
-			p.btn.style.position = 'absolute';
-			p.btn.style.left = THIS.pickerFace + 'px';
-			p.btn.style.bottom = THIS.pickerFace + 'px';
-			p.btn.style.padding = '0 15px';
-			p.btn.style.height = '18px';
-			p.btn.style.border = THIS.pickerInset + 'px solid';
-			setBtnBorder();
-			p.btn.style.color = THIS.pickerButtonColor;
-			p.btn.style.font = '12px sans-serif';
-			p.btn.style.textAlign = 'center';
-			try {
-				p.btn.style.cursor = 'pointer';
-			} catch(eOldIE) {
-				p.btn.style.cursor = 'hand';
-			}
-			p.btn.onmousedown = function () {
-				THIS.hidePicker();
-			};
-			p.btnS.style.lineHeight = p.btn.style.height;
-
-			// load images in optimal order
-			switch(modeID) {
-				case 0: var padImg = 'hs.png'; break;
-				case 1: var padImg = 'hv.png'; break;
-			}
-			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
-			p.padM.style.backgroundRepeat = "no-repeat";
-			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
-			p.sldM.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
-			p.pad.style.backgroundRepeat = "no-repeat";
-			p.pad.style.backgroundPosition = "0 0";
-
-			// place pointers
-			redrawPad();
-			redrawSld();
-
-			jscolor.picker.owner = THIS;
-			document.getElementsByTagName('body')[0].appendChild(p.boxB);
-		}
-
-
-		function getPickerDims(o) {
-			var dims = [
-				2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
-					(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
-				o.pickerClosable ?
-					4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
-					2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
-			];
-			return dims;
-		}
-
-
-		function redrawPad() {
-			// redraw the pad pointer
-			switch(modeID) {
-				case 0: var yComponent = 1; break;
-				case 1: var yComponent = 2; break;
-			}
-			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
-			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
-			jscolor.picker.padM.style.backgroundPosition =
-				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
-				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
-
-			// redraw the slider image
-			var seg = jscolor.picker.sld.childNodes;
-
-			switch(modeID) {
-				case 0:
-					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
-					for(var i=0; i<seg.length; i+=1) {
-						seg[i].style.backgroundColor = 'rgb('+
-							(rgb[0]*(1-i/seg.length)*100)+'%,'+
-							(rgb[1]*(1-i/seg.length)*100)+'%,'+
-							(rgb[2]*(1-i/seg.length)*100)+'%)';
-					}
-					break;
-				case 1:
-					var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
-					var i = Math.floor(THIS.hsv[0]);
-					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
-					switch(i) {
-						case 6:
-						case 0: rgb=[0,1,2]; break;
-						case 1: rgb=[1,0,2]; break;
-						case 2: rgb=[2,0,1]; break;
-						case 3: rgb=[2,1,0]; break;
-						case 4: rgb=[1,2,0]; break;
-						case 5: rgb=[0,2,1]; break;
-					}
-					for(var i=0; i<seg.length; i+=1) {
-						s = 1 - 1/(seg.length-1)*i;
-						c[1] = c[0] * (1 - s*f);
-						c[2] = c[0] * (1 - s);
-						seg[i].style.backgroundColor = 'rgb('+
-							(c[rgb[0]]*100)+'%,'+
-							(c[rgb[1]]*100)+'%,'+
-							(c[rgb[2]]*100)+'%)';
-					}
-					break;
-			}
-		}
-
-
-		function redrawSld() {
-			// redraw the slider pointer
-			switch(modeID) {
-				case 0: var yComponent = 2; break;
-				case 1: var yComponent = 1; break;
-			}
-			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
-			jscolor.picker.sldM.style.backgroundPosition =
-				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
-		}
-
-
-		function isPickerOwner() {
-			return jscolor.picker && jscolor.picker.owner === THIS;
-		}
-
-
-		function blurTarget() {
-			if(valueElement === target) {
-				THIS.importColor();
-			}
-			if(THIS.pickerOnfocus) {
-				THIS.hidePicker();
-			}
-		}
-
-
-		function blurValue() {
-			if(valueElement !== target) {
-				THIS.importColor();
-			}
-		}
-
-
-		function setPad(e) {
-			var mpos = jscolor.getRelMousePos(e);
-			var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
-			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
-			switch(modeID) {
-				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
-				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
-			}
-		}
-
-
-		function setSld(e) {
-			var mpos = jscolor.getRelMousePos(e);
-			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
-			switch(modeID) {
-				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
-				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
-			}
-		}
-
-
-		function dispatchImmediateChange() {
-			if (THIS.onImmediateChange) {
-				var callback;
-				if (typeof THIS.onImmediateChange === 'string') {
-					callback = new Function (THIS.onImmediateChange);
-				} else {
-					callback = THIS.onImmediateChange;
-				}
-				callback.call(THIS);
-			}
-		}
-
-
-		var THIS = this;
-		var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
-		var abortBlur = false;
-		var
-			valueElement = jscolor.fetchElement(this.valueElement),
-			styleElement = jscolor.fetchElement(this.styleElement);
-		var
-			holdPad = false,
-			holdSld = false;
-		var
-			leaveValue = 1<<0,
-			leaveStyle = 1<<1,
-			leavePad = 1<<2,
-			leaveSld = 1<<3;
-
-		// target
-		jscolor.addEvent(target, 'focus', function() {
-			if(THIS.pickerOnfocus) { THIS.showPicker(); }
-		});
-		jscolor.addEvent(target, 'blur', function() {
-			if(!abortBlur) {
-				window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
-			} else {
-				abortBlur = false;
-			}
-		});
-
-		// valueElement
-		if(valueElement) {
-			var updateField = function() {
-				THIS.fromString(valueElement.value, leaveValue);
-				dispatchImmediateChange();
-			};
-			jscolor.addEvent(valueElement, 'keyup', updateField);
-			jscolor.addEvent(valueElement, 'input', updateField);
-			jscolor.addEvent(valueElement, 'blur', blurValue);
-			valueElement.setAttribute('autocomplete', 'off');
-		}
-
-		// styleElement
-		if(styleElement) {
-			styleElement.jscStyle = {
-				backgroundImage : styleElement.style.backgroundImage,
-				backgroundColor : styleElement.style.backgroundColor,
-				color : styleElement.style.color
-			};
-		}
-
-		// require images
-		switch(modeID) {
-			case 0: jscolor.requireImage('hs.png'); break;
-			case 1: jscolor.requireImage('hv.png'); break;
-		}
-		jscolor.requireImage('cross.gif');
-		jscolor.requireImage('arrow.gif');
-
-		this.importColor();
-	}
-
-};
-
-
-jscolor.install();

js/model/Frame.js

@@ -1,118 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.model");
-	
-	ns.Frame = function (pixels) {
-		this.pixels = pixels;
-		this.previousStates = [this.getPixels()];
-		this.stateIndex = 0;
-	};
-
-	ns.Frame.createEmpty = function (width, height) {
-		var pixels = ns.Frame.createEmptyPixelGrid_(width, height);
-		return new ns.Frame(pixels);
-	};
-
-	ns.Frame.createEmptyPixelGrid_ = function (width, height) {
-		var pixels = []; //new Array(width);
-		for (var columnIndex=0; columnIndex < width; columnIndex++) {
-			var columnArray = [];
-			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
-				columnArray.push(Constants.TRANSPARENT_COLOR);
-			}
-			pixels[columnIndex] = columnArray;
-		}
-		return pixels;
-	};
-
-	ns.Frame.createEmptyFromFrame = function (frame) {
-		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
-	};
-
-	ns.Frame.prototype.clone = function () {
-		return new ns.Frame(this.getPixels());
-	};
-
-	/**
-	 * Returns a copy of the pixels used by the frame
-	 */
-	ns.Frame.prototype.getPixels = function () {
-		return this.clonePixels_(this.pixels);
-	};
-
-	/**
-	 * Copies the passed pixels into the frame.
-	 */
-	ns.Frame.prototype.setPixels = function (pixels) {
-		this.pixels = this.clonePixels_(pixels);
-	};
-
-
-
-	ns.Frame.prototype.clear = function () {
-		var pixels = ns.Frame.createEmptyPixelGrid_(this.getWidth(), this.getHeight());
-		this.setPixels(pixels);
-	};
-
-	/**
-	 * Clone a set of pixels. Should be static utility method
-	 * @private
-	 */
-	ns.Frame.prototype.clonePixels_ = function (pixels) {
-		var clonedPixels = [];
-		for (var col = 0 ; col < pixels.length ; col++) {
-			clonedPixels[col] = pixels[col].slice(0 , pixels[col].length);
-		}
-		return clonedPixels;
-	};
-
-	ns.Frame.prototype.serialize = function () {
-		return JSON.stringify(this.pixels);
-	};
-
-	ns.Frame.prototype.setPixel = function (col, row, color) {
-		this.pixels[col][row] = color;
-	};
-
-	ns.Frame.prototype.getPixel = function (col, row) {
-		return this.pixels[col][row];
-	};
-
-	ns.Frame.prototype.getWidth = function () {
-		return this.pixels.length;
-	};
-
-	ns.Frame.prototype.getHeight = function () {
-		return this.pixels[0].length;
-	};
-
-	ns.Frame.prototype.containsPixel = function (col, row) {
-		return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
-	};
-
-	ns.Frame.prototype.saveState = function () {
-		// remove all states past current state
-		this.previousStates.length = this.stateIndex + 1;
-		// push new state
-		this.previousStates.push(this.getPixels());
-		// set the stateIndex to latest saved state
-		this.stateIndex = this.previousStates.length - 1;
-	};
-
-	ns.Frame.prototype.loadPreviousState = function () {
-		if (this.stateIndex > 0) {
-			this.stateIndex--;
-			this.setPixels(this.previousStates[this.stateIndex]);
-		}
-	};
-
-	ns.Frame.prototype.loadNextState = function () {
-		if (this.stateIndex < this.previousStates.length - 1) {
-			this.stateIndex++;
-			this.setPixels(this.previousStates[this.stateIndex]);
-		}	
-	};
-
-	ns.Frame.prototype.isSameSize = function (otherFrame) {
-		return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
-	};
-})();

js/model/FrameSheet.js

@@ -1,157 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.model");
-	ns.FrameSheet = function (height, width) {
-		this.width = width;
-		this.height = height;
-		this.frames = [];
-		this.currentFrameIndex = 0;
-	};
-
-	ns.FrameSheet.prototype.getHeight = function () {
-		return this.height;
-	};
-
-	ns.FrameSheet.prototype.getWidth = function () {
-		return this.width;
-	};
-
-	ns.FrameSheet.prototype.addEmptyFrame = function () {
-		this.addFrame(ns.Frame.createEmpty(this.width, this.height));
-	};
-
-	ns.FrameSheet.prototype.addFrame = function (frame) {
-		this.frames.push(frame);
-	};
-
-	ns.FrameSheet.prototype.getFrameCount = function () {
-		return this.frames.length;
-	};
-
-	ns.FrameSheet.prototype.getCurrentFrame = function () {
-		return this.frames[this.currentFrameIndex];
-	};
-
-	ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
-		this.currentFrameIndex = index;
-		$.publish(Events.CURRENT_FRAME_SET, [this.getCurrentFrame()]);
-		$.publish(Events.FRAMESHEET_RESET);  // Is it no to overkill to have this here ?
-	};
-
-	ns.FrameSheet.prototype.getUsedColors = function() {
-		var colors = {};
-		for (var frameIndex=0; frameIndex < this.frames.length; frameIndex++) {
-			var frame = this.frames[frameIndex];
-			for (var i = 0, width = frame.getWidth(); i < width  ; i++) {
-				var line = frame[i];
-				for (var j = 0, height = frame.getHeight() ; j < height ; j++) {
-					var pixel = frame.getPixel(i, j);
-					colors[pixel] = pixel;
-				}
-			}
-		}
-		return colors;
-	};
-
-	// Could be used to pass around model using long GET param (good enough for simple models) and 
-	// do some temporary locastorage
-	ns.FrameSheet.prototype.serialize = function() {
-		var serializedFrames = [];
-		for (var i = 0 ; i < this.frames.length ; i++) {
-			serializedFrames.push(this.frames[i].serialize());
-		}
-		return '[' + serializedFrames.join(",") + ']';
-		//return JSON.stringify(frames);
-	};
-
-	/**
-	 * Load a framesheet from a model that might have been persisted in db / localstorage
-	 * Overrides existing frames.
-	 * @param {String} serialized
-	 */
-	ns.FrameSheet.prototype.deserialize = function (serialized) {
-		try {
-			this.load(JSON.parse(serialized));
-		} catch (e) {
-			throw "Could not load serialized framesheet : " + e.message;
-		}	
-	};
-
-
-	/**
-	 * Load a framesheet from a model that might have been persisted in db / localstorage
-	 * Overrides existing frames.
-	 * @param {String} serialized
-	 */
-	ns.FrameSheet.prototype.load = function (framesheet) {
-		this.frames = [];
-		for (var i = 0 ; i < framesheet.length ; i++) {
-			var frameCfg = framesheet[i];
-			this.addFrame(new ns.Frame(frameCfg));
-		}
-
-		if (this.hasFrameAtIndex(0)) {
-			this.height = this.getFrameByIndex(0).getHeight();
-			this.width = this.getFrameByIndex(0).getWidth();
-			this.setCurrentFrameIndex(0);
-			$.publish(Events.FRAME_SIZE_CHANGED);
-		}
-
-		$.publish(Events.FRAMESHEET_RESET);
-	};
-
-	
-	ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
-		return (index >= 0 && index < this.getFrameCount());
-	};
-
-	ns.FrameSheet.prototype.getFrameByIndex = function(index) {
-		if (isNaN(index)) {
-			throw "Bad argument value for getFrameByIndex method: <" + index + ">";
-		} 
-
-		if (!this.hasFrameAtIndex(index)) {
-			throw "Out of bound index for frameSheet object.";
-		}
-
-		return this.frames[index];
-	};
-
-	ns.FrameSheet.prototype.removeFrameByIndex = function(index) {
-		if(!this.hasFrameAtIndex(index)) {
-			throw "Out of bound index for frameSheet object.";
-		}
-		this.frames.splice(index, 1);
-
-		// Current frame index might not be valid anymore
-		if (!this.hasFrameAtIndex(this.currentFrameIndex)) {
-			// if not select last frame available
-			this.setCurrentFrameIndex(this.getFrameCount() - 1);
-		}
-
-		$.publish(Events.FRAMESHEET_RESET);
-	};
-
-	ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {
-		var frame = this.getFrameByIndex(index);
-		this.frames.splice(index + 1, 0, frame.clone());
-	};
-
-	ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
-		this.frames.splice(destinationIndex, 0, this.frames.splice(originIndex, 1)[0]);
-	};
-
-	ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
-		if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
-			(!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
-			throw "Bad indexes for swapFrames Framesheet function.";
-		}
-		if(indexFrame1 == indexFrame2) {
-			return;
-		}
-		else {
-			var swapFrame = this.frames[indexFrame1];
-			this.frames[indexFrame1] = this.frames[indexFrame2];
-			this.frames[indexFrame2] = swapFrame;
-		}
-	};
-})();

js/piskel.js

@@ -1,248 +0,0 @@
-/**
- * @require Constants
- * @require Events
- */
-(function () {
-  var ns = $.namespace("pskl");
-  /**
-   * FrameSheetModel instance.
-   */
-  var frameSheet;
-  /**
-   * Main application controller
-   */
-  ns.app = {
-
-    init : function () {
-      var frameSize = this.readSizeFromURL_();
-      frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
-      frameSheet.addEmptyFrame();
-
-      /**
-       * True when piskel is running in static mode (no back end needed).
-       * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
-       */
-      this.isStaticVersion = !pskl.appEngineToken_;
-      
-      this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
-      this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
-      this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
-      this.settingsController = new pskl.controller.SettingsController();
-
-      // To catch the current active frame, the selection manager have to be initialized before
-      // the 'frameSheet.setCurrentFrameIndex(0);' line below.
-      // TODO(vincz): Slice each constructor to have:
-      //                  - an event(s) listening init
-      //                  - an event(s) triggering init
-      // All listeners will be hook in a first step, then all event triggering inits will be called
-      // in a second batch.
-      this.selectionManager = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
-
-      // DO NOT MOVE THIS LINE (see comment above)
-      frameSheet.setCurrentFrameIndex(0);
-
-      this.animationController.init();
-      this.previewsController.init();
-      this.settingsController.init();
-
-      this.historyService = new pskl.service.HistoryService(frameSheet);
-      this.historyService.init();
-
-      this.keyboardEventService = new pskl.service.KeyboardEventService();
-      this.keyboardEventService.init();
-
-      this.notificationController = new pskl.controller.NotificationController();
-      this.notificationController.init();
-
-      this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
-      this.localStorageService.init();
-
-      if (this.isStaticVersion) {
-        var framesheetId = this.readFramesheetIdFromURL_();
-        if (framesheetId) {
-          $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
-          this.loadFramesheetFromService(framesheetId);
-        } else {
-          this.finishInit();
-          this.localStorageService.displayRestoreNotification();
-        }
-      } else {
-        if (pskl.framesheetData_) {
-          frameSheet.load(pskl.framesheetData_);
-        }
-        this.finishInit();
-      }
-
-      var drawingLoop = new pskl.rendering.DrawingLoop();
-      drawingLoop.addCallback(this.render, this);
-      drawingLoop.start();
-
-      // Init (event-delegated) bootstrap tooltips:
-      $('body').tooltip({
-        selector: '[rel=tooltip]'
-      });
-    },
-
-    render : function (delta) {
-      this.drawingController.render(delta);
-      this.animationController.render(delta);
-      this.previewsController.render(delta);
-    },    
-
-    finishInit : function () {
-      var toolController = new pskl.controller.ToolController();
-      toolController.init();
-      
-      var paletteController = new pskl.controller.PaletteController();
-      paletteController.init(frameSheet);
-    },
-
-    readSizeFromURL_ : function () {
-      var sizeParam = this.readUrlParameter_("size"), size;
-      // parameter expected as size=64x48 => size=widthxheight
-      var parts = sizeParam.split("x");
-      if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
-        var width = parseInt(parts[0], 10),
-            height = parseInt(parts[1], 10);
-      
-        size = {
-          height : Math.min(height, Constants.MAX_HEIGHT),
-          width : Math.min(width, Constants.MAX_WIDTH)
-        };
-      } else {
-        size = Constants.DEFAULT_SIZE;
-      }
-      return size;
-    },
-
-    readFramesheetIdFromURL_ : function() {
-      return this.readUrlParameter_("frameId");
-    },
-
-    readUrlParameter_ : function (paramName) {
-      var searchString = window.location.search.substring(1),
-      i, val, params = searchString.split("&");
-
-      for (i=0;i<params.length;i++) {
-        val = params[i].split("=");
-        if (val[0] == paramName) {
-          return unescape(val[1]);
-        }
-      }
-      return "";
-    },
-
-    loadFramesheetFromService : function (frameId) {
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
-      xhr.responseType = 'text';
-
-      xhr.onload = function(e) {
-        var res = JSON.parse(this.responseText);
-        frameSheet.load(res.framesheet);
-        pskl.app.animationController.setFPS(res.fps);
-        $.publish(Events.HIDE_NOTIFICATION);
-        pskl.app.finishInit();
-      };
-
-      xhr.onerror = function () {
-        $.publish(Events.HIDE_NOTIFICATION);
-        pskl.app.finishInit();
-      };
-
-      xhr.send();
-    },
-
-    getFirstFrameAsPNGData_ : function () {
-      var tmpSheet = new pskl.model.FrameSheet(frameSheet.getWidth(), frameSheet.getHeight());
-      tmpSheet.addFrame(frameSheet.getFrameByIndex(0));
-      return (new pskl.rendering.SpritesheetRenderer(tmpSheet)).renderAsImageDataSpritesheetPNG();
-    },
-
-    // TODO(julz): Create package ?
-    storeSheet : function (event) {
-      var xhr = new XMLHttpRequest();
-      var formData = new FormData();
-      formData.append('framesheet_content', frameSheet.serialize());
-      formData.append('fps_speed', $('#preview-fps').val());
-
-      if (this.isStaticVersion) {
-        // anonymous save on old app-engine backend
-        xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
-      } else {
-        // additional values only used with latest app-engine backend
-        formData.append('name', $('#piskel-name').val());
-        formData.append('frames', frameSheet.getFrameCount());
-        // Get image/png data for first frame
-       
-        formData.append('preview', this.getFirstFrameAsPNGData_());
-
-        xhr.open('POST', "save", true);
-      }
-     
-      xhr.onload = function(e) {
-        if (this.status == 200) {
-          if (pskl.app.isStaticVersion) {
-            var baseUrl = window.location.href.replace(window.location.search, "");
-           window.location.href = baseUrl + "?frameId=" + this.responseText;
-          } else {
-            $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
-          }
-        } else {
-          this.onerror(e);
-        }
-      };
-      xhr.onerror = function(e) {
-        $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
-      };
-      xhr.send(formData);
-
-      if(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-      return false;
-    },
-
-    uploadToScreenletstore : function(imageData) {
-      var xhr = new XMLHttpRequest();
-      var formData = new FormData();
-      formData.append('data', imageData);
-      xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
-      var cloudURL;
-      var that = this;
-      xhr.onload = function(e) {
-        if (this.status == 200) {
-          cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
-          that.openWindow(cloudURL);
-        }
-      };
-
-      xhr.send(formData);
-    },
-
-    uploadAsAnimatedGIF : function () {
-      var fps = pskl.app.animationController.fps;
-      var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
-      this.uploadToScreenletstore(imageData);
-    },
-
-    uploadAsSpritesheetPNG : function () {
-      var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG();
-      this.uploadToScreenletstore(imageData);
-    },
-
-    openWindow: function(url) {
-      var options = [
-        "dialog=yes", "scrollbars=no", "status=no",
-        "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
-        "height=" + frameSheet.getHeight()
-      ].join(",");
-
-      window.open(url, "piskel-export", options);
-    }
-  };
-
-  pskl.app.init();
-
-})();

js/rendering/CanvasRenderer.js

@@ -1,36 +0,0 @@
-(function () {
-
-	var ns = $.namespace("pskl.rendering");
-	ns.CanvasRenderer = function (frame, dpi) {
-		this.frame = frame;
-		this.dpi = dpi;
-	};
-
-	ns.CanvasRenderer.prototype.render = function  (frame, dpi) {
-		var canvas = this.createCanvas_();
-		var context = canvas.getContext('2d');
-		for(var col = 0, width = this.frame.getWidth(); col < width; col++) {
-			for(var row = 0, height = this.frame.getHeight(); row < height; row++) {
-				var color = this.frame.getPixel(col, row);
-				this.renderPixel_(color, col, row, context);
-			}
-		}
-
-		return context;
-	};
-
-	ns.CanvasRenderer.prototype.renderPixel_ = function (color, col, row, context) {
-		if(color == Constants.TRANSPARENT_COLOR) {
-			color = "#FFF";
-		}
-
-		context.fillStyle = color;
-		context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
-	};
-
-	ns.CanvasRenderer.prototype.createCanvas_ = function () {
-		var width = this.frame.getWidth() * this.dpi;
-		var height = this.frame.getHeight() * this.dpi;
-		return pskl.CanvasUtils.createCanvas(width, height);
-	};
-})();

js/rendering/DrawingLoop.js

@@ -1,61 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.rendering");
-
-	ns.DrawingLoop = function () {
-		this.requestAnimationFrame = this.getRequestAnimationFrameShim_();
-		this.isRunning = false;
-		this.previousTime = 0;
-		this.callbacks = [];
-	};
-
-	ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
-		var callbackObj = {
-			fn : callback, 
-			scope : scope, 
-			args : args
-		};
-		this.callbacks.push(callbackObj);
-		return callbackObj;
-	};
-
-	ns.DrawingLoop.prototype.removeCallback = function (callbackObj) {
-		var index = this.callbacks.indexOf(callbackObj);
-		if (index != -1) {
-			this.callbacks.splice(index, 1);
-		}
-	};
-
-	ns.DrawingLoop.prototype.start = function () {
-		this.isRunning = true;
-		this.loop_();
-	};
-
-	ns.DrawingLoop.prototype.loop_ = function () {
-		var currentTime = Date.now();
-		var delta = currentTime - this.previousTime;
-		this.executeCallbacks_(delta);
-		this.previousTime = currentTime;
-		this.requestAnimationFrame.call(window, this.loop_.bind(this));
-	};
-
-	ns.DrawingLoop.prototype.executeCallbacks_ = function (deltaTime) {
-		for (var i = 0 ; i < this.callbacks.length ; i++) {
-			var cb = this.callbacks[i];
-			cb.fn.call(cb.scope, deltaTime, cb.args);
-		}
-	};
-
-	ns.DrawingLoop.prototype.stop = function () {
-		this.isRunning = false;
-	};
-
-	ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
-		var requestAnimationFrame = window.requestAnimationFrame ||
-									window.mozRequestAnimationFrame ||  
-									window.webkitRequestAnimationFrame || 
-									window.msRequestAnimationFrame || 
-									function (callback) { window.setTimeout(callback, 1000/60); };
-
-		return requestAnimationFrame;
-	};
-})();

js/rendering/FrameRenderer.js

@@ -1,165 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl.rendering");
-
-    ns.FrameRenderer = function (container, renderingOptions, className) {
-        this.defaultRenderingOptions = {
-            'supportGridRendering' : false
-        };
-        renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
-
-        if(container === undefined) {
-            throw 'Bad FrameRenderer initialization. <container> undefined.';
-        }
-        
-        if(isNaN(renderingOptions.dpi)) {
-            throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
-        }
-
-        this.container = container;
-        this.dpi = renderingOptions.dpi;
-        this.className = className;
-        this.canvas = null;
-        this.supportGridRendering = renderingOptions.supportGridRendering;
-
-        this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
-
-        // Flag to know if the config was altered
-        this.canvasConfigDirty = true;
-        this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
-        $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
-    };
-
-    ns.FrameRenderer.prototype.init = function (frame) {
-        this.render(frame);
-        this.lastRenderedFrame = frame;
-    };
-
-    ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
-        this.dpi = newDPI;
-        this.canvasConfigDirty = true;
-    };
-
-    /**
-     * @private
-     */
-    ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
-        
-        if(settingName == pskl.UserSettings.SHOW_GRID) {
-            this.enableGrid(settingValue);
-        }
-        else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
-            this.updateBackgroundClass_(settingValue);
-        }
-    };
-
-    /**
-     * @private
-     */
-    ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
-        var currentClass = this.container.data('current-background-class');
-        if (currentClass) {
-            this.container.removeClass(currentClass);
-        }   
-        this.container.addClass(newClass);
-        this.container.data('current-background-class', newClass);
-    };
-
-    ns.FrameRenderer.prototype.enableGrid = function (flag) {
-        this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
-        this.canvasConfigDirty = true;
-    };
-
-    ns.FrameRenderer.prototype.render = function (frame) {
-        this.clear(frame);
-        var context = this.getCanvas_(frame).getContext('2d');
-        for(var col = 0, width = frame.getWidth(); col < width; col++) {
-            for(var row = 0, height = frame.getHeight(); row < height; row++) {
-                var color = frame.getPixel(col, row);
-                this.renderPixel_(color, col, row, context);
-            }
-        }
-        this.lastRenderedFrame = frame;
-    };
-
-    ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
-        if(color != Constants.TRANSPARENT_COLOR) {
-            context.fillStyle = color;
-            context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
-        }
-    };
-
-    ns.FrameRenderer.prototype.clear = function (frame) {
-        var canvas = this.getCanvas_(frame);
-        canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
-    };
-
-    /**
-     * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
-     * frame) into a sprite coordinate in column and row.
-     * @public
-     */
-    ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
-        var cellSize = this.dpi + this.gridStrokeWidth;
-        return {
-            "col" : (coords.x - coords.x % cellSize) / cellSize,
-            "row" : (coords.y - coords.y % cellSize) / cellSize
-        };
-    };
-
-    /**
-     * @private
-     */
-    ns.FrameRenderer.prototype.getFramePos_ = function(index) {
-        return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
-    };
-
-    /**
-     * @private
-     */
-    ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
-        var ctx = canvas.getContext("2d");
-        ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
-        ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
-        for(var c=1; c < col; c++) {            
-            ctx.moveTo(this.getFramePos_(c), 0);
-            ctx.lineTo(this.getFramePos_(c), height);
-            ctx.stroke();
-        }
-        
-        for(var r=1; r < row; r++) {
-            ctx.moveTo(0, this.getFramePos_(r));
-            ctx.lineTo(width, this.getFramePos_(r));
-            ctx.stroke();
-        }
-    };
-
-    /**
-     * @private
-     */
-    ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
-        if(this.canvasConfigDirty) {
-            $(this.canvas).remove();
-            
-            var col = frame.getWidth(),
-                row = frame.getHeight();
-            
-            var pixelWidth =  col * this.dpi + this.gridStrokeWidth * (col - 1);
-            var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
-            var classes = ['canvas'];
-            if (this.className) {
-              classes.push(this.className);  
-            }
-            var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
-
-            this.container.append(canvas);
-
-            if(this.gridStrokeWidth > 0) {
-                this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
-            }
-                
-            this.canvas = canvas;
-            this.canvasConfigDirty = false;
-        }
-        return this.canvas;
-    };
-})();

js/rendering/SpritesheetRenderer.js

@@ -1,63 +0,0 @@
-(function () {
-
-	var ns = $.namespace("pskl.rendering");
-
-	ns.SpritesheetRenderer = function (framesheet) {
-		this.framesheet = framesheet;
-	};
-
-	ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
-		var canvas = this.createCanvas_();
-		for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
-			var frame = this.framesheet.getFrameByIndex(i);
-			this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
-		}
-		return canvas.toDataURL("image/png");
-	};
-
-	ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
-		var encoder = new GIFEncoder(), dpi = 10;
-        encoder.setRepeat(0);
-        encoder.setDelay(1000/fps);
-
-        encoder.start();
-        encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi);
-        for (var i = 0 ; i < this.framesheet.frames.length ; i++) {
-          var frame = this.framesheet.frames[i];
-          var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
-          encoder.addFrame(renderer.render());
-        }
-        encoder.finish();
-
-        var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
-        return imageData;
-	};
-
-
-	/**
-	 * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
-	 */
-	ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
-		var context = canvas.getContext('2d');
-		for(var col = 0, width = frame.getWidth(); col < width; col++) {
-			for(var row = 0, height = frame.getHeight(); row < height; row++) {
-				var color = frame.getPixel(col, row);
-				if(color != Constants.TRANSPARENT_COLOR) {
-					context.fillStyle = color;
-					context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
-				}
-			}
-		}
-	};
-
-	ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
-		var frameCount = this.framesheet.getFrameCount();
-		if (frameCount > 0){
-			var width = frameCount * this.framesheet.getWidth();
-			var height = this.framesheet.getHeight();
-			return pskl.CanvasUtils.createCanvas(width, height);
-		} else {
-			throw "Cannot render empty Spritesheet";
-		}
-	};
-})();

js/selection/BaseSelection.js

@@ -1,34 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.selection");
-
-	ns.BaseSelection = function () {
-		this.reset();
-	};
-
-	ns.BaseSelection.prototype.reset = function () {
-		this.pixels = [];
-		this.hasPastedContent = false;
-	};
-
-	ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
-		var movedPixel, movedPixels = [];
-
-		for(var i=0, l=this.pixels.length; i<l; i++) {
-			movedPixel = this.pixels[i];
-			movedPixel.col += colDiff;
-			movedPixel.row += rowDiff;
-			movedPixels.push(movedPixel);
-		}
-		this.pixels = movedPixels;
-	};
-
-	ns.BaseSelection.prototype.fillSelectionFromFrame = function (targetFrame) {
-		var pixelWithCopiedColor;
-		for(var i=0, l=this.pixels.length; i<l; i++) {
-			pixelWithCopiedColor = this.pixels[i];
-			pixelWithCopiedColor.copiedColor =
-				targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
-		}
-		this.hasPastedContent = true;
-	};
-})();

js/selection/RectangularSelection.js

@@ -1,9 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.selection");
-
-	ns.RectangularSelection = function (x0, y0, x1, y1) {
-		this.pixels = pskl.PixelUtils.getRectanglePixels(x0, y0, x1, y1);
-	};
-
-	pskl.utils.inherit(ns.RectangularSelection, ns.BaseSelection);
-})();

js/selection/SelectionManager.js

@@ -1,130 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.selection");
-
-	
-	ns.SelectionManager = function (framesheet, overlayFrame) {
-		
-		this.framesheet = framesheet;
-		this.overlayFrame = overlayFrame;
-		
-		this.currentSelection = null;
-		
-		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
-		$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));	
-		$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
-		
-		$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
-		$.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
-		$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
-
-		$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this)); 
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
-		if(this.currentSelection) {
-			this.currentSelection.reset();
-		}
-		this.overlayFrame.clear();
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
-		var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
-		if(!isSelectionTool) {
-			this.cleanSelection_();
-		}
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
-		this.cleanSelection_();
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onCut_ = function(evt) {
-		if(this.currentSelection) {
-			// Put cut target into the selection:
-			this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
-
-			var pixels = this.currentSelection.pixels;
-			var currentFrame = this.framesheet.getCurrentFrame();
-			for(var i=0, l=pixels.length; i<l; i++) {
-				try {
-					currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
-				}
-				catch(e) {
-					// Catchng out of frame's bound pixels without testing
-				}
-			}
-		}
-		else {
-			throw "Bad state for CUT callback in SelectionManager";
-		}
-	};
-
-	ns.SelectionManager.prototype.onPaste_ = function(evt) {
-		if(this.currentSelection && this.currentSelection.hasPastedContent) {
-			var pixels = this.currentSelection.pixels;
-			var currentFrame = this.framesheet.getCurrentFrame();
-			for(var i=0, l=pixels.length; i<l; i++) {
-				try {
-					currentFrame.setPixel(
-						pixels[i].col, pixels[i].row, 
-						pixels[i].copiedColor);
-				}
-				catch(e) {
-					// Catchng out of frame's bound pixels without testing
-				}
-			}
-		}
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onCopy_ = function(evt) {
-		if(this.currentSelection && this.framesheet.getCurrentFrame()) {
-			this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
-		}
-		else {
-			throw "Bad state for CUT callback in SelectionManager";
-		}
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onSelectionCreated_ = function(evt, selection) {
-		if(selection) {
-			this.currentSelection = selection;
-			var pixels = selection.pixels;
-			for(var i=0, l=pixels.length; i<l; i++) {
-				this.overlayFrame.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
-			}
-		}
-		else {
-			throw "No selection set in SelectionManager";
-		}
-	};
-
-	/**
-	 * @private
-	 */
-	ns.SelectionManager.prototype.onSelectionMoved_ = function(evt, colDiff, rowDiff) {
-		if(this.currentSelection) {
-			this.currentSelection.move(colDiff, rowDiff);
-		}
-		else {
-			throw "Bad state: No currentSelection set when trying to move it in SelectionManager";
-		}
-	};
-})();

js/selection/ShapeSelection.js

@@ -1,9 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.selection");
-
-	ns.ShapeSelection = function (pixels) {
-		this.pixels = pixels;
-	};
-
-	pskl.utils.inherit(ns.ShapeSelection, ns.BaseSelection);
-})();

js/service/HistoryService.js

@@ -1,28 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.service");
-	ns.HistoryService = function (framesheet) {
-    this.framesheet = framesheet; 
-  };
-
-	ns.HistoryService.prototype.init = function () {
-    
-    $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
-    $.subscribe(Events.UNDO, this.undo.bind(this));
-    $.subscribe(Events.REDO, this.redo.bind(this));
-	};
-
-  ns.HistoryService.prototype.saveState = function () {
-    this.framesheet.getCurrentFrame().saveState();
-  };
-
-  ns.HistoryService.prototype.undo = function () {
-    this.framesheet.getCurrentFrame().loadPreviousState();
-    $.publish(Events.FRAMESHEET_RESET);
-  };
-
-  ns.HistoryService.prototype.redo = function () {
-    this.framesheet.getCurrentFrame().loadNextState();
-    $.publish(Events.FRAMESHEET_RESET);
-  };
-
-})();

js/service/KeyboardEventService.js

@@ -1,64 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl.service");
-
-	ns.KeyboardEventService = function () {};
-
-	/**
-	 * @private
-	 */
-	ns.KeyboardEventService.prototype.KeyboardActions_ = {
-
-		"ctrl" : {
-			"z" : Events.UNDO,
-			"y" : Events.REDO,
-			"x" : Events.CUT,
-			"c" : Events.COPY,
-			"v" : Events.PASTE
-		}
-	};
-
-	/**
-	 * @private
-	 */
-	ns.KeyboardEventService.prototype.CharCodeToKeyCodeMap_ = {
-
-		90 : "z",
-		89 : "y",
-		88 : "x",
-		67 : "c",
-		86 : "v"
-	};
-
-	/**
-	 * @private
-	 */
-	ns.KeyboardEventService.prototype.onKeyUp_ = function(evt) {
-		var isMac = false;
-		if (navigator.appVersion.indexOf("Mac")!=-1) {
-			// Welcome in mac world where vowels are consons and meta used instead of ctrl:
-			isMac = true;
-		}
-		
-		if (isMac ? evt.metaKey : evt.ctrlKey) {
-			// Get key pressed:
-			var letter = this.CharCodeToKeyCodeMap_[evt.which];
-			if(letter) {
-				var eventToTrigger = this.KeyboardActions_.ctrl[letter];
-				if(eventToTrigger) {
-					$.publish(eventToTrigger);
-
-					evt.preventDefault();
-					return false;
-				}
-			}
-		}
-	};
-
-	/**
-	 * @public
-	 */
-	ns.KeyboardEventService.prototype.init = function() {
-		$(document.body).keydown($.proxy(this.onKeyUp_, this));
-	};
-	
-})();

js/service/LocalStorageService.js

@@ -1,88 +0,0 @@
-(function () {
-  var ns = $.namespace("pskl.service");
-
-  ns.LocalStorageService = function (framesheet_) {
-
-    if(framesheet_ === undefined) {
-        throw "Bad LocalStorageService initialization: <undefined frameSheet>";
-    }
-    this.framesheet = framesheet_;
-    this.localStorageThrottler_ = null;
-  };
-
-  /**
-   * @private
-   */
-  ns.LocalStorageService.prototype.persistToLocalStorageRequest_ = function () {
-    // Persist to localStorage when drawing. We throttle localStorage accesses
-    // for high frequency drawing (eg mousemove).
-    if(this.localStorageThrottler_ !== null) {
-      window.clearTimeout(this.localStorageThrottler_);
-    }
-    this.localStorageThrottler_ = window.setTimeout($.proxy(function() {
-      this.persistToLocalStorage_();
-      this.localStorageThrottler_ = null;
-    }, this), 1000);
-  };
-
-  /**
-   * @private
-   */
-  ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
-    
-    console.log('[LocalStorage service]: Snapshot stored');
-    window.localStorage.snapShot = this.framesheet.serialize();
-  };
-
-  /**
-   * @private
-   */
-  ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
-
-    this.framesheet.deserialize(window.localStorage.snapShot);
-    this.framesheet.setCurrentFrameIndex(0);
-  };
-
-  /**
-   * @private
-   */
-  ns.LocalStorageService.prototype.cleanLocalStorage_ = function() {
-    console.log('[LocalStorage service]: Snapshot removed');
-    delete window.localStorage.snapShot;
-  };
-
-  /**
-   * @public
-   */
-  ns.LocalStorageService.prototype.init = function(framesheet_) {
-    $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
-  };
-
-  /**
-   * @public
-   */
-  ns.LocalStorageService.prototype.displayRestoreNotification = function() {
-    if(window.localStorage && window.localStorage.snapShot) {
-      var reloadLink = "<a href='#' class='localstorage-restore onclick='pskl.app.restoreFromLocalStorage()'>reload</a>";
-      var discardLink = "<a href='#' class='localstorage-discard' onclick='pskl.app.cleanLocalStorage()'>discard</a>";
-      var content = "Non saved version found. " + reloadLink + " or " + discardLink;
-
-      $.publish(Events.SHOW_NOTIFICATION, [{
-        "content": content,
-        "behavior": $.proxy(function(rootNode) {
-          rootNode = $(rootNode);
-          rootNode.click($.proxy(function(evt) {
-            var target = $(evt.target);
-            if(target.hasClass("localstorage-restore")) {
-              this.restoreFromLocalStorage_();
-            }
-            else if (target.hasClass("localstorage-discard")) {
-              this.cleanLocalStorage_();
-            }
-            $.publish(Events.HIDE_NOTIFICATION);
-          }, this));
-        }, this)
-      }]);
-    }
-  };
-})();

js/utils/CanvasUtils.js

@@ -1,22 +0,0 @@
-(function () {
-	var ns = $.namespace("pskl");
-
-	ns.CanvasUtils = {
-		createCanvas : function (width, height, classList) {
-			var canvas = document.createElement("canvas");
-			canvas.setAttribute("width", width);
-			canvas.setAttribute("height", height);
-
-			if (typeof classList == "string") {
-				classList = [classList];
-			}
-			if (Array.isArray(classList)) {
-				for (var i = 0 ; i < classList.length ; i++) {
-					canvas.classList.add(classList[i]);
-				}
-			}
-			
-			return canvas;
-		}
-	};
-})();

js/utils/PixelUtils.js

@@ -1,175 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl");
-
-    ns.PixelUtils = {
-
-        getRectanglePixels : function (x0, y0, x1, y1) {
-            var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
-            var pixels = [];
-
-            for(var x = rectangle.x0; x <= rectangle.x1; x++) {
-                for(var y = rectangle.y0; y <= rectangle.y1; y++) {
-                    pixels.push({"col": x, "row": y});
-                }
-            }
-            
-            return pixels;      
-        },
-
-        getBoundRectanglePixels : function (x0, y0, x1, y1) {
-            var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
-            var pixels = [];
-            // Creating horizontal sides of the rectangle:
-            for(var x = rectangle.x0; x <= rectangle.x1; x++) {
-                pixels.push({"col": x, "row": rectangle.y0});
-                pixels.push({"col": x, "row": rectangle.y1});
-            }
-
-            // Creating vertical sides of the rectangle:
-            for(var y = rectangle.y0; y <= rectangle.y1; y++) {
-                pixels.push({"col": rectangle.x0, "row": y});
-                pixels.push({"col": rectangle.x1, "row": y});
-            }
-            
-            return pixels;  
-        },
-
-        /**
-         * Return an object of ordered rectangle coordinate.
-         * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner 
-         * @private
-         */
-        getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
-            return {
-                x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
-                x1 : Math.max(x0, x1), y1 : Math.max(y0, y1),
-            };
-        },
-
-        /**
-         * Return the list of pixels that would have been filled by a paintbucket tool applied 
-         * on pixel at coordinate (x,y).
-         * This function is not altering the Frame object argument. 
-         *
-         * @param frame pskl.model.Frame The frame target in which we want to paintbucket
-         * @param col number Column coordinate in the frame 
-         * @param row number Row coordinate in the frame 
-         *
-         * @return an array of the pixel coordinates paint with the replacement color
-         */
-        getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
-            // To get the list of connected (eg the same color) pixels, we will use the paintbucket algorithm
-            // in a fake cloned frame. The returned pixels by the paintbucket algo are the painted pixels
-            // and are as well connected.
-            var fakeFrame = frame.clone(); // We just want to
-            var fakeFillColor = "sdfsdfsdf"; // A fake color that will never match a real color.
-            var paintedPixels = this.paintSimilarConnectedPixelsFromFrame(fakeFrame, col, row, fakeFillColor);
-
-            return paintedPixels;
-        },
-
-        /**
-         * Apply the paintbucket tool in a frame at the (col, row) initial position
-         * with the replacement color.
-         * 
-         * @param frame pskl.model.Frame The frame target in which we want to paintbucket
-         * @param col number Column coordinate in the frame 
-         * @param row number Row coordinate in the frame 
-         * @param replacementColor string Hexadecimal color used to fill the area
-         *
-         * @return an array of the pixel coordinates paint with the replacement color
-         */
-        paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
-            /**
-             *  Queue linear Flood-fill (node, target-color, replacement-color):
-             *   1. Set Q to the empty queue.
-             *   2. If the color of node is not equal to target-color, return.
-             *   3. Add node to Q.
-             *   4. For each element n of Q:
-             *   5.     If the color of n is equal to target-color:
-             *   6.         Set w and e equal to n.
-             *   7.         Move w to the west until the color of the node to the west of w no longer matches target-color.
-             *   8.         Move e to the east until the color of the node to the east of e no longer matches target-color.
-             *   9.         Set the color of nodes between w and e to replacement-color.
-             *  10.         For each node n between w and e:
-             *  11.             If the color of the node to the north of n is target-color, add that node to Q.
-             *  12.             If the color of the node to the south of n is target-color, add that node to Q.
-             *  13. Continue looping until Q is exhausted.
-             *  14. Return.
-             */
-            var paintedPixels = [];
-            var queue = [];
-            var dy = [-1, 0, 1, 0];
-            var dx = [0, 1, 0, -1];
-            var targetColor;
-            try {
-                targetColor = frame.getPixel(col, row);
-            } catch(e) {
-                // Frame out of bound exception.
-            }
-            
-            if(targetColor == replacementColor) {
-                return;
-            }
-            
-
-            queue.push({"col": col, "row": row});
-            var loopCount = 0;
-            var cellCount = frame.getWidth() * frame.getHeight();
-            while(queue.length > 0) {
-                loopCount ++;
-
-                var currentItem = queue.pop();
-                frame.setPixel(currentItem.col, currentItem.row, replacementColor);
-                paintedPixels.push({"col": currentItem.col, "row": currentItem.row });
-
-                for (var i = 0; i < 4; i++) {
-                    var nextCol = currentItem.col + dx[i];
-                    var nextRow = currentItem.row + dy[i];
-                    try {
-                        if (frame.containsPixel(nextCol, nextRow)  && frame.getPixel(nextCol, nextRow) == targetColor) {
-                            queue.push({"col": nextCol, "row": nextRow });
-                        }
-                    } catch(e) {
-                        // Frame out of bound exception.
-                    }
-                }
-
-                // Security loop breaker:
-                if(loopCount > 10 * cellCount) {
-                    console.log("loop breaker called");
-                    break;          
-                }
-            }
-            return paintedPixels;
-        },
-
-        /**
-         * Calculate and return the maximal DPI to display a picture in a given container.
-         *
-         * @param container jQueryObject Container where the picture should be displayed
-         * @param number pictureHeight height in pixels of the picture to display
-         * @param number pictureWidth width in pixels of the picture to display
-         * @return number maximal dpi
-         */
-        calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
-          return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
-        },
-
-        /**
-         * Calculate and return the maximal DPI to display a picture for a given height and width.
-         *
-         * @param height number Height available to display the picture
-         * @param width number Width available to display the picture
-         * @param number pictureHeight height in pixels of the picture to display
-         * @param number pictureWidth width in pixels of the picture to display
-         * @return number maximal dpi
-         */
-        calculateDPI : function (height, width, pictureHeight, pictureWidth) {
-          var heightBoundDpi = Math.floor(height / pictureHeight),
-              widthBoundDpi = Math.floor(width / pictureWidth);
-
-          return Math.min(heightBoundDpi, widthBoundDpi);
-        },
-    };
-})();

js/utils/UserSettings.js

@@ -1,76 +0,0 @@
-(function () {
-    var ns = $.namespace("pskl");
-
-    ns.UserSettings = {
-
-        SHOW_GRID : 'SHOW_GRID',
-        CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
-
-        KEY_TO_DEFAULT_VALUE_MAP_ : {
-            'SHOW_GRID' : false,
-            'CANVAS_BACKGROUND' : 'medium-canvas-background' 
-        },
-
-        /**
-         * @private
-         */
-        cache_ : {},
-
-        /**
-         * Static method to access a user defined settings value ot its default 
-         * value if not defined yet.
-         */
-        get : function (key) {
-            this.checkKeyValidity_(key);
-            if (!(key in this.cache_)) {
-                this.cache_[key] =
-                    this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
-            }
-            return this.cache_[key];
-        },
-
-        set : function (key, value) {
-           this.checkKeyValidity_(key);
-           this.cache_[key] = value;
-           this.writeToLocalStorage_(key, value);
-
-           $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);    
-        },
-
-        /**
-         * @private
-         */
-        readFromLocalStorage_ : function(key) {
-            var value = window.localStorage[key];
-            if (typeof value != "undefined") {
-                value = JSON.parse(value);
-            }
-            return value;
-        },
-
-        /**
-         * @private
-         */
-        writeToLocalStorage_ : function(key, value) {
-            // TODO(grosbouddha): Catch storage exception here.
-            window.localStorage[key] = JSON.stringify(value);
-        },
-
-        /**
-         * @private
-         */
-        readFromDefaults_ : function (key) {
-            return this.KEY_TO_DEFAULT_VALUE_MAP_[key];
-        },
-
-        /**
-         * @private
-         */
-        checkKeyValidity_ : function(key) {
-            if(!(key in this.KEY_TO_DEFAULT_VALUE_MAP_)) {
-                // TODO(grosbouddha): Define error catching strategy and throw exception from here.
-                console.log("UserSettings key <"+ key +"> not find in supported keys.");
-            }
-        }
-    };
-})();

js/utils/core.js

@@ -1,36 +0,0 @@
-jQuery.namespace = function() {
-    var a=arguments, o=null, i, j, d;
-    for (i=0; i<a.length; i=i+1) {
-        d=a[i].split(".");
-        o=window;
-        for (j=0; j<d.length; j=j+1) {
-            o[d[j]]=o[d[j]] || {};
-            o=o[d[j]];
-        }
-    }
-    return o;
-};
-
-/*
- * @provide pskl.utils
- *
- * @require Constants
- */
-(function() { // namespace: pskl.utils
-
-    var ns = $.namespace("pskl.utils");
-
-    ns.rgbToHex = function(r, g, b) {
-        if (r > 255 || g > 255 || b > 255)
-            throw "Invalid color component";
-        return ((r << 16) | (g << 8) | b).toString(16);
-    };
-
-    ns.inherit = function(extendedObject, inheritFrom) {
-        extendedObject.prototype = Object.create(inheritFrom.prototype);
-        extendedObject.prototype.constructor = extendedObject;
-        extendedObject.prototype.superclass = inheritFrom.prototype;
-    };
-
-})();
-

karma.conf.js

@@ -0,0 +1,67 @@
+// Karma configuration
+// Generated on Tue Jul 22 2014 23:49:26 GMT+0200 (Romance Daylight Time)
+
+module.exports = function(config) {
+
+  var mapToSrcFolder = function (path) {return ['src', path].join('/');};
+
+  var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
+  piskelScripts.push('test/js/**/*.js');
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: piskelScripts,
+
+
+    // list of files to exclude
+    exclude: [],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  });
+};

misc/desktop/Info.plist

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>BuildMachineOSBuild</key>
+	<string>12C3006</string>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>Piskel</string>
+	<key>CFBundleDocumentTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeIconFile</key>
+			<string>nw.icns</string>
+			<key>CFBundleTypeName</key>
+			<string>node-webkit App</string>
+			<key>CFBundleTypeRole</key>
+			<string>Viewer</string>
+			<key>LSHandlerRank</key>
+			<string>Owner</string>
+			<key>LSItemContentTypes</key>
+			<array>
+				<string>com.intel.nw.app</string>
+			</array>
+		</dict>
+		<dict>
+			<key>CFBundleTypeName</key>
+			<string>Folder</string>
+			<key>CFBundleTypeOSTypes</key>
+			<array>
+				<string>fold</string>
+			</array>
+			<key>CFBundleTypeRole</key>
+			<string>Viewer</string>
+			<key>LSHandlerRank</key>
+			<string>None</string>
+		</dict>
+	</array>
+	<key>CFBundleExecutable</key>
+	<string>node-webkit</string>
+	<key>CFBundleIconFile</key>
+	<string>nw.icns</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.intel.nw</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>Piskel</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>0.1.0</string>
+	<key>DTSDKBuild</key>
+	<string>11E52</string>
+	<key>DTSDKName</key>
+	<string>macosx10.7</string>
+	<key>DTXcode</key>
+	<string>0452</string>
+	<key>DTXcodeBuild</key>
+	<string>4G2008a</string>
+	<key>LSFileQuarantineEnabled</key>
+	<true/>
+	<key>LSMinimumSystemVersion</key>
+	<string>10.6.0</string>
+	<key>NSPrincipalClass</key>
+	<string>NSApplication</string>
+	<key>NSSupportsAutomaticGraphicsSwitching</key>
+	<true/>
+	<key>SCMRevision</key>
+	<string>239963</string>
+	<key>UTExportedTypeDeclarations</key>
+	<array>
+		<dict>
+			<key>UTTypeConformsTo</key>
+			<array>
+				<string>com.pkware.zip-archive</string>
+			</array>
+			<key>UTTypeDescription</key>
+			<string>node-webkit App</string>
+			<key>UTTypeIconFile</key>
+			<string>nw.icns</string>
+			<key>UTTypeIdentifier</key>
+			<string>com.intel.nw.app</string>
+			<key>UTTypeReferenceURL</key>
+			<string>https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps</string>
+			<key>UTTypeTagSpecification</key>
+			<dict>
+				<key>com.apple.ostype</key>
+				<string>node-webkit</string>
+				<key>public.filename-extension</key>
+				<array>
+					<string>nw</string>
+				</array>
+				<key>public.mime-type</key>
+				<string>application/x-node-webkit-app</string>
+			</dict>
+		</dict>
+	</array>
+</dict>
+</plist>

misc/icons/SVG/eye.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="300"
+   height="140.00085"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="eye.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="-6.0052729"
+     inkscape:cy="93.159467"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-223.21875,-469.24915)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 373.21875,469.25 c -63.15236,-0.28299 -150,70 -150,70 0,0 78.75568,70 150,70 62.82091,0 150,-70 150,-70 0,0 -87.47199,-69.71981 -150,-70 z m -1.5,22.3125 c 27.44855,0 49.6875,22.23895 49.6875,49.6875 0,27.44855 -22.23895,49.6875 -49.6875,49.6875 C 344.2702,590.9375 322,568.69855 322,541.25 c 0,-27.44855 22.2702,-49.6875 49.71875,-49.6875 z m 0.0312,18.34375 c -17.85254,0 -32.34375,14.49121 -32.34375,32.34375 0,17.85254 14.49121,32.3125 32.34375,32.3125 17.85254,0 32.3125,-14.45996 32.3125,-32.3125 0,-17.85254 -14.45996,-32.34375 -32.3125,-32.34375 z"
+       id="path2987"
+       inkscape:export-filename="C:\Development\git\piskel\misc\icons\eye.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

misc/icons/SVG/flip.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="770.71875"
+   height="581.4375"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="mirror.svg"
+   inkscape:export-filename="C:\Development\git\piskel\src\img\tools\flip.png"
+   inkscape:export-xdpi="35.446629"
+   inkscape:export-ydpi="35.446629">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="612.40785"
+     inkscape:cy="222.08964"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-63.5625,-233.7818)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 359.2768,233.7907 -295.7143,581.4286 295.7143,0 z"
+       id="rect2987"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\flip.png"
+       inkscape:export-xdpi="35.446629"
+       inkscape:export-ydpi="35.446629" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 538.5625,233.7818 295.71875,581.4375 -295.71875,0 0,-581.4375 z m 29.125,117.4375 0,434.28125 218.59375,0 L 567.6875,351.2193 z"
+       id="rect2987-1"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\flip.png"
+       inkscape:export-xdpi="35.446629"
+       inkscape:export-ydpi="35.446629" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 435.5625,233.93805 0,41.28125 25.71875,0 0,-41.28125 -25.71875,0 z m 0,91.28125 0,40 25.71875,0 0,-40 -25.71875,0 z m 0,90 0,40 25.71875,0 0,-40 -25.71875,0 z m 0,90 0,40 25.71875,0 0,-40 -25.71875,0 z m 0,90 0,40 25.71875,0 0,-40 -25.71875,0 z m 0,90 0,40 25.71875,0 0,-40 -25.71875,0 z m 0,90 0,40 25.71875,0 0,-40 -25.71875,0 z"
+       id="rect3796"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\flip.png"
+       inkscape:export-xdpi="35.446629"
+       inkscape:export-ydpi="35.446629"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

misc/icons/SVG/import-icon.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   inkscape:export-filename="C:\Users\Julian\Desktop\import-icon.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3776"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3778" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="211.98241"
+     inkscape:cy="421.19661"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3937"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3937"
+       transform="matrix(0.09331433,0,0,0.09331433,132.76469,588.24921)"
+       style="stroke:#ffffff;stroke-opacity:1">
+      <g
+         id="g3959"
+         inkscape:export-filename="C:\Users\Julian\Desktop\import-icon.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90">
+        <rect
+           style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="rect2985"
+           width="384.28558"
+           height="384.28564"
+           x="161.42857"
+           y="249.50504"
+           ry="45.714287" />
+        <g
+           transform="matrix(1.1961461,0,0,2.4281875,-3.7905251,90.097124)"
+           id="g3765"
+           style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1">
+          <g
+             id="g3769"
+             style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1">
+            <path
+               sodipodi:nodetypes="cccczscscc"
+               inkscape:connector-curvature="0"
+               d="m 400,142.55868 -100,56.94635 -100,-57.33935 60,0.1965 c 0,0 0,-84.96745 0,-107.61226 0,-22.64481 55.79903,-25.2405808 80.01042,-22.177879 38.98433,4.931455 46.17248,30.649944 46.17248,30.649944 0,0 -46.97367,-31.662831 -46.18302,0.888182 0.65678,27.039499 0,98.252013 0,98.252013 z"
+               style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+               id="rect3758" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

misc/icons/SVG/onion.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="484.83377"
+   height="430.80322"
+   id="svg3775"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 3">
+  <defs
+     id="defs3777" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.04375"
+     inkscape:cx="-429.81362"
+     inkscape:cy="-202.97901"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata3780">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-108.38875,-334.08796)">
+    <g
+       id="g4409">
+      <g
+         id="g4402" />
+      <g
+         transform="translate(0,0.82903262)"
+         id="g4395">
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="m 395.27679,333.25893 -27.75,24.625 -1.65625,-9 -15.87054,4.59375 0,30.6875 1.02679,21.75 16.5625,-14.6875 13.6875,-12.15625 c -0.38933,5.52995 -0.57204,11.36571 -0.1875,17.84375 0.60884,10.25666 3.42535,19.47486 9.03125,26.6875 5.6059,7.21264 13.15778,11.83264 21.53125,15.65625 16.74693,7.64722 37.6168,20.19024 63.19196,41.4465 48.42535,40.24771 54.41585,60.33492 63.14228,95.72811 8.30827,46.0064 -4.89609,79.1393 -23.94924,107.24539 -13.61329,20.08154 -30.46397,37.90172 -67.50554,45.41482 -37.04157,7.5131 -71.72672,9.9375 -96.53125,9.9375 l 0,25 c 26.40206,0 62.17269,-2.46078 101.5,-10.4375 39.32731,-7.97672 78.11592,-20.77325 101.8125,-45.5625 25.65093,-26.83371 50.16969,-75.46693 35.5,-151.5 l -0.0312,-0.125 -0.0312,-0.125 c -6.53497,-30.32511 -26.37349,-75.86993 -103.9375,-109.59375 -32.08342,-13.94946 -49.48883,-22.95257 -62.57589,-28.92857 -6.54353,-2.988 -10.31288,-6.85833 -12.36607,-9.5 -2.05319,-2.64167 -3.40095,-5.87935 -3.8125,-12.8125 -0.92607,-15.60085 1.34241,-27.46751 3.71875,-35.3125 2.37634,-7.84499 4.375,-10.875 4.375,-10.875 l -18.875,-16 z"
+           id="path3783-2"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="m 368.02679,382.44643 c 0,0 -18.02679,-4.71234 -18.02679,1.3125 0,33.38646 -0.45698,39.28362 10.99554,62.875 11.45252,23.59138 26.22845,47.86253 48.53571,68.45982 42.18558,38.95183 38.76978,44.87254 45.77232,64.91071 2.57793,7.37689 3.66466,24.51253 1.875,37.96875 -1.78965,13.45623 -6.8081,31.21802 -13.40625,41.3125 -10.36811,15.86211 -18.71831,32.07642 -38.55357,43.09375 C 384.4983,713.88847 366.62548,716.375 350,716.375 l 0,25 c 20.82486,0 44.52967,-5.01706 69.5625,-15.125 25.03283,-10.10794 49.12742,-25.27054 63.71875,-47.59375 9.77369,-14.95272 20.06105,-37.72017 22.33202,-55.91561 2.27097,-18.19544 6.78209,-33.89274 -5.08281,-58.40387 -18.26325,-37.72918 -42.54947,-49.06002 -72.19845,-74.15863 -18.35479,-15.5378 -34.85805,-33.83125 -44.86772,-54.45046 -10.00967,-20.61921 -14.81706,-41.55822 -15.4375,-53.28125 z"
+           id="path3783-9-4-2"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="csssszssccssssssc" />
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="M 364.71429,398.50893 350,399.85268 c 0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 2.17726,28.99404 4.22321,39.97321 3.9423,21.15552 10.51352,34.8833 14.63393,48.16965 3.27485,10.5598 6.94665,25.34012 9.3884,31.02232 6.61244,15.3878 7.52886,34.1921 0.75446,55.84375 -6.86056,21.92704 -17.55684,42.94479 -35.42857,49.84375 L 350,716.625 c 25.86119,-9.9831 62.03992,-38.1333 71.93512,-69.75936 8.9188,-28.50537 3.28613,-54.26844 -4.84375,-73.1875 -4.92941,-11.47123 -9.61575,-19.37277 -14.86607,-28.9375 -6.46007,-11.76857 -20.1885,-26.52209 -24.11895,-38.53817 -3.57466,-10.92835 -7.82736,-24.14439 -8.92331,-37.66229 -2.1919,-27.03581 -3.63369,-54.77948 -4.46875,-70.03125 z"
+           id="path3783-9-4-4-8-8"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccsssssccsssssc" />
+      </g>
+    </g>
+    <path
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="m 306.33447,334.11887 27.75,24.625 1.65625,-9 15.87054,4.59375 0,30.6875 -1.02679,21.75 -16.5625,-14.6875 -13.6875,-12.15625 c 0.38933,5.52995 0.57204,11.36571 0.1875,17.84375 -0.60884,10.25666 0.61526,20.48501 -4.99064,27.69765 -5.6059,7.21264 -12.14763,16.88341 -20.5211,20.70702 -16.74693,7.64722 -36.60664,20.19024 -62.1818,41.4465 -48.42535,40.24771 -47.34479,51.24354 -56.07122,86.63673 -3.25751,47.01655 -5.92183,46.3581 4.75635,78.96112 6.45302,19.70261 22.38275,38.91187 59.42432,56.52649 34.13302,16.23151 85.86885,30.14056 110.67338,30.14056 l 0,25 c -26.40206,0 -62.17269,-2.46078 -101.5,-10.4375 -39.32731,-7.97672 -78.11592,-20.77325 -101.8125,-45.5625 -25.65093,-26.83371 -50.169693,-75.46693 -35.5,-151.5 l 0.0312,-0.125 0.0312,-0.125 c 6.53497,-30.32511 26.37349,-75.86993 103.9375,-109.59375 32.08342,-13.94946 49.48883,-22.95257 62.57589,-28.92857 6.54353,-2.988 10.31288,-6.85833 12.36607,-9.5 2.05319,-2.64167 3.40095,-5.87935 3.8125,-12.8125 0.92607,-15.60085 -1.34241,-27.46751 -3.71875,-35.3125 -2.37634,-7.84499 -4.375,-10.875 -4.375,-10.875 l 18.875,-16 z"
+       id="path3783-2-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
+    <path
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="m 343.97613,380.44701 9.00001,12.77232 c -0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 3.53703,30.42261 1.49108,41.40178 -3.9423,21.15552 -3.37067,28.45473 -7.49108,41.74108 -3.27485,10.5598 -6.94665,28.91155 -9.3884,34.59375 -6.61244,15.3878 -8.24315,50.62067 -1.46875,72.27232 6.86056,21.92704 11.12828,50.08764 21.85715,66.27232 l 3.98985,41.15013 C 338.24766,729.2435 314.3133,692.32754 304.4181,660.70148 c -8.9188,-28.50537 -8.28613,-78.55416 -0.15625,-97.47322 4.92941,-11.47123 9.61575,-22.9442 14.86607,-32.50893 6.46007,-11.76857 10.13774,-23.49163 13.05804,-36.51786 2.51528,-11.21964 6.93976,-29.49102 8.03571,-43.00892 2.1919,-27.03581 2.9194,-55.49377 3.75446,-70.74554 z"
+       id="path3783-9-4-4-8-8-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccsssssccsssssc" />
+  </g>
+</svg>

misc/icons/SVG/swap-arrow-square.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="swap-arrow-square.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="394.04689"
+     inkscape:cy="437.49995"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3903"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3863"
+       transform="matrix(1.0584227,0.8783336,-0.88927511,1.0454,500.51129,-281.01924)" />
+    <g
+       id="g3903"
+       transform="matrix(1.0752324,0,0,1.1512202,-10.080657,-112.64735)">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015"
+         d="m 134.94957,482.97409 77.33565,-84.65176 90.19445,84.65176 c -55.58473,1.43563 -111.94607,1.12702 -167.5301,0 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.02133131px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 454.32064,637.60642 c 0,0 -209.21865,11.0537 -216.48659,-180.84972 l -55.19052,0.25672 c 0.0919,230.63552 273.06531,236.67753 273.06531,236.67753 z"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc"
+         id="path2995-0" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015-5"
+         d="m 420.44925,576.40133 84.53491,77.33565 -84.53491,90.19445 c -1.43564,-55.58473 -1.12702,-111.94607 0,-167.5301 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

misc/icons/SVG/swap-arrow.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="205.60891"
+     inkscape:cy="475.62016"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3866"
+       transform="matrix(0.76563359,0.64327693,-0.64327693,0.76563359,437.69481,-47.0057)">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015"
+         d="m 130,570.36218 0,-60 63.85714,0 c -20.96635,20.14932 -41.98769,40.84088 -63.85714,60 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015-7"
+         d="m 469.84542,570.36218 0,-60 -63.85714,0 c 20.96635,20.14932 41.98769,40.84088 63.85714,60 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <g
+         id="g3863">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.73463827px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 449.48174,512.15368 c 0,0 -145.41018,128.54808 -299.94302,0 L 150,552.36218 c 154.5622,109.35713 300,0 300,0 z"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccccc"
+           id="path2995-0" />
+      </g>
+    </g>
+  </g>
+</svg>

misc/icons/SVG/swap-colors-sq.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="435"
+   height="409.28125"
+   id="svg3768"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 3">
+  <defs
+     id="defs3770" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="87.95854"
+     inkscape:cy="195.23297"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3773">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-151.0625,-197.71875)">
+    <rect
+       style="fill:none;stroke:#ffffff;stroke-width:35;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="rect3784"
+       width="400"
+       height="374.28571"
+       x="168.57143"
+       y="215.21933" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 368.5625,209.5 0,97.0625 c -18.16488,0.20304 -36.33513,0.39071 -54.5,0.59375 l 0,-51.1875 c -36.22093,27.13868 -72.43533,54.2988 -108.65625,81.4375 l 107.375,91.46875 1.28125,-53.5 54.5,0.96875 0,62.25 c 20.86255,0.2332 41.73121,0.45431 62.59375,0.6875 l 0,-51.1875 C 467.37718,415.23243 503.59158,442.3613 539.8125,469.5 l -107.40625,91.5 -1.25,-53.5 -62.59375,1.09375 0,75.1875 200,0 0,-365.71875 -200,-8.5625 z"
+       id="path4296"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

misc/icons/SVG/swap-colors.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="305.0015"
+   height="340.10172"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
+   inkscape:export-xdpi="28.799999"
+   inkscape:export-ydpi="28.799999"
+   sodipodi:docname="swap-colors.svg">
+  <defs
+     id="defs2994" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="8.3838947"
+     inkscape:cy="209.5365"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-253.81175,62.601668)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 281.31983,48.818994 c 3.33333,70.714286 6.66667,141.428566 10,212.142856 61.21871,3.33294 122.57845,5.69263 183.84823,2.1217 15.38711,-0.63513 30.77146,-1.33859 46.15177,-2.1217 3.33333,-70.71429 6.66667,-141.42857 10,-212.142856 -62.39939,12.482847 -126.73342,18.836303 -190.05871,9.668003 -20.08786,-2.492087 -40.09989,-5.6543 -59.94129,-9.668003 z"
+       id="path3907"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 261.31983,63.818994 c 0,-10 0,-20 0,-30 17.1189,-42.7715577 62.54009,-66.510405 106.22509,-72.841714 51.17865,-7.022275 108.04464,-2.652241 150.47229,29.6746917 14.38134,11.798678 28.46011,26.7242963 33.30262,44.9943353 0,9.390896 0,18.781791 0,28.172687"
+       id="path3909"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:35;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 364.53412,-41.538146 c 25.60486,-3.886191 51.66473,-4.881507 77.20839,0.0707 l 3.09159,0.466979 1.12859,0.176599"
+       id="path3915"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 154.55334,129.87795 0.68071,15.85947 c 0,0 -57.346456,21.06263 -57.436416,36.51009 -0.09,15.44746 36.662436,29.96772 55.746256,42.34379 19.08382,12.37606 46.83462,28.70031 47.51123,48.36912 C 200.90809,289.78491 152.86,310.7174 152.86,310.7174 l 0.68319,14.23203 111.11677,-2.02031 11.11168,-206.07112 z"
+       id="path3764"
+       inkscape:connector-curvature="0"
+       transform="translate(253.81175,-62.601668)"
+       sodipodi:nodetypes="cczzcccccc"
+       inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999" />
+  </g>
+</svg>

misc/icons/noun-project/sheep/icon_8389.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="99.997px" height="69.373px" viewBox="0 0 99.997 69.373" enable-background="new 0 0 99.997 69.373" xml:space="preserve">
+<path fill="#010101" d="M81.635,0.222c0.553-0.327,1.242-0.219,1.85-0.133c1.502,0.296,2.658,1.426,3.533,2.62
+	c0.608-0.379,1.252-0.777,1.983-0.842c0.595-0.015,1.09,0.416,1.394,0.889c0.568,0.909,0.76,2.02,1.442,2.864
+	C92,5.829,92.246,5.941,92.482,6.044c0.968,0.409,1.846,0.996,2.688,1.615c0.361,0.223,0.396,0.691,0.529,1.056
+	c0.478,1.579,0.306,3.241,0.149,4.853c-0.035,0.812-0.104,1.659,0.172,2.438c0.42,0.954,1.229,1.655,1.746,2.547
+	c1.191,2.13,2.146,4.467,2.229,6.937v0.088c-0.071,1.268-0.203,2.647-1.062,3.653c-0.707,0.846-1.85,1.101-2.896,1.223
+	c-0.747,0.104-1.508,0.127-2.258,0.077c-1.912-0.275-3.812-0.628-5.724-0.911c-0.34-0.052-0.719-0.055-1,0.167
+	c-0.391,0.281-0.494,0.786-0.537,1.235c-0.068,1.177,0.133,2.405-0.312,3.532c-0.227,0.604-0.768,0.999-1.266,1.371
+	c-1.092,0.753-2.313,1.291-3.441,1.981c-0.164,0.115-0.125,0.348-0.125,0.521c0.075,0.916,0.332,1.821,0.253,2.747
+	c-0.021,0.597-0.271,1.188-0.72,1.587c-0.768,0.709-1.434,1.519-2.068,2.346c-0.104,0.142-0.222,0.283-0.256,0.461
+	c-0.264,1.272-0.385,2.576-0.74,3.83c-0.201,0.641-0.416,1.34-0.943,1.793c-0.633,0.492-1.456-0.342-2.098,0.164
+	c-1.191,0.882-1.558,2.412-2.379,3.582c-0.469,0.595-1.104,1.039-1.805,1.319c-0.331,4.37-0.625,8.741-0.896,13.115h-5.166
+	c0.16-2.783,0.32-5.567,0.486-8.351c0.203-1.728-0.097-3.444-0.312-5.152c-0.017-0.364-0.43-0.709-0.785-0.543
+	c-1.037,0.3-2.131,0.459-3.204,0.289c-0.87-0.227-1.536-0.877-2.11-1.533c-1.765,1.695-4.326,2.275-6.712,2.025
+	c-0.471-0.726-0.792-1.629-1.603-2.049c-0.539-0.324-1.198-0.155-1.729,0.098c-1.214,0.558-1.945,1.805-3.197,2.305
+	c-1.1,0.51-2.359,0.188-3.41-0.291c-1.127-0.54-2.176-1.242-3.186-1.975c-0.52,0.236-0.837,0.728-1.123,1.195
+	c-0.968,0.117-1.964,0.449-2.923,0.103c-1.548-0.399-2.625-1.652-3.94-2.472c-0.886,0.66-1.608,1.58-2.68,1.957
+	c-0.698,0.24-1.468,0.399-2.196,0.207c-0.825-0.181-1.609-0.5-2.425-0.705c-0.27-0.078-0.558-0.037-0.807,0.082
+	c-1.433,0.646-2.197,2.23-3.688,2.779c-0.307,0.148-0.632,0.043-0.936-0.047c-0.346,3.812-0.79,7.618-1.159,11.43
+	c-1.811,0.006-3.623-0.002-5.434,0.004c-0.078-0.656-0.297-1.312-0.188-1.978c0.27-2.282,0.637-4.551,0.9-6.833
+	c0.181-1.895-0.835-3.648-2.096-4.977c0.154-0.737-0.056-1.502-0.528-2.078c-1.24-1.65-3.362-2.342-4.546-4.043
+	c-0.357-0.53-0.698-1.256-0.328-1.864c0.285-0.724,0.94-1.381,0.769-2.21c-0.04-0.262-0.165-0.502-0.347-0.691
+	c-1.07-1.188-1.971-2.514-2.849-3.844c-0.403-0.59-0.372-1.338-0.438-2.02c-0.141-1.194,0.732-2.201,0.798-3.364
+	c-0.196-0.665-0.84-1.073-1.192-1.654C0.638,31.785,0.077,30.231,0,28.62v-0.446c0.086-0.751,0.078-1.537,0.396-2.239
+	c0.522-1.006,1.566-1.623,2.075-2.636c-0.222-0.968-0.747-1.833-0.966-2.799c-0.097-1.466,0.425-2.955,1.404-4.049
+	c0.664-0.035,1.319-0.157,1.968-0.296c0.633-0.125,1.1-0.631,1.448-1.145c0.703-1.045,0.832-2.351,1.479-3.422
+	c0.255-0.444,0.607-0.855,1.08-1.074c0.692-0.327,1.395-0.631,2.119-0.88c0.38-0.117,0.779-0.237,1.18-0.167
+	c0.894,0.134,1.771,0.361,2.665,0.5c0.624,0.088,1.321-0.085,1.74-0.58c0.379-0.424,0.483-1.003,0.574-1.544
+	c0.926-0.306,1.929-0.646,2.907-0.389c1.367,0.311,2.72,0.672,4.091,0.96c0.748-0.367,1.104-1.208,1.849-1.582
+	c0.884-0.481,1.947-0.333,2.873-0.064c1.13,0.322,1.991,1.168,3.041,1.655c0.735-0.438,1.304-1.316,2.246-1.275
+	c1.698,0.444,3.091,1.803,4.899,1.868c1.229,0.001,1.779-1.354,2.912-1.594c0.744-0.228,1.496,0.125,2.104,0.54
+	c0.745,0.517,1.432,1.11,2.132,1.684c1.052-0.622,2.251-1.085,3.492-1.026c1.448,0.261,2.847,0.754,4.294,1.011
+	c0.615-0.026,0.967-0.649,1.489-0.902c1.062-0.497,2.237-0.755,3.409-0.756c1.316,0.169,2.543,0.712,3.82,1.042
+	c0.623-0.171,1.135-0.659,1.803-0.686c1.026-0.025,2.055-0.006,3.08-0.008c0.401-0.321,0.769-0.709,1.26-0.9
+	c0.869-0.37,1.744-0.836,2.703-0.898c0.994,0.08,1.975,0.287,2.964,0.402c0.235-1.401,0.842-2.703,1.481-3.958
+	c1.241-0.227,2.463-0.58,3.66-0.973C80.409,1.51,80.956,0.784,81.635,0.222z"/>
+</svg>

misc/icons/noun-project/sheep/license.txt

@@ -0,0 +1,8 @@
+Thank you for using The Noun Project. This icon is licensed under Creative
+Commons Attribution and must be attributed as:
+
+    Sheep by Unrecognized MJ from The Noun Project
+
+If you have a Premium Account or have purchased a license for this icon, you
+don't need to worry about attribution! We will share the profits from your
+purchase with this icon's designer.

misc/icons/noun-project/undo-kyle_levi_fox/icon_10033.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="89.231px" height="100px" viewBox="0 0 89.231 100" enable-background="new 0 0 89.231 100" xml:space="preserve">
+<path d="M14.652,64.026c-0.603-2.09-1-4.267-1.15-6.511H0c0.18,3.858,0.86,7.586,1.962,11.13L14.652,64.026z"/>
+<path d="M14.332,88.192l8.684-10.35c-2.899-2.792-5.273-6.127-6.926-9.857L3.402,72.604C5.9,78.563,9.655,83.87,14.332,88.192z"/>
+<path d="M42.483,86.499c-6.051-0.409-11.626-2.559-16.245-5.943l-8.681,10.346c6.985,5.336,15.582,8.661,24.926,9.099V86.499z"/>
+<path d="M44.589,10.768V0L14.266,17.506l30.323,17.506V24.245c17.186,0,31.166,13.98,31.166,31.165  c0,16.477-12.854,29.999-29.061,31.087v13.502C70.337,98.896,89.231,79.32,89.231,55.41C89.231,30.794,69.205,10.768,44.589,10.768z  "/>
+</svg>

misc/icons/noun-project/undo-kyle_levi_fox/license.txt

@@ -0,0 +1,8 @@
+Thank you for using The Noun Project. This icon is licensed under Creative
+Commons Attribution and must be attributed as:
+
+    Undo by Kyle Levi Fox from The Noun Project
+
+If you have a Premium Account or have purchased a license for this icon, you
+don't need to worry about attribution! We will share the profits from your
+purchase with this icon's designer.