/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MXA.Website.Kaldenbroeck");

MXA.Website.Kaldenbroeck.GalleryTemplate = function (element) {

    MXA.Website.Kaldenbroeck.GalleryTemplate.initializeBase(this, [element]);
    this.addCssClass('GalleryTemplate');
    this._imageContainer = document.createElement('div');
    this._imageContainer.className = 'gltImageContainer';
    element.appendChild(this._imageContainer);
    this._imageIndex = 0;
    this._fullImageContainer = document.createElement('div');
    this._fullImageContainer.className = 'gltFullImage';
    this._fullImageContainer.innerHTML = 'asdasdasdasdad';
    this._images = [];
}

MXA.Website.Kaldenbroeck.GalleryTemplate.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.GalleryTemplate.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._imageContainer, 'click', Function.createDelegate(_this, _this._onThumbClick));

    },

    dispose: function () {
        MXA.Website.Kaldenbroeck.GalleryTemplate.callBaseMethod(this, 'dispose');
    },

    clear: function () {
        this._imageContainer.innerHTML = '';
    },

    showImage: function (index) {
        var template = $app._lightbox.setTemplate(MXA.Website.Kaldenbroeck.ImageTemplate, 'Image');
        template.set_datasource(this._datasource);
        template._activeIndex = index;
        template.databind();
        //$app._lightbox.show();
        //$app._lightbox.setSize(this._imageContainer.clientWidth + 83, this._imageContainer.clientHeight + 278);

    },

    setSize: function () {
        if (this._imageContainer.clientWidth > 0) {
            var width = ((this._imageContainer.clientWidth - (4 * 14)) / 4);
            for (var i in this._images) {
                var image = this._images[i];
                image.style.width = width + 'px';
                image.style.height = width + 'px';
            }

            //$app._lightbox.setSize(this._imageContainer.clientWidth + 83, this._imageContainer.clientHeight + 278);
        }
    },

    _onThumbClick: function (evt) {

        var e = evt.target;

        while (e != null && e._datasource == null) {
            e = e.parentNode;
        }

        if (e != null) {
            this.showImage(parseInt(e.id));
        }

    },

    databind: function () {
        this._images = [];
        MXA.Website.Kaldenbroeck.GalleryTemplate.callBaseMethod(this, 'databind');
        this._imageContainer.innerHTML = '';
        var source = this._datasource;

        for (var i in source.images.image) {
            var item = source.images.image[i];
            var image = document.createElement('img');
            image.id = i;
            image.className = 'gltItem';
            image.src = item.thumb;
            image._datasource = item;
            this._imageContainer.appendChild(image);
            this._images.push(image);
        }

        this.setSize();
    },

    deactivate: function (callback) {

        var index = 0;
        var maxDelay = 0;

        $(this._images).stop(true);

        var index = 0;

        for (var i in this._images) {
            var image = this._images[i];
            if ($(image).css('opacity') > 0) {
                index++;
            }
            else {
                break;
            }
        }

        for (var i = 0; i < index; i++) {
            var image = this._images[i];
            var j = index - (i + 1);
            var delay = (j * 100);
            if (i == 0) {
                $(image).delay(delay).animate({ opacity: 0 }, 150, callback);
            }
            else {
                $(image).delay(delay).animate({ opacity: 0 }, 150);
            }
        }

    },

    activate: function (callback) {
        $(this._element).css({ opacity: 1 });
        $(this._images).stop().css({ opacity: 0 });
        for (var i in this._images) {
            var image = this._images[i];
            if ((this._images.length - 1) == i) {
                $(image).delay(150 * i).animate({ opacity: 1 }, 300, callback);
            }
            else {
                $(image).delay(150 * i).animate({ opacity: 1 }, 300);
            }

        }

    }
}



MXA.Website.Kaldenbroeck.GalleryTemplate.registerClass('MXA.Website.Kaldenbroeck.GalleryTemplate', MXA.Website.Kaldenbroeck.Template);