var ptHome = new Path("ptHome", "Home", "index.html", null);
var ptGraphic = new Path("ptGraphic", "Graph", "Graph.html", ptHome);
var ptPhoto = new Path("ptPhoto", "Photo", "Photo.html", ptHome);
var ptText = new Path("ptText", "Text", "Text.html", ptHome);
var ptVaria = new Path("ptVaria", "Varia", "Varia.html", ptHome);
var ptMusic = new Path("ptMusic", "Music", "Music.html", ptHome);
var ptAbout = new Path("ptAbout", "About", "About.html", ptHome);
var ptPortfolio = new Path("ptPortfolio", "Portfolio", "viewer.html?portfolio=CocoonSketches", ptGraphic);
var ptComics = new Path("ptComics", "Comics", "Comics.html", ptGraphic);
var ptCocoon = new Path("ptCocoon", "Cocoon", "Cocoon.html", ptComics);
var ptCocoonSketches = new Path("ptCocoonSketches", "Sketches", "viewer.html?portfolio=CocoonSketches", ptCocoon);
var ptHiddenDisaster = new Path("ptHiddenDisaster", "Hidden disaster", "viewer.html?portfolio=HiddenDisaster", ptComics);
var ptCocoonPages = new Path("ptCocoonPages", "Pages", "viewer.html?portfolio=CocoonPages", ptCocoon);
var ptTheTimes = new Path("ptTheTimes", "The Times", "viewer.html?portfolio=TheTimes", ptComics);
var ptDrawings = new Path("ptDrawings", "Drawings", "Drawings.html", ptGraphic);
var ptDrawingsHeads = new Path("ptDrawingsHeads", "Heads", "viewer.html?portfolio=DrawingsHeads", ptDrawings);
var ptDrawingsNudes = new Path("ptDrawingsNudes", "Nudes", "viewer.html?portfolio=DrawingsNudes", ptDrawings);
var ptDrawingsPostcards = new Path("ptDrawingsPostcards", "Postcards", "viewer.html?portfolio=DrawingsPostcards", ptDrawings);
var ptDrawingsVaria = new Path("ptDrawingsVaria", "Varia", "viewer.html?portfolio=DrawingsVaria", ptDrawings);
var ptRing = new Path("ptRing", "Ring", "viewer.html?portfolio=Ring", ptDrawings);
var ptPublications = new Path("ptPublications", "Books", "viewer.html?portfolio=Publications", ptHome);
var ptSir = new Path("ptSir", "Sir", "viewer.html?portfolio=Sir", ptDrawings);
var ptVariaPortfolio = new Path("ptVariaPortfolio", "Varia", "viewer.html?portfolio=Varia", ptHome);
var ptGraphPosters = new Path("ptGraphPosters", "Posters", "viewer.html?portfolio=Posters", ptGraphic);
var ptGraphChildren = new Path("ptGraphChildren", "Children", "viewer.html?portfolio=Children", ptGraphic);
var ptPhoto35 = new Path("ptPhoto35", "Photographs 35mm", "viewer.html?portfolio=Photo35", ptPhoto);
var ptPhoto67 = new Path("ptPhoto67", "Photographs 6X7", "viewer.html?portfolio=Photo67", ptPhoto);
var ptPhotoMonuments = new Path("ptPhotoMonuments", "Photographs Monuments", "viewer.html?portfolio=Monuments", ptPhoto);
var ptComicsEpoque = new Path("ptComicsEpoque", "Epoque", "viewer.html?portfolio=Epoque", ptComics);


// portfolio GRAPH - CHIDREN'S BOOKS
var Children = new Portfolio("Children", "Children", "Drawings made for childrens books that have not (yet) been published.", ptGraphChildren, 5);
Children.basePath = "Graphics/Children/";
Children.independentRows = false;
Children.setLineBreak("The Seahorse Rider");
Children.addPicture(new Picture("Big Rock", "BigRock.jpg", "thumbBigRock.jpg", "", "2009", "bigBigRock.jpg"));
Children.addPicture(new Picture("Whales", "Wales.jpg", "thumbWales.jpg", "", "2009", "bigWales.jpg"));
Children.addPicture(new Picture("Tem Blador", "TemBlador.jpg", "thumbTemBlador.jpg", "", "2009", "bigTemBlador.jpg"));
Children.setLineBreak("Sparkle");
Children.addPicture(new Picture("Sparkle", "Sparkle.jpg", "thumbSparkle.jpg", "", "2009"));
Children.setLineBreak("Young Men at the Race Track");
Children.addPicture(new Picture("Young Men at the Race Track", "YoungMenAtTheRaceTrack.jpg", "thumbYoungMenAtTheRaceTrack.jpg", "An idea for a cover for a fictive story. Based on a photograph.", "2007", "YoungMenAtTheRaceTrackBig.jpg"));

