kff.widgets.AhornSlider = function(element, options)
{
	kff.widgets.Slider.call(this, element, options);
};

kff.extend(kff.widgets.AhornSlider, kff.widgets.Slider);

kff.widgets.AhornSlider.prototype.render = function()
{
	kff.widgets.Slider.prototype.render.call(this);
	
	this.$flagA = $('<div class="kff-flag-a"></div>').appendTo(this.$sliderPane); 
}

kff.widgets.AhornSlider.prototype.updateFlags = function(position)
{
	this.$flagA.css({ left: this.rangeToPixel(position) }).html(position);
}

kff.widgets.AhornSlider.prototype.drag = function(position)
{
	this.updateFlags(position)
	if(typeof this.options.drag == 'function') this.options.drag(this.position);
}

kff.widgets.AhornSlider.prototype.change = function(position)
{
	this.updateFlags(position)
	if(typeof this.options.change == 'function') this.options.change(position); 
}


kff.widgets.AhornRangeSlider = function(element, options)
{
	kff.widgets.RangeSlider.call(this, element, options);
};

kff.extend(kff.widgets.AhornRangeSlider, kff.widgets.RangeSlider);

kff.widgets.AhornRangeSlider.prototype.render = function()
{
	kff.widgets.RangeSlider.prototype.render.call(this);
	
	this.$flagA = $('<div class="kff-flag-a"></div>').appendTo(this.$sliderPane); 
	this.$flagB = $('<div class="kff-flag-b"></div>').appendTo(this.$sliderPane);
}

kff.widgets.AhornRangeSlider.prototype.updateFlags = function(position)
{
	this.$flagA.css({ left: this.rangeToPixel(position.a) }).html(position.a);
	this.$flagB.css({ left: this.rangeToPixel(position.b) }).html(position.b);
}

kff.widgets.AhornRangeSlider.prototype.drag = function(position)
{
	this.updateFlags(position)
	if(typeof this.options.drag == 'function') this.options.drag(this.position);
}

kff.widgets.AhornRangeSlider.prototype.change = function(position)
{
	this.updateFlags(position)
	if(typeof this.options.change == 'function') this.options.change(position); 
}