var slider = new Class({
    Implements: [Events],
    _knobs: [],
    _maxValues: false,
    _knobWidth: 15,
    _containerWidth: 0,
    _steps: 10,
    _stepWidth: 0,
    _format: {
        group: " "
    },
    containerId: false,
    initialize: function (container, knobs, logVals) {
        this._containerWidth = $(container).getSize().x;
        this._stepWidth = Math.floor(this._containerWidth / this._steps);
        knobs.each(function (knob, i) {
            knob = $(knob);

            var clone = knob.clone();
            clone
                .setStyles({ "opacity": 0, "visibility": "visible", "z-index": 999, "cursor": "pointer" })
                .setStyles(knob.measure(function () {
                    return this.getPosition($(container));
                }))
                .inject(knob.getParent());
            this._knobs.push(
                { id: knob.get("id"),
                    limits: { x: [0, 0], y: [0, 0] },
                    drag: new Drag.Move(clone,
                        { "modifiers": { 'x': 'left' },
                            limit: { x: [0, 0], y: [0, 0] },
                            "onComplete": function (el, e) { this._knobMoved(knob, el); } .bind(this),
                            "onDrag": function (el, e) { this._onDrag(knob, el, e, logVals[i]); } .bind(this)
                        }),
                    clone: clone,
                    log: logVals[i]
                }
            );

            this._knobMoved(knob, clone);
        }, this);

        this._attach();
    },
    _onDrag: function (knob, clone, ev, log) {
        // chekc the clone pos = 

        var left = clone.getStyle("left").toInt();
        var curStep = Math.round(left / this._stepWidth);
        knob.addClass('dragging').setStyle("left", curStep * this._stepWidth);
        var percent = knob.getStyle("left").toInt() / (this._containerWidth - this._knobWidth);
        var val = this._maxValues.min + ((this._maxValues.max - this._maxValues.min) / (this._steps - 1) * curStep).toInt();

        log.set("text", val.format(this._format));
    },
    setMaxValues: function (maxValues) {
        maxValues.min = (Math.floor(maxValues.min / 100)) * 100;
        maxValues.max = (Math.floor(maxValues.max / 100) + 1) * 100;
        this._maxValues = maxValues;
        this._knobs.each(function (k, i) {
            var stepPos = Math.ceil(i / (this._knobs.length - 1) * (this._steps - 1));
            k.clone.setStyle("left", stepPos * this._stepWidth);
            this._knobMoved($(k.id), k.clone);
        }, this);

    },
    _attach: function () {
        this._knobs.each(function (k) { k.drag.attach(); }, this);
    },
    _knobMoved: function (knob, clone) {
        // chekc the clone pos = 
        var left = clone.getStyle("left").toInt();
        var curStep = Math.round(left / this._stepWidth);
        knob.removeClass('dragging').setStyle("left", curStep * this._stepWidth);
        clone.setStyle("left", curStep * this._stepWidth);

        var eventsArray = [];
        this._knobs.each(function (k, i) {
            if (i != 0)
                k.drag.options.limit.x[0] = $(this._knobs[i - 1].id).getStyle("left").toInt() + this._knobWidth;
            else
                k.drag.options.limit.x[0] = 0;

            if (i < this._knobs.length - 1)
                k.drag.options.limit.x[1] = $(this._knobs[i + 1].id).getStyle("left").toInt() - this._knobWidth;
            else
                k.drag.options.limit.x[1] = this._containerWidth - this._knobWidth;

            var finalX = $(k.id).getStyle("left").toInt();
            var percent = finalX / (this._containerWidth - this._knobWidth);
            var step = Math.round(finalX / this._stepWidth);
            var val = this._maxValues.min + ((this._maxValues.max - this._maxValues.min) / (this._steps - 1) * step).toInt();


            eventsArray.push({ "x": finalX, "percent": finalX / (this._containerWidth - this._knobWidth), val: val });
            k.log.set("text", val.format(this._format));
        }, this);
        this.fireEvent("valuesChanged", [eventsArray])
    }
});