// portfolio GRAPH - EPOQUE
var Epoque = new Portfolio("Epoque", "La Belle Epoque", "Muted comic - unfinished", ptComicsEpoque, 5);
Epoque.basePath = "Graphics/Comics/Epoque/";
Epoque.independentRows = false;
for(var i=1; i<7; i++)
  {
  Epoque.addPicture(new Picture("Epoque", "Epoque"+i+".jpg", "ThumbEpoque"+i+".jpg", "", "2004-2005"));
}

  // portfolio DRAWINGS - SIR
  var Sir = new Portfolio("Sir", "Sir", "Sir, de ballonvaarder<br/>Podloodschetsen", ptSir, 99);
  Sir.basePath = "Work/Sir/";
  Sir.independentRows = true;
  Sir.setLineBreak("Achter en voorplaat");
  Sir.addPicture(new Picture("Achterplaat", "AchterplaatV1.jpg", "thumbAchterplaatV1.jpg", "Landhuis is nog niet goed : moet meer engels zijn.", "21 Oktober 2007", "AchterplaatV1Big.jpg"));
  Sir.addPicture(new Picture("Voorplaat Titel", "VoorplaatV1Title.jpg", "thumbVoorplaatV1Title.jpg", "Alternatieven voor titel : <br/>Sir de ballonvaarder<br/>...<span style='color: #ffffff;'>maakt zijn ballon</span><br/>of<br/>...<span style='color: #ffffff;'>gaat naar de stad</span>", "21 Oktober 2007", "VoorplaatV1TitleBig.jpg"));
  Sir.setLineBreak("Pagina 4 - 5");
  Sir.addPicture(new Picture("Konijnenland", "P0405V1.jpg", "thumbP0405V1.jpg", "", "22 Oktober 2007", "P0405V1Big.jpg"));
  Sir.setLineBreak("Pagina 6 - 7");
  Sir.addPicture(new Picture("Sir en Martha", "P0607V1.jpg", "thumbP0607V1.jpg", "Het landhuis is te klein. Moet engels kasteeltje zijn.", "23 Oktober 2007", "P0607V1Big.jpg"));
  Sir.setLineBreak("Pagina 8 - 9");
  Sir.addPicture(new Picture("Sir verveelt zich", "P0809V1.jpg", "thumbP0809V1.jpg", "", "24 Oktober 2007", "P0809V1Big.jpg"));
  Sir.setLineBreak("Pagina 10 - 11");
  Sir.addPicture(new Picture("Een luchtballon !", "P1011V1.jpg", "thumbP1011V1.jpg", "Excuses voor het slordige schetsje, maar dit is ongeveer dezelfde setting als de vorige, zij het van de andere kant bekeken.", "24 Oktober 2007", "P1011V1Big.jpg"));
  Sir.setLineBreak("Pagina 12 - 13");
  Sir.addPicture(new Picture("Een luchtballon !", "P1213V1.jpg", "thumbP1213V1.jpg", "In de uiteindelijke tekening zullen de figuurtjes gedetailleerder zijn. Ze zullen ook een beetje dansend stappen.<br/>In kleur zal het laken oplichten in de zon, wat hier nog niet duidelijk te zien is.", "24 Oktober 2007", "P1213V1Big.jpg"));
  Sir.setLineBreak("Pagina 14 - 15");
  Sir.addPicture(new Picture("Het uniform", "P1415V1.jpg", "thumbP1415V1.jpg", "De tekst staat rechts van het hoofdgebouw omdat dat stuk beduidend lichter zal zijn in het benevelde ochtendlicht. <br/></br>Het landhuis van Sir is in deze prent in ieder geval al veel beter.", "25 Oktober 2007", "P1415V1Big.jpg"));
  Sir.setLineBreak("Pagina 16 - 17");
  Sir.addPicture(new Picture("Het uniform", "P1617V1.jpg", "thumbP1617V1.jpg", "De figuren worden gekleurd, maar wat met de achtergrond ? Wit laten, of wijkt het dan teveel af van de andere prenten die bladvullend ingekleurd zijn? Ik weet het nog niet. Deze prent lijkt me toch nog wat kaal.", "26 Oktober 2007", "P1617V1Big.jpg"));
  Sir.setLineBreak("Pagina 18 - 19");
  Sir.addPicture(new Picture("Valse start", "P1819V1.jpg", "thumbP1819V1.jpg", "Ballon tikkeltje meer naar links, weg van de middenvouw.Links en rechts onderaan nog een konijnenkont toevoegen van twee konijnen die net uit beeld springen.", "28 Oktober 2007", "P1819V1Big.jpg"));
  Sir.setLineBreak("Pagina 20 - 21");
  Sir.addPicture(new Picture("In de lucht", "P2021V1.jpg", "thumbP2021V1.jpg", "Schets niet uitgewerkt. Martha zal in verhouding te groot getekend zijn, om een beetje herkenbaarheid te houden. De witte vlek waar de tekst in staat is een wolk. Er zullen nog wat wolken te zien zijn. Dit wordt uiteraard een overwegend groene prent.", "28 Oktober 2007", "P2021V1Big.jpg"));
  Sir.setLineBreak("Pagina 22 - 23");
  Sir.addPicture(new Picture("De stad", "P2223V1.jpg", "thumbP2223V1.jpg", "", "29 Oktober 2007", "P2223V1Big.jpg"));
  Sir.setLineBreak("Pagina 24 - 25");
  Sir.addPicture(new Picture("De markt", "P2425V1.jpg", "thumbP2425V1.jpg", "Sir is te klein getekend. Mogelijk ook wat meer (boze) mensen op de rechterhelft toevoegen. De schragen rechtsonder trekken op niks. De stad, en het licht zit goed. ", "6 November 2007", "P2425V1Big.jpg"));
  Sir.setLineBreak("Pagina 26 - 27");
  Sir.addPicture(new Picture("Sir vertelt", "P2627V1.jpg", "thumbP2627V1.jpg", "Louter compositieschets. De lichtinval zal een 'spotlicht' op Sir zetten. De massa staat in de schaduw. Belangrijk detail is de thee die wordt doorgegeven. Dit ga ik centraler zetten. Er zullen ook meer mensen een kopje thee in de hand hebben.<br/> Sir iets meer naar links.", "7 November 2007", "P2627V1Big.jpg"));
  Sir.setLineBreak("Pagina 28 - 29");
  Sir.addPicture(new Picture("Sir vertrekt", "P2829V1.jpg", "thumbP2829V1.jpg", "Louter compositieschets.", "7 November 2007", "P2829V1Big.jpg"));
  Sir.setLineBreak("Pagina 30 - 31");
  Sir.addPicture(new Picture("Naar huis", "P3031V1.jpg", "thumbP3031V1.jpg", "", "7 November 2007", "P3031V1Big.jpg"));
  Sir.setLineBreak("Pagina 32");
  Sir.addPicture(new Picture("Coda", "P32V1.jpg", "thumbP32V1.jpg", "", "7 November 2007", "P32V1Big.jpg"));

  // portfolio PHOTO - MONUMENTS
var Monuments = new Portfolio("Monuments", "Photographs of monuments", "While you're waiting for a bus, you may be raising your head to feel some first raindrops on your face. Don't forget to open your eyes. A longforgotton monument may rise up in front of you. Proud. Straight up.<br/>It has been watching people go by, decade after decade.<br/>Will I allow myself the romantic thought that monuments have souls ?", ptPhotoMonuments, 5);
Monuments.basePath = "Photo/Monuments/";
Monuments.independentRows = false;
for(var iPhoto=1; iPhoto<6; iPhoto++)
  {
  Monuments.addPicture(new Picture("Monument", "Monument"+iPhoto+".jpg", "ThumbMonument"+iPhoto+".jpg", "", "2005-2006"));
  }

// portfolio PHOTO - 35MM
var Photo35 = new Portfolio("Photo35", "Photographs 35mm", "Greetings from Antwerp.We're having a swell time and the wheater is perfect : a bright sun, teased by some small clouds, just enough to provide us with that refreshing breeze we need when walking through this city. We have seen all the museums, seen the river. Did you know they even have a small beach, with sand and everything ? The locals love it there ! I've bought some postcards with sharp blue skyes and brilliant colors. How do they do that ? They're magicians these photographers ! I actually bought a whole booklet. You know...one of those harmonica things, like in Gaumy's picture I sent you last time... ", ptPhoto35, 5);
Photo35.basePath = "Photo/Antwerp35mm/";
Photo35.independentRows = false;
for(iPhoto=1; iPhoto<22; iPhoto++)
  {
  Photo35.addPicture(new Picture("Slide", "Antwerp"+iPhoto+".jpg", "ThumbAntwerp"+iPhoto+".jpg", "", "2005-2006"));
  }

// portfolio PHOTO - 6X7
var Photo67 = new Portfolio("Photo67", "Photographs 6X7", "Let us observe, record and document. Objectively. And let's be realistic. A city is not a beautiful place. It was never build to be beautiful and it cannot be redesigned to be beautiful. No urbatect would ever conceive a city that even resembles an existing metropolitan plan. Do you know what Le Corbusier intended for the left bank of our river ? I've seen the plans. Very rythmic, very orderly. Straight lines, repetitive patterns. Those plans look like...well...like plans are supposed to look, I guess. But perhaps these urbatects are wrong... Perhaps we should not look at cities from the sky. How many times do we see our own habitat from up there ? Perhaps we should focus at these small corners where people have put flowerpots to brighten things up... Graffiti, for example. When is it vandalism and when does it cross over to Art ? And what about those demolished buildings ? A disgrace or an opportunity for a New Beginning ? And should I be asking all these questions? Perhaps they are not really relevant...", ptPhoto67, 7);
Photo67.basePath = "Photo/Antwerp67/";
Photo67.independentRows = false;
for(iPhoto=1; iPhoto<54; iPhoto++)
  {
  Photo67.addPicture(new Picture("Medium format negative", "Antwerp67_"+iPhoto+".jpg", "ThumbAntwerp67_"+iPhoto+".jpg", "", "2005-2006"));
  }

