/******************** Marker ************************/
;(function($){
    Marker = function(element){
        this.$left = null;
        this.$right = null;
        this.$middle = null;
        this.$presetObject = null;
        this.$el = null;
        this.$parent = null;

        this.surface = null;
        this.width = 0;

        this.minWidth = 0;

        this.minLeft = 0;
        this.maxRight = 0;

        this.onDragEnd = function(){};

        this.moveTo = function(left){
            if(left < this.minLeft){
                left = this.minLeft;
            }

            var maxLeft = this.getMaxLeft();
            if(left > maxLeft){
                left = maxLeft;
            }

            this.$el.css('left', left);
        };

        this.getParent = function(){
            return this.$parent;
        };

        this.setWidth = function(width){
            width = parseInt(width);
            if(width < this.minWidth + this.$left._getWidth() + this.$left._getWidth()){
                width = this.minWidth + this.$left._getWidth() + this.$right._getWidth();
            }
            if(width > this.$parent._getWidth()){
                width = this.$parent._getWidth();
            }

            var newMiddleWidth = width - this.$left._getWidth() - this.$right._getWidth();

            middleWidth = newMiddleWidth;
            this.$middle._width = 0;
            this.$middle.css('width', middleWidth);
            this.width = width;

            this.width = this.$left._getWidth() + this.$right._getWidth() + this.$middle._getWidth();
            this.$el.css('width', width);
        };

        this.getWidth = function(){
            return this.width;
        };

        this.getMaxLeft = function(){
            return this.maxRight - this.width;
        };

        this.getMaxRight = function(){

        };

        this.getLeft = function(){
            var left = parseInt(this.$el.css('left').toString().replace(/[^0-9]/ig, ''));
            if(isNaN(left)){
                left = 0;
            }
            return left;
        };

        this.init = function($el){
            this.$el = $el;
            this.$parent = $el.parent();
            this.$left = $el.find('.left');
            this.$middle = $el.find('.middle');
            this.$right = $el.find('.right');


            /* set surface */
            this.surface = {
                parentOffset: this.$parent.offset().left,
                clickX: 0,
                markerOffsetX: 0,
                markerWidth: 0,
                getClickPosition: function(){
                    return this.clickX - this.markerOffsetX;
                }
            };

            var _getWidth = function(){
                if(!this._width){
                    this._width = this.width();
                }

                return this._width;
            };

            this.$left._getWidth = _getWidth;
            this.$right._getWidth = _getWidth;
            this.$middle._getWidth = _getWidth;
            this.$parent._getWidth = _getWidth;

            this.bindHandlers();
            this.bindDragging();

            //alert(this.$left._getWidth() + " | " + this.$right._getWidth() + " | " + this.$middle._getWidth());

            this.$el.css('width', this.width);
            //this.$right.drag(0);
        };

        this.bindHandlers = function(){
            var me = this;

            /* middle */
            this.$middle.mousedown(function(){
                me.$presetObject = me.$middle;
                me.$parent.focus();
            });

            /* left */
            this.$left.mousedown(function(){
                me.$presetObject = me.$left;
                me.$parent.focus();

            });

            this.$left.mouseup(function(e){
                me.$presetObject = null;
                me.$el.trigger('mouseup');
                e.stopPropagation();
            });

            /* right */
            this.$right.mousedown(function(){
                me.$presetObject = me.$right;
                me.$el.css('cursor', 'w-resize');
                me.$middle.css('cursor', 'w-resize');
                me.$parent.focus();
            });

            this.$right.mouseup(function(e){
                e.stopPropagation();
                me.$el.trigger('mouseup');
            });

            this.$el.mousedown(function(e){
                me.surface.clickX = e.clientX - me.$parent.offset().left;
                me.surface.markerOffsetX = me.getLeft();
                me.surface.markerWidth = me.$el.width();
            });

            this.$el.mouseup(function(e){
                e.stopPropagation();
                me.$parent.trigger('mouseup');
            });

            this.$parent.mouseup(function(e){
                e.stopPropagation();
                me.$presetObject = null;
                me.$el.css('cursor', 'default');
                me.$parent.css('cursor', 'default');
                me.$middle.css('cursor', 'pointer');
                me.$left.css('cursor', 'w-resize');
                me.$right.css('cursor', 'w-resize');

                me.onDragEnd(me);
            });

            this.$parent.mouseleave(function(){
                me.$presetObject = null;
            });

            this.$parent.mousemove(function(e){
                var offsetX = Math.round(e.clientX - me.$parent.offset().left);
                if(me.$presetObject){
                    me.$presetObject.drag(offsetX);
                }
            });

        };

        this.bindDragging = function(){
            var me = this;

            this.$left.drag = function(offset){
                var widthOffset = Math.round( (me.surface.clickX - offset) );

                var newLeft = Math.round(offset - me.surface.getClickPosition());
                var maxLeft = me.getMaxLeft();

                if(newLeft < me.minLeft ){
                    newLeft = me.minLeft;
                }

                if(newLeft > maxLeft){
                    newLeft = maxLeft;
                }
                var newWidth = me.surface.markerWidth + widthOffset;


                if(newWidth > me.maxRight - me.minLeft){
                    newWidth = me.maxRight - me.minLeft;
                }

                me.$el.css('left', newLeft);
                me.setWidth(newWidth);
                me.$parent.css('cursor', 'w-resize');
            };

            this.$right.drag = function(offset){
                var offsetX = me.getLeft();
                offset = offset - offsetX;

                if(offset + offsetX > me.maxRight){
                    offset = me.$parent.width() - offsetX - me.minLeft;
                }
                me.setWidth(offset);
                me.$parent.css('cursor', 'w-resize');
            };

            this.$middle.drag = function(offset){
                var newLeft = Math.round(offset - me.surface.getClickPosition());
                if(newLeft < me.minLeft ){
                    newLeft = me.minLeft;
                }

                var maxLeft = me.getMaxLeft();
                if(newLeft > maxLeft){
                    newLeft = maxLeft;
                }

                me.$left.css('cursor', 'pointer');
                me.$right.css('cursor', 'pointer');
                me.$parent.css('cursor', 'pointer');
                me.$el.css('cursor', 'pointer');
                me.$el.css('left', newLeft + 'px');
            };

            this.width = this.$left._getWidth() + this.$right._getWidth() + this.$middle._getWidth();
            this.$el.width(this.width);
        };

        //constructor
        this.init($(element));
    };

    //plugin
    $.fn.marker = function(options){
        var opts = $.extend({
            minLeft: 0,
            maxRight: 0,
            minWidth: 15,
            dragEnd: function(){}
        }, options);

        var markers = [];
        var result = $(this).each(function(){
            var element = $(this);
            var marker = new Marker(element);
            marker.minLeft = opts.minLeft;
            marker.maxRight = opts.maxRight;
            marker.minWidth = opts.minWidth;
            marker.onDragEnd = opts.dragEnd;
            marker.$right.trigger('mousedown');
            marker.$right.trigger('mouseup');
            markers.push(marker);
        });
        result.markers = markers;
        return result;
    };
}(jQuery));


