(function($){
    $.widget('ui.zoara_slider', {
	_init: function(){
	    var sliderDiv = $('<div/>').appendTo(this.element);
	    var opts_array = this.options.opts_array;
	    var callback = this.options.callback;
	    var custom_wrapper = this.options.custom_wrapper;
	    var margin_left = this.options.margin_left;
	    sliderDiv.slider({
		value:0,
		min: 0,
		max: opts_array.length - 1,
		step: 1,
		range: this.options.range,
		change: callback,
		slide: callback
	    });
	    sliderDiv.wrap('<div class="'+custom_wrapper+'"></div>');
	    var width = sliderDiv.parent().outerWidth();
	    var ul = $('<div class="slider-ul"></div>');
	    ul.appendTo(this.element);
	    $.each(opts_array, function(k, v){
		var li = $('<div>'+this+'</div>').appendTo(ul).click(function(){
		    sliderDiv.slider('value', ul.children().index(this));
		    return false;
		}).css('width', ((width)/(opts_array.length - 0.5))).mouseover(function(){
		    $(this).css('text-decoration', 'underline');
		}).mouseout(function(){
		    $(this).css('text-decoration', 'none');
		});
	    });
	    
	    var el = ul.children().eq(0);
	    el.css('width', el.outerWidth()*0.75);
	    el = ul.children().eq(ul.children().length-1);
	    el.css('width', el.innerWidth()*0.75).css('text-align', 'right');
	}
    });
    $.extend($.ui.zoara_slider, {
	  defaults: {
		opts_array: null,
		callback: null,
		margin_left: 0,
		custom_wrapper: 'slider-wrapper'
	  }
    });
})(jQuery);