// portfolio GRAPH - POSTERS
var Posters = new Portfolio("Posters", "Posters", "Paintings in a fixed format that I'd like to call my posters.", ptGraphPosters, 5);
Posters.basePath = "Graphics/Posters/";
Posters.independentRows = false;
Posters.addPicture(new Picture("Teddybear", "Beerke.jpg", "ThumbBeerke.jpg", "", "acryl painting, 28 x 56 cm, 1989", ""));
Posters.addPicture(new Picture("Garden", "Garden.jpg", "ThumbGarden.jpg", "This garden is based on a historic garden created René Pechère that can still be visited in Brussels.<br/>More info at <a href='http://www.museumvanbuuren.com/'>www.museumvanbuuren.com</a>", "acryl painting, 70 x 35 cm, 2002", ""));
Posters.addPicture(new Picture("Dom of Milano", "Dom.jpg", "ThumbDom.jpg", "", "acryl painting, 70 x 35 cm, 2000", ""));
Posters.addPicture(new Picture("Cypresses", "Cipressen.jpg", "ThumbCipressen.jpg", "", "acryl painting 32.5 x 65 cm, 1991", ""));
Posters.addPicture(new Picture("Cathedral", "Kathedraal.jpg", "ThumbKathedraal.jpg", "", "acryl painting, 28 x 56 cm, 1992", ""));
Posters.addDiptych(new Picture("Scotland I", "Scotland1.jpg", "ThumbScotland1.jpg", "", "acryl painting, 70 x 35 cm, 1992", ""),
                   new Picture("Scotland II", "Scotland2.jpg", "ThumbScotland2.jpg", "", "acryl painting, 70 x 35 cm, 1990", ""));
Posters.addPicture(new Picture("Climbing", "Klimmen.jpg", "ThumbKlimmen.jpg", "Created as a gift for my friends Dagobert and Myriam", "acryl painting, 35 x 70 cm, 2000", ""));
Posters.addPicture(new Picture("Professor", "Prof.jpg", "ThumbProf.jpg", "", "acryl painting 32.5 x 65 cm, 1991", ""));
Posters.addPicture(new Picture("Statue", "Statue.jpg", "ThumbStatue.jpg", "", "acryl painting, 70 x 35 cm, 2002", ""));

// portfolio HOME - VARIA
var VariaPortfolio = new Portfolio("VariaPortfolio", "Varia", "Varia", ptVariaPortfolio, 99);
VariaPortfolio.basePath = "Varia/";
VariaPortfolio.independentRows = true;
VariaPortfolio.setLineBreak("Antwerp Book Fair 2007");
VariaPortfolio.addPicture(new Picture("Antwerp Book Fair 2007", "Boekenbeurs2007.jpg", "thumbBoekenbeurs2007.jpg", "Notice how my skull is desparately trying to mimic the wisdom gleaming one of the writer Pieter van Oudheusden, sitting next to me. Also notice how I try to compensate some trembling by supporting my left thumb with my righthand index finger!", "November 1, 2007, photo Jim Bella", ""));

// portfolio HOME - PUBLICATIONS
var Publications = new Portfolio("Publications", "Books", "An overview of all my published work, including book covers and book illustrations.", ptPublications, 99);
Publications.basePath = "Publications/";
Publications.independentRows = true;
Publications.setLineBreak("Het wonderpaard");
Publications.addPicture(new Picture("Het wonderpaard", "HetWonderpaard.jpg", "thumbHetWonderpaard.jpg", "Cover for children's book \"Het wonderpaard\" (The Wonder Horse).", "&copy; De Eenhoorn, 2007", "HetWonderpaardBig.jpg"));
Publications.addPicture(new Picture("A page", "DeBlijdeIntrede.jpg", "thumbDeBlijdeIntrede.jpg", "A page...", "&copy; De Eenhoorn, 2007", "DeBlijdeIntredeBig.jpg"));
Publications.addPicture(new Picture("A page", "WonderpaardP1819.jpg", "thumbWonderpaardP1819.jpg", "A page...", "&copy; De Eenhoorn, 2007", "WonderpaardP1819Big.jpg"));

Publications.setLineBreak("Sparta");
Publications.addPicture(new Picture("Cover for children's book (12+)", "CoverSparta.jpg", "thumbCoverSparta.jpg", "", "&copy; De Eenhoorn, 2007", "CoverSpartaBig.jpg"));
Publications.addPicture(new Picture("Chapter I", "SpartaH1.jpg", "thumbSpartaH1.jpg", "", "&copy; De Eenhoorn, 2007", "SpartaH1Big.jpg"));
Publications.addPicture(new Picture("Chapter II", "SpartaH2.jpg", "thumbSpartaH2.jpg", "", "&copy; De Eenhoorn, 2007", "SpartaH2Big.jpg"));
Publications.addPicture(new Picture("Chapter III", "SpartaH3.jpg", "thumbSpartaH3.jpg", "", "&copy; De Eenhoorn, 2007", "SpartaH3Big.jpg"));

Publications.setLineBreak("Kinderen van de ring");
Publications.addPicture(new Picture("Kinderen van de Ring - Cover", "CoverRing.jpg", "thumbCoverRing.jpg", "A cover for the book 'Kinderen van de Ring'. A chilren's book (12+) by Karel Smolders. This is the final cover as I sent it to the publisher, ready for layout.", "&copy; Abimo, 2009", "CoverRingBig.jpg"));
Publications.addPicture(new Picture("Ring - Cover Layout", "CoverRingLayout.jpg", "thumbCoverRingLayout.jpg", "The final layout by the publisher. Note the little saturn on the spine. If this book turns out to be the first of a series, most likely every book will have it's own little icon on the spine.", "&copy; Abimo, 2009", ""));

// portfolio DRAWINGS - VARIA
var DrawingsVaria = new Portfolio("DrawingsVaria", "Varia", "Just some drawings...", ptDrawingsVaria, 5);
DrawingsVaria.basePath = "Graphics/Drawings/Varia/";
DrawingsVaria.independentRows = true;
DrawingsVaria.setLineBreak("Horse Heads I (My first studies of horses, bases on photos)");
DrawingsVaria.addPicture(new Picture("Horse I : State 1", "Horses1State1.jpg", "thumbHorses1State1.jpg", "", "graphite, 70 x 50 cm, February 18, 2007"));
DrawingsVaria.addPicture(new Picture("Horse I : State 2", "Horses1State2.jpg", "thumbHorses1State2.jpg", "", "graphite, 70 x 50 cm, February 18, 2007"));
DrawingsVaria.addPicture(new Picture("Horse I : State 3", "Horses1State3.jpg", "thumbHorses1State3.jpg", "", "graphite, 70 x 50 cm, February 18, 2007"));
DrawingsVaria.addPicture(new Picture("Horse Heads I", "Horses1.jpg", "thumbHorses1.jpg", "", "graphite, 70 x 50 cm, February 18, 2007", "Horses1Big.jpg"));
DrawingsVaria.addPicture(new Picture("Documentation", "PhotoHorses1.jpg", "thumbPhotoHorses1.jpg", "Images I used as a reference.<br>Rather literally, I admit.", ""));

DrawingsVaria.setLineBreak("Horse Sketches I");
DrawingsVaria.addPicture(new Picture("Horse Sketches I", "Horses2.jpg", "thumbHorses2.jpg", "", "graphite, 70 x 50 cm, February 19, 2007"));
DrawingsVaria.addPicture(new Picture("Jumping Horse", "JumpingHorse.jpg", "thumbJumpingHorse.jpg", "The horse of the previous drawing, worked out and mirrored.", "graphite, 25 X 45 cm, February 23, 2007", "JumpingHorseBig.jpg"));

DrawingsVaria.setLineBreak("Santa");
DrawingsVaria.addPicture(new Picture("2007", "SantaHorseWide.jpg", "thumbSantaHorseWide.jpg", "", "2007"));

DrawingsVaria.setLineBreak("Art By Committee");
DrawingsVaria.addPicture(new Picture("Art By Committee", "GurneyJoke.jpg", "thumbGurneyJoke.jpg", "James Gurney put sum quotes from books he created covers for on his blog. It was up to the readers to illustrate the quote. This was my go at it.", "graphite, 30 X 40 cm, February, 2008", "GurneyJokeBig.jpg"));

