function LoadData(id) {
    var slider;
        switch (id) {        
            case 1:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='gulfcrafts.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Qatar</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Gulfcrafts branding</td></tr><tr><td><label class='blacktext'>Who? </label>Gulfcrafts Co.LL</td></tr><tr><td class='paddingright10 paddingtop20'>Gulfcrafts is an industrial crafts company that produce and manufacture a variety of items ranging from signs, to architectural models to luxury accessories and awards.They wanted to re-brand their company and that is where we came in, providing with with a new logo as well as a brand manual to cater for the various branding needs.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div1").innerHTML = slider;
                break; 
            case 2:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='tamevo.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon / UK</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Tamevo branding and website</td></tr><tr><td><label class='blacktext'>Who? </label>Tamevo BVI</td></tr><tr><td class='paddingright10 paddingtop20'>Okay, we all agree that mascots are dead, but tamevo is not really a mascot. Tamevo is your MSN® buddy that will allow you to call or SMS anyone in the world, directly from your chat window. It's pretty neat.We designed the character as well as the web portal and all associated items.<br><br><a href='http://www.tamevo.com' target='_blank' class='black'>www.tamevo.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div2").innerHTML = slider;
                break;    
            case 3:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='ipsis.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>United Arab Emirates</td></tr><tr><td><label class='blacktext'>When? </label>2008<td></tr><tr><td><label class='blacktext'>What? </label>IPSIS branding</td></tr><tr><td><label class='blacktext'>Who? </label>IPSIS</td></tr><tr><td class='paddingright10 paddingtop20'>IPSIS (International Private Schools Integrated System) is an organization that sets up school systems in the Middle East region with the hopes of expanding to regions around the world. The branding needed to be able to easily accommodate the sub-branding of its regional members and offices and so a logo usage guide was put together for such a purpose.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div3").innerHTML = slider;
                break;    
            case 4:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='dekkaneh.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2008</td></tr><tr><td><label class='blacktext'>What? </label>Dekkaneh branding</td></tr><tr><td><label class='blacktext'>Who? </label>Purple Concept</td></tr><tr><td class='paddingright10 paddingtop20'>Dekkaneh, a Lebanese term for convenient store, is a brand developed for a franchise of local stores. The brand needed to be fresh, friendly and inviting while being consistent with the local heritage of the name and concept.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div4").innerHTML = slider;
                break; 
            case 5:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='aeren.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>India</td></tr><tr><td><label class='blacktext'>When? </label>2008</td></tr><tr><td><label class='blacktext'>What? </label>AEREN•R branding</td></tr><tr><td><label class='blacktext'>Who? </label>AEREN•R</td></tr><tr><td class='paddingright10 paddingtop20'>AEREN•R is a North India based real-estate developer with multiple projects in the field. We did a complete re-branding for the AEREN•R company both for their corporate identity and by putting together strategies in their philosophy, standardization, and co/sub branding.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div5").innerHTML = slider;
                break; 
            case 6:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='raio.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Mozambique</td></tr><tr><td><label class='blacktext'>When? </label>2008<td></tr><tr><td><label class='blacktext'>What? </label>Raio paints branding</td></tr><tr><td><label class='blacktext'>Who? </label>Raio Paints</td></tr><tr><td class='paddingright10 paddingtop20'>Raio is a new paint manufacturing brand in Mozambique. The brand needed to be created completely from scratch taking into consideration that it was a brand made for Mozambique but looking to expand across Africa. We created both a name for the brand, which is based on the Portuguese word for ray, and a full, easily recognizable brand identity covering several applications of the brand.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div6").innerHTML = slider;
                break;
            case 7:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='creative.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2008</td></tr><tr><td><label class='blacktext'>What? </label>Creative lebanon publication</td></tr><tr><td><label class='blacktext'>Who? </label>British Council</td></tr><tr><td class='paddingright10 paddingtop20'>A publication promoting the creative industries in Lebanon and a catalyst in the promotion and development of the 'Creative Lebanon' brand. The photos used were collected from famous Lebanese bloggers - snapshots of life around the city and works in progress.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div7").innerHTML = slider;
                break; 
            case 8:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='festival.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>India</td></tr><tr><td><label class='blacktext'>When? </label>2008</td></tr><tr><td><label class='blacktext'>What? </label>Festival City wayfinding</td></tr><tr><td><label class='blacktext'>Who? </label>AEREN•R</td></tr><tr><td class='paddingright10 paddingtop20'>Three main ideas contributed in the development of the Festival City wayfinding system. A blend of essences inspired from the colourful Indian culture, the flashy neon signs and the eye-catching style of comics, made up the system of signs for this theme destination mall in North India.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div8").innerHTML = slider;
                break; 
            case 9:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pifour.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2007<td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>Why just the designers, why can't everyone be involved. Our friends, our families and people off the street helped put this tower together. And we all watched as, day by day, the tower came down...despite the persistance of a few. This item was nominated for the DesignPreis Deutschland 2010 and winner of the Red Dot design award 2008.<br/>1500 units were distributed.</td></tr><tr><td align='left' class='paddingtop40'><table cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td><img src='images/dutch.jpg' alt='' /></td><td class='paddingright28'><img src='images/reddot.jpg' alt='' /></td></tr></table></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div9").innerHTML = slider;
                break;
            case 10:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='forgotten.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Syria</td></tr><tr><td><label class='blacktext'>When? </label>2007</td></tr><tr><td><label class='blacktext'>What? </label>Forgotten Cities wayfinding</td></tr><tr><td><label class='blacktext'>Who? </label>MORES and the Swiss Development Council</td></tr><tr><td class='paddingright10 paddingtop20'>The wayfinding system and concept for the Forgotten Cities hiking trails in Aleppo, Syria, is based on the challenges presented in conserving the area's social and environmental conditions. The wayfinding system needed to be a well-integrated, low cost, maintenance free system, designed to withstand harsh weather and environmental conditions. The signs were manufactured on-site using a local workforce to integrate the community slowly into the project.</td></tr><tr><td align='left' class='paddingtop40'><table cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td><img src='images/Forgotten cities_ SEGD.png' alt='' /></td></tr></table></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div10").innerHTML = slider;
                break; 
            case 11:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pithree.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2006<td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>Internally nicknamed “toilet paper”, our third Pi and second calendar gave 12 designers a chance to tell a 'story' in a month.Whether you tore off the days or let them run 'n' roll was entirely up to you. <br/>1200 units were distributed.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div11").innerHTML = slider;
                break;
            case 12:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='37J.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2006</td></tr><tr><td><label class='blacktext'>What? </label>37j Business Cards</td></tr><tr><td><label class='blacktext'>Who? </label>Abed el Halim Jabr, architect</td></tr><tr><td class='paddingright10 paddingtop20'>The brief consisted of designing a business card for the Lebanese architect, Abed el Halim Jaber. It took the shape of a booklet reminiscent of a checkbook that binds together a set of tearable business cards, die-cut with the architect's logo.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div12").innerHTML = slider;
                break;
            case 13:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pitwo.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2005<td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>How to guarantee a year long desk presence?  A calendar. The first Pi calendar, the last in-house silkscreening adventure. After several days of drying in our office corridor, we finally got them out the door. Sure you can fold a cube, but can you fold 12? <br/>600 units were distributed.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div13").innerHTML = slider;
                break;
            case 14:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pione.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2004</td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>The very first. This one was a purely decorative 'conversation' piece, manually assembled in our office. If a Penguin-yellow-colored-Cube rested on your desk, it spoke loud and clear saying: Yes, I know how to fold a cube, no problem. <br/>200 units were distributed.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div14").innerHTML = slider;
                break;
            case 15:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='jf.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Johnny Farah website</td></tr><tr><td><label class='blacktext'>Who? </label>Johnny Farah</td></tr><tr><td class='paddingright10 paddingtop20'>Johnny Farah is a Lebanese-based leather accessory designer and fashion shop owner. We designed a website for his accessory brand, through which we highlighted some aspects that are essential to Johnny's process such as material, refinement and attention to detail. The site features several of Johnny's friends and faithful customers, people of various crafts and professions, photographed with their favorite Johnny Farah accessories.<br><br><a href='http://www.johnnyfarah.com' target='_blank' class='black'>www.johnnyfarah.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div15").innerHTML = slider;
                break;
            case 16:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='stereo.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Stereotypo font and campaign</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>Stereotypo is a tool for social commentary. With a collection of symbols and icons representing stereotypes commonly associated with Middle Eastern people, places and actions - stereotypo aims to not only identify these common stereotypes but also to give you a tool through which you can create your own statements either through composition or intervention. This set of icons has been made available as a dingbat font which you can install on your own computer and use time and time again.<br><br><a href='http://www.stereotypo.org' target='_blank' class='black'>www.stereotypo.org</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div16").innerHTML = slider;
                break;
            case 17:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='azur.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Gabon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Azur Branding</td></tr><tr><td><label class='blacktext'>Who? </label>Bintel LTD</td></tr><tr><td class='paddingright10 paddingtop20'>The Bahrain-based Saudi Telecom company, Bintel, obtained the license to enter the African telecom market and launched Azur in Gabon. In order to distinguish themselves in an already crowded market, Azur needed a brand that portrayed an honest and transparent service provider, one that grasps the significance of a breezy and relaxed customer experience. We were commissioned to design and develop the brand identity and the initial launch campaign to portray such an image.<br>Azur launched in Gabon in October 2009.<br><br><a href='http://www.azur-gabon.com' target='_blank' class='black'>www.azur-gabon.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div17").innerHTML = slider;
                break;
            case 18:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pifive.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>Our PI series goes digital. After three consecutive calenders, we decided to shake things up. The result is a 'year-long-animation' in a box. Push the red button and watch, come in the next day and watch some more. Two frames get added daily which means the full animation can't be viewed until the whole year has passed, giving you the gift of suspense.<br><br>2000 units were distributed.</td></tr><tr><td align='left' class='paddingtop40'><table cellpadding='0' cellspacing='0' border='0' width='80%'><tr><td><img src='images/if.jpg' alt='' /></td><td><img src='images/Pifive_DesignPreis.png' alt='' /></td></tr></table></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div18").innerHTML = slider;
                break;
            case 19:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='mrk.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Maison Rabih Kayrouz Website</td></tr><tr><td><label class='blacktext'>Who? </label>Maison Rabih Kayrouz</td></tr><tr><td class='paddingright10 paddingtop20'>Rabih Kayrouz is a Lebanese fashion designer with Showrooms in Beirut and Paris. Maison Rabih Kayrouz recently presented its 2009 collection as an invited member on the official calendar of the prestigious Chambre Syndicale de La Haute Couture in Paris.<br>His website needed to reflect a sensitivity to light and poetry, two characteristics of Rabih's work while also exhibiting his collection. Unlike most fashion designers, Rabih did not want a conventional catalogue with a catwalk display of his dresses. Instead he wanted something simple and subtle, preferring discovery to navigation.<br><br><a href='http://www.maisonrabihkayrouz.com' target='_blank' class='black'>www.maisonrabihkayrouz.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div19").innerHTML = slider;
                break;
            case 20:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='souks.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Beirut Souks wayfinding</td></tr><tr><td><label class='blacktext'>Who? </label>Solidere</td></tr><tr><td class='paddingright10 paddingtop20'>This wayfinding system was designed not only to aid navigation in the space, but to also help establish the identity of the Souk itself. The shopping facility itself is ambiguous - is it an open air mall or a shopping district? The choice of material, quantity of signs, and the way they were mounted, were all designed to convey to the customer a sense of shopping in an urban district while being in the mall itself.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div20").innerHTML = slider;
                break;
            case 21:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='locrete.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Kuwait</td></tr><tr><td><label class='blacktext'>When? </label>2007</td></tr><tr><td><label class='blacktext'>What? </label>Locrete branding and BIY applet</td></tr><tr><td><label class='blacktext'>Who? </label>Locrete Ltd</td></tr><tr><td class='paddingright10 paddingtop20'>The Locrete system is a 3 step building solution using an efficiently designed type of pre-cast concrete elements. In addition to the branding, we also developed a 'build it yourself' application that allows the user to simulate building their own own Locrete structure in an informative, fun and easy to use way. It also allows the company to present their concept in a fast and clear way to prospective clients.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div21").innerHTML = slider;
                break;
            case 22:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='elaf.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Bahrain</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Elaf Bank website</td></tr><tr><td><label class='blacktext'>Who? </label>Elaf Bank</td></tr><tr><td class='paddingright10 paddingtop20'>As Bahrain's first corporate Islamic bank, Elaf Bank wanted a website that would fit with their corporate image as well as educate visitors about the ins and outs of islamic banking. Alongside the website, we developed the Islamic Banking 101 section that explains the financial instruments of islamic banking in short interactive animations.<br><br><a href='http://www.elafbank.net' target='_blank' class='black'>www.elafbank.net</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div22").innerHTML = slider;
                break;
            case 23:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='meouchi.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2007</td></tr><tr><td><label class='blacktext'>What? </label>El Meouchi branding and website</td></tr><tr><td><label class='blacktext'>Who? </label>Badri & Salim El Meouchi Law Firm</td></tr><tr><td class='paddingright10 paddingtop20'>A large part of creating a new brand identity for the law firm was designing a new website.   The website was designed to bring a new, younger and more up-to-date image to the firm and to allow for better information management of the published content.<br><br><a href='http://www.elmeouchi.com' target='_blank' class='black'>www.elmeouchi.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div23").innerHTML = slider;
                break;
            case 24:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='telephone.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>France / Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Telephone.com branding and UI design</td></tr><tr><td><label class='blacktext'>Who? </label>Comium</td></tr><tr><td class='paddingright10 paddingtop20'>A mash-up communication application that combines email, SMS, efax, telephony, IM, start page, and many other features into one centralized account. We were commissioned to design the brand, the service, and user interface for both the web-based and desktop-based applications. In mid-2009 Telephone.com kick-started their online initiative by launching a specialized SMS service.<br><br><a href='http://www.telephone.com' target='_blank' class='black'>www.telephone.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div24").innerHTML = slider;
                break;
            case 25:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='kiwan.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Syria</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Al-Kiwan way-finding</td></tr><tr><td><label class='blacktext'>Who? </label>Al-Kharafi</td></tr><tr><td class='paddingright10 paddingtop20'>The inspirations for the wayfinding system were obtained from both the culture of the area, the raw materials inherent to it and the materials, shapes and qualities of the Al-Kiwan building itself. In order to give the building a distinctive yet relevant touch the signage system considered the richness of the context - Damascus.<br><br>Research into various Damascan interiors, crafts and materials provided a wealth of techniques, qualities, forms that inspired the signage system.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div25").innerHTML = slider;
                break;
            case 26:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='noor.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Qatar</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Al-Noor way-finding</td></tr><tr><td><label class='blacktext'>Who? </label>Shafallah</td></tr><tr><td class='paddingright10 paddingtop20'>A school for the blind and the visually impaired.<br>The challenge was to create a signage system that meet international disability standards and that maximized access to different areas of the development for the students.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div26").innerHTML = slider;
                break;
            case 27:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='kafd.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Saudi Arabia</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>KAFD way-finding</td></tr><tr><td><label class='blacktext'>Who? </label>Al-Seif</td></tr><tr><td class='paddingright10 paddingtop20'>An architectural complex being built in Riyadh, Saudi Arabia. The project called for the design of a way finding system that echoes the triangulation pulsating through out the structure and allows for clear navigation through its two main blocks.<br>This signage is made out of brushed aluminum plates that are cut inward at a slight angle across a diagonal. The information is engraved into the sign and filled with ink. The signs accommodate for both arabic and english titles and differentiate between indoor and outdoor signs through the silver and bronze colored aluminum respectively. The forms of the signs are inspired by the architecture of the district itself. The creases and angles create a dynamic that emerges and sinks into the walls of the structure leading you through its interiors.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div27").innerHTML = slider;
                break;
            case 28:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='qq.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Qatar</td></tr><tr><td><label class='blacktext'>When? </label>2009</td></tr><tr><td><label class='blacktext'>What? </label>Qanat Quartier way-finding</td></tr><tr><td><label class='blacktext'>Who? </label>UDC</td></tr><tr><td class='paddingright10 paddingtop20'>A mixed use town of retail, residential and commercial, linked by a mesh of pedestrian, vehicular and marine routes. Inspired by Venetian city graphics this massive development included the design of vehicular, boat, pedestrian signs - both internal and external. Challenges included the planning of the entire system while retaining a cost efficient budget.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div28").innerHTML = slider;
                break;
            case 29:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='opera.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Oman</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>Royal Opera House Wayfinding</td></tr><tr><td><label class='blacktext'>Who? </label>Royal Court Affairs, The Royal Estate of Muscat</td></tr><tr><td class='paddingright10 paddingtop20'>The Royal Court and His Majesty the Sultan of Oman commissioned PenguinCube to design and develop a wayfinding system for prestigious Opera house and Galleria project.<br /><br />Our biggest challenge was that no consideration was made for signage while developing the highly ornamented interiors that have been generously decorated with marble, wood, hand paintings and various other material. While this limited possible locations for signage, it also presented the interesting challenge of developing a signage system that is highly visible without clashing intrusively with the decorative ambiance.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div29").innerHTML = slider;
                break;
            case 30:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='911.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo1'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>Light installation</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>This piece was created for the Dial 911 for the New Middle East (Sept 11, 2011) exhibition at the Running Horse gallery commemorating, remembering and commenting on the Sept 11 (2001) attacks and their effect on the Middle East and the world over the last 10 years.<br /><br />Our light installation (named “9/11”) is a literal depiction of the events of 9/11 that stands alone both to continuously remind us of the raw facts of the events of that day and to playfully critique its use in our world today. The piece works as an animated sign that flashes step by step to unveil the event, using lights and illustrations. The sign reminds us of the neon flashy signs that attract us to commercial venues, theaters and cinemas that have filled New York and other major cities for years. <br /><br />The choice of medium and the simplification of the event into such a sign aims to show the dehumanization of the event in the current media. The sign represents the conversion of the 9/11 event into a tool for selling concepts and decisions, and a space for legitimizing shows and scenarios. The initial video of the incident marked our memories and gave the 9/11 consequences a “raison d’etre”. Today, this simple flashing sign shows us how far this image has become, even after 10 years, a point of attraction that serves to justify repercussions, instead of an image of sincere human tragedy. <br /><br />The icons used in the sign are inspired from a dingbat font created by PenguinCube called StereoTypo.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div30").innerHTML = slider;
                break;
            case 31:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='mp6.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Eygpt</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>MP6 Event branding</td></tr><tr><td><label class='blacktext'>Who? </label>Young Arab Theatre Fund (YATF)</td></tr><tr><td class='paddingright10 paddingtop20'>Meeting Points is a contemporary arts festival comprising of visual arts, theater, film, music, dance and other performance arts. The events (and initiative) is developed to connect artists in the Arab speaking world together and with artists and fellow professionals in the field around Europe and the world.<br /><br />By employing a large hand-drawn 6 rendered by connecting dots (as per the popular children's paper and pen activity), our plays on the foundation concept of ‘Meeting Points’ and adds a human touch which highlights both the artistic and social value of the MP initiative.<br><br><a href='http://www.meetingpoints.org' target='_blank' class='black'>www.meetingpoints.org</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div31").innerHTML = slider;
                break;
            case 32:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='invigo.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>MyBackup Interface design</td></tr><tr><td><label class='blacktext'>Who? </label>Invigo</td></tr><tr><td class='paddingright10 paddingtop20'>MyBackUp a computer and mobile phone application that is sold to mobile operators, which in turn offer it to their clients as a secure way to back up information off their mobile phones to the MyBackUp online server and restore information from the server to their phones. The idea behind it is to offer a secure place to put all the phone’s information, such as contacts, notes, pictures, even bookmarks in a place whereby if the phone is lost or stolen the latest backed up information is safe.<br /><br />The client came to us with the product developed and asked us to develop it further to increase its ease of use, perfect user scenarios, create a visual interface, and aid in making the product much more user oriented. <br /><br />One of the project’s challenges was the fact that the mobile application needed to be developed to fit all sorts of mobile phones, from iphone and Blackberry to Java and Symbian technologies.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div32").innerHTML = slider;
                break;
            case 33:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='mobilepasse.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>Branding and interface design</td></tr><tr><td><label class='blacktext'>Who? </label>MobilePasse</td></tr><tr><td class='paddingright10 paddingtop20'>MobilePasse is a start-up that plans to provide a complete mobile application solution to content management systems. Our role involved developing the brand as well as the user-interfaces for the web portal and for the market-leading mobile platforms.<br><br><a href='http://www.mobilepasse.com' target='_blank' class='black'>www.mobilepasse.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div33").innerHTML = slider;
                break;
            case 34:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='raa.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>Raëd Abillama Architects website</td></tr><tr><td><label class='blacktext'>Who? </label>Raëd Abillama Architects</td></tr><tr><td class='paddingright10 paddingtop20'>The architecture practice was looking for a new portfolio site in which they could integrate their new brand and works.<br /><br />The site was designed following a strict and visible grid upon which all the elements snap, emerge from and lie within a network of small dots. The site's structure was designed so that however large the portfolio becomes, the filtering mechanism allows for the project base not to appear too large to navigate. The filtering process was not done by year, but rather by type of work and then by stage of the project, to reflect more closely how the architect views the progress of the works rather than to just archive them.<br /><br /><a href='http://www.raarchitects.com' target='_blank' class='black'>www.raarchitects.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div34").innerHTML = slider;
                break;
            case 35:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='acid.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2011</td></tr><tr><td><label class='blacktext'>What? </label>ACID website</td></tr><tr><td><label class='blacktext'>Who? </label>Abillama Chaya Industrial Design</td></tr><tr><td class='paddingright10 paddingtop20'>As industrial designers, Abillama and Chaya wanted a profile website that allows them to showcase their work including all the fine details that they so meticulously develop. Accordingly, the website is based around full bleed images of ACID’s project, giving them the highest priority on the site in terms of visibility and impact.<br /><br />In addition to designing the website, our scope included developing a CMS solution that would allow them to update the site with new content whenever necessary. <br /><br /><a href='http://www.acid-works.com' target='_blank' class='black'>www.acid-works.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div35").innerHTML = slider;
                break;
            case 36:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='reed.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2010</td></tr><tr><td><label class='blacktext'>What? </label>REED branding</td></tr><tr><td><label class='blacktext'>Who? </label>REED Developments SAL</td></tr><tr><td class='paddingright10 paddingtop20'>REED is a Real Estate development company looking to enter a cut-throat market. They needed a name and a brand that communicates robustness, trust-worthiness and sustainability. REED’s approach involves adapting the old property itself to generate the renovation capital and it is this adaptive and self-sufficient qualities that lead to the Reed, from Jean de la Fontaine’s fable “Le chêne et le roseau”, as a symbol of adapting to and working with your environment in order to survive and thrive.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div36").innerHTML = slider;
                break;
            case 37:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='british.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2010</td></tr><tr><td><label class='blacktext'>What? </label>British Council in Lebanon publication</td></tr><tr><td><label class='blacktext'>Who? </label>British Council</td></tr><tr><td class='paddingright10 paddingtop20'>The British Council in Lebanon was looking to produce a publication that sums up their Lebanese enterprise and how they go about their endeavors, focusing on the values they would like to associate with the British Council name. Our solution was a lively and expressive visual style that highlights the aspect of human interaction, bringing to forefront the British Council’s people oriented approach.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div37").innerHTML = slider;
                break;
            case 38:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='pi6.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2010</td></tr><tr><td><label class='blacktext'>What? </label>Promotional item</td></tr><tr><td><label class='blacktext'>Who? </label>PenguinCube</td></tr><tr><td class='paddingright10 paddingtop20'>PenguinCube’s 6th annual promotional item. It ticks and it tocks but does it tell the time?<br />Not really. <br />It won’t wake you up for an exam, it won’t remind you to attend meetings, it doesn’t save daylight, it won’t record your best lap time and it cannot be wired to an explosive device (if you manage this one, do us a favor and keep it to yourselves). <br />PiSix is our most exhibitionistic Pi yet. It depicts the many different things we do to pass the day whether work, listening to music, ordering food etc... <br />Looking to kill time? Let PiSix inspire you. <br />1200 units were distributed.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div38").innerHTML = slider;
                break;
            case 39:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='mg.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2010</td></tr><tr><td><label class='blacktext'>What? </label>MARIAGROUP website</td></tr><tr><td><label class='blacktext'>Who? </label>MARIAGROUP</td></tr><tr><td class='paddingright10 paddingtop20'>MARIAGROUP is an architecture and design studio based in Beirut. The main idea behind the site was to put forth the different scales, scopes, and services that MARIAGROUP has been involved in and that has lead in various cities of the Middle East and the GCC.In addition, the site was also designed to accentuate their growing team.<br /><br /><a href='http://www.mariagroup.com' target='_blank' class='black'>www.mariagroup.com</a></td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div39").innerHTML = slider;
                break;
            case 40:
                slider = "<div id='slider2' class='maindiv'>";
                slider += "<iframe src='myproject.html' style='height:450px; width:480px;' frameborder='0' scrolling='no' ></iframe>";
                slider += "<div class='divinfo'><table cellpadding='5' cellspacing='0' border='0'><tr><td><label class='blacktext'>Where? </label>Lebanon</td></tr><tr><td><label class='blacktext'>When? </label>2010</td></tr><tr><td><label class='blacktext'>What? </label>MY Projects branding</td></tr><tr><td><label class='blacktext'>Who? </label>MY Projects</td></tr><tr><td class='paddingright10 paddingtop20'>MY Projects is a Beirut-based architectural design and build company that required branding to unify their various departments as well as represent their multi-disciplinary disposition. Accordingly we went about developing their dynamic brand, adapting to sub-brands and applications as well.</td></tr></table></div>";
                slider += "</div>";
                document.getElementById("div40").innerHTML = slider;
                break;
        }
    }   


    function WaitData(id) {
        document.getElementById("div1").innerHTML = "";
        document.getElementById("div2").innerHTML = "";
        document.getElementById("div3").innerHTML = "";
        document.getElementById("div4").innerHTML = "";
        document.getElementById("div5").innerHTML = "";
        document.getElementById("div6").innerHTML = "";
        document.getElementById("div7").innerHTML = "";
        document.getElementById("div8").innerHTML = "";
        document.getElementById("div9").innerHTML = "";
        document.getElementById("div10").innerHTML = "";
        document.getElementById("div11").innerHTML = "";
        document.getElementById("div12").innerHTML = "";
        document.getElementById("div13").innerHTML = "";
        document.getElementById("div14").innerHTML = "";
        document.getElementById("div15").innerHTML = "";
        document.getElementById("div16").innerHTML = "";
        document.getElementById("div17").innerHTML = "";
        document.getElementById("div18").innerHTML = "";
        document.getElementById("div19").innerHTML = "";
        document.getElementById("div20").innerHTML = "";
        document.getElementById("div21").innerHTML = "";
        document.getElementById("div22").innerHTML = "";
        document.getElementById("div23").innerHTML = "";
        document.getElementById("div24").innerHTML = "";
        document.getElementById("div25").innerHTML = "";
        document.getElementById("div26").innerHTML = "";
        document.getElementById("div27").innerHTML = "";
        document.getElementById("div28").innerHTML = "";
        document.getElementById("div29").innerHTML = "";
        document.getElementById("div30").innerHTML = "";
        document.getElementById("div31").innerHTML = "";
        document.getElementById("div32").innerHTML = "";
        document.getElementById("div33").innerHTML = "";
        document.getElementById("div34").innerHTML = "";
        document.getElementById("div35").innerHTML = "";
        document.getElementById("div36").innerHTML = "";
        document.getElementById("div37").innerHTML = "";
        document.getElementById("div38").innerHTML = "";
        document.getElementById("div39").innerHTML = "";
        document.getElementById("div40").innerHTML = "";
        setTimeout("LoadData(" + id + ");", 300);
    }


//    function select(id)
//    {
//        document.getElementById("divLoader1").className = "divLoader";
//        document.getElementById("divLoader2").className = "divLoader";
//        document.getElementById("divLoader3").className = "divLoader";
//        document.getElementById("divLoader4").className = "divLoader";
//        document.getElementById("divLoader5").className = "divLoader";
//        document.getElementById("divLoader6").className = "divLoader";
//        document.getElementById("divLoader7").className = "divLoader";
//        document.getElementById("divLoader8").className = "divLoader";
//        document.getElementById("divLoader9").className = "divLoader";
//        document.getElementById("divLoader10").className = "divLoader";
//        document.getElementById("divLoader11").className = "divLoader";
//        document.getElementById("divLoader12").className = "divLoader";
//        document.getElementById("divLoader13").className = "divLoader";
//        document.getElementById("divLoader14").className = "divLoader";        

//        document.getElementById(id).className = "divLoaderover";
//        
//    }