/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */




function initFilter(el)
{
    el = $(el);
    if(!el) return;
    el.setStyle('width', el.getSize().x);
    var params = {};
    // Разбираем параметры
    el.className.split(' ').each(function(item){
        var p = item.split('--');
        switch(p.length)
        {
            case 0:
                break;

            case 1:
                params[p[0]]=true;
                break;

            default:
                params[p[0]]=p.splice(1, 1);

        }
    });
    
    var fromInput = $(params['min-input-id'][0]);
    var toInput = $(params['max-input-id'][0]);
    var step = params.step ? parseInt(params['step'][0]) : null;
    if (isNaN(step)) step = null;
    var vertical = params['vertical'];

    var document = $(window.document);


    var elWidth = 9;
    var min = 0;
    var max = el.getSize().x-elWidth*2;

    // позиция в пикселях
    var fromPos = min;
    var toPos = max;
    
    // текущее значение в ед. измерения
    var fromValue = null;
    var toValue = null;

    var maxValue = params['max-value'] && parseInt(params['max-value'][0]);
    if(isNaN(maxValue)) maxValue = 1000;
    var minValue = params['min-value'] && parseInt(params['min-value'][0]);
    if(isNaN(minValue)) minValue = 0;

    // коэффициент между пикселями и значением
    var k = (maxValue-minValue)/max;
    // Рисуем шкалу
    var scale = new Element('div', {
        'class':'scale'
    });
    el.appendChild(scale);


    // Преобразование значения в смещение и обратно
    var k2 = Math.sqrt(maxValue) / max;
    var k2r = 1/k2;

    var pxToVal = function(left)
    {
        var value = left * k2;
        return value * value;
    }

    var valToPx = function(val)
    {
        val = Math.sqrt(val);
        return Math.round(val * k2r);
    }

    var values = [];
    // округление
    var roundVal = function(val)
    {
        if(val >= maxValue) return maxValue;

        var prev = values[0];
        for (var i=1, n=values.length; i<n; i++)
        {
            var next = values[i];
            if(prev == next) continue;
            if(val < next && val >= prev)
            {
                var bound = (next + prev)/2;
                if( val >= bound)
                    return values[i];
                else
                    return values[i-1];
                break;
            }

            prev = next;
        }
    }

    // установка позиции ползунка
    var setPos = function(el, val, shift)
    {
        shift = shift || 0;


    }

    function mark( start, end, divSize)
    {
        function newDiv(x, h)
        {
            var div = new Element('div', {
                'class':'dash',
                'styles':{
                    'position':'absolute',
                    'left': x,
                    'height': h
                }
            });
            scale.appendChild(div);
		
        }

        // рисуем деления
        function subDivs(h, start, end, inc)
        {

            var stPx = valToPx(start);
            var endPx = valToPx(end);
            var d = endPx - stPx;
            
			
            if(d > 40)
            {
                for (var i=start; i<end; i+=inc)
                {
                    subDivs(h, i, i+inc, inc/10);
                }
            }
            else
            {
                // первое деление
                newDiv(stPx, h);
                values.push(start);
                if(start==inc) start = 0;
                if(d > 20)
                {
                    inc *= 2;
                    for (var i=start+inc; i<end; i+=inc)
                    {
                        newDiv(valToPx(i), h-1);
                        values.push(i);
                    }
                }
                else if(d > 8)
                {
                    inc *= 5;
                    for (var i=start+inc; i<end; i+=inc)
                    {
                        newDiv(valToPx(i), h-1);
                        values.push(i);
                    }
                }
            }

        }
        
        var prevPos = 0;
        values.push(minValue);
        for( var i=start, j=1; i<end; i*=10)
        {
            var left = valToPx(i);
            if(left-prevPos <= 1) continue;

            var next = Math.min(i*10, end);

            subDivs(++j, i, next, i);
        }
        values.push(maxValue);

    //values.sort(function(a, b){return a>b;});

    }

    mark( 1, maxValue, 8);

    var interblock = null;
    var updateInterblock = function(){};
    if(fromInput && toInput)
    {
        interblock = new Element('div', {
            'class': 'interblock',
            'styles': {
                'left': fromPos+elWidth,
                'width': toPos-fromPos
            }
        });
        el.appendChild(interblock);
        updateInterblock = function(){
            interblock.setStyles({
                'left': fromPos+elWidth,
                'width': toPos-fromPos
            });
        };

        interblock.appendChild(new Element('div'));

         
    }

    // Разбиение числа на группы, по 3 цифры разделенные пробелами
    function formatThousand(value){
        var result='';
        value += '';

        var n = value.length % 3;

        result += value.substr( 0, n) + ' '

        for(var i=n; i< value.length; i+=3)
        {
            result += value.substr( i, 3) + ' ';
        }
        result = result.trim();
        return result;
						
    }


    if(fromInput)
    {
        var initVal1 = parseInt(fromInput.get('value'));
        if(isFinite(initVal1))
        {
            fromPos = Math.round(initVal1/k);
            fromValue = initVal1;
            if(step) fromValue = Math.round(fromValue/step) * step;
        }

        var fromClickPos = null;
        function fromEndDrag(){
            fromClickPos = null;
            fromSlider.removeClass('active');
            fromPos = parseInt(fromSlider.getStyle('left'));
        }

        var fromSlider = new Element('a',{
            'href':'#',
            'class': 'from-slider',
            'styles':{
                'position':'absolute',
                'left':fromPos,
                'top':0
            },
            'events':{
                'mousedown':function(e)
                {
                    fromClickPos = e.page;
                    $(this).addClass('active');
                    return false;
                },
                'click':function(){
                    return false;
                },
                'focus':function(){
                    $(this).addClass('focus');
                    return true;
                },
                'blur':function(){
                    $(this).removeClass('focus');
                    return true;
                },
                'keydown':function(e)
                {
                    var self = $(this);
                    var ret = true;
                    fromPos = parseInt(self.getStyle('left'));
                    switch(e.key)
                    {
                        case 'left':
                            if(e.shift) fromPos-=10;
                            else --fromPos;
                            if(fromPos < min) fromPos = min;
                            fromSlider.setStyle('left', fromPos);
                            updateInterblock();
                            ret = false;
                            break;

                        case 'right':
                            if(e.shift) fromPos+=10;
                            else ++fromPos;
                            if(fromPos >= toPos) fromPos = toPos;
                            fromSlider.setStyle('left', fromPos);
                            updateInterblock();
                            ret = false;
                            break;
                    }

                    if(!ret){
                        if(step)
                        {
                            fromValue = fromPos * k;
                            fromValue = Math.round(fromValue/step) * step;
                            fromPos = Math.round( fromValue/k );
                        }
                        else
                            fromValue = Math.round(fromPos * k)
                        fromInput.set('value', fromValue + minValue);
                    } 
                 
                   
                    return ret;
                }
            }
        });

 
        el.appendChild(fromSlider);
        document.addEvents({
            'mouseup': fromEndDrag,
            'mousemove':function(e)
            {
                if(!fromClickPos) return true;
                var left = fromPos + e.page.x-fromClickPos.x;
                if(left < min) left = min;
                if(left >= toPos) left = toPos;

                var old = fromValue;
                
                fromValue = roundVal(pxToVal(left));
                left = valToPx(fromValue);
                   
                if(old != fromValue)
                {
                    fromSlider.setStyle('left', left);

                    if(interblock) interblock.setStyles({
                        'left': left+elWidth,
                        'width': toPos-left
                    });

                    fromInput.set('value', formatThousand(fromValue));
                    
                }
                
                return false;

            }
            
        });

        fromInput.addEvent('keyup', function(){
            var v=parseInt($(this).get('value'));
            if(isNaN(v)) return;
            var left = Math.round(v/k);

            if(left < min) left = min;
            if(left >= toPos) left = toPos;
            fromSlider.setStyle('left', left);
            fromPos = left;
            updateInterblock();

        });
    }
    
    if(toInput)
    {
        var initVal2 = parseInt(toInput.get('value'));
        if(isFinite(initVal2)){
            toPos = Math.round(initVal2/k);
            toValue = initVal2;
            if(step) toValue = Math.round(toValue/step) * step;

        } 

        var toClickPos = null;
        function toEndDrag()
        {
            toClickPos = null;
            toSlider.removeClass('active');
            toPos = parseInt(toSlider.getStyle('left'))-elWidth;
        }
        
        var toSlider = new Element('a',{
            'href':'#',
            'class': 'to-slider',
            'styles':{
                'position':'absolute',
                'left':toPos+elWidth,
                'top':0
            },
            'events':{
                'mousedown':function(e)
                {
                    toClickPos = e.page;
                    $(this).addClass('active');
                    return false;
                },
                'click':function(){ 
                    return false;
                },
                'focus':function(){
                    $(this).addClass('focus');
                    return true;
                },
                'blur':function(){
                    $(this).removeClass('focus');
                    return true;
                },
                'keydown':function(e)
                {
                    var self = $(this);
                    var ret = true;
                    toPos = parseInt(toSlider.getStyle('left'))-elWidth;
                    switch(e.key)
                    {
                        case 'left':
                            if(e.shift) toPos-=10;
                            else --toPos;
                            if(toPos < fromPos) toPos = fromPos;
                            self.setStyle('left', toPos+elWidth);
                            updateInterblock();
                            ret = false;
                            break;

                        case 'right':
                            if(e.shift) toPos+=10;
                            else ++toPos;
                            if(toPos >= max) toPos = max;
                            self.setStyle('left', toPos+elWidth);
                            updateInterblock();
                            ret = false;
                            break;
                    }
                    if(!ret){
                        if(step)
                        {
                            toValue = toPos * k;
                            toValue = Math.round(toValue/step) * step;
                            toPos = Math.round( toValue/k );
                        }
                        else
                            toValue = Math.round(toPos * k)
                        toInput.set('value', toValue + minValue);
                    }

                    return ret;
                }

            }

        });


        el.appendChild(toSlider);
        document.addEvents({
            'mouseup': toEndDrag,
            'mousemove':function(e)
            {
                if(!toClickPos) return true;
                var left = toPos + e.page.x-toClickPos.x;
                if(left < fromPos) left = fromPos;
                if(left >= max ) left = max;

                var old = toValue;
                toValue = roundVal(pxToVal(left));
                left = valToPx(toValue);
                
                if( old != toValue )
                {
                    toSlider.setStyle('left', left+elWidth);
                    if(interblock) interblock.setStyles({
                        'left': fromPos+elWidth,
                        'width': left-fromPos
                    });
                    toInput.set('value', formatThousand(toValue));
                        
                }
                
                    
                
                return false;
            }

        });

        // Обработчики нажатий клавиш
        toInput.addEvent('keyup', function(){
            var v=parseInt($(this).get('value'));
            if(isNaN(v)) return;
            var left = Math.round(v/k);

            if(left < fromPos) left = fromPos;
            if(left >= max ) left = max;
            toSlider.setStyle('left', left+elWidth);
            toPos = left;
            updateInterblock();
        });

    }
    
}


window.addEvent('domready', function(){
    $$('.js-filter').each(function(el){
        initFilter(el);
    });
});