DrawingsVaria.setLineBreak("Illustrations for Haikus by Pieter van Oudheusden");
DrawingsVaria.addPicture(new Picture("Regen", "HaikuRegen.jpg", "thumbHaikuRegen.jpg", "", "August 2007", "HaikuRegenBig.jpg"));
DrawingsVaria.addPicture(new Picture("Blik", "HaikuBlik.jpg", "thumbHaikuBlik.jpg", "", "August 2007", "HaikuBlikBig.jpg"));
DrawingsVaria.addPicture(new Picture("Ontwaken", "HaikuOntwaken.jpg", "thumbHaikuOntwaken.jpg", "", "August 2007", "HaikuOntwakenBig.jpg"));

DrawingsVaria.setLineBreak("Abstract");
DrawingsVaria.addPicture(new Picture("Abstract 1", "Abstract1.jpg", "ThumbAbstract1.jpg", "", "1995-2000?"));
DrawingsVaria.addPicture(new Picture("Abstract 2", "Abstract2.jpg", "ThumbAbstract2.jpg", "", "1995-2000?"));

// portfolio DRAWINGS - PORTFOLIO
var GraphPortfolio = new Portfolio("GraphPortfolio", "Portfolio", "A selection of drawings in different styles.<br/>Use the top menu (Graph) for a wider overview.", ptPortfolio, 5);
GraphPortfolio.basePath = "Graphics/";
GraphPortfolio.independentRows = true;
GraphPortfolio.setLineBreak("Posters");
GraphPortfolio.addPicture(new Picture("Vienna", "Posters/Wenen.jpg", "Posters/ThumbWenen.jpg", "", "acryl painting, 70 x 35 cm, 2000"));
GraphPortfolio.addPicture(new Picture("Garden", "Posters/Garden.jpg", "Posters/ThumbGarden.jpg", "", "acryl painting, 70 x 35 cm, 2002"));
GraphPortfolio.addPicture(new Picture("Cypreses", "Posters/Cipressen.jpg", "Posters/ThumbCipressen.jpg", "", "acryl painting 32.5 x 65 cm, 1991"));
GraphPortfolio.addPicture(new Picture("Dom", "Posters/Dom.jpg", "Posters/ThumbDom.jpg", "", "acryl painting, 70 x 35 cm, 2000"));
GraphPortfolio.setLineBreak("Pen and aquarel");
GraphPortfolio.addPicture(new Picture("Cromford Station", "Comics/Cocoon/Pages/Station.jpg", "Comics/Cocoon/Pages/thumbStation.jpg", "", "indian and acryl, 47 x 25 cm, 2006", "Comics/Cocoon/Pages/StationBig.jpg"));
GraphPortfolio.addPicture(new Picture("Bradwardine's Beach", "Comics/Cocoon/Pages/BradwardineBeach.jpg", "Comics/Cocoon/Pages/thumbBradwardineBeach.jpg", "", "indian and acryl, 47 x 30 cm, 2006", "Comics/Cocoon/Pages/BradwardineBeachBig.jpg"));
GraphPortfolio.addPicture(new Picture("Your Favorite Spa", "Comics/Cocoon/Pages/YourFavoriteSpa.jpg", "Comics/Cocoon/Pages/thumbYourFavoriteSpa.jpg", "", "indian and acryl, 47 x 30 cm, 2006", "Comics/Cocoon/Pages/YourFavoriteSpaBig.jpg"));
GraphPortfolio.setLineBreak("Black & White");
GraphPortfolio.addPicture(new Picture("Blik", "Drawings/Varia/HaikuBlik.jpg", "Drawings/Varia/thumbHaikuBlik.jpg", "Illustratie bij Haiku van Pieter van Oudheusden", "August 2007", "Drawings/Varia/HaikuBlikBig.jpg"));
GraphPortfolio.addPicture(new Picture("Ontwaken", "Drawings/Varia/HaikuOntwaken.jpg", "Drawings/Varia/thumbHaikuOntwaken.jpg", "Illustratie bij Haiku van Pieter van Oudheusden", "August 2007", "Drawings/Varia/HaikuOntwakenBig.jpg"));
GraphPortfolio.setLineBreak("Pencil");
GraphPortfolio.addPicture(new Picture("Train", "Comics/Cocoon/Pages/TrainPencil.jpg", "Comics/Cocoon/Pages/thumbTrainPencil.jpg", "", "graphite, 47 x 30 cm, 2006", "Comics/Cocoon/Pages/TrainPencilBig.jpg"));
GraphPortfolio.addPicture(new Picture("Flora", "Comics/Cocoon/Sketches/FloraGrass.jpg", "Comics/Cocoon/Sketches/thumbFloraGrass.jpg", "", "graphite, 42 x 30 cm, 2005", "Comics/Cocoon/Sketches/FloraGrassBig.jpg"));
GraphPortfolio.addPicture(new Picture("Horse Heads I", "Drawings/Varia/Horses1.jpg", "Drawings/Varia/thumbHorses1.jpg", "", "graphite, 70 x 50 cm, February 18, 2007", "Drawings/Varia/Horses1Big.jpg"));
GraphPortfolio.setLineBreak("For children's books");
GraphPortfolio.addPicture(new Picture("Sparkle", "Children/Sparkle.jpg", "Children/thumbSparkle.jpg", "", "digital, January 2007", "Children/SparkleBig.jpg"));
GraphPortfolio.addPicture(new Picture("The Seahorse Rider", "Children/Wales.jpg", "Children/thumbWales.jpg", "Past the Whales", "indian and acryl, March 2009", "Children/bigWales.jpg"));
GraphPortfolio.addPicture(new Picture("The Seahorse Rider", "Children/BigRock.jpg", "Children/thumbBigRock.jpg", "The Big Rock Moves", "indian and acryl, April 2009", "Children/bigBigRock.jpg"));
GraphPortfolio.addPicture(new Picture("The Seahorse Rider", "Children/TemBlador.jpg", "Children/thumbTemBlador.jpg", "Tem Blador, the Electric Eel", "indian and acryl, April 2009", "Children/bigTemBlador.jpg"));

// portfolio COMICS - THE TIMES
var TheTimes = new Portfolio("TheTimes", "The Times", "A farewell to my colleages of 10 years at Janssen Pharmaceutica.", ptTheTimes, 5);
TheTimes.basePath = "Graphics/Comics/TheTimes/";
TheTimes.addPicture(new Picture("Page 1", "TheTimes.jpg", "thumbTheTimes.jpg", "", "December 20, 2006", "TheTimesBig.jpg"));
TheTimes.addPicture(new Picture("Page 2", "TheTimes2.jpg", "thumbTheTimes2.jpg", "", "December 21, 2006", "TheTimesBig2.jpg"));

