Click here to Skip to main content
Click here to Skip to main content
Go to top

Html5 Jigsaw Puzzle

, 5 Jun 2012
Rate this:
Please Sign up or sign in to vote.
An online jigsaw puzzle using the stunning features of the Paper.js framework
Download Html5 Jigsaw Puzzle 

screenshot

Table of Contents

Introduction

Javascript programming has become more and more interesting since modern browsers started implementing HTML5 and CSS3 specifications. Some people have been hoping for the trio javascript/html5/css3 to free web development from plug-ins such as Flash and Silverlight. So far we've seen noticing a myriad of Html5 development tools and frameworks popping up here and there all the time, trying to catch up with the maturity and user experience of established Flash and Silverlight frameworks and tools.

This time I became particularly well impressed by the Paper.js framework. It's easy to use, very clean and intuitive to work with, and provides powerful and flexible set of classes and events. This, in addition to the flexibility of javascript language, enables a fast and productive development environment.

After some time playing with Paper.js, I decided to create a jigsaw puzzle game with that tool, and only then the real learning began. The results of hours of trial-and-error are in this article, and I hope to explain Paper.js by explaining the game development itself. And if you're not interested in the article nor in the javascript, at least you might end up playing with the puzzle game.

System Requirements

To use HTML5 Snooker Club application provided with this article, all you have to do is install or have a modern web browser: Chrome, Fire Fox, Maxthon, Opera, Safari or Internet Explorer (9 or superior).

The Paper.js Framework

Paper.js is, by their own words:

"... an open source vector graphics
scripting framework that runs on top of the HTML5
Canvas. It offers a clean Scene Graph / Document
Object Model and a lot of powerful functionality to
create and work with vector graphics and bezier
curves, all neatly wrapped up in a well designed,
consistent and clean programming interface."

So what's really behind that beautiful description? Let's say you want to user Paper.js to perform a simple task of displaying a simple image in the center of your browser. The next short segment shows the entire html needed for the task:

        <!DOCTYPE html>
        <html>
        <head>
            <script src="content/js/paper.js" type="text/javascript"></script>
            <script type="text/paperscript" canvas="canvas">
                var bob = new Raster('Bob');
                bob.position = view.center;
            </script>
        </head>
        <body>
            <canvas id="canvas" class="canvas" resize></canvas>
            <img id="Bob" src="content/images/Bob.png" style="display: none;">
        </body>
        </html>
    

Quite simple, isn't it? Now let's get back to the Paper.js description:

  • "... an open source vector graphics scripting framework that runs on top of the HTML5 Canvas..."

Paper.js only targets the canvas, so the canvas element is a requirement:

            <canvas id="canvas" class="canvas" resize></canvas>
    

Notice the special element attribute, resize. It tells the Paper.js to resize the canvas to fit the size of the parent html element (in our case, the body element).

  • "... It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface..."

So true. You can see this cleanness in these 2 lines of javascript code:

        <script type="text/paperscript" canvas="canvas">
            var bob = new Raster('Bob');
            bob.position = view.center;
        </script>
    

The first line instantiates a Raster, which in Paper.js framework is an item that represents an image in a project. So there you have a paramenter, "Bob", which is simply the id of the <img> tag from which the image source for the Raster object is taken.

So, since we're already using the <img> element, why not use it right away instead of the Raster? The answer is, as explained before, the Paper.js renders graphics only in the context of a Canvas element, so the <img> is outside the scope of it.

Another fact worth noticing is that strange script tag:

        <script type="text/paperscript" canvas="canvas">
    

What is that "text/paperscript"? What does it do? Well, it is the good old javascript we are used to, but the difference is that, behind the scenes, it takes care of all that boring, plumbing job we would otherwise have to do by ourselves (such as creation of the basic objects of the framework, such as Project, View and Tool, and event handler attachments) and also provides support for overloading operators for vector operations (such as +, - and *) which we would have to implement by means of method calls, thus polluting the code. Also, all global browser objects (such as document and window) are still accessible within the paperscript code.

