var tabs = function (el, pre, next, position) {
    this.$el = $(el);
    this.$pre = $(pre);
    this.$next = $(next);
    this.childrens = this.$el.children()
    if (position) {
        this.postiton = position
    } else {
        this.postiton = []
        for (var i = 0; i < this.childrens.length; i++) {
            this.postiton.push($(this.childrens[i]).outerwidth(true) * i);
        }
    }
    if (this.childrens.length > 0) {
        var ww = $(this.childrens[0]).outerwidth(true);
        this.$el.css("width", this.childrens.length * ww + "px");
    }
};
tabs.prototype = {
    start: function () {
        this.current = 0;
        this.bindpre();
        this.bindnext();
    },
    bindpre: function () {
        var self = this;
        this.$pre.on("click", function (e) {
            e.preventdefault();
            var next = self.current - 1;
            if (next < 0) {
                return;
            }
            self.current = next;
            self.startanimation();
        })
    },
    bindnext: function () {
        var self = this;
        this.$next.on("click", function (e) {
            e.preventdefault();
            var next = self.current + 1;
            console.log(next, next >= self.postiton.length);
            if (next >= self.postiton.length) {
                return;
            }
            self.current = next;
            self.startanimation();
        })
    },
    startanimation: function () {
        var self = this;
        console.log(this.postiton)
        var left = -this.postiton[this.current]
        this.$el.css({
            left: left + 'px'
        })
    }
}

try {
    $(function () {
        var othertab = new tabs('.live_hd .hd_warp', '.live_hd .live_hd_lt', '.live_hd .live_hd_rt');
        othertab.start();
    })
} catch (e) {

}