// portfolio DRAWINGS - POSTCARDS
var DrawingsPostcards = new Portfolio("DrawingsPostcards", "Postcards", "Some simple drawings that I'd like to refer to as my 'postcards'.", ptDrawingsPostcards, 5);
DrawingsPostcards.basePath = "Graphics/Drawings/Postcards/";
DrawingsPostcards.addPicture(new Picture("Strong Head", "StrongMan.jpg", "thumbStrongMan.jpg", "", "June 12, 2006"));
DrawingsPostcards.addPicture(new Picture("Leaf of Life", "LeafOfLife.jpg", "thumbLeafOfLife.jpg", "", "June 15, 2006"));
DrawingsPostcards.addPicture(new Picture("Reclining Nude", "RecliningNude.jpg", "thumbRecliningNude.jpg", "", "June 17, 2006"));
DrawingsPostcards.addPicture(new Picture("Window", "Window.jpg", "thumbWindow.jpg", "", "June 24, 2006"));
DrawingsPostcards.addPicture(new Picture("Jonathan and Nude", "JonathanAndNude.jpg", "thumbJonathanAndNude.jpg", "", "June 24, 2006"));
DrawingsPostcards.addPicture(new Picture("Smile", "Smile.jpg", "thumbSmile.jpg", "", "May 15, 2008"));
DrawingsPostcards.addPicture(new Picture("Tree", "Tree.jpg", "thumbTree.jpg", "", "May 15, 2008"));
DrawingsPostcards.addPicture(new Picture("Sandwood Bay", "SandwoodBay.jpg", "thumbSandwoodBay.jpg", "", "May 16, 2008"));
DrawingsPostcards.addPicture(new Picture("Beach 08.4", "Beach.08.4.jpg", "thumbBeach.08.4.jpg", "", "May 21, 2008"));
DrawingsPostcards.addPicture(new Picture("Beach 08.6", "Beach.08.6.jpg", "thumbBeach.08.6.jpg", "", "May 21, 2008"));
DrawingsPostcards.addPicture(new Picture("Beach 08.7", "Beach.08.7.jpg", "thumbBeach.08.7.jpg", "", "May 21, 2008"));

// portfolio DRAWINGS - NUDES
var DrawingsNudes = new Portfolio("DrawingsNudes", "Nudes", "", ptDrawingsNudes, 10);
DrawingsNudes.basePath = "Graphics/Drawings/Nudes/";
DrawingsNudes.addPicture(new Picture("Nude", "Nude1.jpg", "ThumbNude1.jpg", "", "1995"));
DrawingsNudes.addPicture(new Picture("Nude", "Nude2.jpg", "ThumbNude2.jpg", "", "1995"));
DrawingsNudes.addPicture(new Picture("Nude", "Nude3.jpg", "ThumbNude3.jpg", "", "1995"));
DrawingsNudes.addPicture(new Picture("Nude", "Nude4.jpg", "ThumbNude4.jpg", "", "1995"));
DrawingsNudes.addPicture(new Picture("Happy and Merry", "Nude5.jpg", "ThumbNude5.jpg", "Seasons greetings card for Pulp Deluxe", "December 2004"));

// portfolio DRAWINGS - HEADS
var DrawingsHeads = new Portfolio("DrawingsHeads", "Heads", "A library of heads assembled over the years", ptDrawingsHeads, 10);
DrawingsHeads.basePath = "Graphics/Drawings/Heads/";
for(var iHead=1; iHead<36; iHead++)
  {
  DrawingsHeads.addPicture(new Picture("Head", "Head"+iHead+".jpg", "ThumbHead"+iHead+".jpg", "", "1990-2005"));
  }

// portfolio COCOON - SKETCHES
var CocoonSketches = new Portfolio("CocoonSketches", "Sketches", "Studies and sketches for Cocoon", ptCocoonSketches, 99);
CocoonSketches.independentRows = true;
CocoonSketches.basePath = "Graphics/Comics/Cocoon/Sketches/";
CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog.jpg", "thumbSeaDog.jpg", "Scetch after a painting with the same title, by Andrew Wyeth . This painting really struck me when I first saw it. I immediately wanted to use this man's features, that seem to have been sculptured by the sea itself, as a starting point for the old sailor.", "2005"));
CocoonSketches.addPicture(new Picture("Flora", "Flora.jpg", "thumbFlora.jpg", "First scetch for Flora, the writer's daughter. Based on Thomas Eakins' painting 'Maud Cook'.", "2005"));
CocoonSketches.addPicture(new Picture("Flora in Grass", "FloraGrass.jpg", "thumbFloraGrass.jpg", "2nd scetch for Flora. Found it difficult to keep the features of the girl similar to the first drawing. Composition based on a newspaper ad.", "2005"));
CocoonSketches.addPicture(new Picture("Rocky Shore", "RockyShore.jpg", "thumbRockyShore.jpg", "", "2002"));
CocoonSketches.addPicture(new Picture("Bradwardine's Island", "Island1.jpg", "thumbIsland1.jpg", "Reference drawing for beach side of the island.", "2006"));

CocoonSketches.setLineBreak();

CocoonSketches.addPicture(new Picture("Spa and beach", "Island2.jpg", "thumbIsland2.jpg", "Reference drawing for Spa and beach side of the island.", "2006"));
CocoonSketches.addPicture(new Picture("Spa and beach (detail)", "ZoomIsland2.jpg", "thumbZoomIsland2.jpg", "Detail of previous drawing.", "2006"));
CocoonSketches.addPicture(new Picture("Island Map", "Map.jpg", "thumbMap.jpg", "All views of the island should be consistent with this map.", "2006"));
CocoonSketches.addPicture(new Picture("Professor Thomson", "Prof.jpg", "thumbProf.jpg", "Professor Thomson leads the archeological expedition. He is the type of academic you'll find most of the time in the field, not behind his desk.", "2006"));

CocoonSketches.setLineBreak("Jonathan");

CocoonSketches.addPicture(new Picture("Jonathan", "Jonathan1.jpg", "thumbJonathan1.jpg", "Finally I decided on the looks of Jonathan : long face, freckles, wavy hair - probably red, big ears, small long nose, small curly mouth.", "January 22, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan (1st state)", "Jonathan2.jpg", "thumbJonathan2.jpg", "Looking down at Jonathan", "January 29, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan (2nd state)", "Jonathan3.jpg", "thumbJonathan3.jpg", "Looking down at Jonathan, second state", "January 31, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan (3rd state)", "Jonathan4.jpg", "thumbJonathan4.jpg", "Looking down at Jonathan, third state. <br/>It took me 3 states to get the features right. Note the longer stronger chin and the cheekbone on the left. And the correction of that horrible Mr. Spock ear!<br/><br/><i>(flip back and forth between 2nd and 3rd state to see the differences)</i>", "February 2, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan, seated", "JonathanSeated.jpg", "thumbJonathanSeated.jpg", "", "May 22, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan", "Jonathan6.jpg", "thumbJonathan6.jpg", "", "May 2006"));
CocoonSketches.addPicture(new Picture("Jonathan", "Jonathan7.jpg", "thumbJonathan7.jpg", "", "May 29, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan", "Jonathan8.jpg", "thumbJonathan8.jpg", "", "May 29, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan, looking back", "Jonathan9.jpg", "thumbJonathan9.jpg", "", "May 29, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan, looking up at GCO", "Jonathan10.jpg", "thumbJonathan10.jpg", "", "June 10, 2006"));
CocoonSketches.addPicture(new Picture("Jonathan, running", "Jonathan11.jpg", "thumbJonathan11.jpg", "", "August 8, 2006"));

CocoonSketches.setLineBreak("Flora");

CocoonSketches.addPicture(new Picture("The Quest for Flora (1st state)", "Flora3.jpg", "thumbFlora3.jpg", "This may look like a composite drawing, and it actually is one. I'm searching to get the features of Flora exactly the way I want them. This is a weak first version. The face lacks sensuality, and the hair doesn't look like long hear in a dot.", "May 23, 2006"));
CocoonSketches.addPicture(new Picture("The Quest for Flora (2nd state)", "Flora3b.jpg", "thumbFlora3b.jpg", "The hair is correct now, but the chin is too long, and the eyes have something mongoloid.", "May 23, 2006"));
CocoonSketches.addPicture(new Picture("The Quest for Flora (3rd state)", "Flora3c.jpg", "thumbFlora3c.jpg", "This last version has quite a smaller chin and slightly bigger eyes, although I prefer the more dreamy look of the eyes in the previous state.", "May 25, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora4.jpg", "thumbFlora4.jpg", "", "May 23, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora5.jpg", "thumbFlora5.jpg", "The sarcastic look", "May 23, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora6.jpg", "thumbFlora6.jpg", "", "May 28, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora7.jpg", "thumbFlora7.jpg", "", "May 28, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora8.jpg", "thumbFlora8.jpg", "", "May 28, 2006"));
CocoonSketches.addPicture(new Picture("Flora", "Flora9.jpg", "thumbFlora9.jpg", "", "June 9, 2006"));

