'use strict';

Ox.SlidePanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            animate: 250,
            elements: [],
            selected: ''
        })
        .options(options || {})
        .update({
            selected: function() {
                selectElement(self.options.selected);
            }
        })
        .addClass('OxSlidePanel');

    if (!self.options.selected) {
        self.options.selected = self.options.elements[0].id
    }
    self.elements = self.options.elements.length;
    self.$content = Ox.Element()
        .css(getContentCSS())
        .appendTo(that);
    self.options.elements.forEach(function(element) {
        element
            .css({width: self.options.width + 'px'})
            .appendTo(self.$content);
    });

    function getContentCSS() {
        return {
            left: -getIndexById(self.options.elements, self.options.selected)
                * self.options.width + 'px',
            width: self.options.width + 'px'
        };
    }

    function getElementCSS(index) {
        return {
            left: index * self.options.width + 'px',
            width: self.options.width + 'px'
        };
    }

    function selectElement(id) {
        self.content.animate(getContentCSS(), self.options.animate);
    }

    that.replaceElement = function(idOrIndex, element) {
        var index = Ox.isNumber(idOrIndex) ? idOrIndex
            : Ox.getIndexById(self.options.elements, idOrIndex);
        self.options.elements[index].replaceWith(
            self.options.elements[index] = element.css(getElementCSS())
        );
    };

    return that;

};