// this generates the dialog the appears on the focus event
// it accepta the following options
// and can't proceed unless they are all filled in
// inputField = $()
// hdnSettingsField = $()
// settings = {}
// dialogcontrols = [{
//            id: '',
//            class: '',               
//            labelText: '',
//            inputType: '',
//            value: '',
//            field: '',
//            options: {},
//            validate
//        }];
;(function ( $, window, document, undefined ) { 
    
    var pluginName = "settingsDialog";
    
    // constructor
    function SettingsDialog( element, options ) {
        this.element = element;
        this.options = $.extend( {}, $.fn.settingsDialog.options, options );
        this._name = pluginName;

        this.init();
    }

    SettingsDialog.prototype.init = function() {
        // here we build up the controls....
        var $element = $(this.element);
        var $hdnSettingsField = $('input[type=hidden]', $element);
        var $inputField = $('input[type=text]', $element);
        var properties = {};

        if ($hdnSettingsField.val() !== '') {
            try {
                properties = JSON.parse($hdnSettingsField.val());
            }
            catch (err) {
                debugger;
                var t = $hdnSettingsField.val()
            }
        }

        var $dialog = $('<div />').attr('id', 'dialog_' + $element.attr('id'));

        $.each( this.options.dialogControls, function( index, control ) {
            // 1. create the label
            // 2. create the input
            var $label = $('<label />').html(control.labelText);
            var $input = {};

            switch (control.inputType) {
                case 'text':
                    $input = $('<input />', { type: control.inputType });
                    break;
                case 'textarea':
                    $input = $('<textarea />');
                    break;
                case 'select':
                    $input = $('<select></select>');

                    if (control.options) {
                        for (var key in control.options) {
                            $input.append($('<option />', { value: key, text: control.options[key] }));
                        }
                    }
                    break;
            }

            $input.attr('id', control.id)
                    .attr('data-field', control.field)
                    .val(properties[control.field])
                    .addClass(control['class']);
                    // class is a reserved property name that IE 8 does not like
                    //.addClass(control.class);
            

            if(control.validate) {
                $input.attr('validate', control.validate);
            }

            $dialog.append($label).append($input).append(document.createElement('br'));
        });

        $dialog.dialog({
            title: this.options.dialogTitle,
            autoOpen: false,
            modal: true,
            buttons: {
                "Ok": function () {
                    if($(this).validate()) {
                        var obj = {};

                        // need to serialize the inputs into the hidden field
                        $('input, select', $(this)).each(function (index, element) {
                            var field = $(element).data('field');
                            obj[field] = $(element).val();
                        });

                        $hdnSettingsField.val(JSON.stringify(obj));
                        $inputField.val(JSON.stringify(obj));
                        $inputField.trigger('change');
                        $(this).dialog('close');
                    }
                },
                "Cancel": function () {
                    $(this).validate('clear');
                    $(this).dialog('close');
                }
            }
        });

        $inputField.focus(function () {
            $dialog.dialog('open');
        });

        $element.on('click', '.linkFieldEdit', function () { $dialog.dialog('open'); });

    };

    $.fn[pluginName] = function ( options ) {
        return this.each( function () {
            if(!$.data( this, 'plugin_' + pluginName )) {
                $.data( this, 'plugin_' + pluginName, new SettingsDialog( this, options ));
            }
        });
    };

    $.fn.settingsDialog.options = {
        dialogTitle: '',
        dialogControls: {}
    };

})( jQuery, window, document );