var Qs_FormBuilder_Element = qs.createObject();

Qs_FormBuilder_Element.prototype =
{
    id: null,
    _type: 'Text',
    _formBuilder : null,
    _delete_message: 'Are you sure you want to delete this element?',
    _resize: {
                  Text: 'e',
              TextArea: 'e, s, se',
                 Label: 'e',
             Hyperlink: 'e',
                Select: 'e',
              CheckBox: '',
                 Radio: '',
                 Image: 'e, s, se',
             MultiText: '',
         MultiCheckBox: '',
        HorizontalLine: 'e',
          VerticalLine: 's'
    },

    initialize: function(type, id, formBuilder, positionX, positionY)
    {
        this._type = type;
        this._formBuilder = formBuilder;

        if (id) {
            this.id = id;
            this.onLoad();
        } else {
            this.create(positionX, positionY);
        }
    },

    create: function(positionX, positionY)
    {
        var self = this;
        $.ajax({
            type: 'GET',
            url: self._formBuilder.options.elementUrl + '/' + this._type,
            data: {formId: self._formBuilder.id, formType: self._formBuilder.type, action: 'new'},
            dataType: 'json',
            success: function(response) { self.onCreateSuccess(response, positionX, positionY); }
        });
    },

    onCreateSuccess: function(response, positionX, positionY)
    {
        this.id = response.id;
        this._formBuilder.getContainer().append(response.html);
        this.onLoad();
        $('#element-container-' + this.id).css('left', positionX + 'px').css('top', positionY + 'px');
        this.savePosition();
    },

    onLoad: function()
    {
        var self = this;
        if (self._resize[self._type]) {
            var alsoResizeSelector = '#element-' + this.id;
            var minWidth = $('#element-label-' + this.id).width() + self._formBuilder.options.resizeGap;
            if (self._type == 'Label') {
                alsoResizeSelector = '#element-label-' + this.id;
                minWidth = 100;
            }
            $('#element-container-' + self.id).resizable({
                handles: self._resize[self._type],
                minWidth: minWidth,
                alsoResize: alsoResizeSelector,
                stop: function() { self.saveDimension(); }
            })
        }
        $('#element-container-' + self.id).draggable({
            grid: [self._formBuilder.options.grid, self._formBuilder.options.grid],
            containment: 'parent',
            stack: '.element',
            stop: function() { self.savePosition(); }
        });
        $('#element-options-' + self.id + ' a.edit').fancybox({
            onComplete: function() {
                Qs_Form.init(
                    'formbuilder_element_' + self._type.toLowerCase() + '-form',
                    {onSuccessCallback: {refreshElement: [self.id]}}
                );
            },
            modal: true
        });
        $('#element-options-' + self.id + ' a.delete').click(function(){
            if (confirm(self._delete_message)) {
                $.ajax({
                    type: 'GET',
                    url: self._formBuilder.options.builderUrl,
                    data: {id: self.id, action: 'deleteElement'},
                    dataType: 'json',
                    success: function() {
                        $('#element-container-' + self.id).remove();
                    }
                });
            }
            return false;
        });
    },

    refresh: function()
    {
        var self = this;
        $.ajax({
            type: 'GET',
            url: self._formBuilder.options.elementUrl + '/' + self._type,
            data: {id: self.id, action: 'get'},
            success: function(data, textStatus){
                $('#element-container-' + self.id).replaceWith(data);
                self.onLoad();
            }
        });
        $.fancybox.close();
    },

    savePosition: function()
    {
        var self = this;
        $.ajax({
            type: 'GET',
            url: self._formBuilder.options.builderUrl,
            data: {id: this.id, position: this.getPosition(), action: 'savePositions'},
            dataType: 'json'
        });
    },

    saveDimension: function()
    {
        var self = this;
        if (self._type == 'Select') {
            $('#element-' + self.id).css('height', 'auto');
        }
        var width = $('#element-' + self.id).width();
        if (self._type == 'Label') {
            width = $('#element-label-' + self.id).width();
        }

        $.ajax({
            type: 'GET',
            url: self._formBuilder.options.elementUrl + '/' + self._type,
            data: {
                id: self.id,
                action: 'saveDimensions',
                width: width,
                height: $('#element-' + self.id).height()
            },
            dataType: 'json'
        });
    },

    getPosition: function ()
    {
        var position = $('#element-container-' + this.id).position();
        return {
            top: position.top,
            left: position.left,
            zIndex: $('#element-container-' + this.id).css('z-index')
        };
    }

};

function refreshElement(id){
    formBuilder.getElementById(id).refresh();
}