// ----- start component -------

function Slider(slider,min,max,resulation) {
    this.slider =slider;
    this.track = slider.find('.track');
    this.thumb = slider.find('.thumb');
    this.document = $(document);

    this.min = min;
    this.max = max;
    this.resolution = resulation;
    this.position = 0;
    this.dx = 0;

}

Slider.prototype.init = function() {
    this.slider.on('mousedown.slider',$.proxy(this.onMouseDown, this));
    var sliderInterface = {
        getValue: this.getValue,
        setValue: this.setValue
    };
    $('.slider').data('interface', sliderInterface);


};

Slider.prototype.onMouseDown = function(e)
{

    if(e.target === this.thumb[0]) { //thumb clicked?
        this.dx = e.pageX - this.thumb.offset().left;

        this.slider.addClass('active');
        this.document.on('mousemove.slider', $.proxy(this.onMouseMove, this));
        this.document.one('mouseup.slider', $.proxy(this.onMouseUp, this));
    }
    else{
        this.position = (e.pageX - this.slider.offset().left - this.dx);
        this.thumb.css('left', this.position);
    }


    //track clicked? position thumb


    e.preventDefault();
}

Slider.prototype.onMouseUp = function(e)
{
    //$document.off('mousemove', onMouseMove);
    this.document.off('mousemove.slider', $.proxy(this.onMouseMove, this));
    this.slider.removeClass('active');
    //$document.off('mouseup');
    e.preventDefault();

    console.log(this.getValue());
}

Slider.prototype.onMouseMove = function(e)
{

    this.position = (e.pageX - this.slider.offset().left - this.dx);

    this.position = Math.max(0, this.position);
    this.position = Math.min(this.position, this.track.width() - this.thumb.width());

    this.thumb.css('left', this.position);
}



Slider.prototype.getValue = function()
{

    return this.positionToValue(this.position);


};


Slider.prototype.setValue = function(value)
{


    this.position = this.valueToPosition(value);



    this.thumb.css('left', this.position);
};


Slider.prototype.positionToValue = function(pos)
{
    var range = this.getRange();

        return pos/((this.track.width() - this.thumb.width()) / range) + this.min;
    /*else
        return pos/((this.track.width() - this.thumb.width()) / range)  ;
    */
};


Slider.prototype.valueToPosition = function (val) {

    var range = this.getRange();

    var pos = (this.track.width() - this.thumb.width()) * (val/range);

    pos = Math.max(0, pos);
    pos = Math.min(pos, this.track.width() - this.thumb.width());

    return pos;

};

Slider.prototype.getRange = function(){

    if(this.min < 0)
        return this.max + (this.min * (-1))
    else
        return this.max - this.min;
};




(function() {

        var test = new Slider($('.slider').first(),0,100,1);
        test.init();
        test.setValue(33);
        console.log(test.getValue());

        var test1 = new Slider($('.slider').last(),-1,1,0.5);
        test1.init();
        test1.setValue(0);
        console.log(test1.getValue());




})();

// ----- end component -------

// ----- testing only -----

(function() {

    /*
    $('.shortcuts > a').on('click', function () {
        var sliderId = '#slider' + $(this).parent().attr('id').replace('shortcuts', '');
        $(sliderId).data('interface').setValue(parseFloat($(this).text()));
    });

    setInterval(function() {
        console.log('slider values: ');
        $('.slider').each(function() {
            console.log('value: ' + $(this).data('interface').getValue()); //todo output in html
        });
    }, 3000);
    */
})();