If your project gets bigger, it is preferrable that you use javascript directly, instead of paperscript. In our sample jigsaw puzzle application, though, I used only paperscript. One clear disadvantage of paperscript is that when you set the script tag to type="text/paperscript" you automatically loose javascript intellisense. One workaround for this is to change the script type to "text/paperscript", do the code modifications you need and then change it back to "text/paperscript" once again.

Obviously, there is much more to Paper.js than just the Raster objets. We will learn about other classes in the following sections.

The Jigsaw Puzzle

A jigsaw puzzle is a puzzle where the goal is to position correctly a set of interlocking, oddly shaped pieces. Each piece has part of the original picture, and when you finish the puzzle you can see the whole picture.

A simple game like that may look simple at first, but can easily takes you many hours of work if you don't have a clear plan and you don't know how to begin with. Fortunately, I had a previous experience with creating this kind of puzzle, so this time I was able to avoid many of the pitfalls I fell into when developing the app for my first puzzle article.

Below there is a series of solutions for the most common problems found in a jigsaw puzzle application:

Creating the Image Tiles

When you first notice that you have to create all these oddly shaped tiles, like in the image below, you may find the task intimidating:

In fact you should for now forget those curvy lines, and focus on the most basic tasks first, like dividing the source image into perfect little squares. Each piece in the puzzle will have a distinct part of the image, so that they all positioned together can make the whole image. So let's divide this image in squares:

Now let's take a particular square tile and use it as a background for a puzzle piece. Here is the piece separated from the whole:

And here is the piece with its image background:

Now, do you see the problem? The image doesn't fit into the piece! There are areas near the borders of the piece where the background is empty. This happens because we haven't predicted that in a jigsaw puzzle the interlocking pieces "invade" spaces which should otherwise be preserved in a square puzzle.

By the picture above, it becomes clear that each piece should have a slightly larger background image, so that the image portion could fit in. We do this by expanding the tile image for each piece:

Clipping the Puzzle

The clipping part is a vital one in our application. We must take each piece and cut out the corresponding shape, so that each piece appears nice and curvy.

We draw the shapes by creating a set of bezier curves. Bezier curves are sexy and fit well in our application. Fortunately, I used these curves in my previous WPF article, and since the basic premises are the same, I reused the same logic for constructing the curves.

        function getMask(tileRatio, topTab, rightTab, bottomTab, leftTab, tileWidth) {

            var curvyCoords = [
                    0, 0, 35, 15, 37, 5,
                    37, 5, 40, 0, 38, -5,
                    38, -5, 20, -20, 50, -20,
                    50, -20, 80, -20, 62, -5,
                    62, -5, 60, 0, 63, 5,
                    63, 5, 65, 15, 100, 0
            ];

            var mask = new Path();
            var tileCenter = view.center;

            var topLeftEdge = new Point(-4,4);

            mask.moveTo(topLeftEdge);

            //Top
            for (var i = 0; i < curvyCoords.length / 6; i++) {
                var p1 = topLeftEdge + new Point(curvyCoords[i * 6 + 0] * tileRatio, 
                topTab * curvyCoords[i * 6 + 1] * tileRatio);
                var p2 = topLeftEdge + new Point(curvyCoords[i * 6 + 2] * tileRatio, 
                topTab * curvyCoords[i * 6 + 3] * tileRatio);
                var p3 = topLeftEdge + new Point(curvyCoords[i * 6 + 4] * tileRatio, 
                topTab * curvyCoords[i * 6 + 5] * tileRatio);

                mask.cubicCurveTo(p1, p2, p3);
            }
            //Right
            var topRightEdge = topLeftEdge + new Point(tileWidth, 0);
            for (var i = 0; i < curvyCoords.length / 6; i++) {
                var p1 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 1] * tileRatio, 
                curvyCoords[i * 6 + 0] * tileRatio);
                var p2 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 3] * tileRatio, 
                curvyCoords[i * 6 + 2] * tileRatio);
                var p3 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 5] * tileRatio, 
                curvyCoords[i * 6 + 4] * tileRatio);

                mask.cubicCurveTo(p1, p2, p3);
            }
            //Bottom
            var bottomRightEdge = topRightEdge + new Point(0, tileWidth);
            for (var i = 0; i < curvyCoords.length / 6; i++) {
                var p1 = bottomRightEdge - new Point(curvyCoords[i * 6 + 0] * tileRatio, 
                bottomTab * curvyCoords[i * 6 + 1] * tileRatio);
                var p2 = bottomRightEdge - new Point(curvyCoords[i * 6 + 2] * tileRatio, 
                bottomTab * curvyCoords[i * 6 + 3] * tileRatio);
                var p3 = bottomRightEdge - new Point(curvyCoords[i * 6 + 4] * tileRatio, 
                bottomTab * curvyCoords[i * 6 + 5] * tileRatio);

                mask.cubicCurveTo(p1, p2, p3);
            }
            //Left
            var bottomLeftEdge = bottomRightEdge - new Point(tileWidth, 0);
            for (var i = 0; i < curvyCoords.length / 6; i++) {
                var p1 = bottomLeftEdge - new Point(-leftTab * curvyCoords[i * 6 + 1] * tileRatio, 
                curvyCoords[i * 6 + 0] * tileRatio);
                var p2 = bottomLeftEdge - new Point(-leftTab * curvyCoords[i * 6 + 3] * tileRatio, 
                curvyCoords[i * 6 + 2] * tileRatio);
                var p3 = bottomLeftEdge - new Point(-leftTab * curvyCoords[i * 6 + 5] * tileRatio, 
                curvyCoords[i * 6 + 4] * tileRatio);

                mask.cubicCurveTo(p1, p2, p3);
            }
           
            return mask;
        }    
    

