(function ($) {

	var options = {
		api: false,
		min: 1,
		max: 5,
		urlIcons: null,
		countIcons: 5,
		onIconsLoaded: function () {},
		onSliderChanged: function () {}
	};

	var iconslider = {

		el: null,
		opt: null,
		wrapper: null,
		icons: null,
		value: null,

		init: function () {
			this.wrapper = $('<div class="iconSliderWrapper"></div>');
			this.wrapper.insertBefore(this.el).append(this.el);
			this.initSlider();
			this.initIcons();
			this.el.bind('iconsLoaded', this.opt.onIconsLoaded);
			this.el.bind('sliderChanged', this.opt.onSliderChanged);
		},

		initSlider: function () {
			var iconslider = this;
			this.capMax = $('<div class="sliderCap sliderCapMax"/>').appendTo(this.el);
			this.capMin = $('<div class="sliderCap active sliderCapMin"/>').appendTo(this.el);
			$(this.el).slider({
				min: this.opt.min,
				max: this.opt.max,
				range: 'min',
				create: function (e, ui) {
					// set more neutral style
					$(this).find('*').andSelf().removeClass('ui-corner-all');
				},
				slide: function (e, ui) {
					iconslider.setValue(ui.value);
					iconslider.el.trigger('sliderChanged', [iconslider]);
				}
			});
		},

		initIcons: function () {
			var iconslider = this;
			var image = this.opt.urlIcons;
			var icons = $('<div class="calculatorIcons">').prependTo(this.wrapper);

			var iconPreloader = new Image();
			var iconWidth = null, iconHeight = null;
			var min = this.opt.min, max = this.opt.max;
			var count = this.opt.countIcons;

			var appendOneIcon = function (i, val) {
				var pos = (i - min) * iconWidth * -1;
				$('<span class="icon"></span>').css({
					background: 'url(' + image + ') no-repeat ' + pos + 'px bottom',
					width: iconWidth + 'px',
					height: iconHeight + 'px'
				}).data('calculator', {
					active: pos + 'px top',
					inactive: pos + 'px bottom'
				}).bind('click', function (e) {
					iconslider.setValue(val);
					iconslider.el.trigger('sliderChanged', [iconslider]);
				}).appendTo(icons);
			};

			var onIconsLoaded = function () {
				iconWidth = this.width / count;
				iconHeight = this.height / 2;
				var stepSize = Math.ceil((max - min) / count);
				for (var i = 0; i < count; i++) {
					appendOneIcon(i + min, i * stepSize + min);
				}
				iconslider.iconWidth = iconWidth;
				iconslider.iconHeight = iconHeight;
				iconslider.icons = icons.children();
				iconslider.setSliderIcon(iconslider.opt.min);
				iconslider.wrapper.css({
					width: this.width + 'px'
				});
				iconslider.el.trigger('iconsLoaded', [iconslider]);
			};
			iconPreloader.onload = onIconsLoaded;
			iconPreloader.src = image;


		},

		setValue: function (value) {
			this.setSliderValue(value);
			var stepSize = Math.ceil(this.opt.max / this.opt.countIcons);
			this.setSliderIcon(Math.round(value / stepSize));
			this.capMax.toggleClass('active', value == this.opt.max);
			this.value = value;
		},

		setSliderIcon: function (value) {
			var icon = this.icons.filter(':lt(' + (value - min) + ')');
			var data = icon.data('calculator');
			var min = this.opt.min;
			this.icons.each(function (i) {
				var data = $(this).data('calculator');
				$(this).css({
					backgroundPosition: i <= value - min ? data.active : data.inactive
				});
			});
		},

		setSliderValue: function (value) {
			if (value < this.opt.min) {
				this.capMin.removeClass('active');
				value = this.opt.min;
			} else {
				this.capMin.addClass('active');
			}
			this.el.slider('value', value);
		}

	};

	var common = {
		baseIconslider: iconslider,
		options: options
	};

	$.extend({
		iconslider: common
	});

	$.extend($.fn, {
		iconslider: function (opt) {
			var firstInstance = null;
			function F(){};
			F.prototype = iconslider;
			this.each(function (i) {
				var instance = new F();
				instance.el = $(this);
				instance.opt = $.extend(true, {}, options, opt);
				if (i == 0 && instance.opt.api) {
					firstInstance = instance;
				}
				instance.init();
			});
			if (opt && opt.api) {
				return firstInstance;
			}
			return this;
		}
	});

})(jQuery);