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

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

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

    MXA.Website.Kaldenbroeck.ImageTemplate.initializeBase(this, [element]);
    this.addCssClass('ImageTemplate');
    this._datasource = null;

    this._image = document.createElement('img');
    this._image.className = 'itImage';
    element.appendChild(this._image);
    this._activeIndex = 0;
    this._isAnimated = false;



}

MXA.Website.Kaldenbroeck.ImageTemplate.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.ImageTemplate.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._image, 'load', Function.createDelegate(_this, _this._imageLoaded));

    },


    show: function () {
    },

    _imageLoaded: function () {
        $app._lightbox.show();
        var _this = this;
        $app._lightbox.setSize(this._isAnimated, function () {
            _this._isAnimated = true;
            $(_this._image).animate({ opacity: 1 });

        });
    },

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

    get_isFirstImage: function () {
        return this._activeIndex <= 0;
    },

    get_isLastImage: function () {
        return (this._activeIndex >= this._datasource.images.image.length - 1)
    },

    _onPrevious: function (evt) {
        if (this.get_isFirstImage() == true) {
            this._activeIndex = this._datasource.images.image.length - 1;
        }
        else {
            this._activeIndex--;
        }
        this.databind();
        evt.stopPropagation();
        evt.preventDefault();
        return false;
    },

    _onNext: function (evt) {
        if (this.get_isLastImage() == true) {
            this._activeIndex = 0;
        }
        else {
            this._activeIndex++;
        }
        this.databind();
        evt.stopPropagation();
        evt.preventDefault();
        return false;
    },

    set_datasource: function (value) {
        this._datasource = value;
    },

    databind: function () {
        var _this = this;
        $(this._image).animate({ opacity: 0 }, 100, function () {
            _this._image.src = _this._datasource.images.image[_this._activeIndex].image;
        });
    }
}



MXA.Website.Kaldenbroeck.ImageTemplate.registerClass('MXA.Website.Kaldenbroeck.ImageTemplate', MXA.Website.Kaldenbroeck.LightboxTemplate);