Each piece has 4 sides (top, bottom, left, right) and each side can have one of 3 forms: flat, a mountain or a valley. All these forms are constructed basically by the same function. The only difference is the factor applied to the calculation: 0 for flat sides, 1 for mountain and -1 for valley.

The code below shows that each piece is a Group object (this is from Paper.js framework). A Group object is a composition of two or more items. The first item (mask) define the shape of the clipping, while the img item define the image background. In short, the tile image is cut out according to the shape of the mask of each piece.

        var cloneImg = instance.puzzleImage.clone();
        var img = getTileRaster(
            cloneImg, 
            new Size(instance.tileWidth, instance.tileWidth), 
            new Point(instance.tileWidth * x, instance.tileWidth * y)
        );

        var border = mask.clone();
        border.strokeColor = '#ccc';
        border.strokeWidth = 5;

        var tile = new Group(mask, border, img, border);
        tile.clipped = true;
        tile.opacity = 1;

        tile.shape = shape;
        tile.imagePosition = new Point(x, y);
    

Creating Random Shapes

Each of the 4 sides of the piece is given a random number between a range of values (-1, 0, 1), that defines the curve of that side.

It's important to notice that inside the loop that generates the random shapes, for each piece iteration only the right and bottom sides are given values. When we define the right side value, we also have to define the opposite value for the left side of the piece at the right of that piece. The same occurs for the bottom side: if the bottom side of a piece is given a value of 1, then the top side of the piece at the bottom of that piece must be given a value of -1. In short, the neighboring sides must always have complimentary values.

        function getRandomShapes(width, height) {
            var shapeArray = new Array();

            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {

                    var topTab = undefined;
                    var rightTab = undefined;
                    var bottomTab = undefined;
                    var leftTab = undefined;

                    if (y == 0)
                        topTab = 0;

                    if (y == height - 1)
                        bottomTab = 0;

                    if (x == 0)
                        leftTab = 0;

                    if (x == width - 1)
                        rightTab = 0;

                    shapeArray.push(
                        ({
                            topTab: topTab,
                            rightTab: rightTab,
                            bottomTab: bottomTab,
                            leftTab: leftTab
                        })
                    );
                }
            }

            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {

                    var shape = shapeArray[y * width + x];
                        
                    var shapeRight = (x < width - 1) ? 
                        shapeArray[y * width + (x + 1)] : 
                        undefined;
                        
                    var shapeBottom = (y < height - 1) ? 
                        shapeArray[(y + 1) * width + x] :
                        undefined;

                    shape.rightTab = (x < width - 1) ? 
                        getRandomTabValue() :
                        shape.rightTab;

                    if (shapeRight)
                        shapeRight.leftTab = - shape.rightTab;
                        
                    shape.bottomTab = (y < height - 1) ? 
                        getRandomTabValue() :
                        shape.bottomTab;

                    if (shapeBottom)
                        shapeBottom.topTab = - shape.bottomTab;
                }
            }
            return shapeArray;
        }    
    

