Species page modules

Edit the titles and comment in the top page
Which red list species are sold? Subtitle Mouse hover the logos to see the species sold

Add the right html to all species
To Portugal would be something like this:

   Alabote

   Alabote da Gronel&acirc;ndia

   Atuns

 <img alt="Bacalhau do Atl&acirc;ntico" title="Bacalhau do Atl&acirc;ntico" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/cod-amend.jpg" /> </a> Bacalhau do           Atl&acirc;ntico </a>

 <img alt="Camar&otilde;es" title="Camar&otilde;es" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/shrimp.jpg" /> </a> Camar&otilde;es</a>

 <img alt="Espadarte" title="Espadarte" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/swordfish.jpg" /> </a> Espadarte</a>

<img alt="Linguado europeu" title="Linguado europeu" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/sole.jpg" /> </a> Linguado europeu</a>

 <img alt="Peixe espada branco" title="Peixe espada branco" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/peixeespadabranco.jpg" /> </a> Peixe espada branco</a>

 <img alt="Peixes vermelhos" title="Peixes vermelhos" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/redfish.jpg" /> </a> Peixes vermelhos </a>

 <img alt="Pescadas" title="Pescadas" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/hake.jpg" /> </a> Pescadas</a>

 <img alt="Raias" title="Raias" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/skate.jpg" /> </a> Raias</a>

 <img alt="Salm&atilde;o" title="Salm&atilde;o" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/salmon.jpg" /> </a> <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=12" target="_blank">Salm&atilde;o</a>

<a href="http://www.greenpeace.org/portugal/lista-vermelha?id=13" target="_blank"> <img alt="Solha americana" title="Solha americana" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/american-plaice.jpg" /> </a> <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=13" target="_blank">Solha americana </a>

<a href="http://www.greenpeace.org/portugal/lista-vermelha?id=14" target="_blank"> <img alt="Tamboris" title="Tamboris" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/anglerfish.jpg" /> </a> <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=14" target="_blank">Tamboris</a>

<a href="http://www.greenpeace.org/portugal/lista-vermelha?id=15" target="_blank"> <img alt="Tubar&otilde;es" title="Tubar&otilde;es" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/dogfish.jpg" /> </a> <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=15" target="_blank">Tubar&otilde;es</a>

Don't forget to:
 * 1) Have all species with the correct links to the red list, with captions translated and sorted by alphabetic order of the common name

Define location of the supermarket logos
The images are defined in the following html. This should be properly configured once, then just copy/paste. All images should have 50x70px

<img alt="Supermarket 1" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/lidl.png" /></a> <img alt="Supermarket 2" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/soane.png" /></a> <img alt="Supermarket 3" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/mosqueteiros.png" /></a> <img alt="Supermarket 4" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/auchan.png" /></a> <img alt="Supermarket 5" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/jm.png" /></a> <img alt="Supermarket 6" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/carrefour.png" /></a>

Translate navigation criteria names
This criteria names are the same as the main page, so just copy/paste

<ul id="rrNavigationCriteria"> <li><a href="crit1" title="Pol&iacute;tica de compra e venda de peixe sustent&aacute;vel" >Pol&iacute;tica de compra e venda de peixe</a></li> <li><a href="crit2" title="Retirar os produtos pisc&iacute;colas insustent&aacute;veis ou ilegais ">Retirar os produtos insustent&aacute;veis</a></li> <li><a href="crit3" title="Apoiar os produtos pisc&iacute;colas sustent&aacute;veis">Apoiar os produtos sustent&aacute;veis</a></li> <li><a href="crit4" title="Tra&ccedil;abilidade dos produtos pisc&iacute;colas">Tra&ccedil;abilidade dos produtos</a></li> <li><a href="crit5" title="Etiquetagem dos produtos pisc&iacute;colas ">Etiquetagem dos produtos</a></li> <li><a href="crit6" title="Venda de esp&eacute;cies da Lista Vermelha da Greenpeace ">Venda de esp&eacute;cies da Lista Vermelha</a></li> <li><a href="crit7" title="Transpar&ecirc;ncia e informa&ccedil;&atilde;o aos consumidores ">Transpar&ecirc;ncia e informa&ccedil;&atilde;o</a></li> </ul>

