(function($) {

    $.widget("ui.smartFlagSelect", {
        _init: function() {
            var self = this;
            self._computeOptions();
            self._renderSelect();
        },
        _renderSelect: function() {
            var self = this;
            var options = self.options;

            $sfs = self.element;

            $wrapper = $('<div class=\'sd-flagwrapper\'/>');
            $sfs.wrap($wrapper);

            var flgImage = $('<img class=\'flagImage\' style=\'background-color:#969696;\'/>');

            if (options.status != null) {

                flgImage.attr('src', '/images/flags/flag' + options.status + '.png');
                self.element.parent('div').append(flgImage);
            }

            $sfs.bind('change', function() {
                var val = $(this).val();
                var img = $(this).parent().find('img');
                if (val == 'null' && img.length > 0) {
                    img.remove();
                }
                else {
                    for (var s = 0; s < $(this).find('option').length; s++) {
                        if ($(this).find('option[index=\'' + s + '\']').attr('value') == val) {
                            options.status = s - 1;
                            if (img.length < 1) {
                                $(this).parent().append('<img class=\'flagImage\' src=\'/images/flags/flag' + options.status + '.png\'/>');
                            }
                            else {
                                img.attr('src', '/images/flags/flag' + options.status + '.png');
                            }
                        }
                    }
                }

            });
        },


        _computeOptions: function() {

        }
    });

    $.extend($.ui.smartTimePicker, {
        version: '1.0.1',
        defaults: {
            mapid: '',
            status: 0,
            isNew: false,
            readOnly: false,
            inputId: ''
        }
    });
})(jQuery);