﻿function initPage(startIndex, count) {
    var list = $$('#infographic-slider .infographic-list')[0];
    var images = list.select('img');
    var loaded = 0;
    images.each(function(img) {
        if (img.complete) {
            loaded++;
        }
        else {
            img.observe('load', function() {
                loaded++;
                if (loaded == images.length) {
                    initSlider(startIndex);
                }
            });
        }
    });
    if (loaded == images.length) {
        initSlider(startIndex);
    }
    
    function initSlider(startIndex) {
        var navSpan = $('slider-nav').select('span')[0];
        $('static-infographic').hide();
        $('slider-nav').hide().removeClassName('hidden').appear();
        $('infographic-slider').setStyle({display: 'block'});

        var og = {
            title: $$('meta[property=og:title]')[0],
            image: $$('meta[property=og:image]')[0],
            url: $$('meta[property=og:url]')[0]
        };

        var sliderOpts = {
            startIndex: startIndex,
            queueCommands: false,
            afterFinish: function(index) {

                slider.slides.each(function(slide) {
                    slide.removeClassName('selected');
                });
                slider.slides[index].addClassName('selected');

                navSpan.update(index + ' of ' + count);
                var $cs = $(slider.slides[index]);

                og.title.writeAttribute('content', $cs.select('img')[0].readAttribute('alt'));
                og.image.writeAttribute('content', $cs.select('img')[0].readAttribute('src'));
                og.url.writeAttribute('content', $cs.select('a.direct-link')[0].readAttribute('href'));
            }
        };
        var slider = new Slider('infographic-slider', sliderOpts);
        slider.slides[slider.currentSlide].addClassName('selected');
        $('slider-nav').observe('click', function(e) {
            var el = e.element();
            if (el.hasClassName('next')) {
                slider.next();
            }
            if (el.hasClassName('prev')) {
                slider.previous();
            }

        });
        //console.log(slider.slides);
    }
}