CocoonSketches.setLineBreak("Sea Dog");

CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog2.jpg", "thumbSeaDog2.jpg", "This 2nd scetch of the old sailor, in preparation of page 4, took longer than I though. It's just a mirror of the original scetch, and I thought the morphology of this face was easy : high pointy forehead, long scharp nose, and those flat top eyelids. But exaggeration of these features easily results in a disformed or rediculously looking face.", "June 4, 2006"));
CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog3.jpg", "thumbSeaDog3.jpg", "", "June 5, 2006"));
CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog4.jpg", "thumbSeaDog4.jpg", "", "June 5, 2006"));
CocoonSketches.addPicture(new Picture("Smiling Sea Dog", "SeaDog5.jpg", "thumbSeaDog5.jpg", "I was trying to make a large drawing of the smiling sailor, but I couldn't get it right. I ended up brutally striking out the drawing with hard aggressive pencil strokes. After I calmed down, I made this very tiny (5X5cm) scetch...and got it right immediately.", "June 6, 2006"));
CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog6.jpg", "thumbSeaDog6.jpg", " ", "June 7, 2006"));
CocoonSketches.addPicture(new Picture("Sea Dog (2nd state)", "SeaDog6b.jpg", "thumbSeaDog6b.jpg", "digitally corrected", "June 7, 2006"));
CocoonSketches.addPicture(new Picture("Sea Dog", "SeaDog7.jpg", "thumbSeaDog7.jpg", "digitally corrected", "June 11, 2006"));
CocoonSketches.addPicture(new Picture("Looking down at Sea Dog", "SeaDog8.jpg", "thumbSeaDog8.jpg", "quick schematic scetch", "June 11, 2006"));

CocoonSketches.setLineBreak("Dress");

CocoonSketches.addPicture(new Picture("Waiter/Hotel staff", "Waiter.jpg", "thumbWaiter.jpg", "", "February 2, 2006"));
CocoonSketches.addPicture(new Picture("Skipper", "Skipper.jpg", "thumbSkipper.jpg", "", "February 2, 2006"));
CocoonSketches.addPicture(new Picture("Prof", "ProfDress.jpg", "thumbProfDress.jpg", "", "February 2, 2006"));
CocoonSketches.addPicture(new Picture("Flora in mother's dress", "FloraMothersDress.jpg", "thumbFloraMothersDress.jpg", "", "February 10, 2006"));
CocoonSketches.addPicture(new Picture("Flora in mother's dress (2nd state)", "FloraMothersDress2.jpg", "thumbFloraMothersDress2.jpg", "I always love to see 'work in progress' by other artists. Hence the different 'states' of some of these drawings.", "February 11, 2006"));
CocoonSketches.addPicture(new Picture("Professor Thomson", "Prof2.jpg", "thumbProf2.jpg", "", "May 13, 2006"));
CocoonSketches.addPicture(new Picture("Professor Thomson (detail)", "Prof2b.jpg", "thumbProf2b.jpg", "", "May 13, 2006"));

CocoonSketches.setLineBreak("Varia");
CocoonSketches.addPicture(new Picture("Young men at the race track", "YoungMenAtTheRaceTrack.jpg", "thumbYoungMenAtTheRaceTrack.jpg", "", "May 28, 2006"));
CocoonSketches.addPicture(new Picture("Big Nose", "BigNose.jpg", "thumbBigNose.jpg", "", "May 29, 2006"));
CocoonSketches.addPicture(new Picture("Praying", "Praying.jpg", "thumbPraying.jpg", "", "May 29, 2006"));
CocoonSketches.addPicture(new Picture("Construction worker", "Marcello.jpg", "thumbMarcello.jpg", "", "May 30, 2006"));
CocoonSketches.addPicture(new Picture("Main in shirt", "ManInShirt.jpg", "thumbManInShirt.jpg", "", "June 10, 2006"));
CocoonSketches.addPicture(new Picture("Main with curly hair", "ManWithCurlyHair.jpg", "thumbManWithCurlyHair.jpg", "", "June 10, 2006"));

// portfolio COCOON - PAGES
var CocoonPages = new Portfolio("CocoonPages", "Pages", "Watch progress of Cocoon on this page (regularly updated)<br/>The first 11 images are the complete prologue to Cocoon. All the other images are unfinished pages and details. Last additions can be found at the bottom of this page.<br/>(sorry for the mess)", ptCocoonPages, 99);
CocoonPages.independentRows = true;
CocoonPages.basePath = "Graphics/Comics/Cocoon/Sketches/";

CocoonPages.addPicture(new Picture("Prologue page 1", "Cocoon1.jpg", "thumbCocoon1.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 2", "Cocoon2.jpg", "thumbCocoon2.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 3", "Cocoon3.jpg", "thumbCocoon3.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 4", "Cocoon4.jpg", "thumbCocoon4.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 5", "Cocoon5.jpg", "thumbCocoon5.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 6", "Cocoon6.jpg", "thumbCocoon6.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 7", "Cocoon7.jpg", "thumbCocoon7.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 8", "Cocoon8.jpg", "thumbCocoon8.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 9", "Cocoon9.jpg", "thumbCocoon9.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 10", "Cocoon10.jpg", "thumbCocoon10.jpg", "", "2005"));
CocoonPages.addPicture(new Picture("Prologue page 11", "Cocoon11.jpg", "thumbCocoon11.jpg", "", "2005"));

CocoonPages.setLineBreak("Page 1");
CocoonPages.addPicture(new Picture("Page 1 : Train in West Highlands", "P1Staat2.jpg", "thumbP1Staat2.jpg", "", "February 27, 2006"));
CocoonPages.addPicture(new Picture("Page 1 : Train", "P1Staat6.jpg", "thumbP1Staat6.jpg", "", "March 4, 2006"));
CocoonPages.addPicture(new Picture("Page 1 : Train", "P1Staat15.jpg", "thumbP1Staat15.jpg", "Phew...this drawing is really taking too long.", "March 7, 2006"));
CocoonPages.addPicture(new Picture("Page 1 : Correction", "P1Correctie2a.jpg", "thumbP1Correctie2a.jpg", "Even though it's a small figure in the whole drawing, it really attracts the attention because it's so badly drawn. Flip back and forth between the next two drawings to see the changes made.", "August, 2006"));
CocoonPages.addPicture(new Picture("Page 1 : Correction", "P1Correctie2b.jpg", "thumbP1Correctie2b.jpg", "Try-out of correction on computer.", "August, 2006"));
CocoonPages.addPicture(new Picture("Page 1 : Correction", "P1Correctie2c.jpg", "thumbP1Correctie2c.jpg", "Final correction", "August, 2006"));

