SliderFilter = extendClass(Slider);

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

    var caption = this.caption;

    this.range = [ this.min, this.max]; 
    if(isDefined(this.preset)) {
        // If within range, preset range
        if( this.range[0] < this.preset[0] && this.preset[0] < this.range[1])
            this.range[0] = this.preset[0];
        if( this.range[0] < this.preset[1] && this.preset[1] < this.range[1])
            this.range[1] = this.preset[1];
    }   
    
    this.disable = function() {
        this.domMgr.elements["disable"].style.display = "";
        this.disabled = true;
    };

    this.enable = function() {
        this.domMgr.elements["disable"].style.display = "none";
        this.disabled = false;
    };
     
        
    var filter = this;
    
    var header = {
        tagName: "div",
        cssClass: "header",
        layout: {
            tagName: "div", 
            cssClass: "caption",
            layout: function(el, mgr) {
	            el.innerHTML = "";//caption + "&nbsp;<img src='images/orange-on-white-arrow-up.gif' alt=''/>";
            }
        }
    };
    
    var handle = { 
        tagName: "div", 
        name: "handle", 
        cssClass: "handle"
    };
    
    var track = {
        tagName: "div",
        cssClass: "track",
        id: "track",
        foreach: { startIndex: 1, stopIndex: 2, indexKey: "handle" },
        layout: handle
    };
    
    var footer = { 
        tagName: "div", 
        cssClass: "footer",
        foreach: {startIndex: 0, stopIndex: 2, indexKey: "range" }, 
        layout: {
            tagName: "div", 
            cssClass: "range", 
            name: "txtRange", 
            updateFunc: function(el, mgr) {
                if(mgr.indices.range < 2) {
                    el.innerHTML = filter.rangeToText(filter.range[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;
                    DOM.removeClass(el, "range");
                }
            }
        }
    };
    
    var disable = {
        tagName: "div",
        cssClass: "disable",
        id: "disable", 
        style: { display: "none" }
    };
    
    this.layout = {
	    tagName: "div",
	    parent: this.parentDiv,
	    layout: {
	        tagName: "div", 
    	    cssClass: "slider",
	        layout: [ header, track, footer, disable ]
        }
	};

    this.domMgr = new DomMgr(this.layout);
    this.domMgr.create();
    this.domMgr.update();
    
    var mgr = this.domMgr;
    this.baseParameters = function() {	
        return {
            handle: mgr.elements["handle"], 
		    track: mgr.elements["track"], 
		    options: {
			    restricted: true,
			    range: { start: filter.min, end: filter.max },
			    sliderValue: filter.range,
			    onSlide: function(range) {
			        filter.range[0] = parseInt(range[0]);
                    filter.range[1] = parseInt(range[1]);
                    filter.domMgr.update();
			    },
			    onChange: function(range) { 
	                filter.range[0] = parseInt(range[0]);
                    filter.range[1] = parseInt(range[1]);
                    filter.domMgr.update();
                    if(filter.onChange)
                        filter.onChange();            
			    }
		    }
	    }
    };
};