var arrImageUrls = ['https://yousupova.com/hwp/wp-content/uploads/2020/10/S4A0608-2-1.jpg', 'https://yousupova.com/hwp/wp-content/uploads/2020/10/S4A0637-2-1_about.jpg', 'https://yousupova.com/hwp/wp-content/uploads/2020/10/S4A1473-2.jpg', 'https://yousupova.com/hwp/wp-content/uploads/2020/10/S4A2158-2-1_about.jpg'];
var SliderFrame = /** @class */ (function () {
    function SliderFrame() {
    }
    SliderFrame.prototype.create = function () {
        this.image = new Image(this.with, this.height);
        this.image.style.position = 'absolute';
        this.image.style.left = this.xPos + "px";
        this.image.style.top = this.yPos + "px";
        this.image.src = this.imageUrl;
        this.image.style.transition = 'all 0.5s ease-in-out';
    };
    return SliderFrame;
}());
var Slider3D = /** @class */ (function () {
    function Slider3D(conf) {
        this.framesScale = 2;
        this.sliderConfig = conf;
        this.init();
        this.htmlCreator();
        this.createFrames();
        this.createMovingButtons();
        this.setPositions();
        this.setActions();
    }
    Slider3D.prototype.init = function () {
        this.arrFrames = new Array();
        this.arrXPositions = new Array();
        this.mainFrameIndex = 0;
    };
    Slider3D.prototype.htmlCreator = function () {
        this.mainDiv = document.createElement('div');
        this.mainDiv.style.overflow = 'hidden';
        this.mainDiv.style.border = 'solid 2px red';
        this.sliderConfig.whereAppend.appendChild(this.mainDiv);
    };
    Slider3D.prototype.setPositions = function () {
        this.setElementPosition(this.mainDiv, this.sliderConfig.xPos, this.sliderConfig.yPos, this.sliderConfig.width, this.sliderConfig.height);
        this.setElementPosition(this.btMoveSliderLeft, 0, this.sliderConfig.height - 50, this.sliderConfig.height * 0.3, this.sliderConfig.height * 0.3);
        this.setElementPosition(this.btMoveSliderRight, this.sliderConfig.width - this.sliderConfig.height * 0.3, this.sliderConfig.height - 50, this.sliderConfig.height * 0.3, this.sliderConfig.height * 0.3);
    };
    Slider3D.prototype.createMovingButtons = function () {
        this.btMoveSliderRight = document.createElement('div');
        this.btMoveSliderRight.innerHTML = ">";
        this.btMoveSliderRight.style.background = '#F00';
        this.btMoveSliderRight.style.zIndex = '30';
        this.btMoveSliderLeft = document.createElement('div');
        this.btMoveSliderLeft.innerHTML = "<";
        this.btMoveSliderLeft.style.background = '#F00';
        this.btMoveSliderLeft.style.zIndex = '30';
        this.mainDiv.appendChild(this.btMoveSliderRight);
        this.mainDiv.appendChild(this.btMoveSliderLeft);
    };
    Slider3D.prototype.createFrames = function () {
        var _this = this;
        var defXpos = 0;
        this.sliderConfig.arrImagesUrls.forEach(function (imgUrl, i) {
            var _frame = new SliderFrame();
            _frame.xPos = defXpos;
            _frame.yPos = -(_this.framesScale - 1) * 0.5 * _this.sliderConfig.height;
            _frame.with = _this.sliderConfig.width * _this.framesScale;
            _frame.height = _this.sliderConfig.height * _this.framesScale;
            _frame.imageUrl = imgUrl;
            _frame.create();
            _this.mainDiv.appendChild(_frame.image);
            _this.arrFrames.push(_frame);
            defXpos += _this.sliderConfig.width;
        });
        this.setMainFrameScale();
    };
    Slider3D.prototype.setActions = function () {
        var _this = this;
        this.btMoveSliderRight.onmousedown = function () { return _this.moveFramesToRight(); };
        this.btMoveSliderLeft.onmousedown = function () { return _this.moveFramesToLeft(); };
    };
    Slider3D.prototype.moveFramesToLeft = function () {
        this.mainFrameIndex += 1;
        this.arrFrames[this.mainFrameIndex] ? this.movingFrames(-1) : this.mainFrameIndex += -1;
    };
    Slider3D.prototype.moveFramesToRight = function () {
        this.mainFrameIndex += -1;
        this.arrFrames[this.mainFrameIndex] ? this.movingFrames(1) : this.mainFrameIndex += 1;
    };
    Slider3D.prototype.movingFrames = function (n) {
        var _this = this;
        this.arrFrames[this.mainFrameIndex - 1] ? this.arrFrames[this.mainFrameIndex - 1].image.style.left = -this.sliderConfig.width * this.framesScale + "px" : false;
        this.arrFrames[this.mainFrameIndex + 1] ? this.arrFrames[this.mainFrameIndex + 1].image.style.left = this.sliderConfig.width + "px" : false;
        this.arrFrames.forEach(function (fr, i) {
            fr.image.style.top = -(_this.framesScale - 1) * 0.5 * _this.sliderConfig.height + "px";
            fr.image.width = _this.sliderConfig.width * _this.framesScale;
            fr.image.height = _this.sliderConfig.height * _this.framesScale;
        });
        this.setMainFrameScale();
    };
    Slider3D.prototype.setMainFrameScale = function () {
        var fr = this.arrFrames[this.mainFrameIndex].image;
        fr.width = this.sliderConfig.width;
        fr.height = this.sliderConfig.height;
        fr.style.left = 0 + "px";
        fr.style.top = 0 + "px";
    };
    Slider3D.prototype.setElementPosition = function (el, xPos, yPos, width, height) {
        el.style.position = 'absolute';
        el.style.top = yPos + "px";
        el.style.left = xPos + "px";
        el.style.width = width + "px";
        el.style.height = height + "px";
    };
    return Slider3D;
}());
var sliderConf = {
    arrImagesUrls: arrImageUrls,
    whereAppend: document.body,
    xPos: 0,
    yPos: 0,
    width: 500,
    height: 350
};
var slider = new Slider3D(sliderConf);