CocoonPages.setLineBreak("Page 2 and 3");
CocoonPages.addPicture(new Picture("Page 2 : close-up of professor Thomson", "P2Staat1.jpg", "thumbP2Staat1.jpg", "As you can see, an identical copy of my first scetch of the professor.", "March 25, 2006"));
CocoonPages.addPicture(new Picture("Page 2 : Jonathan gets off train", "P2Staat4.jpg", "thumbP2Staat4.jpg", "", "March 26, 2006"));
CocoonPages.addPicture(new Picture("Page 2 : Detail, two states", "P2TwoStates.jpg", "thumbP2TwoStates.jpg", "", "March 26, 2006"));
CocoonPages.addPicture(new Picture("Page 3 : Harbour", "P3Harbour.jpg", "thumbP3Harbour.jpg", "", "May 3, 2006"));
CocoonPages.addPicture(new Picture("Page 3 : Harbour", "P3HarbourPen.jpg", "thumbP3HarbourPen.jpg", "", "2006"));
CocoonPages.addPicture(new Picture("Page 3 : Harbour", "P3HarbourColor.jpg", "thumbP3HarbourColor.jpg", "", "November 12, 2006"));
CocoonPages.addPicture(new Picture("Page 3 : Walk down", "P3WalkDown.jpg", "thumbP3WalkDown.jpg", "", "May 3, 2006"));
CocoonPages.addPicture(new Picture("Page 3 : Jonathan Frontal", "P3JonathanFrontal.jpg", "thumbP3JonathanFrontal.jpg", "", "November 16, 2006"));

CocoonPages.setLineBreak("Page 4");
CocoonPages.addPicture(new Picture("Page 4 : One strip of a page", "P4Staat3.jpg", "thumbP4Staat3.jpg", "", "September 20, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : One strip of a page", "P4StripColor.jpg", "thumbP4StripColor.jpg", "", "November, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : Skipper talking to professor.", "P4Staat1.jpg", "thumbP4Staat1.jpg", "How to make sure a character fits the setting. (in this case more difficult given the downward camera angle). A simple trick is to draw a 'checkboard' of lines as illustrated in this drawing. It helps tremendously to make sure the eyes and shoulders are horizontal in respect to the setting. Though a technical solution, it helps in a very intuitive manner : you don't have to consciously follow these helper lines.<br><br>This is actually a trick I learned by watching a video of Jean Giraud (Moebius) who was drawing a scene with quite a lot of people, in the same downward point of view.", "September 21, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : Fragment", "P4Fragment.jpg", "thumbP4Fragment.jpg", "", "September 23, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : Fragment", "P4FragmentColor.jpg", "thumbP4FragmentColor.jpg", "", "November, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : Face and Hand", "P4FaceAndHand.jpg", "thumbP4FaceAndHand.jpg", "", "September 24, 2006"));
CocoonPages.addPicture(new Picture("Page 4 : Shout", "P4Shout.jpg", "thumbP4Shout.jpg", "Finished this one in a couple of minutes, with little corrections. I like that it turned out as if the man's head is about to explode.", "September 24, 2006"));

CocoonPages.setLineBreak("Page 5");
CocoonPages.addPicture(new Picture("Page 5 : Boat at Sea", "P5BoatAtSea.jpg", "thumbP5BoatAtSea.jpg", "", "September 27, 2006"));
CocoonPages.addPicture(new Picture("Page 5 : Boat at Sea", "P5BoatAtSeaColor.jpg", "thumbP5BoatAtSeaColor.jpg", "", "November, 2006"));
CocoonPages.addPicture(new Picture("Page 5 : Detail (arm)", "P5Arm.jpg", "thumbP5Arm.jpg", "", "September 29, 2006"));
CocoonPages.addPicture(new Picture("Page 5 : Detail", "P5Verdorie.jpg", "thumbP5Verdorie.jpg", "", "November, 2006"));

CocoonPages.setLineBreak("Page 7 and 8");
CocoonPages.addPicture(new Picture("Page 7 : Beach House", "P7BeachHouse.jpg", "thumbP7BeachHouse.jpg", "", "October 7, 2006"));
CocoonPages.addPicture(new Picture("Page 7 : Detail", "P7DetailWomen.jpg", "thumbP7DetailWomen.jpg", "", "November 27, 2006"));
CocoonPages.addPicture(new Picture("Page 8 : Detail", "P8Detail1.jpg", "thumbP8Detail1.jpg", "", "October 20, 2006"));
CocoonPages.addPicture(new Picture("Page 8 : Detail Color", "P8DetailColor.jpg", "thumbP8DetailColor.jpg", "", "December 3, 2006"));

CocoonPages.setLineBreak("Page 9 and 11");
CocoonPages.addPicture(new Picture("Page 9 : Full page in pencil", "P9Staat1.jpg", "thumbP9Staat1.jpg", "", "October 30, 2006"));
CocoonPages.addPicture(new Picture("Page 9 : Full page in color", "P9Color.jpg", "thumbP9Color.jpg", "", "December 7, 2006"));
CocoonPages.addPicture(new Picture("Page 9 : 3D model of Spa, made in Blender", "KuuroordBirdsEye.jpg", "thumbKuuroordBirdsEye.jpg", "This building is based on a beachhouse from Oostende. It used to stand where you can currently find the Casino-Kursaal.", "October 25, 2006"));
CocoonPages.addPicture(new Picture("Page 11 : Full page in pencil", "P11Staat1.jpg", "thumbP11Staat1.jpg", "Page in pencil, but scanned hard, so that it looks like it's already inkted. Important page because Flora enters the story with 4 close-ups. Click to enlarge. By the way...Happy New Year.", "January 1, 2007", "P11Staat1Big.jpg"));

CocoonPages.setLineBreak("Page 12, 13 and 15");
CocoonPages.addPicture(new Picture("Page 12 : Dr. Schleyer looking guilty", "P12Illegaal.jpg", "thumbP12Illegaal.jpg", "", "January 21, 2007"));
CocoonPages.addPicture(new Picture("Page 13 : Servant", "P13Servant.jpg", "thumbP13Servant.jpg", "", "January 29, 2007", "P13ServantBig.jpg"));
CocoonPages.addPicture(new Picture("Page 15 : Morning Walk", "P15MorningWalk.jpg", "thumbP15MorningWalk.jpg", "", "February 2, 2007"));

CocoonPages.setLineBreak("Page 17 and 18");
CocoonPages.addPicture(new Picture("Page 17 : Flora leaning", "P17FloraGazebo.jpg", "thumbP17FloraGazebo.jpg", "", "February 9, 2007"));
CocoonPages.addPicture(new Picture("Page 17 : Flora dreaming, Jonathan scratching", "P17FloraAndJonathan.jpg", "thumbP17FloraAndJonathan.jpg", "", "February 10, 2007"));
CocoonPages.addPicture(new Picture("Page 18", "P18FullPage.jpg", "thumbP18FullPage.jpg", "Yes! I did it ! Pencilled a page in one single day ! Granted, the first and last frame are three-line-landscapes and the girl in the 2nd frame still looks like quasimodo's sister, but still.", "February 12, 2007", "P18FullPageBig.jpg"));
CocoonPages.addPicture(new Picture("Page 18 : Detail", "P18FlashBack.jpg", "thumbP18FlashBack.jpg", "", "May-June, 2007", ""));

CocoonPages.setLineBreak("Page 21 and 22");
CocoonPages.addPicture(new Picture("Page 21 : Boy", "P21Boy.jpg", "thumbP21Boy.jpg", "", "June, 2007", "P21BoyBig.jpg"));
CocoonPages.addPicture(new Picture("Page 21 : Boy (color)", "P21BoyColor.jpg", "thumbP21BoyColor.jpg", "", "October, 2007", "P21BoyColorBig.jpg"));
CocoonPages.addPicture(new Picture("Page 22 : Boys, State 1", "P22Staat1.jpg", "thumbP22Staat1.jpg", "", "June, 2007", ""));
CocoonPages.addPicture(new Picture("Page 22 : Boys, State 2", "P22Staat2.jpg", "thumbP22Staat2.jpg", "", "June, 2007", ""));
CocoonPages.addPicture(new Picture("Page 22 : Aunt Annys", "P22AntAnnys.jpg", "thumbP22AntAnnys.jpg", "", "June, 2007", ""));