Random Placement of Pieces

The pieces are initially positioned in a retangular central area, but with blank spots separating them. They are arranged by a function that picks a piece randomly from the array of pieces, place it into the board, and then picks another piece from the remaining pieces and places it in the square area, until no more pieces are left.

        for (var y = 0; y < yTileCount; y++) {
            for (var x = 0; x < xTileCount; x++) {

                var index1 = Math.floor(Math.random() * tileIndexes.length);
                var index2 = tileIndexes[index1];
                var tile = tiles[index2];
                tileIndexes.remove(index1, 1);

                var position = view.center - 
                                new Point(instance.tileWidth, instance.tileWidth / 2) + 
                                new Point(instance.tileWidth * (x * 2 + ((y % 2))), instance.tileWidth  * y) -
                                new Point(instance.puzzleImage.size.width, instance.puzzleImage.size.height / 2);

                var cellPosition = new Point(
                    Math.round(position.x / instance.tileWidth) + 1,
                    Math.round(position.y / instance.tileWidth) + 1);

                tile.position = cellPosition * instance.tileWidth;
                tile.cellPosition = cellPosition;                        
            }
        }    
    

Highlighting Pieces

As you pass the mouse over the pieces, there is a visual indicator of the selection: the opacity of the selected piece becomes half of the original

        this.mouseMove = function(point, delta) {
            if (!instance.selectionGroup) {
                project.activeLayer.selected = false;
                if (delta.x < 8 && delta.y < 8) {
                    var tolerance = instance.tileWidth * .5;
                    var hit = false;
                    for (var index = 0; index < instance.tiles.length; index++) {
                        var tile = instance.tiles[index];
                        var row = parseInt(index / config.tilesPerRow);
                        var col = index % config.tilesPerRow;

                        var tileCenter = tile.position;

                        var deltaPoint = tileCenter - point;
                        hit = (deltaPoint.x * deltaPoint.x + 
                                    deltaPoint.y * deltaPoint.y) < tolerance * tolerance;

                        if (hit) {
                            instance.selectedTile = tile;
                            instance.selectedTileIndex = index;
                            tile.opacity = .5;
                            project.activeLayer.addChild(tile);
                            return;
                        }
                        else {
                            tile.opacity = 1;
                        }
                    }
                    if (!hit)
                        instance.selectedTile = null;
                }
            }
            else {
                instance.dragTile(delta);
            }
        }
    

Dragging and Dropping Pieces