/******************** mainPageFilter ************************/
;(function($){
    $.fn.mainPageFilter = function(){
        var me = null;

        var getMarkerLeft = function($parent){
            return $parent.find('div.marker').find('div.left').offset().left;
        };

        var getMarkerRight = function($parent){
            var right = $parent.find('div.marker').find('div.right');
            return right.offset().left + right.width();
        };

        var getBounds = function($parent){
            var left = getMarkerLeft($parent);
            var right = getMarkerRight($parent);
            var lis = $parent.find('li');
            var size = lis.size();
            var leftLi = null;
            var rightLi = null;

            for(var i = 0; i < size; i++){
                if(lis.eq(i).offset().left <= left){
                    leftLi = lis.eq(i);
                }

                if(lis.eq(i).offset().left + 5 <= right){
                    rightLi = lis.eq(i);
                }

            }

            if(leftLi == null){
                leftLi = lis.eq(0);
            }

            if(rightLi == null){
                rightLi = lis.filter(':last');
            }

            return {
                left: (leftLi.text() + "").trim(),
                right: (rightLi.text() + "").trim()
            }
        };

        var getAge = function(){
            var age = me.find('.age');
            return getBounds(age);
        };

        var getPrice = function(){
            var price = me.find('.price');
            return getBounds(price);
        };


        var submit = function(age_left,age_right, price_left, price_right, category){
//            alert("age: " + age + " | price: " + price + " | category: " + category)
// /index.php?type=extended&search_performed=Y&subcats=Y&dispatch[products.search]&cid=9&age_from=3&age_to=6&field_range[P][from]=10&field_range[P][to]=100000
            if (!age_left) {age_left=0}
            if (!age_right || age_right==0) {age_right=3}
            if (!price_left) {price_left=0}
            if (!price_right) {price_right=500}

            window.location.href = '/index.php?type=extended&search_performed=Y&subcats=Y&dispatch[products.search]' +
            '&age_from='+ age_left +'&age_to='+ age_right +
            '&field_range[P][from]=' + price_left +'&field_range[P][to]=' + (price_right + "").replace('\u221e', '1000000') +
            '&cid=' + category;
        };


        var initMarkers = function(){
            var ageLeftPoints = [10, 77, 145, 212];
            var ageRightPoints = [77, 145, 212, 281];
            
            var priceLeftPoints = [8, 59, 107, 152, 195, 234];
            var priceRightPoints = [59, 107, 152, 195, 242, 282]
            
            var findPoint = function(points, point){
                var toChoose = points[points.length - 1];
                for(var i = 0; i < points.length; i++){
                    if(points[i] > point){
                        var right = points[i];
                        var left = i > 0 ? points[i - 1] : 0;
                        toChoose = Math.abs(point - left) > Math.abs(point - right) ? right : left;
                        break;
                    }
                }
                return toChoose;
            };

            var placeMarker = function(leftPoint, rightPoint, marker){
                marker.moveTo(leftPoint);
                marker.setWidth(rightPoint - leftPoint);
            };

            var bindTo = function(leftPoints, rightPoints, marker){
                var markerLeft = marker.getLeft();
                var markerWidth = marker.getWidth();

                var leftPoint = findPoint(leftPoints, markerLeft);
                var rightPoint = findPoint(rightPoints, markerLeft + markerWidth);
                placeMarker(leftPoint, rightPoint, marker);
            };

            var ageDragEnd = function(marker){
                bindTo(ageLeftPoints, ageRightPoints, marker);
            };

            var priceDragEnd = function(marker){
                bindTo(priceLeftPoints, priceRightPoints, marker);
            };

            var ageResult = $('td.age').find('div.marker').marker({
                minLeft: 10,
                maxRight: $('.strip:first').width() - 15,
                dragEnd: ageDragEnd,
                minWidth: 15
            });
            
            var priceResult = $('td.price').find('div.marker').marker({
                minLeft: 10,
                maxRight: $('.strip:first').width() - 10,
                dragEnd: priceDragEnd,
                minWidth: 12
            });
/*
            var setMarkerPosition = function(leftPoints, rightPoints, getVar, lis, marker){
                if(getVar){
                    var vars = getVar.split('_');
                    var count = lis.size();
                    var leftBound = leftPoints[0];
                    var rightBound = rightPoints[0];

                    for(var i = 0; i < count; i++){
//                        alert(lis.eq(i).text().trim() + " | " + vars[0])
                        if(lis.eq(i).text().trim() == vars[0]){
                            leftBound = leftPoints[i];
                            //alert(vars[0]);
                        }

                        if(lis.eq(i).text() == vars[1] || lis.eq(i).text() == '∞' && vars[1] == '1000000'){
                            rightBound = rightPoints[i - 1];
                        }
                    }

                    placeMarker(leftBound, rightBound, marker);
                }
            };

            setMarkerPosition(ageLeftPoints, ageRightPoints, getUrlVars()['age_from'] + '_' + getUrlVars()['age_to'], $('td.age').find('li'), ageResult.markers[0]);
            setMarkerPosition(priceLeftPoints, priceRightPoints, getUrlVars()['field_range[P][from]']  + '_' + getUrlVars()['field_range[P][to]'], $('td.price').find('li'), priceResult.markers[0]);
*/
            var setMarkerPosition = function(leftPoints, rightPoints, var0, var1, lis, marker){
//                alert (var0);
//                alert (var1);

                if(var0 && var1){
                    var count = lis.size();
                    var leftBound = leftPoints[0];
                    var rightBound = rightPoints[0];

                    for(var i = 0; i < count; i++){
//                        alert(lis.eq(i).text() + " | " + var0)
                        if(lis.eq(i).text().trim() == var0){
                            leftBound = leftPoints[i];
//                            alert(vars[0]);
                        }

                        if(lis.eq(i).text() == var1 || lis.eq(i).text() == '∞' && var1 == '1000000'){
                            rightBound = rightPoints[i - 1];
                        }
                    }
//                    alert (rightBound);
//                    if (!leftBound) {leftBound=0}
//                    if (!rightBound) {rightBound=0}
                    
                    placeMarker(leftBound, rightBound, marker);
                }
            };

// устанавливаются позиции маркеров для возраста и цен из GET параметров             
            setMarkerPosition(ageLeftPoints, ageRightPoints, getUrlVars()['age_from'], getUrlVars()['age_to'], $('td.age').find('li'), ageResult.markers[0]);
            setMarkerPosition(priceLeftPoints, priceRightPoints, getUrlVars()['field_range[P][from]'], getUrlVars()['field_range[P][to]'], $('td.price').find('li'), priceResult.markers[0]);



        //gup('price') priceLeftPoints priceRightPoints

        };
        initMarkers();
        return $(this).each(function(){
            me = $(this);
            me.find('select.category').unbind('change');
            me.find('input.submit').click(function(){
                var age = getAge();
                var price = getPrice();
                var category = me.find('div.category').find('option[selected]').val();
                submit(age.left, age.right, price.left, price.right, category);
            });
        });
    };
}(jQuery));