TGSlider = Class.create();

TGSlider.prototype = 
{
    initialize : function(element,options)   
    {
        this.element = element;
        this.options = options;
        this.min = 0;
        this.max = 100;
        this.value = 50;
        this.step = 1;
        this.width = 100;
        this.height = 10;
        this.handleWidth = 5;
        this.trackimage = null;
        this.handleimage = null;
        this.drag = false;
        
        this.dragHook = null;
        this.dragEndHook = null;
        
        if(typeof(this.element) == 'string')
        {
            this.element = $(this.element);
        }
        
        this.element.style.position = 'relative';
                
        if(options)
        {
            if(options['min'])
            {
                this.min = options['min'];
            }
            if(options['max'])
            {
                this.max = options['max'];
            }
            if(options['value'])
            {
                this.value = options['value'];
            }
            if(options['step'])
            {
                this.step = options['step'];
            }
            if(options['handleWidth'])
            {
                this.handleWidth = options['handleWidth'];
            }
            if(options['width'])
            {
                this.width = options['width'];
                this.element.style.width = this.width + 3 + 'px';
            }
            if(options['height'])
            {
                this.height = options['height'];
                this.element.style.height = this.height + 'px';
            }
            if(options['trackimage'])
            {
                this.trackimage = options['trackimage'];
            }
            if(options['handleimage'])
            {
                this.handleimage = options['handleimage'];
            }
        }
        
        if(this.trackimage)
        {
            this.element.style.backgroundImage = 'url(' + this.trackimage + ')';    
        }
        
        this.handle = document.createElement('DIV');
        this.handle.style.position = 'absolute';
        this.handle.style.width = '10px';
        this.handle.style.height = (this.height -2) + 'px';
        this.handle.style.left = '0px';
        this.handle.style.top = '0px';
        this.handle.style.cursor = 'pointer';
        
        if(this.handleimage)
        {
        	this.handle.style.backgroundImage = 'url(' + this.handleimage + ')';    
        }
        this.handle.title = this.value;
        this.element.appendChild(this.handle);
        this.repaint();
        
        Event.observe(this.handle,'mousedown',this.mousedownHandler.bindAsEventListener(this));
        Event.observe(document,'mouseup',this.mouseupHandler.bindAsEventListener(this));
        Event.observe(this.element,'mousemove',this.mousemoveHandler.bindAsEventListener(this));
    },
    
    setValue : function(value)
    {
        if(value < this.max)
        {
        	if(value > this.min)
        	{
        		this.value = value;
        		this.repaint();
        	}
        	else
        	{
        		this.value = this.min;
        		this.repaint();
        	}
        }
        else
        {
        	this.value = this.max;
        	this.repaint();
        }
    },
    
    plus : function()
    {
        if(this.value < this.max) this.value+= this.step;       
        this.repaint(); 
    },
    
    minus : function()
    {
        if(this.value > this.min) this.value-= this.step;        
        this.repaint();
    },
    
    setMax : function(value)
    {
         this.max = value;
         this.repaint();  
    },

    repaint : function()
    {
        var val = parseInt((this.value / (this.max - this.min)) * (this.width - this.handleWidth));
        this.handle.style.left = val + 'px';
        this.handle.title = this.value;
    },
    
    mousedownHandler : function(event,extra)
    {
        this.drag = true;
    },
    
    mouseupHandler : function(event,extra)
    {
        if(this.drag)
        {
            this.drag = false;
            if(this.dragEndHook) this.dragEndHook();
        }
    },
    
    mousemoveHandler : function(event,extra)
    {
        if(this.drag)
        {
            var pos = Position.cumulativeOffset(this.element);
            var val = parseInt((Event.pointerX(event) - pos[0]) * ( (this.max - this.min)/(this.width)));
            this.setValue(val);
            if(this.dragHook) this.dragHook();
        }
    },
    
    registerDragHook : function(pointer)
    {
    	this.dragHook = pointer;
    },
    
    unregisterDragHook : function()
    {
    	this.dragHook = null;
    },
    
    registerDragEndHook : function(pointer)
    {
    	this.dragEndHook = pointer;
    },
    
    unregisterDragEndHook : function()
    {
    	this.dragEndHook = null;
    }
}