Each time the left mouse button is down over a selected piece, it is "taken" from the board and is brought to front (by enlarging its size) and you can drag it all over the board, until you release the mouse button to drop the piece in a suitable location.

        this.pickTile = function() {
            if (instance.selectedTile) {
                if (!instance.selectedTile.lastScale) {
                    instance.selectedTile.lastScale = instance.zoomScaleOnDrag;
                    instance.selectedTile.scale(instance.selectedTile.lastScale);
                }
                else {
                    if (instance.selectedTile.lastScale > 1) {
                        instance.releaseTile();
                        return;
                    }
                }

                instance.selectedTile.cellPosition = undefined;

                instance.selectionGroup = new Group(instance.selectedTile);

                var pos = new Point(instance.selectedTile.position.x, 
                instance.selectedTile.position.y);
                instance.selectedTile.position = new Point(0, 0);

                instance.selectionGroup.position = pos;
            }
        }

        this.releaseTile = function() {
            if (instance.selectedTile) {

                var cellPosition = new Point(
                    Math.round(instance.selectionGroup.position.x / instance.tileWidth),
                    Math.round(instance.selectionGroup.position.y / instance.tileWidth));

                var roundPosition = cellPosition * instance.tileWidth;
                    
                var hasConflict = false;
                    
                var alreadyPlacedTile = getTileAtCellPosition(cellPosition);

                hasConflict = alreadyPlacedTile;

                var topTile = getTileAtCellPosition(cellPosition + new Point(0, -1));
                var rightTile = getTileAtCellPosition(cellPosition + new Point(1, 0));
                var bottomTile = getTileAtCellPosition(cellPosition + new Point(0, 1));
                var leftTile = getTileAtCellPosition(cellPosition + new Point(-1, 0));

                if (topTile) {
                    hasConflict = hasConflict || !(topTile.shape.bottomTab + 
                    instance.selectedTile.shape.topTab == 0);
                }

                if (bottomTile) {
                    hasConflict = hasConflict || !(bottomTile.shape.topTab + 
                    instance.selectedTile.shape.bottomTab == 0);
                }

                if (rightTile) {
                    hasConflict = hasConflict || !(rightTile.shape.leftTab + 
                    instance.selectedTile.shape.rightTab == 0);
                }

                if (leftTile) {
                    hasConflict = hasConflict || !(leftTile.shape.rightTab + 
                    instance.selectedTile.shape.leftTab == 0);
                }

                if (!hasConflict) {

                    if (instance.selectedTile.lastScale) {
                        instance.selectedTile.scale(1 / instance.selectedTile.lastScale);
                        instance.selectedTile.lastScale = undefined;
                    }

                    instance.selectionGroup.remove();
                    var tile = instance.tiles[instance.selectedTileIndex];
                    tile.position = roundPosition;
                    tile.cellPosition = cellPosition;
                    instance.selectionGroup.remove();
                    instance.selectedTile =
                    instance.selectionGroup = null;
                    project.activeLayer.addChild(tile);

                    var errors = checkTiles();
                    if (errors == 0) {
                        alert('Congratulations!!!');
                    }
                }
            }
        }
    

Testing Piece Location

Not all locations are good for positioning a piece, though. First, we must check whether the place is empty.

And then we check if there are no neighbor pieces with conflicting sides. The values for neighbor sides must be always be complimentary.

        var topTile = getTileAtCellPosition(cellPosition + new Point(0, -1));
        var rightTile = getTileAtCellPosition(cellPosition + new Point(1, 0));
        var bottomTile = getTileAtCellPosition(cellPosition + new Point(0, 1));
        var leftTile = getTileAtCellPosition(cellPosition + new Point(-1, 0));

        if (topTile) {
            hasConflict = hasConflict || !(topTile.shape.bottomTab + 
            instance.selectedTile.shape.topTab == 0);
        }

        if (bottomTile) {
            hasConflict = hasConflict || !(bottomTile.shape.topTab + 
            instance.selectedTile.shape.bottomTab == 0);
        }

        if (rightTile) {
            hasConflict = hasConflict || !(rightTile.shape.leftTab + 
            instance.selectedTile.shape.rightTab == 0);
        }

        if (leftTile) {
            hasConflict = hasConflict || !(leftTile.shape.rightTab + 
            instance.selectedTile.shape.leftTab == 0);
        }
    

Testing for Puzzle Completion

Each time you place a piece on the board, the application tests for the puzzle completion. This is done by:

  • Getting the top left piece and determining its "cell position".
  • Iterating over the other pieces and checking if they are coherently positioned, using the top left piece position as reference.

        function checkTiles() {
            var errors = 0;
            var firstTile = instance.tiles[0];
            var firstCellPosition = firstTile.cellPosition;

            for (var y = 0; y < instance.tilesPerColumn; y++) {
                for (var x = 0; x < instance.tilesPerRow; x++) {
                    var index = y * instance.tilesPerRow + x;
                    var cellPosition = instance.tiles[index].cellPosition;

                    if (cellPosition != firstCellPosition + new Point(x, y)) {
                        errors++;
                    }
                }
            }

            return errors;
        }
    

Once the puzzle is completed, a simple message is shown.

May seem just a silly message, but it's enough for this article.

Final Considerations

That's it. As you can see, there is a lot of room for enhancement in the application. The Paper.js framework proved itself up to the task of handling complex graphic scripting and event handling, while providing a clean and simplified set of classes and events.

If you have any comments, complaints or suggestions, please leave a comment below. I'd like to hear from you and I'm willing to improve the app as new ideas arrive.