CocoonPages.setLineBreak("Page 25 to 28");
CocoonPages.addPicture(new Picture("Page 25 : John and Jack", "P25JohnAndJack.jpg", "thumbP25JohnAndJack.jpg", "", "September, 2007", "P25JohnAndJackBig.jpg"));
CocoonPages.addPicture(new Picture("Page 26 : Jack", "P26Jack.jpg", "thumbP26Jack.jpg", "", "September, 2007", ""));
CocoonPages.addPicture(new Picture("Page 27 : Aunt Annys and Flora", "P27AnnysAndFlora.jpg", "thumbP27AnnysAndFlora.jpg", "", "September, 2007", "P27AnnysAndFloraBig.jpg"));
CocoonPages.addPicture(new Picture("Page 28 : Flora", "P28Flora.jpg", "thumbP28Flora.jpg", "", "October, 2007", ""));

CocoonPages.setLineBreak("Page 30 - 32");
CocoonPages.addPicture(new Picture("Page 30 : Bedroom discussion", "P30Staat1.jpg", "thumbP30Staat1.jpg", "A full page. It won't give anything away about the story without the dialogs.", "Oktober, 2007", "P30Staat1Big.jpg"));
CocoonPages.addPicture(new Picture("Page 32 : Detail", "P32Detail.jpg", "thumbP32Detail.jpg", "", "November, 2007", ""));

CocoonPages.setLineBreak("Page 40");
CocoonPages.addPicture(new Picture("Page 40 : Detail", "P40Detail.jpg", "thumbP40Detail.jpg", "", "March, 2008", "P40DetailBig.jpg"));

CocoonPages.setLineBreak("Page 42 - 43");
CocoonPages.addPicture(new Picture("Page 42 : Detail", "P42Detail.jpg", "thumbP42Detail.jpg", "", "February, 2008", ""));
CocoonPages.addPicture(new Picture("Page 43 : Detail", "P43Detail.jpg", "thumbP43Detail.jpg", "", "February, 2008", ""));

CocoonPages.setLineBreak("Page 48 - 50");
CocoonPages.addPicture(new Picture("Page 48 : Seagulls fighting", "P48Detail.jpg", "thumbP48Detail.jpg", "", "April, 2008", ""));
CocoonPages.addPicture(new Picture("Page 50 : Prof", "P50Prof.jpg", "thumbP50Prof.jpg", "", "May, 2008", "P50ProfBig.jpg"));
CocoonPages.addPicture(new Picture("Page 50 : Running", "P50Running.jpg", "thumbP50Running.jpg", "", "May, 2008", "P50RunningBig.jpg"));

CocoonPages.setLineBreak("Page 54");
CocoonPages.addPicture(new Picture("Page 54 : Detail", "P54Detail.jpg", "thumbP54Detail.jpg", "", "May, 2008", ""));

// portfolio COMICS - HIDDEN DISASTER
var HiddenDisaster = new Portfolio("HiddenDisaster", "Hidden disaster", "A comic book I created for the European Commission for Humanitarian Aid.", ptHiddenDisaster, 99);
HiddenDisaster.independentRows = true;
HiddenDisaster.basePath = "Graphics/Comics/HiddenDisaster/";

HiddenDisaster.setLineBreak("Cover");
HiddenDisaster.introduction = "'Hidden disaster' is a comic book I created for the European Commission for Humanitarian Aid.<br/>The story shows how the EU responds in case of a (natural or not) disaster.<br/>The book can be ordered for free at <a href='http://bookshop.europa.eu/uri?target=EUB:NOTICE:KR3109144:EN:HTML'>the European Bookshop</a>.<br/>Below are some examples of pages and some unfinished drawings for the book.";
HiddenDisaster.addPicture(new Picture("Cover", "CoverEN.jpg", "thumbCoverEN.jpg", "", "2009"));
HiddenDisaster.addPicture(new Picture("Cover spread", "CoverSpreadEN.jpg", "thumbCoverSpreadEN.jpg", "This is the full drawing, used for both cover and back cover.", "2009"));

HiddenDisaster.setLineBreak("Vistas");
HiddenDisaster.addPicture(new Picture("Kellow valley", "P04Detail.jpg", "thumbP04Detail.jpg", "Zana arrives by helicopter in Kellow valley.", "2009"));
HiddenDisaster.addPicture(new Picture("Three graves", "P29Detail.jpg", "thumbP29Detail.jpg", "Robajo wonders if one of the people who died might be his grandfather.", "2009"));

HiddenDisaster.setLineBreak("My favourite drawings");
HiddenDisaster.addPicture(new Picture("Road block", "P25RoadBlock.jpg", "thumbP25RoadBlock.jpg", "Nasty rock in the way.", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 26", "P24Detail1.jpg", "thumbP24Detail1.jpg", "", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 26", "P24Detail2.jpg", "thumbP24Detail2.jpg", "", "2009"));

HiddenDisaster.setLineBreak("Sketches and work in progress");
HiddenDisaster.addPicture(new Picture("Robajo and Zana", "SylviaAndRobin.jpg", "thumbSylviaAndRobin.jpg", "First sketch for two protagonists. As you can see, they changed a bit - especially the boy. Initially Zana was called Sylvia, but the EU suggested to name the lead character Zana, after the person who initialed this comic book project.", "2009"));
HiddenDisaster.addPicture(new Picture("UN camp meeting", "P09Detail.jpg", "thumbP09Detail.jpg", "Detail of page 9, as I'm inking.", "2009"));
HiddenDisaster.addPicture(new Picture("Page 28 - work in progress", "P27Half.jpg", "thumbP27Half.jpg", "", "2009"));

HiddenDisaster.setLineBreak("The making of page 32");
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_1.jpg", "thumbP30_1.jpg", "State 1. Note how I don't draw the full drawing in pencil first but gradually build it up and already ink the parts that are ok. This allows me to erase part of the pencil drawing, except for the already finished parts which are already inkted. I also draw a vague 'tile floor' as a reference for perspective. It's a good visual aid to 'see' the floor.", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_2.jpg", "thumbP30_2.jpg", "State 2. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_3.jpg", "thumbP30_3.jpg", "State 3. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_4.jpg", "thumbP30_4.jpg", "State 4. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_5.jpg", "thumbP30_5.jpg", "State 5. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_6.jpg", "thumbP30_6.jpg", "State 6. Oops! I've drawn the dirt and rocks already, while I still need to draw two children! I'll need to scrape away some ink...", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_7.jpg", "thumbP30_7.jpg", "State 7. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_8.jpg", "thumbP30_8.jpg", "State 8. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - the storyteller", "P30_9.jpg", "thumbP30_9.jpg", "State 9. The finished ink drawing. (you can see where I scraped off ink underneath the last two children I added)<br/>Ready to scan and start colouring on computer.", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - adding colour", "P30Color1.jpg", "thumbP30Color1.jpg", "Colour state 1. The lettering in the text balloons is preliminary and hardly readable. It's only meant to estimate the size of the balloons.", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - adding colour", "P30Color2.jpg", "thumbP30Color2.jpg", "Colour state 2. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - adding colour", "P30Color3.jpg", "thumbP30Color3.jpg", "Colour state 3. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - adding colour", "P30Color4.jpg", "thumbP30Color4.jpg", "Colour state 4. ", "2009"));
HiddenDisaster.addPicture(new Picture("Detail of page 32 - adding colour", "P30Color5.jpg", "thumbP30Color5.jpg", "Colour state 5. Note how in this final state, the addition of 'light' (e.g. on the old man's face) brings the drawings to life and adds volume and depth to all elements.", "2009"));

