/*global $, $$, Element, Event, Fx
*/
var images = [],
    currentIndex = 0,
    ssTimer;
$$('.thumbnail a').each(function (el) {
    images.push({
        'src': el.getAttribute('href') + '.jpg',
        'title': el.get('text').trim()
    });
});
function loadImage(id) {
    var div;
    if (id < images.length && !$('slideshow-image-' + id + '')) {
        div = new Element('div', {
            'id': 'slideshow-image-' + id + '',
            'styles': {
                'opacity': '0'
            }
        }).adopt(new Element('img', {
            'src': images[id].src,
            'alt': images[id].title,
            'events': {
                'load': function () {
                    this.set({
                        'class': 'loaded'
                    });
                }
            }
        })).inject($('slideshow-image-container'));
    }
}
function loadSlide() {
    var divs = $$('#slideshow-image-container div');
    loadImage(currentIndex);
    clearTimeout(ssTimer);
    if (!$('slideshow-image-' + currentIndex + '').getElement('img').hasClass('loaded')) {
        ssTimer = setTimeout(function () {
            loadSlide();
        }, 1000);
        $('slideshow-error').set({
            'text': 'Loading image ' + (currentIndex + 1) + '... '
        });
        $('slideshow-error').adopt(new Element('a', {
            'href': '#',
            'text': 'Skip',
            'events': {
                'click': function (e) {
                    e = new Event(e).stop();
                    currentIndex += 1;
                    loadSlide();
                }
            }
        }));
        return;
    }
    $('slideshow-error').empty();
    $('slideshow-status').set('text', 'Image ' + (currentIndex + 1) + '/' + images.length + ': ');
    $('slideshow-status').adopt(new Element('a', {
        'href': images[currentIndex].src,
        'text': images[currentIndex].title
    }));
    divs.fade(0);
    $('slideshow-image-' + currentIndex + '').set({
        'opacity': '0'
    }).fade(1).inject($('slideshow-image-container'));
    currentIndex += 1;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    setTimeout(function () {
        [0, 1, 2].each(function (n) {
            loadImage(currentIndex + n);
        });
    }, 1000);
    ssTimer = setTimeout(function () {
        loadSlide();
    }, 5000);
}
function exitSlideShow() {
    clearTimeout(ssTimer);
    $('slideshow-link').addEvent('click', function (e) {
        e = new Event(e).stop();
        $('slideshow-link').removeEvents('click');
        startSlideshow();
    });
    $('slideshow-link').set('text', 'Start Slideshow');
    $$('#slideshow-status, #slideshow-error').destroy();
    $('gallery').set({
        'styles': {
            'display': ''
        }
    });
    $('gallery').fade(1);
    $('slideshow-image-container').fade(0);
    setTimeout(function () {
        $('gallery').set({
            'styles': {
                'position': '',
                'width': ''
            }
        });
        $('slideshow-image-container').empty().set({
            'styles': {
                'height': '',
                'width': ''
            }
        });
    }, 500);
}

function startSlideshow() {
    var scr = new Fx.Scroll(window);
    scr.toElement($('content'));
    [0, 1, 2].each(function (n) {
        loadImage(n);
    });
    $('page-commands').adopt(
        new Element('li', {
            'text': 'Loading Images...',
            'id': 'slideshow-status'
        }),
        new Element('li', {
            'id': 'slideshow-error'
        })
    );
    $('slideshow-link').set('text', 'Exit Slideshow');
    $('slideshow-image-container').set({
        'styles': {
            'height': '480px'
        }
    }).fade(1);
    $('gallery').set({
        'styles': {
            'position': 'absolute',
            'width': '78%'
        }
    }).fade(0);
    setTimeout(function () {
        $('gallery').set({
            'styles': {
                'display': 'none'
            }
        });
    }, 500);
    $('slideshow-link').addEvent('click', function (e) {
        e = new Event(e).stop();
        $('slideshow-link').removeEvents('click');
        exitSlideShow();
    });
    setTimeout(function () {
        loadSlide();
    }, 2000);

}

(function () {
    var scr;
    if (document.location.hash) {
        scr = new Fx.Scroll(window);
        scr.toElement($(document.location.hash.replace('#', '')));
        document.location.hash = '';
    }

    $('slideshow-link').addEvent('click', function (e) {
        e = new Event(e).stop();
        $('slideshow-link').removeEvents('click');

        startSlideshow();
    });
})();