History

  • 2012-05-31: Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Marcelo Ricardo de Oliveira
Software Developer
Brazil Brazil
Marcelo Ricardo de Oliveira is a senior software developer who lives with his lovely wife Luciana and his little buddy and stepson Kauê in Guarulhos, Brazil, is co-founder of the Brazilian TV Guide TV Map and currently works for ILang Educação.
 
He is often working with serious, enterprise projects, although in spare time he's trying to write fun Code Project articles involving WPF, Silverlight, XNA, HTML5 canvas, Windows Phone app development, game development and music.
 
Published Windows Phone apps:
 
 
Awards:
 
CodeProject MVP 2012
CodeProject MVP 2011
 
Best Web Dev article of March 2013
Best Web Dev article of August 2012
Best Web Dev article of May 2012
Best Mobile article of January 2012
Best Mobile article of December 2011
Best Mobile article of October 2011
Best Web Dev article of September 2011
Best Web Dev article of August 2011
HTML5 / CSS3 Competition - Second Prize
Best ASP.NET article of June 2011
Best ASP.NET article of May 2011
Best ASP.NET article of April 2011
Best C# article of November 2010
Best overall article of November 2010
Best C# article of October 2010
Best C# article of September 2010
Best overall article of September 2010
Best overall article of February 2010
Best C# article of November 2009

Comments and Discussions

 
QuestionUltra-Beginner :-) PinmemberFrancoBorgo23-Sep-14 11:06 
AnswerRe: Ultra-Beginner :-) PinmvpMarcelo Ricardo de Oliveira23-Sep-14 11:13 
GeneralRe: Ultra-Beginner :-) PinmemberFrancoBorgo23-Sep-14 11:28 
GeneralRe: Ultra-Beginner :-) PinmvpMarcelo Ricardo de Oliveira23-Sep-14 11:39 
Questionneed help Pinmemberpragnesh12316-Sep-14 19:30 
Questionurgent help needed Pinmemberpragnesh12312-Sep-14 2:10 
Questionneed to split pieces in odd number. Pinmemberpragnesh12312-Sep-14 1:20 
Questionneed a bit of the code changing PinmemberDrcensor19-May-14 6:47 
AnswerRe: need a bit of the code changing PinmemberDrcensor25-May-14 11:08 
GeneralMy vote of 3 PinmemberAshishbhatt00719-May-14 2:55 
GeneralRe: My vote of 3 PinprofessionalSunasara Imdadhusen19-May-14 2:59 
GeneralRe: My vote of 3 PinmemberAshishbhatt00719-May-14 3:01 
Questiona background border PinmemberMember 1082669818-May-14 3:23 
Questioncompleted game PinmemberMember 1082669818-May-14 3:06 
QuestionOne great message for H.E. Marcello Ricardo de Olivera PinmemberMember 1072441225-Apr-14 5:25 
QuestionHow to cut (4X3) pieces for puzzle-image (width : 800 and Height :532) Pinmembernang31-Jul-13 0:24 
QuestionRe: How to cut (4X3) pieces for puzzle-image (width : 800 and Height :532) PinmemberRahulDole5-May-14 4:12 
GeneralMy vote of 5 PinprofessionalSunasara Imdadhusen13-Jun-13 1:52 
QuestionVoted 5 star for this one, only one question PinmemberJohnny Jiang4-Mar-13 22:41 
AnswerRe: Voted 5 star for this one, only one question PinmvpMarcelo Ricardo de Oliveira4-Mar-13 23:24 
GeneralRe: Voted 5 star for this one, only one question PinmemberJohnny Jiang5-Mar-13 23:15 
GeneralRe: Voted 5 star for this one, only one question PinmvpMarcelo Ricardo de Oliveira27-May-13 13:47 
Questionhow do you rotate the pieces? Pinmemberdkonstantopoulos4-Sep-12 12:09 
AnswerRe: how do you rotate the pieces? PinmvpMarcelo Ricardo de Oliveira9-Sep-12 16:32 
Questionstrict puzzle sizes PinmemberSergey Smirnov25-Jul-12 8:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 5 Jun 2012
Article Copyright 2012 by Marcelo Ricardo de Oliveira
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid