﻿
var Gallery = function(containerId, onMegaClick) {
    var thumbnails = $('#' + containerId + ' .thumbnail');
    var normalImage = $('#' + containerId + ' .normalImage');

    this.images = [];
    this.onMegaClick = onMegaClick;
    this.container = $('#' + containerId);
    this.normalImageElement = normalImage;

    var instance = this;
    thumbnails.each(function(idx) {
        instance.images.push({
            index: idx,
            element: $(this),
            thumbnail: $(this).css('background-image').replace(/url\((.+)\)/, '$1'),
            normal: $(this).attr('normal'),
            mega: $(this).attr('mega')
        });
        $(this).click(function(ev) { instance.select(idx); });
    });

    this.select(0);
}

Gallery.prototype.select = function(idx) {
    if (this.images.length === 0) return;

    idx = (this.images.length + idx) % this.images.length;
    var img = this.images[idx];

    jQuery.each(this.images, function() {
        this.element.removeClass('selected');
    })
    img.element.addClass('selected');

    this.normalImageElement.attr('src', img.normal);

    if (img.mega && this.onMegaClick) {
        var instance = this;
        this.normalImageElement
            .unbind('click')
            .click(function(ev) { instance.onMegaClick.call(instance, img); })
            .addClass('hasMega');
    } else {
        this.normalImageElement
            .unbind('click')
            .removeClass('hasMega');
    }
};
