DualSliderFilter = createClass();

DualSliderFilter.prototype.init = function(args) {
    
    defaults = { caption: "", min: [ 0, 0], max: [ 12*60-1, 24*60-1], preset: null, parentDiv: "SliderDiv",
                 rangeToText: function(val) { return val; }, onChange: null, footerCap: [ "", ""], 
                 midMgr: null, disabled: [ false, false] };
	for(var pr in defaults)
        this[pr] = isDefined(args[pr]) ?args[pr] :defaults[pr];

    var caption = this.caption;
    var i;

    this.disable = function(index) {
        this.domMgr.elements["disable"][index].style.display = "";
        this.disabled[index] = true;
    };

    this.enable = function(index) {
        this.domMgr.elements["disable"][index].style.display = "none";
        this.disabled[index] = false;
    };

    this.range = [];
    for( i=0; i<2; i++) {
        this.range.push( [this.min[i], this.max[i]]);
        if(isDefined(this.preset)) {
            // If within range, preset range
            if( this.range[i][0] < this.preset[i][0] && this.preset[i][0] < this.range[i][1])
                this.range[i][0] = this.preset[i][0];
            if( this.range[i][0] < this.preset[i][1] && this.preset[i][1] < this.range[i][1])
                this.range[i][1] = this.preset[i][1];
        }
    }        
        
    var filter = this;
    
    var header = {
        tagName: "div",
        cssClass: function (mgr) { return "header" + mgr.indices.slider; },
        layout: {
            tagName: "div", 
            cssClass: "caption",
            updateFunc: function(el, mgr) {
	            if(mgr.indices.slider == 0)
	                el.innerHTML = "";//caption + "&nbsp;<img src='images/orange-on-white-arrow-up.gif' alt=''/>";
                else if(filter.midMgr) {
                    if(filter.midMgr.created)
                        filter.midMgr.update(el);
                    else {
                        filter.midMgr.create(el);
                        filter.midMgr.created = true;
                    }
                }
            }
        }
    };
    
    var handle = { tagName: "div", name: "handle", cssClass: "handle" };
    
    var track = {
        tagName: "div",
        cssClass: function (mgr) { return "track" + mgr.indices.slider; },
        name: "track",
        foreach: { startIndex: 0, stopIndex: 1, indexKey: "handle" },
        layout: handle
    };
    
    var footer = { 
        tagName: "div", 
        cssClass: function (mgr) { return "footer" + mgr.indices.slider; },
        foreach: {startIndex: 0, stopIndex: 2, indexKey: "range" }, 
        layout: {
            tagName: "div", 
            cssClass: "range", 
            name: "txtRange", 
            updateFunc: function(el, mgr) {
                if(mgr.indices.range % 3 < 2) {
                    el.innerHTML = filter.rangeToText(filter.range[mgr.indices.slider][mgr.indices.range]);
                    var align = mgr.indices.range == 0 ?"left" :"right";
                    el.style[(DOM.is_ie) ?"styleFloat" :"cssFloat"] = align;
                    el.style.textAlign = align;
                }
                else {
                    el.innerHTML = filter.footerCap[mgr.indices.slider];
                    DOM.removeClass(el, "range");
                }
            }
        }
    };
    
    var disable = {
        tagName: "div",
        cssClass: function (mgr) { return "disable" + mgr.indices.slider; },
        name: "disable", 
        style: { display: "none" }
    };
    this.layout = {
	    parent: filter.parentDiv,
	    layout: {
	        tagName: "div", 
    	    cssClass: "dualSlider",
    	    foreach: { startIndex: 0, stopIndex: 1, indexKey: "slider" },
    	    layout: [ header, track, footer, disable ]
        }
	};
    
    this.domMgr = new DomMgr(this.layout);
    this.domMgr.create();
    this.domMgr.update();
    var elHt = this.domMgr.elements;
    
    this.sliders = [];
    for(i=0; i<2; i++) {
        this.sliders.push(new Slider({
            handle: [ elHt["handle"][i*2], elHt["handle"][i*2+1]], 
		    track: elHt["track"][i],
		    options: {
			    restricted: true,
			    range: { start: filter.min[i], end: filter.max[i] },
			    sliderValue: filter.range[i]
		    }
	    }));
    }

    this.sliders[0].options.onChange = function(range) {
        filter.range[0][0] = parseInt(range[0]);
        filter.range[0][1] = parseInt(range[1]);
        filter.domMgr.update();
        if(filter.onChange)
            filter.onChange();            
    };
    
    this.sliders[1].options.onChange = function(range) {
        filter.range[1][0] = parseInt(range[0]);
        filter.range[1][1] = parseInt(range[1]);
        filter.domMgr.update();
        if(filter.onChange)
            filter.onChange();            
    };
    
    this.sliders[0].options.onSlide = function(range) {
        filter.range[0][0] = parseInt(range[0]);
        filter.range[0][1] = parseInt(range[1]);
        filter.domMgr.update();
    };
    
    this.sliders[1].options.onSlide = function(range) {
        filter.range[1][0] = parseInt(range[0]);
        filter.range[1][1] = parseInt(range[1]);
        filter.domMgr.update();
    };
};