(function($) {
	jQuery.fn.styledCheckboxes = function(settings) {

        // Find all checkbox elements within class 'styledCheckbox' and put images after them
        // showing the proper checkbos state
        if($('.styledCheckboxes :checkbox').is(':checked')) {
            $('.styledCheckbox :checkbox').after('<img class="_checkboxImg" src="/images/checkbox_unchecked.jpg"/>');
        } else {
            $('.styledCheckbox :checkbox').after('<img class="_checkboxImg" src="/images/checkbox_checked.jpg"/>');
        }

        // added this hack so the box can be notified when the values has changed
        $('.styledCheckbox :checkbox').each(function(idx, el) {
            $(el).get(0).__onchange = function(event) {
                var check = $(el);
//                alert('1 ' + check.length);
//                alert('a ' + check.parent().find("._checkboxImg").length);
                if(check.is(':checked')) {
                    check.parent().find("._checkboxImg").attr('src', '/images/checkbox_checked.jpg');
                } else {
                    check.parent().find("._checkboxImg").attr('src', '/images/checkbox_unchecked.jpg');
                }
            }
        });

        // Register Event listener for all checkbox images
        $('.styledCheckbox :checkbox').click(function(event) {
            toggleCheckbox($(event.target));
        });

        // Register Event listener for all checkbox images
        $('.styledCheckbox img').click(function(event) {
            toggleImageCheck($(event.target));
        });

        // Register Event listener for all checkbox labels
        $('.styledCheckbox label').click(function(event) {
            toggleLabelCheck($(event.target));
        });

        // Hide all orginal checkboxes from screen
        hideOriginalCheckboxes();

	};

    /**
     *
     * @element: is an orginal checkbox element
     */
    function toggleCheckbox(element) {
        var checkbox = element;
        setCheckboxImage(checkbox);
    }

    /**
     * Function that changes the original checkboxes state and accordingly
     * its representative image. Fired if the checkboxes label has been clicked
     * @element: Element is the checkboxes label
     */
    function toggleLabelCheck(element) {
        var checkbox = element.siblings(':checkbox');
        if ($.browser.msie) {
            //IE-bug fix: IE regocnizes trigger 'click' the 2nd time
            checkbox.trigger('click');
            checkbox.trigger('click');
        } else {
            checkbox.trigger('click');
        }
        setCheckboxImage(checkbox);
    }

    /**
     * Function that changes the original checkboxes state and accordingly
     * its representative image. Fired if the checkboxes representative image
     * has been clicked.
     * @element: element is the checkboxes image that has to be changed
     */
    function toggleImageCheck(element) {

        var checkbox = element.siblings(':checkbox');
        if ($.browser.msie) {
            //IE-bug fix: IE regocnizes trigger 'click' the 2nd time
            checkbox.trigger('click');
            checkbox.trigger('click');
        } else {
            checkbox.trigger('click');
        }
        setCheckboxImage(checkbox);

    }

    function hideOriginalCheckboxes() {
        //Find all checkbox elements within class 'styledCheckbox'
        $('.styledCheckbox :checkbox').css('text-indent', '-10000');
        $('.styledCheckbox :checkbox').css('float', 'left');
        $('.styledCheckbox :checkbox').css('position', 'relative');
        $('.styledCheckbox :checkbox').css('left', '-1000px');
    }

    function setCheckboxImage(checkboxElem) {

        var imageElem = checkboxElem.siblings('img._checkboxImg');

         if(checkboxElem.is(':checked')) {
            imageElem.attr('src', '/images/checkbox_checked.jpg');
        } else {
            imageElem.attr('src', '/images/checkbox_unchecked.jpg');
        }
    }
})(jQuery);