Define which species are sold in each supermarket
This is done by editing the which_species.js file

Important: Remove the lines of the species that are sold in the supermarket, ignore the name rrFishPresent


 * 1) rrLogoSuper1 relates to the species if the first supermarket, #rrLogoSuper2 to the second....

In each supermarket the scoring is defined in the line $("#rrScoreCriteria").addClass("rrGreenScore").text("99%");

$(document).ready(function{ /* WHICH SPECIES MODULE NAVIGATION */

function rrClean{ $(".specie").removeClass("rrFishPresent"); $(".rrSupermarketScoring").removeClass("rrSupermarketScoringHighlight"); $("#rrScoreCriteria").removeClass("rrGreenScore").removeClass("rrOrangeScore").removeClass("rrRedScore"); $("#rrScoreCriteria").empty;

};

/* Remove the lines when the specie is sold in the supermarket - IMPORTANT: Only the #rrLogoSuper1 has all the species */

$("#rrLogoSuper1").hover(function{		$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */		$("#rrAlabote").addClass("rrFishPresent");		$("#rrAlaboteGronelandia").addClass("rrFishPresent");		$("#rrAtuns").addClass("rrFishPresent");		$("#rrBacalhau").addClass("rrFishPresent");			$("#rrCamaroes").addClass("rrFishPresent");			$("#rrEspadarte").addClass("rrFishPresent");			$("#rrLinguado").addClass("rrFishPresent");		$("#rrPeixeEspada").addClass("rrFishPresent");				$("#rrPeixesVermelhos").addClass("rrFishPresent");		$("#rrPescadas").addClass("rrFishPresent");		$("#rrRaias").addClass("rrFishPresent");		$("#rrSalmao").addClass("rrFishPresent");		$("#rrSolha").addClass("rrFishPresent");		$("#rrTamboris").addClass("rrFishPresent");		$("#rrTubaroes").addClass("rrFishPresent");		}, function{		rrClean;	});

$("#rrLogoSuper2").hover(function{

$("#rrScoreCriteria").addClass("rrOrangeScore").text("69%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

$("#rrAlabote").addClass("rrFishPresent"); $("#rrAlaboteGronelandia").addClass("rrFishPresent"); $("#rrAtuns").addClass("rrFishPresent"); $("#rrBacalhau").addClass("rrFishPresent");

$("#rrEspadarte").addClass("rrFishPresent");

$("#rrPeixeEspada").addClass("rrFishPresent"); $("#rrPeixesVermelhos").addClass("rrFishPresent");

$("#rrRaias").addClass("rrFishPresent"); $("#rrSalmao").addClass("rrFishPresent");

$("#rrTamboris").addClass("rrFishPresent"); $("#rrTubaroes").addClass("rrFishPresent"); }, function{ rrClean; });

(...)

});

Add the texts for each supermarket
For each of the criteria edit and change the text bellow. And please note that:

99% Creates a Green 99%

99% Creates an Orange 99%

99% Creates a Red 99%

and

Adds a thumb up (to the best supermarket)

Adds a thumb down (to the worst supermarket)

Supermarket 1 99% <p class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.

<p class="rrParentHide"><a href="javascript:void(0);">Hide this text</a>

Why is this criteria important
Each criteria has a text explaining why is it important. Very easy to define:

<p title="Read more..." class="rrExpandable">Why is this criteria important - consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.

<p class="rrParentHide"><a href="javascript:void(0);">Hide this text</a>

Remove class="rrExpandable" and all content inside the div if you just want the lead.

What you can do
Here is where you add specific long term cyberactions for this criteria.

What you can do: To help supermarkets start to remove unsustainable products you can: <ul> <li><a class="selected" href="#tab1">Consummer</a></li> <li><a href="#tab2">Student</a></li> <li><a href="#tab3">Professional</a></li> </ul> As a consummer you can ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. As a student you can ... Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat As a professional buyer you can ... Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. <script type="text/javascript"> $("#usual1 ul").idTabs; <p id="rrHelpNote">It's everybody's responsability to protect the oceans. Thank you for your help.

The code is commented.

What do this percentages mean?
This module is exactly the same in every page. Translate once and copy/paste.