165    var slideshowData = [

   315     function closeAnnotation(e) {

   166         {

   316         $(".chip").removeClass("current");

   167             url: "http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg",

   317         $(".chapters-bar").removeClass("annotation-onscreen");

   168             title: "Waves at La Jolla",

   318         $(".main-video .annotation").remove();

   169             description: "The sea is the connected body of salt water that covers 70 percent of the Earth's surface. The sea is important in moderating the Earth's climate, in providing food and oxygen, in its enormous diversity of life, and for navigation. The study of the sea is called oceanography. The sea has been travelled and explored since ancient times, but its scientific study dates broadly from the voyages of Captain James Cook to explore the Pacific Ocean between 1768 and 1779.",

   319         if (!!e) {

   170             credit: "CC0: Jon Sullivan"

   320             myMedia.play();

   171         }, {

   321         }

   172             url: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg/1280px-Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg",

   322     }

   173             title: "冨嶽三十六景・神奈川沖浪裏",

   174             description: "La Grande Vague de Kanagawa (神奈川沖浪裏, Kanagawa-oki nami-ura, littéralement Sous la vague au large de Kanagawa), plus connue sous le nom de La Vague, est une célèbre estampe japonaise du peintre japonais spécialiste de l'ukiyo-e, Hokusai, publiée en 18302 ou en 1831 pendant l'époque d'Edo.\nCette estampe est l'œuvre la plus connue de Hokusai et la première de sa fameuse série « Trente-six vues du mont Fuji »Note 2, dans laquelle l'utilisation du bleu de Prusse renouvelait le langage de l'estampe japonaise. La composition de La Vague, synthèse de l'estampe japonaise traditionnelle et de la « perspective » occidentale, lui valut un succès immédiat au Japon, puis en Europe, où elle fut une des sources d'inspiration des Impressionnistes.",

   175             credit: "葛飾北斎"

   176         }, {

   177             url: "http://upload.wikimedia.org/wikipedia/commons/7/76/Blue_Linckia_Starfish.JPG",

   178             title: "Blue Starfish (Linckia laevigata)",

   179             description: "Linckia laevigata (sometimes called the blue Linckia or Blue Star) is a species of sea star (commonly known as a starfish) in the shallow waters of tropical Indo-Pacific (a biogeographic region of the Earth's seas, comprising the tropical waters of the Indian Ocean, the western and central Pacific Ocean, and the seas connecting the two in the general area of Indonesia). The variation (Polymorphism, in this case, a color morph) most commonly found is pure, dark or light blue, although observers find the aqua, purple or orange variation throughout the ocean.  These sea stars may grow up to 30 cm in diameter, with rounded tips at each of the arms — some individuals may bear lighter or darker spots along each of their arms. Individual specimens are typically firm in texture, possessing the slightly tubular, elongated arms common to most of other members of the family Ophidiasteridae, and usually possessing short, yellowish tube feet. An inhabitant of coral reefs and sea grass beds, this species is relatively common and is typically found in sparse density throughout its range. Blue Stars live subtidally, or sometimes intertidally, on fine (sand) or hard substrata and move relatively slow (mean locomoation rate of 8.1 cm/min).",

   180             credit: "CC-SA: Richard Ling"

   181         }, {

   182             url: "http://upload.wikimedia.org/wikipedia/commons/0/06/Corrientes-oceanicas.gif",

   183             title: "Ocean currents",

   184             description: "An ocean current is a continuous, directed movement of ocean water generated by the forces acting upon this mean flow, such as breaking waves, wind, Coriolis effect, cabbeling, temperature and salinity differences and tides caused by the gravitational pull of the Moon and the Sun. Depth contours, shoreline configurations and interaction with other currents influence a current's direction and strength.\nA deep current is any ocean current at a depth of greater than 100m. Ocean currents can flow for great distances, and together they create the great flow of the global conveyor belt which plays a dominant part in determining the climate of many of the Earth’s regions. Perhaps the most striking example is the Gulf Stream, which makes northwest Europe much more temperate than any other region at the same latitude. Another example is Lima, Peru, where the climate is cooler (sub-tropical) than the tropical latitudes in which the area is located, due to the effect of the Humboldt Current.",

   185             credit: "Public domain"

   186         }

   187    ];

   188    

   189    function slideshow(data) {

   190        var currentslide = 0, slideInterval, playing = false, loaded = false;

   191        

   192        function checkloaded() {

   193            loaded = data.reduce(function(mem, slide) {

   194                return (mem && !!slide.image && !!slide.image.width);

   195            }, true);

   196            if (loaded) {

   197                showCurrentImage();

   198            }

   199        }

   200        

   201        data.forEach(function(slide) {

   202            slide.image = new Image();

   203            slide.image.onload = checkloaded;

   204            slide.image.src = slide.url;

   205        });

   206               

   207        function resizeImage() {

   208            var imgel = $(".slideshow-image");

   209            imgel.css("margin-top","");

   210            var w = imgel.width(),

   211                h = imgel.height();

   212            $(".slideshow-center").css("height","");

   213            $(".slideshow-description").css("margin-left",w);

   214            var h2 = $(".slideshow-center").height();

   215            if (h < h2) {

   216                imgel.css("margin-top",Math.floor((h2-h)/2)+"px");

   217            }

   218        }

   219        

   220        function showCurrentImage() {

   221            var slide = data[currentslide];

   222            $(".slideshow-image").attr({

   223                src: slide.image.src,

   224                title: slide.title,

   225                alt: slide.title

   226            });

   227            $(".slideshow-credits").text(slide.credit);

   228            $(".slideshow-title").text(slide.title);

   229            $(".slideshow-description").html(

   230                slide.description.split(/\n/gm).map(function(l) {

   231                    return '<p>' + _.escape(l) + '</p>';

   232                }).join("")

   233            );

   234            resizeImage();

   235        }

   236        

   237        $(window).on("resize", resizeImage);

   238        

   239        function nextImage() {

   240            currentslide = (currentslide + 1) % data.length;

   241            showCurrentImage();

   242        }

   243        

   244        function togglePlay() {

   245            playing = !playing;

   246            clearInterval(slideInterval);

   247            if (playing) {

   248                slideInterval = setInterval(nextImage,3000);

   249                $(".slideshow-play-pause").addClass("pause");

   250            } else {

   251                $(".slideshow-play-pause").removeClass("pause");

   252            }

   253        }

   254        

   255        $(".slideshow-next").click(nextImage);

   256        $(".slideshow-previous").click(function() {

   257            currentslide = (currentslide ? currentslide : data.length) - 1;

   258            showCurrentImage();

   259        });

   260        $(".slideshow-play-pause").click(togglePlay);

   261        

   262    }

   263    

   264    slideshow(slideshowData);

   265    

   266    $(".slideshow").click(function() {

   267        $(".slideshow-annotation").show();

   268    });

   269    

   270    $(".text").click(function() {

   271        $(".text-annotation").show();

   272    });

   273    

   274    $(".audio").click(function() {

   275        $(".audio-annotation").show();

   276    });

   277    

   278    $(".close-annotation").click(function() {

   279        $(".annotation").hide();

   280    })