// Fires when the DOM has loaded
window.addEvent('domready', function() {

    // Feature image paths
    var path = 'images/featurebox/'
    var images = [
	    path + '0.jpg',
        path + '1.jpg',
        path + '2.jpg',
        path + '3.jpg',
        path + '4.jpg',
        path + '5.jpg',
        path + '6.jpg'
    ];

    // Feature image titles
    var altTags = [
        'Image 1 - Title',
        'Image 2 - Title',
        'Image 3 - Title',
        'Image 4 - Title',
        'Image 5 - Title',
        'Image 6 - Title',
        'Image 7 - Title'
    ];

    // Feature image, image container and feature title links
    var pgrmLinks = [
        '/about.html',
        '/research/delta.html',
        '/research/klamath.html',
        '/research/sierra.html',
        '/research/cosumnes.html',
        '/research/restoration.html',
        '/research/machro.html'
    ];

    // Feature text (for apostrophes, use the escape character. EX: California\'s)
    var FeatureTxt = [
        'California features some of the most intensely managed watersheds in the world.  Its rivers and streams nourish California\’s economy and provide drinking water to most of its citizens.  Scientists, researchers and students at the Center for Watershed Sciences are tackling watershed restoration and management problems across California.<span class="more"><a href="/about.html"><br />[ More ]</a></span>',
        'Our approach to California water is not only academic.  Soon after a center publication outlined threats to the Delta, policymakers were asking center scientists for information and analysis that would help them identify and evaluate solutions.<span class="more"><a href="/research/delta.html">[ More ]</a></span>',
        'The center provides scientific support for agencies involved in management of the Klamath basin tributaries, including the once productive Shasta River.<span class="more"><a href="/research/klamath.html">[ More ]</a></span>',
        'Most of California\'s water and much of its energy supply originates with the rain and snow that fall in the Sierra Nevada.  Center scientists are studying ways for people, plants and animals to better share the resources of this critical and sensitive upper watershed.<span class="more"><a href="/research/sierra.html">[ More ]</a></span>',
        'The Cosumnes is the last river without major dams on the western slope of the Sierra Nevada, providing one of the few systems in which the effects of seasonal flooding can be studied.<span class="more"><a href="/research/cosumnes.html">[ More ]</a></span>',
        'River restoration is a young science, with much still to be learned about how water, land forms, plants and animals can be managed to produce sustainable environments for threatened species.<span class="more"><a href="/research/restoration.html">[ More ]</a></span>',
        'Computer models utilizing large data sets provide new insights about how complex elements of water systems interact as well as a standardized and transparent means of comparing management alternatives.<span class="more"><a href="/research/machro.html">[ More ]</a></span>'
    ];

    // Feature titles (for apostrophes, use the escape character. EX: California\'s)
    var FeatureTitles = [
        '<a href=\'' + pgrmLinks[0] + '\'>Center for Watershed Sciences</a>',
        '<a href=\'' + pgrmLinks[1] + '\'>The Delta</a>',
        '<a href=\'' + pgrmLinks[2] + '\'>Klamath River System</a>',
        '<a href=\'' + pgrmLinks[3] + '\'>Sierra Nevada</a>',
        '<a href=\'' + pgrmLinks[4] + '\'>Cosumnes River Watershed</a>',
        '<a href=\'' + pgrmLinks[5] + '\'>Watershed Restoration</a>',
        '<a href=\'' + pgrmLinks[6] + '\'>Modeling and Analysis</a>'
    ];

    // Replace noscript links
    var myPrograms = $$('.program')
    myPrograms.each(function(item, index) {
        item.setStyle('cursor', 'pointer');
        item.addEvent('click', function() {
            document.location = pgrmLinks[index];
        });
    });

    // Load feature images
    var myImages = new Asset.images(images, {
        // Add thumbnail events after all images are loaded.
        onComplete: function() {
            $('p0').addEvents({ 'mouseover': function() { show(0); } });
            $('p1').addEvents({ 'mouseover': function() { show(1); } });
            $('p2').addEvents({ 'mouseover': function() { show(2); } });
            $('p3').addEvents({ 'mouseover': function() { show(3); } });
            $('p4').addEvents({ 'mouseover': function() { show(4); } });
            $('p5').addEvents({ 'mouseover': function() { show(5); } });
            $('p6').addEvents({ 'mouseover': function() { show(6); } });
        }
    });

    // Handles displaying/hiding thumbnails and images
    function show(which) {
        // Array of img elements who's class = "thumb"
        var myThumbs = $$('#programs_bar img.thumb');
        myThumbs.each(function(item, index) {
            if (index == which) {

                var image_bg = $('feature_img_bg');
                var image = $('feature_img');
                var title = $('feature_title');
                var link = $('feature_link');
                var blurb = $('feature_blurb');

                Tween(item, 'opacity', 0, '400');

                if (image.getStyle('opacity') > 0) {

                    // Instantainously set image background and title
                    image_bg.setStyle('background', 'url(' + path + which + '.jpg) no-repeat');
                    image_bg.set('title', altTags[which]);

                    // Update the container link
                    image_bg.addEvents({ 'click': function() { document.location = pgrmLinks[which]; } });
                    
                    // Tween to new parameters
                    Tween(image, 'opacity', 0, '300');
                    Tween(image_bg, 'width', myImages[which].width, '400');

                    // Set new text
                    blurb.set('html', FeatureTxt[which]);
                    title.set('html', FeatureTitles[which]);

                }
                else if (image.getStyle('opacity') < 1) {

                    // Instaintainously set image src and title
                    image.set('src', path + which + '.jpg');
                    image.set('title', altTags[which]);

                    // Tween to new parameters
                    Tween(image, 'opacity', 1, '300');
                    Tween(image_bg, 'width', myImages[which].width, '400');

                    // Set new text
                    blurb.set('html', FeatureTxt[which]);
                    title.set('html', FeatureTitles[which]);
                }
            }
            else {
                // Hide all other thumbnails
                Tween(item, 'opacity', 1, '400');
            }
        });
    }

    function Tween(which, property, value, speed) {
        which.set('tween', { duration: speed, link: 'cancel' });
        which.tween(property, value);
    }
});