//
//Notes:
//  The element should look something like:
//  <span class='custom-checkbox' css-unchecked="checkbox-unchecked" css-checked="checkbox-checked" value="false"> My text goes here!</span>
//  The unchecked and checked css should at a minimum specify a height & width and a background image set to no-repeat.
//
//  Depends on several CSS classes:
//  .non-selectable-text {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
//  .clickable {cursor: pointer; cursor: hand;}
//
(function($) {
	$.fn.buildCustomCheckBox = function() {
		for(var index = 0; index < this.length; index++) {
			var next = $(this[index]);
			var isWrapped = next.data('is-wrapped');
			
			if(isWrapped != true) {
				var cssChecked = next.attr('css-checked');
				var cssUnchecked = next.attr('css-unchecked');
				var value = next.attr('value');
				
				value = value == 'true' || value == true ? true : false;
				next.attr('value', value);
				
				next.prepend("<div class='" + (value == true ? cssChecked : cssUnchecked) + "' style='display: inline-block;'/>");
				next.addClass("clickable");
				next.addClass("non-selectable-text");
				next.add(next.children().first()).click(function() {
					var _this = $(this);
					var isChecked = _this.attr('value') != true;
					var cssChecked = next.attr('css-checked');
					var cssUnchecked = next.attr('css-unchecked');
					
					_this.attr('value', isChecked);
					_this.children().first().removeClass(isChecked ? cssUnchecked : cssChecked);
					_this.children().first().addClass(isChecked ? cssChecked : cssUnchecked);
				});
				next.keypress(function(event) {
					if(event.which == 32 || event.which == 13) {
						var _this = $(event.target);
						_this.children().first().click();
					}
				});
			}
		}
		
		return this;
	}
})(jQuery);