(function ($) {

	$.fn.boxExtender = function () {
		return this.addClass('boxContainer').prepend('<div class="ln"></div>').append('<div class="bg"><span></span></div>');
	};

	$.fn.sliderExtender = function (w, sel) {
		var ignoreChange = false;
		var updateSlider = function (s, c) {
			if (ignoreChange) return;
			c.hide();
			$(sel).hide();
			var os = s.find('option');
			if (os.size() < 2) return;
			setSlider(0);
			c.show();
			$(sel).show();
		};
		var setSlider = function (x) {
			if (x < 15) x = 15;
			if (x > w - 18) x = w - 18;
			var sfs = s.find('option').size();

			var pocet = (w - 33) / (sfs - 1);
			var x = x + (pocet / 2) - 13;
			var xx = ((x - x % pocet) / pocet) * pocet;
			if (isNaN(xx)) xx = 0;
			slider.width(xx + 5);
			icon.offset({ left: slider.offset().left + xx + 5 });
			var si = Math.floor(xx / (w - 33) * (sfs - 1));
			s[0].selectedIndex = si;
			ignoreChange = true;
			s.change();
			ignoreChange = false;
		};

		var s = this;
		var c = $('<div>', { className: 'sliderContainer', width: w });
		var slider = $('<div>', { className: 'slider' });
		var icon = $('<div>', { className: 'icon' });
		var hitArea = $('<div>', { className: 'hitArea' });
		c.append('<div class="bg"></div><div class="end"></div>').append(slider).append(icon).append(hitArea);
		hitArea.mousedown(function (m) {
			setSlider(m.offsetX ? m.offsetX : m.layerX);
		});
		s.after(c).hide().change(function () { updateSlider(s, c); });
		updateSlider(s, c);

		return s;
	};

	$.fn.buttonExtender = function () {
		var b = this;

		var c = $('<span>', { className: 'buttonContainer', html: b.val() + '<span class="shade"></span><span class="end"></span>' });
		c.click(function () { b.click(); return false; });

		return b;
	};

	$.fn.selectExtender = function () {

		var s = this;

		var c = $('<span>', { width: s.outerWidth(), className: 'selectContainer', html: '<div class="selectBox"></div><span></span>' });

		var dd = $('<ul>', { className: 'dropDown' });
		var sb = c.find('.selectBox');

		s.find('option').each(function (i) {
			var o = $(this);
			if (i == s.attr('selectedIndex')) sb.html(o.text());
			var li = $('<li>', { html: o.html() });

			li.click(function () {
				sb.html(o.text());
				dd.trigger('hide');
				s.val(o.val());
				s.change();
			});

			dd.append(li);
		});

		c.append(dd.hide());
		s.hide().after(c);

		dd.bind('show', function () {
			if (dd.is(':animated')) return false;
			sb.addClass('expanded');
			dd.slideDown('fast');
		});

		dd.bind('hide', function () {
			if (dd.is(':animated')) return false;
			sb.removeClass('expanded');
			dd.slideUp('fast');
		});

		dd.bind('toggle', function () { if (sb.hasClass('expanded')) dd.trigger('hide'); else dd.trigger('show'); });
		c.click(function () { dd.trigger('toggle'); });
		$(document).click(function () { dd.trigger('hide'); });

		return s;
	};

})(jQuery);

