(function (window, $, undefined) {

    var Radio = {
        setActive: function (id) {
            this.updateGraphics(id);
            var el = document.getElementById(id);
            $(el).attr('checked', 'checked');
            $(el).change();
        },
        updateGraphics: function (id) {
            var $input = $(document.getElementById(id)),
                $inputWithSameName = $('input[name="' + $input.attr('name') + '"]');

            $inputWithSameName.removeClass('selected');
            $input.addClass('selected');

            $inputWithSameName.next().removeClass('selected');
            $input.next().addClass('selected');
        }
    };

    var Checkbox = {
        setActive: function (id) {
            this.updateGraphics(id);
            document.getElementById(id).checked = !document.getElementById(id).checked;
            $('#' + id).change();
        },
        updateGraphics: function (id) {
            var $input = $(document.getElementById(id));
            if ($input.attr('checked') === 'checked') {
                $input.addClass('selected');
                $input.next().addClass('selected');
            } else {
                $input.removeClass('selected');
                $input.next().removeClass('selected');
            }
        }
    };

    function getInput(id) {
        var inputType = document.getElementById(id).getAttribute('type');
        switch (inputType) {
            case 'radio' :
                return Radio;
            case 'checkbox' :
                return Checkbox;
        }
    }

    /**
     * Komponenta na přeměnění input[type="radio"] a input[type="checkbox"] na boxíky se stejnou funkcionalitou
     */
    $.fn.c_iconize = function () {
        return this.each(function () {
            /** $this odkazuje na input na kterém je inicializovaná komponenta */
            var $input = $(this);
            var $label = $('label[for="' + $input.attr('id') + '"]');
            var formType = $input.data('formtype');
            
            var $wrapper = $('<label id="' + $input.attr('id') + '_label" for="' + $input.attr('id') + '">' +
                                '<div class="radio-icon-wrapper">' +
                                    '<div class="image">' +
                                        '<img src="/StyleSheets/Kalkulator/Images/IconizedInputs/' + formType + '/' + $input.attr('id') + '.png" alt=""/>' +
                                    '</div>' +
                                    '<span>' + $label.html() + '</span>' +
                                '</div>' +
                            '</label>');

            $wrapper.click(function (event) {
                event.preventDefault();
                var id = this.getAttribute("for");
                if (!($("#" + id).prop('disabled'))) {            
                    getInput(id).setActive(id, true);
                }
            });
            $input.after($wrapper);

            if ($input.attr('checked') === 'checked') {
                var id = $input.attr('id');
                getInput(id).updateGraphics(id);
            }

            $input.live('change', function () {
                getInput(this.id).updateGraphics(this.id);
            });

            $label.closest('.heading').remove();
            $label.remove();
            $input.hide();

        });
    };
}(window, jQuery));